From add2e52eab64099e4b5098e9d84b514b7de23f16 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 17 May 2018 11:28:20 -0300
Subject: [PATCH] More grid adjustments on several pages.

---
 .../components/lists/categories-list.vue      |   2 +-
 .../components/lists/collections-list.vue     |   2 +-
 src/admin/components/lists/events-list.vue    |   2 +-
 src/admin/components/lists/items-list.vue     |  12 +-
 src/admin/pages/lists/categories-page.vue     | 114 ++++++++----------
 src/admin/pages/lists/collections-page.vue    |  20 +--
 src/admin/pages/lists/events-page.vue         | 102 +++++++---------
 src/admin/pages/lists/items-page.vue          |  35 +++---
 src/admin/scss/_variables.scss                |   7 +-
 src/admin/scss/tainacan-admin.scss            |  28 +++--
 10 files changed, 146 insertions(+), 178 deletions(-)

diff --git a/src/admin/components/lists/categories-list.vue b/src/admin/components/lists/categories-list.vue
index 2870b192c..30ad07165 100644
--- a/src/admin/components/lists/categories-list.vue
+++ b/src/admin/components/lists/categories-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="table-container">
         <b-field 
                 grouped 
                 group-multiline>
diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index a0f22a23e..f3bf94eb8 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="table-container">
         <div class="selection-control">
             <div class="field select-all is-pulled-left">
                 <span>
diff --git a/src/admin/components/lists/events-list.vue b/src/admin/components/lists/events-list.vue
index 34404dbbb..9da3a617a 100644
--- a/src/admin/components/lists/events-list.vue
+++ b/src/admin/components/lists/events-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="table-container">
          <div class="table-wrapper">
             <table class="table">
                 <thead>
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index b16c82a28..4d06b6e72 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -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 {
diff --git a/src/admin/pages/lists/categories-page.vue b/src/admin/pages/lists/categories-page.vue
index 4a2f6f581..e264da49f 100644
--- a/src/admin/pages/lists/categories-page.vue
+++ b/src/admin/pages/lists/categories-page.vue
@@ -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>
 
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index a218914f2..64e541e6d 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -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>
diff --git a/src/admin/pages/lists/events-page.vue b/src/admin/pages/lists/events-page.vue
index 432f8bbae..7dc97c670 100644
--- a/src/admin/pages/lists/events-page.vue
+++ b/src/admin/pages/lists/events-page.vue
@@ -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>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 931780b17..3c2a0dbcd 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -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;
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index 68c8892f5..ba5e0097d 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -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;
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 2d8f7849d..6e04b0c1b 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -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;