More updates to new item page design with mobile compatibility. #455
This commit is contained in:
parent
cfa167515f
commit
e08f05a46e
|
@ -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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue