Adjust styles to fit corteza studio usage
This commit is contained in:
@@ -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,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"
|
||||
|
||||
Reference in New Issue
Block a user