Css adjustments on Items Listiting.
This commit is contained in:
parent
860f8155eb
commit
6eb1a4bf9c
|
@ -216,12 +216,20 @@
|
||||||
</option> -->
|
</option> -->
|
||||||
</b-select>
|
</b-select>
|
||||||
<button
|
<button
|
||||||
:disabled="totalItems <= 0"
|
class="button is-white is-small"
|
||||||
|
:disabled="totalItems <= 0 || order == 'DESC'"
|
||||||
|
@click="onChangeOrder()">
|
||||||
|
<span class="icon is-small gray-icon">
|
||||||
|
<i class="mdi mdi-sort-ascending"/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:disabled="totalItems <= 0 || order == 'ASC'"
|
||||||
class="button is-white is-small"
|
class="button is-white is-small"
|
||||||
@click="onChangeOrder()">
|
@click="onChangeOrder()">
|
||||||
<b-icon
|
<span class="icon is-small gray-icon">
|
||||||
class="gray-icon"
|
<i class="mdi mdi-sort-descending"/>
|
||||||
:icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</b-field>
|
</b-field>
|
||||||
</div>
|
</div>
|
||||||
|
@ -247,6 +255,7 @@
|
||||||
<b-icon icon="menu-down" />
|
<b-icon icon="menu-down" />
|
||||||
</button>
|
</button>
|
||||||
<b-dropdown-item
|
<b-dropdown-item
|
||||||
|
:class="{ 'is-active': viewModeOption == viewMode }"
|
||||||
v-for="(viewModeOption, index) of enabledViewModes"
|
v-for="(viewModeOption, index) of enabledViewModes"
|
||||||
:key="index"
|
:key="index"
|
||||||
:value="viewModeOption"
|
:value="viewModeOption"
|
||||||
|
@ -272,39 +281,50 @@
|
||||||
class="button is-white"
|
class="button is-white"
|
||||||
slot="trigger">
|
slot="trigger">
|
||||||
<span>
|
<span>
|
||||||
<b-icon
|
<span class="icon is-small gray-icon">
|
||||||
class="gray-icon view-mode-icon"
|
<i
|
||||||
:icon="(adminViewMode == 'table' || adminViewMode == undefined) ?
|
:class="{'mdi-table' : ( adminViewMode == 'table' || adminViewMode == undefined),
|
||||||
'table' : (adminViewMode == 'cards' ?
|
'mdi-view-list' : adminViewMode == 'cards',
|
||||||
'view-list' : 'view-grid')"/>
|
'mdi-view-grid' : adminViewMode == 'grid',
|
||||||
|
'mdi-view-module' : adminViewMode == 'records'}"
|
||||||
|
class="mdi"/>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
{{ $i18n.get('label_visualization') }}
|
{{ $i18n.get('label_visualization') }}
|
||||||
<b-icon icon="menu-down" />
|
<b-icon icon="menu-down" />
|
||||||
</button>
|
</button>
|
||||||
<b-dropdown-item :value="'table'">
|
<b-dropdown-item
|
||||||
|
:class="{ 'is-active': adminViewMode == 'table' }"
|
||||||
|
:value="'table'">
|
||||||
<b-icon
|
<b-icon
|
||||||
class="gray-icon"
|
class="gray-icon"
|
||||||
icon="table"/>
|
icon="table"/>
|
||||||
{{ $i18n.get('label_table') }}
|
{{ $i18n.get('label_table') }}
|
||||||
</b-dropdown-item>
|
</b-dropdown-item>
|
||||||
<b-dropdown-item :value="'cards'">
|
<b-dropdown-item
|
||||||
|
:class="{ 'is-active': adminViewMode == 'cards' }"
|
||||||
|
:value="'cards'">
|
||||||
<b-icon
|
<b-icon
|
||||||
class="gray-icon"
|
class="gray-icon"
|
||||||
icon="view-list"/>
|
icon="view-list"/>
|
||||||
{{ $i18n.get('label_cards') }}
|
{{ $i18n.get('label_cards') }}
|
||||||
</b-dropdown-item>
|
</b-dropdown-item>
|
||||||
<b-dropdown-item :value="'records'">
|
<b-dropdown-item
|
||||||
<b-icon
|
:class="{ 'is-active': adminViewMode == 'grid' }"
|
||||||
class="gray-icon"
|
:value="'grid'">
|
||||||
icon="view-module"/>
|
|
||||||
{{ $i18n.get('label_records') }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
<b-dropdown-item :value="'grid'">
|
|
||||||
<b-icon
|
<b-icon
|
||||||
class="gray-icon"
|
class="gray-icon"
|
||||||
icon="view-grid"/>
|
icon="view-grid"/>
|
||||||
{{ $i18n.get('label_grid') }}
|
{{ $i18n.get('label_grid') }}
|
||||||
</b-dropdown-item>
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item
|
||||||
|
:class="{ 'is-active': adminViewMode == 'records' }"
|
||||||
|
:value="'records'">
|
||||||
|
<b-icon
|
||||||
|
class="gray-icon"
|
||||||
|
icon="view-module"/>
|
||||||
|
{{ $i18n.get('label_records') }}
|
||||||
|
</b-dropdown-item>
|
||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
</b-field>
|
</b-field>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1002,8 +1022,9 @@
|
||||||
|
|
||||||
.gray-icon, .gray-icon .icon {
|
.gray-icon, .gray-icon .icon {
|
||||||
color: $tainacan-placeholder-color !important;
|
color: $tainacan-placeholder-color !important;
|
||||||
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
.gray-icon .icon i::before, .gray-icon i::before {
|
.gray-icon .icon i::before, .gray-icon i::before {
|
||||||
font-size: 21px !important;
|
font-size: 21px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1018,11 +1039,13 @@
|
||||||
div.dropdown-content {
|
div.dropdown-content {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
|
||||||
.metadata-options-container {
|
.metadata-options-container {
|
||||||
max-height: 240px;
|
max-height: 240px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 0.25rem 1.0rem 0.25rem 0.75rem;
|
||||||
|
}
|
||||||
.dropdown-item span{
|
.dropdown-item span{
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
.b-checkbox { width: 100% };
|
.b-checkbox { width: 100% };
|
||||||
&:hover { background-color: $primary-lighter; }
|
&:hover { background-color: $primary-lighter; }
|
||||||
.is-small { color: gray; }
|
.is-small { color: gray; }
|
||||||
&.is-active { background-color: white; }
|
&.is-active { background-color: $primary-light; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,8 @@
|
||||||
|
|
||||||
table.tainacan-table {
|
table.tainacan-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
|
||||||
.checkbox-cell {
|
.checkbox-cell {
|
||||||
min-width: 38px;
|
min-width: 38px;
|
||||||
|
|
|
@ -311,9 +311,16 @@ export default {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 0.25rem 1.35rem 0.25rem 0.25rem;
|
||||||
|
}
|
||||||
.view-mode-icon {
|
.view-mode-icon {
|
||||||
margin-right: 8px !important;
|
margin-right: 0px !important;
|
||||||
margin-top: 2px;
|
margin-top: 1px;
|
||||||
|
|
||||||
|
&.icon i::before, .gray-icon i::before {
|
||||||
|
font-size: 19px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue