tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More grid adjustments on several pages.

This commit is contained in:
Mateus Machado Luna 2018-05-17 11:28:20 -03:00
parent deafbfdc36
commit add2e52eab
10 changed files with 146 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/lists/categories-list.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="table-container">
<b-field
grouped
group-multiline>

2
src/admin/components/lists/collections-list.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="table-container">
<div class="selection-control">
<div class="field select-all is-pulled-left">
<span>

2
src/admin/components/lists/events-list.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="table-container">
<div class="table-wrapper">
<table class="table">
<thead>

12
src/admin/components/lists/items-list.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="table-container">
<!-- <b-field
grouped
group-multiline>
@ -365,7 +365,11 @@ export default {
.selection-control {
padding: 20px 14px 0px 14px;
padding: 6px 14px 0px 14px;
z-index: 9999;
position: relative;
background: white;
height: 40px;
.select-all {
color: $gray-light;
@ -388,7 +392,7 @@ export default {
height: 58px;
padding: 0;
position: absolute !important;
left: $page-side-padding;
left: 8.333333%;
visibility: hidden;
display: flex;
justify-content: space-around;
@ -470,7 +474,7 @@ export default {
padding: 0px;
visibility: hidden;
position: absolute;
right: $page-side-padding;
right: 8.333333%;
display: none;
.actions-container {

114
src/admin/pages/lists/categories-page.vue
View File

@ -16,51 +16,51 @@
</div>
</div>
<div class="columns above-subheader">
<div class="column table-container">
<categories-list
:is-loading="isLoading"
:total-categories="totalCategories"
:page="page"
:categories-per-page="categoriesPerPage"
:categories="categories"/>
<!-- Footer -->
<div
class="pagination-area"
v-if="totalCategories > 0">
<div class="shown-items">
{{
$i18n.get('info_showing_categories') +
(categoriesPerPage * (page - 1) + 1) +
$i18n.get('info_to') +
getLastCategoryNumber() +
$i18n.get('info_of') + totalCategories + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_categories_per_page')">
<b-select
:value="categoriesPerPage"
@input="onChangeCategoriesPerPage"
:disabled="categories.length <= 0">
<option value="12">12</option>
<option value="24">24</option>
<option value="48">48</option>
<option value="96">96</option>
</b-select>
</b-field>
</div>
<div class="pagination">
<b-pagination
@change="onPageChange"
:total="totalCategories"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="categoriesPerPage"/>
</div>
<div class="above-subheader">
<categories-list
:is-loading="isLoading"
:total-categories="totalCategories"
:page="page"
:categories-per-page="categoriesPerPage"
:categories="categories"/>
<!-- Footer -->
<div
class="pagination-area"
v-if="totalCategories > 0">
<div class="shown-items">
{{
$i18n.get('info_showing_categories') +
(categoriesPerPage * (page - 1) + 1) +
$i18n.get('info_to') +
getLastCategoryNumber() +
$i18n.get('info_of') + totalCategories + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_categories_per_page')">
<b-select
:value="categoriesPerPage"
@input="onChangeCategoriesPerPage"
:disabled="categories.length <= 0">
<option value="12">12</option>
<option value="24">24</option>
<option value="48">48</option>
<option value="96">96</option>
</b-select>
</b-field>
</div>
<div class="pagination">
<b-pagination
@change="onPageChange"
:total="totalCategories"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="categoriesPerPage"/>
</div>
</div>
</div>
@ -150,12 +150,11 @@
.sub-header {
max-height: $subheader-height;
height: $subheader-height;
margin-left: -$page-small-side-padding;
margin-right: -$page-small-side-padding;
margin-top: -$page-small-top-padding;
margin-left: -$page-side-padding;
margin-right: -$page-side-padding;
padding-top: $page-small-top-padding;
padding-left: $page-small-side-padding;
padding-right: $page-small-side-padding;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
border-bottom: 0.5px solid #ddd;
.header-item {
@ -179,21 +178,6 @@
margin-top: 0;
min-height: 100%;
height: auto;
.table-container {
margin-right: -$page-small-side-padding;
padding: 3em 2.5em;
}
@media screen and (max-width: 769px) {
.filters-menu {
display: none;
}
.table-container {
margin-right: 0;
padding: .85em 0em;
}
}
}
</style>

20
src/admin/pages/lists/collections-page.vue
View File

@ -148,10 +148,11 @@ export default {
.sub-header {
min-height: $subheader-height;
height: $subheader-height;
margin-top: -$page-top-padding;
padding-top: $page-top-padding;
padding-left: $page-small-side-padding;
padding-right: $page-small-side-padding;
margin-left: -$page-side-padding;
margin-right: -$page-side-padding;
padding-top: $page-small-top-padding;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
border-bottom: 0.5px solid #ddd;
.header-item {
@ -174,17 +175,6 @@ export default {
margin-bottom: 0;
margin-top: 0;
height: auto;
@media screen and (max-width: 769px) {
.filters-menu {
display: none;
}
.table-container {
margin-right: 0;
padding: .85em 0em;
}
}
}
</style>

102
src/admin/pages/lists/events-page.vue
View File

@ -6,53 +6,49 @@
'page-container': isRepositoryLevel
}">
<tainacan-title />
<div
class="columns"
:class="{ 'above-subheader': isRepositoryLevel }">
<div class="column table-container">
<events-list
:is-loading="isLoading"
:total-events="totalEvents"
:page="page"
:events-per-page="eventsPerPage"
:events="events"/>
<!-- Footer -->
<div
class="pagination-area"
v-if="totalEvents > 0">
<div class="shown-items">
{{
$i18n.get('info_showing_events') +
(eventsPerPage * (page - 1) + 1) +
$i18n.get('info_to') +
getLastEventNumber() +
$i18n.get('info_of') + totalEvents + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_events_per_page')">
<b-select
:value="eventsPerPage"
@input="onChangeEventsPerPage"
:disabled="events.length <= 0">
<option value="12">12</option>
<option value="24">24</option>
<option value="48">48</option>
<option value="96">96</option>
</b-select>
</b-field>
</div>
<div class="pagination">
<b-pagination
@change="onPageChange"
:total="totalEvents"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="eventsPerPage"/>
</div>
<div :class="{ 'above-subheader': isRepositoryLevel }">
<events-list
:is-loading="isLoading"
:total-events="totalEvents"
:page="page"
:events-per-page="eventsPerPage"
:events="events"/>
<!-- Footer -->
<div
class="pagination-area"
v-if="totalEvents > 0">
<div class="shown-items">
{{
$i18n.get('info_showing_events') +
(eventsPerPage * (page - 1) + 1) +
$i18n.get('info_to') +
getLastEventNumber() +
$i18n.get('info_of') + totalEvents + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_events_per_page')">
<b-select
:value="eventsPerPage"
@input="onChangeEventsPerPage"
:disabled="events.length <= 0">
<option value="12">12</option>
<option value="24">24</option>
<option value="48">48</option>
<option value="96">96</option>
</b-select>
</b-field>
</div>
<div class="pagination">
<b-pagination
@change="onPageChange"
:total="totalEvents"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="eventsPerPage"/>
</div>
</div>
</div>
@ -188,17 +184,5 @@
margin-top: 0;
min-height: 100%;
height: auto;
.table-container {
margin-right: -$page-small-side-padding;
padding: 3em 2.5em;
}
@media screen and (max-width: 769px) {
.table-container {
margin-right: 0;
padding: .85em 0em;
}
}
}
</style>

35
src/admin/pages/lists/items-page.vue
View File

@ -116,11 +116,11 @@
</ul>
</div>
<div
<!-- <div
:items="items"
id="theme-items-list" />
id="theme-items-list" /> -->
<!-- LISTING RESULTS ------------------------- -->
<div class="table-container above-subheader">
<div class="above-subheader">
<b-loading
:is-full-page="false"
:active.sync="isLoadingItems"/>
@ -387,8 +387,17 @@
.above-subheader {
margin-bottom: 0;
margin-top: 0;
min-height: 100%;
height: auto;
height: calc(100% - 184px);
}
.pagination-area {
margin-left: $page-side-padding;
margin-right: $page-side-padding;
}
.table-container {
padding-left: 8.333333%;
padding-right: 8.333333%;
height: calc(100% - 82px);
}
#collection-search-button {
@ -427,25 +436,13 @@
.items-list-area {
margin-left: 0;
transition: margin-left ease 0.5s ;
transition: margin-left ease 0.5s;
height: 100%;
}
.spaced-to-right {
margin-left: $filter-menu-width;
}
.table-container {
padding: 3em 55px;
position: relative;
}
@media screen and (max-width: 769px) {
.table-container {
margin-right: 0;
padding: 16px;
}
}
#filter-menu-compress-button {
position: absolute;
z-index: 9;

7
src/admin/scss/_variables.scss
View File

@ -66,9 +66,10 @@ $page-height: calc(100% - 53px);
// Overall Pages padding:
$page-side-padding: 4.166666667%;//82px;
$page-top-padding: 27px;
$page-small-side-padding: 22px;
$page-small-top-padding: 22px;
$table-side-padding: 4.166666667%;
$page-top-padding: 25px;
$page-small-side-padding: 25px;
$page-small-top-padding: 25px;
$page-mobile-side-padding: 1em;
$page-mobile-top-padding: 1em;

28
src/admin/scss/tainacan-admin.scss
View File

@ -92,6 +92,7 @@ a:hover {
a.back-link{
font-weight: 500;
float: right;
margin-top: 5px;
}
hr{
margin: 3px 0px 4px 0px;
@ -525,18 +526,25 @@ a:hover {
}
// Tables
.table-wrapper {
width: 100%;
.table {
tbody {
td { border-bottom: 0px solid $gray-light !important; }
}
.th-wrap {
font-size: 12px !important;
font-weight: normal !important;
.table-container {
padding: 0 $table-side-padding;
position: relative;
.table-wrapper {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
.table {
tbody {
td { border-bottom: 0px solid $gray-light !important; }
}
.th-wrap {
font-size: 12px !important;
font-weight: normal !important;
}
}
margin-bottom: 0px !important;
}
margin-bottom: 0px !important;
}
.pagination-area {
display: flex;