From e08f05a46e1bf2348f21e023bcbda7441b745ed2 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 25 Mar 2022 15:07:41 -0300
Subject: [PATCH] More updates to new item page design with mobile
 compatibility. #455

---
 src/views/admin/admin.vue                        |  5 +++--
 .../components/edition/item-edition-form.vue     | 16 ++++++++++++----
 .../admin/components/navigation/primary-menu.vue |  2 +-
 .../navigation/tainacan-collection-subheader.vue |  2 +-
 .../navigation/tainacan-repository-subheader.vue |  2 +-
 src/views/admin/pages/singles/item-page.vue      |  4 ++--
 src/views/admin/scss/tainacan-admin.scss         |  2 +-
 7 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/views/admin/admin.vue b/src/views/admin/admin.vue
index df5e1c72b..6c55d5a44 100644
--- a/src/views/admin/admin.vue
+++ b/src/views/admin/admin.vue
@@ -41,7 +41,8 @@
                     :is-menu-compressed="isMenuCompressed"/>
             <div 
                     id="repository-container"
-                    class="column is-main-content">  
+                    class="column is-main-content"
+                    :style="$adminOptions.hidePrimaryMenu ? '--tainacan-sidebar-width: 0px' : ''">  
                 <router-view /> 
             </div>
         </template>
@@ -184,7 +185,7 @@
 
         @media screen and (max-width: 769px) {
             overflow-y: visible;
-            margin: 40px auto 0 auto;
+            margin: 38px auto 0 auto;
             
         } 
 
diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index 9e0719b31..1f03ae69d 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -364,7 +364,9 @@
                             v-if="!$adminOptions.hideItemEditionDocument || !$adminOptions.hideItemEditionThumbnail"
                             class="column is-5">
                 
-                        <div class="sticky-container">
+                        <div 
+                                :style="isMetadataNavigation && !isMobileScreen ? 'max-height: calc(100vh - 142px);' : ''"
+                                class="sticky-container">
 
                             <!-- Hook for extra Form options -->
                             <template v-if="hasBeginLeftForm">
@@ -2026,7 +2028,7 @@ export default {
                     padding-left: 0;
                     padding-right: 0;
                     max-width: 100%;
-                    widows: 100%;
+                    width: 100%;
 
                     .sub-header {
                         padding-right: 0.5em;
@@ -2067,7 +2069,8 @@ export default {
                 }
                 &>.column.is-5 {
                     max-width: 100%;
-                    widows: 100%;
+                    width: 100%;
+                    padding-top: 2em;
                     padding-left: 0.5em;
                     padding-right: 0.5em;
                 }
@@ -2100,7 +2103,7 @@ export default {
         }
 
         &.is-metadata-navigation-active {
-            width: calc(58.33333337% - (2 * var(--tainacan-one-column)) - 3.25em);
+            width: calc(58.33333337% - (2 * var(--tainacan-one-column)) - var(--tainacan-sidebar-width, 3.25em));
             position: fixed;
             z-index: 99999;
             bottom: 0;
@@ -2115,6 +2118,10 @@ export default {
                 top: 0.25em;
                 max-width: 220px;
             }
+
+            @media screen and (max-width: 1440px) {
+                width: calc(58.33333337% - var(--tainacan-sidebar-width, 3.25em) - var(--tainacan-one-column));
+            }
         }
 
         .metadata-navigation {
@@ -2182,6 +2189,7 @@ export default {
             padding: 10px 0 0px 0px !important;
 
             .b-radio {
+                width: auto;
                 margin-right: 24px;
                 margin-left: 0;
             }
diff --git a/src/views/admin/components/navigation/primary-menu.vue b/src/views/admin/components/navigation/primary-menu.vue
index be1944032..cbf1e4b1d 100644
--- a/src/views/admin/components/navigation/primary-menu.vue
+++ b/src/views/admin/components/navigation/primary-menu.vue
@@ -288,7 +288,7 @@ export default {
                     height: $header-height;
                 }
                 a {
-                    padding: 0.8em !important;
+                    padding: 0.85em !important;
                     text-align: center;
                 }
                 .menu-text {
diff --git a/src/views/admin/components/navigation/tainacan-collection-subheader.vue b/src/views/admin/components/navigation/tainacan-collection-subheader.vue
index 0ef5e4c4c..024ba1ec0 100644
--- a/src/views/admin/components/navigation/tainacan-collection-subheader.vue
+++ b/src/views/admin/components/navigation/tainacan-collection-subheader.vue
@@ -317,7 +317,7 @@ export default {
                 .level-item {
                     margin-bottom: 0;
                     a { 
-                        padding: 0.5em 0.7em !important; 
+                        padding: 0.45em 0.7em !important; 
                         text-align: center;
                     }
                     .menu-text {
diff --git a/src/views/admin/components/navigation/tainacan-repository-subheader.vue b/src/views/admin/components/navigation/tainacan-repository-subheader.vue
index 2cbed9158..0e0e9ecf3 100644
--- a/src/views/admin/components/navigation/tainacan-repository-subheader.vue
+++ b/src/views/admin/components/navigation/tainacan-repository-subheader.vue
@@ -295,7 +295,7 @@ export default {
         }
 
         @media screen and (max-width: 769px) {
-            top: 102px;
+            top: 96px;
             padding-left: var(--tainacan-one-column) !important;
         }
     }
diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue
index befb5e7f9..013bc0be3 100644
--- a/src/views/admin/pages/singles/item-page.vue
+++ b/src/views/admin/pages/singles/item-page.vue
@@ -632,7 +632,7 @@
                     padding-left: 0;
                     padding-right: 0;
                     max-width: 100%;
-                    widows: 100%;
+                    width: 100%;
 
                     .sub-header {
                         padding-right: 0.5em;
@@ -673,7 +673,7 @@
                 }
                 &>.column.is-5 {
                     max-width: 100%;
-                    widows: 100%;
+                    width: 100%;
                     padding-left: 0.5em;
                     padding-right: 0.5em;
                 }
diff --git a/src/views/admin/scss/tainacan-admin.scss b/src/views/admin/scss/tainacan-admin.scss
index e8da69f97..92a71df82 100644
--- a/src/views/admin/scss/tainacan-admin.scss
+++ b/src/views/admin/scss/tainacan-admin.scss
@@ -136,7 +136,7 @@ a:hover {
 }
 // Used for pages with collection subheader
 .page-container-small {
-    height: calc(100% - 42px);
+    height: calc(100% - 38px);
     overflow-y: auto;
     transition: height 0.6s;
 }