Adjust styles to fit corteza studio usage

This commit is contained in:
Jože Fortun
2023-11-03 19:59:13 +01:00
parent 92ffd79cf5
commit ae1874bec1
147 changed files with 1542 additions and 1791 deletions
@@ -1,5 +1,8 @@
<template>
<b-button-group>
<b-button-group
v-if="buttons.length"
:size="size"
>
<b-button
v-for="(b, i) in buttons"
:key="i"
@@ -36,6 +39,11 @@ export default {
type: String,
default: () => 'mr-1'
},
size: {
type: String,
default: () => 'md'
},
},
computed: {
@@ -48,7 +48,7 @@
/>
</svg>
</b-button>
<span v-if="showColorCodeText" class="ml-2">
<span v-if="showText" class="ml-2">
{{ value }}
</span>
</div>
@@ -120,9 +120,9 @@ export default {
default: "32px",
},
showColorCodeText: {
showText: {
type: Boolean,
default: false,
default: true,
}
},
@@ -1,8 +1,5 @@
<template>
<div
:class="{ 'text-center': inConfirmation }"
class="d-inline-block"
>
<div class="d-inline-flex">
<template v-if="!inConfirmation">
<b-button
data-test-id="button-delete"
@@ -10,7 +7,7 @@
:size="size"
:disabled="disabled || processing"
:title="tooltip"
:class="`${buttonClass} ${borderless ? 'border-0' : ''}`"
:class="`${buttonClass} ${borderless ? 'border-0' : ''} flex-fill`"
@click.stop.prevent="onPrompt"
>
<b-spinner
@@ -40,8 +37,8 @@
:variant="variantOk"
:size="sizeConfirm"
:disabled="okDisabled"
class="mr-1"
:class="[ borderless && 'border-0' ]"
:class="{ 'border-0': borderless }"
class="flex-fill mr-1"
@blur.prevent="onCancel()"
@click.prevent.stop="onConfirmation()"
>
@@ -58,6 +55,7 @@
:size="sizeConfirm"
:disabled="cancelDisabled"
:class="[ borderless && 'border-0' ]"
class="flex-fill"
@click.prevent.stop="onCancel()"
>
<slot name="no">
@@ -2,6 +2,7 @@
<b-input-group
:size="size"
class="input-group-border border-light rounded"
style="min-width: 200px;"
>
<b-input
ref="searchInput"
@@ -13,7 +14,7 @@
:disabled="disabled"
:placeholder="placeholder"
:autocomplete="autocomplete"
class="h-100 pr-0 border-0 text-truncate bg-white"
class="h-100 pr-0 border-0 rounded-0 text-truncate bg-white"
@input="onInput"
@update="search"
@keyup.enter="submitQuery"
@@ -34,7 +35,7 @@
>
<font-awesome-icon
:icon="['fas', 'search']"
class="text-primary"
class="align-middle text-primary"
/>
</b-button>
</b-input-group-append>
@@ -336,7 +336,7 @@ $header-height: 64px;
<style lang="scss">
$nav-width: 320px;
$sidebar-bg: #F4F7FA;
$sidebar-bg: var(--gray-200);
.sidebar {
display: flex !important;
@@ -350,7 +350,7 @@ $sidebar-bg: #F4F7FA;
background-color: var(--white);
&.expanded {
background-color: $sidebar-bg !important;
background-color: $sidebar-bg;
}
}
@@ -375,7 +375,7 @@ $sidebar-bg: #F4F7FA;
background-color: var(--white);
&.expanded {
background-color: $sidebar-bg !important;
background-color: $sidebar-bg;
}
}
@@ -287,7 +287,7 @@ $nav-user-icon-size: 50px;
.header-navigation {
width: 100vw;
min-height: $header-height;
background-color: var(--gray-200) !important;
background-color: var(--body-bg);
}
.avatar {
@@ -30,7 +30,7 @@ export default {
buttonVariant: {
type: String,
default: undefined,
default: 'light',
},
resource: {
@@ -70,6 +70,6 @@ export default {
<style lang="scss">
.reminder-sidebar-header {
height: 64px;
background-color: #F4F7FA;
background-color: var(--gray-200);
}
</style>
@@ -1,30 +1,31 @@
<template>
<b-card
no-body
class="shadow-sm"
header-bg-variant="white"
footer-bg-variant="white"
footer-class="border-top"
footer-class="d-flex align-items-center flex-wrap gap-1 border-top"
:header-class="cardHeaderClass"
class="shadow-sm"
>
<template #header>
<b-container
class="p-0"
fluid
align-v="center"
class="d-flex flex-column p-0 gap-2 d-print-none"
>
<b-row class="gap-1">
<b-col
lg="8"
class="gap-1 d-flex flex-wrap flex-sm-row flex-column"
>
<b-row
no-gutters
class="d-flex align-items-center justify-content-between gap-1"
>
<div :class="`d-flex align-items-center flex-grow-1 flex-wrap flex-fill-child gap-1 ${headerClass}`">
<slot
name="header"
:selected="selected"
/>
</b-col>
</div>
<b-col
<div
v-if="!hideSearch"
class="flex-fill"
>
<c-input-search
v-model.trim="filter[queryField]"
@@ -32,11 +33,12 @@
:debounce="300"
@input="$emit('search')"
/>
</b-col>
</div>
</b-row>
<b-row
:class="{ 'mt-3': !!$slots.toolbar }"
v-if="$slots.toolbar"
class="gap-1"
>
<slot
name="toolbar"
@@ -128,58 +130,51 @@
#footer
>
<div
class="d-flex align-items-center justify-content-between flex-wrap"
v-if="!hideTotal"
class="text-nowrap"
>
<div
class="text-truncate ml-3 ml-sm-0"
>
<div
v-if="!hideTotal"
class="text-nowrap"
>
{{ getPagination }}
</div>
</div>
<b-button-group
v-if="!hidePagination"
>
<b-button
:disabled="!hasPrevPage"
variant="outline-light"
class="d-flex align-items-center justify-content-center text-primary border-0"
@click="goToPage()"
>
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
</b-button>
<b-button
:disabled="!hasPrevPage"
variant="outline-light"
class="d-flex align-items-center justify-content-center text-primary border-0"
@click="goToPage('prevPage')"
>
<font-awesome-icon
:icon="['fas', 'angle-left']"
class="mr-1"
/>
{{ translations.prevPagination }}
</b-button>
<b-button
:disabled="!hasNextPage"
variant="outline-light"
class="d-flex align-items-center justify-content-center text-primary border-0"
@click="goToPage('nextPage')"
>
{{ translations.nextPagination }}
<font-awesome-icon
:icon="['fas', 'angle-right']"
class="ml-1"
/>
</b-button>
</b-button-group>
{{ getPagination }}
</div>
<b-button-group
v-if="!hidePagination"
class="ml-auto"
>
<b-button
:disabled="!hasPrevPage"
variant="outline-light"
class="d-flex align-items-center text-primary border-0"
@click="goToPage()"
>
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
</b-button>
<b-button
:disabled="!hasPrevPage"
variant="outline-light"
class="d-flex align-items-center text-primary border-0"
@click="goToPage('prevPage')"
>
<font-awesome-icon
:icon="['fas', 'angle-left']"
class="mr-1"
/>
{{ translations.prevPagination }}
</b-button>
<b-button
:disabled="!hasNextPage"
variant="outline-light"
class="d-flex align-items-center justify-content-center text-primary border-0"
@click="goToPage('nextPage')"
>
{{ translations.nextPagination }}
<font-awesome-icon
:icon="['fas', 'angle-right']"
class="ml-1"
/>
</b-button>
</b-button-group>
</template>
</b-card>
</template>
@@ -257,6 +252,16 @@ export default {
default: () => true,
},
cardHeaderClass: {
type: String,
default: '',
},
headerClass: {
type: String,
default: '',
},
rowClass: {
type: Function,
default: () => {},
@@ -413,6 +418,10 @@ export default {
<style lang="scss">
#resource-list {
th {
background-color: var(--gray-200) !important;
}
td.actions {
padding-top: 8px;
right: 0;
@@ -428,8 +437,14 @@ export default {
tr:hover td.actions {
opacity: 1;
background-color: #F9FAFB;
background-color: var(--gray-200);
z-index: 1;
}
}
@media (max-width: 576px) {
.flex-fill-child > * {
flex: 1 1 auto !important;
}
}
</style>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div
class="d-flex flex-column flex-sm-row bg-white p-3 gap-1 flex-wrap"
class="c-toolbar d-flex flex-column flex-sm-row bg-white p-3 gap-1 flex-wrap"
>
<div
class="d-flex align-items-center flex-sm-grow-0 flex-sm-shrink-0 flex-fill fill-width gap-1 flex-wrap"