More updates to new item page design with mobile compatibility. #455

This commit is contained in:
mateuswetah 2022-03-25 15:07:41 -03:00
parent cfa167515f
commit e08f05a46e
7 changed files with 21 additions and 12 deletions

View File

@ -41,7 +41,8 @@
:is-menu-compressed="isMenuCompressed"/> :is-menu-compressed="isMenuCompressed"/>
<div <div
id="repository-container" id="repository-container"
class="column is-main-content"> class="column is-main-content"
:style="$adminOptions.hidePrimaryMenu ? '--tainacan-sidebar-width: 0px' : ''">
<router-view /> <router-view />
</div> </div>
</template> </template>
@ -184,7 +185,7 @@
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
overflow-y: visible; overflow-y: visible;
margin: 40px auto 0 auto; margin: 38px auto 0 auto;
} }

View File

@ -364,7 +364,9 @@
v-if="!$adminOptions.hideItemEditionDocument || !$adminOptions.hideItemEditionThumbnail" v-if="!$adminOptions.hideItemEditionDocument || !$adminOptions.hideItemEditionThumbnail"
class="column is-5"> 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 --> <!-- Hook for extra Form options -->
<template v-if="hasBeginLeftForm"> <template v-if="hasBeginLeftForm">
@ -2026,7 +2028,7 @@ export default {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
max-width: 100%; max-width: 100%;
widows: 100%; width: 100%;
.sub-header { .sub-header {
padding-right: 0.5em; padding-right: 0.5em;
@ -2067,7 +2069,8 @@ export default {
} }
&>.column.is-5 { &>.column.is-5 {
max-width: 100%; max-width: 100%;
widows: 100%; width: 100%;
padding-top: 2em;
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }
@ -2100,7 +2103,7 @@ export default {
} }
&.is-metadata-navigation-active { &.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; position: fixed;
z-index: 99999; z-index: 99999;
bottom: 0; bottom: 0;
@ -2115,6 +2118,10 @@ export default {
top: 0.25em; top: 0.25em;
max-width: 220px; 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 { .metadata-navigation {
@ -2182,6 +2189,7 @@ export default {
padding: 10px 0 0px 0px !important; padding: 10px 0 0px 0px !important;
.b-radio { .b-radio {
width: auto;
margin-right: 24px; margin-right: 24px;
margin-left: 0; margin-left: 0;
} }

View File

@ -288,7 +288,7 @@ export default {
height: $header-height; height: $header-height;
} }
a { a {
padding: 0.8em !important; padding: 0.85em !important;
text-align: center; text-align: center;
} }
.menu-text { .menu-text {

View File

@ -317,7 +317,7 @@ export default {
.level-item { .level-item {
margin-bottom: 0; margin-bottom: 0;
a { a {
padding: 0.5em 0.7em !important; padding: 0.45em 0.7em !important;
text-align: center; text-align: center;
} }
.menu-text { .menu-text {

View File

@ -295,7 +295,7 @@ export default {
} }
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
top: 102px; top: 96px;
padding-left: var(--tainacan-one-column) !important; padding-left: var(--tainacan-one-column) !important;
} }
} }

View File

@ -632,7 +632,7 @@
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
max-width: 100%; max-width: 100%;
widows: 100%; width: 100%;
.sub-header { .sub-header {
padding-right: 0.5em; padding-right: 0.5em;
@ -673,7 +673,7 @@
} }
&>.column.is-5 { &>.column.is-5 {
max-width: 100%; max-width: 100%;
widows: 100%; width: 100%;
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
} }

View File

@ -136,7 +136,7 @@ a:hover {
} }
// Used for pages with collection subheader // Used for pages with collection subheader
.page-container-small { .page-container-small {
height: calc(100% - 42px); height: calc(100% - 38px);
overflow-y: auto; overflow-y: auto;
transition: height 0.6s; transition: height 0.6s;
} }