Browse Source

small fix Nodeview header footer position

axolotle 2 years ago
parent
commit
7c8df5bd8a

+ 1 - 1
src/assets/scss/abstracts/_variables.scss

@@ -151,7 +151,7 @@ $node-card-spacer-sm-y: 8px;
 $node-card-spacer-x: 15px;
 $node-card-spacer-y: 10px;
 $node-card-width: 560px;
-$node-card-height: 330px;
+$node-card-height: 350px;
 
 // MISC
 $btn-size: 26px;

+ 13 - 4
src/components/nodes/NodeView.vue

@@ -5,7 +5,7 @@
   >
     <div v-if="!loading" class="node-view-wrapper">
       <component
-        :is="'node-view-header-' + type"
+        :is="'node-view-header-' + nodeType"
         v-bind="{ node, mode }"
         class="node-view-header"
       />
@@ -89,6 +89,11 @@ export default {
     width: $node-card-width;
     height: $node-card-height;
 
+    .node-view-wrapper {
+      height: 100%;
+      overflow: hidden;
+    }
+
     &.node-view-depart {
       box-shadow: .5rem .5rem 1rem rgba($black, .25);
     }
@@ -96,6 +101,8 @@ export default {
 
   &-card &-header {
     padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0;
+    position: sticky;
+    top: 0;
 
     @include media-breakpoint-up(md) {
       padding: $node-card-spacer-y $node-card-spacer-x 0;
@@ -103,10 +110,12 @@ export default {
   }
 
   &-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) {
-      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) {
       padding: $node-view-spacer-y $node-view-spacer-x 0;
       position: sticky;
-      z-index: 1;
       top: 0;
+      z-index: 1;
     }
   }
 

+ 1 - 1
src/components/nodes/NodeViewHeaderRef.vue

@@ -7,7 +7,7 @@
         <strong class="d-block">
           {{ toCommaList(node.authors) }},
         </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') + ','" />
         <div v-if="node.edition" class="edition">
           {{ node.edition.map(ed => ed.name).join(' ') }}

+ 1 - 1
src/pages/library/LibraryList.vue

@@ -75,7 +75,7 @@ export default {
       margin-bottom: 3.4375rem;
       $marg: 4.6875rem;
       width: 100%;
-      height: 20rem;
+      height: $node-card-height;
 
       @include media-breakpoint-only(md) {
         max-width: calc(50% - #{($marg / 2)});