Modify c-input-select styles
This commit is contained in:
Jože Fortun
@@ -76,67 +76,6 @@ th {
|
||||
.b-table-sticky-header > .table.b-table > thead > tr > th {
|
||||
border: 0;
|
||||
}
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: calc(100vh - 2 * #{var(--topbar-height)});
|
||||
|
||||
@@ -233,20 +233,11 @@ fieldset.required {
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
// to remove the gap on top of the sticky header table
|
||||
.b-table-sticky-header > .table.b-table > thead > tr > th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
&.card {
|
||||
background-color: var(--white);
|
||||
|
||||
@@ -59,68 +59,6 @@ th {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.ProseMirror.ProseMirror-focused {
|
||||
outline: none;
|
||||
}
|
||||
@@ -252,11 +190,6 @@ fieldset.required {
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
@@ -52,34 +52,6 @@ b,
|
||||
font-family: var(--font-semibold);
|
||||
}
|
||||
|
||||
.v-select {
|
||||
min-width: 250px;
|
||||
|
||||
.vs__search {
|
||||
margin: 0;
|
||||
|
||||
&:focus {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Supporting CSS to improve print-to-PDF option
|
||||
@media print {
|
||||
@page {
|
||||
|
||||
@@ -59,68 +59,6 @@ th {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.ProseMirror.ProseMirror-focused {
|
||||
outline: none;
|
||||
}
|
||||
@@ -252,11 +190,6 @@ fieldset.required {
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.card-hover-popup {
|
||||
transition: all 0.1s ease-in-out;
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
class="mb-0"
|
||||
>
|
||||
<c-input-select
|
||||
v-model="connection"
|
||||
v-model="connectionID"
|
||||
:disabled="processing.connections"
|
||||
:options="connections"
|
||||
:clearable="false"
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
|
||||
<h5
|
||||
v-else-if="!(connection && modules[connection])"
|
||||
v-else-if="!(connectionID && modules[connectionID])"
|
||||
class="text-center mt-5"
|
||||
>
|
||||
{{ $t('no-data-available') }}
|
||||
@@ -44,7 +44,7 @@
|
||||
<module-records
|
||||
v-else
|
||||
v-slot="{ value }"
|
||||
:modules="modules[connection]"
|
||||
:modules="modules[connectionID]"
|
||||
>
|
||||
<p
|
||||
v-for="(v, vi) in value.value"
|
||||
@@ -67,7 +67,7 @@
|
||||
variant="light"
|
||||
size="lg"
|
||||
class="ml-1"
|
||||
@click="$router.push({ name: 'request.create', params: { kind: 'delete', connectionObj } })"
|
||||
@click="$router.push({ name: 'request.create', params: { kind: 'delete', connection } })"
|
||||
>
|
||||
{{ $t('request-deletion') }}
|
||||
</b-button>
|
||||
@@ -78,7 +78,7 @@
|
||||
variant="primary"
|
||||
size="lg"
|
||||
class="ml-1"
|
||||
@click="$router.push({ name: 'request.create', params: { kind: 'correct', connectionObj } })"
|
||||
@click="$router.push({ name: 'request.create', params: { kind: 'correct', connection } })"
|
||||
>
|
||||
{{ $t('request-correction') }}
|
||||
</b-button>
|
||||
@@ -111,22 +111,24 @@ export default {
|
||||
sensitiveData: true,
|
||||
},
|
||||
|
||||
connection: undefined,
|
||||
connectionID: undefined,
|
||||
|
||||
connections: [],
|
||||
|
||||
modules: {},
|
||||
|
||||
connectionObj: {},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
connection () {
|
||||
return this.connections.find(({ connectionID }) => connectionID === this.connectionID) || {}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
connection: {
|
||||
connectionID: {
|
||||
handler (connectionID = '') {
|
||||
console.log('connection', connectionID)
|
||||
this.fetchSensitiveData(connectionID)
|
||||
this.connectionObj = this.connections.find(({ connectionID: id }) => id === connectionID) || {}
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -142,7 +144,8 @@ export default {
|
||||
this.$SystemAPI.dataPrivacyConnectionList()
|
||||
.then(({ set = [] }) => {
|
||||
this.connections = set
|
||||
this.connection = set[0].connectionID
|
||||
const { connectionID } = set[0] || {}
|
||||
this.connectionID = connectionID
|
||||
})
|
||||
.catch(this.toastErrorHandler(this.$t('notification:connection-load-failed')))
|
||||
.finally(() => {
|
||||
@@ -151,7 +154,6 @@ export default {
|
||||
},
|
||||
|
||||
fetchSensitiveData (connectionID) {
|
||||
console.log('fetchSensitiveData', connectionID)
|
||||
if (connectionID) {
|
||||
this.processing.sensitiveData = true
|
||||
|
||||
|
||||
@@ -59,68 +59,6 @@ th {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.ProseMirror.ProseMirror-focused {
|
||||
outline: none;
|
||||
}
|
||||
@@ -252,11 +190,6 @@ fieldset.required {
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -59,68 +59,6 @@ th {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: calc(100vh - 2 * #{var(--topbar-height)});
|
||||
display: flex;
|
||||
@@ -259,11 +197,6 @@ fieldset.required {
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
calculateDropdownPosition (dropdownList, component, { width }) {
|
||||
calculateDropdownPosition (dropdownList, component, { width }) {
|
||||
/**
|
||||
* We need to explicitly define the dropdown width since
|
||||
* it is usually inherited from the parent with CSS.
|
||||
@@ -139,19 +139,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.v-select {
|
||||
min-width: auto;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
font-size: .9rem;
|
||||
font-size: .9rem !important;
|
||||
border-radius: 0.25rem;
|
||||
color: #495057 !important;
|
||||
|
||||
.vs__selected-options {
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
@@ -160,10 +161,15 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vs__search {
|
||||
margin-top: 0.375rem;
|
||||
font-size: .9rem;
|
||||
border: 0;
|
||||
padding: 0 2px;
|
||||
padding-top: 0.375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
@@ -177,17 +183,20 @@ export default {
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
min-height: calc(1.5em + 0.75rem + 4px);
|
||||
padding: 0.375rem calc(0.75rem - 2px);
|
||||
padding-top: 0 !important;
|
||||
border-width: 2px;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.375rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -204,6 +213,18 @@ export default {
|
||||
cursor: pointer;
|
||||
margin-right: 8px
|
||||
}
|
||||
|
||||
&.vs--single {
|
||||
.vs__selected {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vs__spinner, .vs__spinner::after {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
@@ -211,18 +232,46 @@ export default {
|
||||
}
|
||||
|
||||
.c-input-sm {
|
||||
height: calc(1.5em + .5rem + 2px);
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
padding-left: .5rem;
|
||||
font-size: .875rem;
|
||||
font-size: 0.7875rem !important;
|
||||
|
||||
.vs__search {
|
||||
font-size: 0.7875rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
min-height: calc(1.5em + 0.5rem + 4px);
|
||||
padding: 0.25rem calc(0.5rem - 2px);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.c-input-lg {
|
||||
height: calc(1.5em + 1rem + 2px);
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.125rem !important;
|
||||
|
||||
.vs__search {
|
||||
font-size: 1.125rem;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
min-height: calc(1.5em + 1rem + 4px);
|
||||
padding: .5rem calc(1rem - 2px);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
v-for="(n, index) in getEvalName(e)"
|
||||
:key="index"
|
||||
:title="n"
|
||||
class="pointer text-center text-primary text-break mb-1"
|
||||
class="pointer text-center text-primary mb-1"
|
||||
>
|
||||
{{ n }}
|
||||
</label>
|
||||
@@ -88,7 +88,7 @@
|
||||
class="d-none d-lg-flex pointer border-bottom flex-column align-items-center justify-content-center overflow-hidden border-left p-3"
|
||||
>
|
||||
<label
|
||||
class="pointer text-center text-primary text-break mb-1"
|
||||
class="pointer text-center text-primary mb-1"
|
||||
>
|
||||
{{ labels.add.label }}
|
||||
</label>
|
||||
@@ -136,7 +136,7 @@
|
||||
<h5
|
||||
v-for="r in e.rules"
|
||||
:key="r.operation"
|
||||
v-b-tooltip.hover="{ title: getRuleTooltip(r.access === 'unknown-context', !!e.userID), container: '#body' }"
|
||||
v-b-tooltip.hover="{ title: getRuleTooltip(r.access === 'unknown-context', !!e.userID), container: '#body' }"
|
||||
class="text-center mb-1 mt-2 w-100"
|
||||
>
|
||||
<font-awesome-icon
|
||||
|
||||
Reference in New Issue
Block a user