bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small fix Nodeview header footer position

Browse Source
This commit is contained in:
axolotle
2021-06-22 22:32:56 +02:00
parent 8725b55c1a
commit 7c8df5bd8a
4 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/abstracts/_variables.scss
+1 -1
View File
@@ -151,7 +151,7 @@ $node-card-spacer-sm-y: 8px;
$node-card-spacer-x: 15px; $node-card-spacer-x: 15px;
$node-card-spacer-y: 10px; $node-card-spacer-y: 10px;
$node-card-width: 560px; $node-card-width: 560px;
$node-card-height: 330px; $node-card-height: 350px;
// MISC // MISC
$btn-size: 26px; $btn-size: 26px;
src/components/nodes/NodeView.vue
+13 -4
View File
@@ -5,7 +5,7 @@
> >
<div v-if="!loading" class="node-view-wrapper"> <div v-if="!loading" class="node-view-wrapper">
<component <component
:is="'node-view-header-' + type" :is="'node-view-header-' + nodeType"
v-bind="{ node, mode }" v-bind="{ node, mode }"
class="node-view-header" class="node-view-header"
/> />
@@ -89,6 +89,11 @@ export default {
width: $node-card-width; width: $node-card-width;
height: $node-card-height; height: $node-card-height;
.node-view-wrapper {
height: 100%;
overflow: hidden;
}
&.node-view-depart { &.node-view-depart {
box-shadow: .5rem .5rem 1rem rgba($black, .25); box-shadow: .5rem .5rem 1rem rgba($black, .25);
} }
@@ -96,6 +101,8 @@ export default {
&-card &-header { &-card &-header {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0; padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0;
position: sticky;
top: 0;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: $node-card-spacer-y $node-card-spacer-x 0; padding: $node-card-spacer-y $node-card-spacer-x 0;
@@ -103,10 +110,12 @@ export default {
} }
&-card &-footer { &-card &-footer {
padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2; padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2;
position: sticky;
bottom: 0;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2; padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2;
} }
} }
@@ -134,8 +143,8 @@ export default {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: $node-view-spacer-y $node-view-spacer-x 0; padding: $node-view-spacer-y $node-view-spacer-x 0;
position: sticky; position: sticky;
z-index: 1;
top: 0; top: 0;
z-index: 1;
} }
} }
src/components/nodes/NodeViewHeaderRef.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<strong class="d-block"> <strong class="d-block">
{{ toCommaList(node.authors) }}, {{ toCommaList(node.authors) }},
</strong> </strong>
<span v-if="node.preTitle" v-html="trim(node.preTitle) + ','" /> <span v-if="node.preTitle" v-html="trim(node.preTitle) + ', '" />
<em v-html="(trim(node.title) || 'pas de titre ital') + ','" /> <em v-html="(trim(node.title) || 'pas de titre ital') + ','" />
<div v-if="node.edition" class="edition"> <div v-if="node.edition" class="edition">
{{ node.edition.map(ed => ed.name).join(' ') }} {{ node.edition.map(ed => ed.name).join(' ') }}
src/pages/library/LibraryList.vue
+1 -1
View File
@@ -75,7 +75,7 @@ export default {
margin-bottom: 3.4375rem; margin-bottom: 3.4375rem;
$marg: 4.6875rem; $marg: 4.6875rem;
width: 100%; width: 100%;
height: 20rem; height: $node-card-height;
@include media-breakpoint-only(md) { @include media-breakpoint-only(md) {
max-width: calc(50% - #{($marg / 2)}); max-width: calc(50% - #{($marg / 2)});