diff --git a/src/assets/scss/abstracts/_variables.scss b/src/assets/scss/abstracts/_variables.scss index f68843a..f5376a1 100644 --- a/src/assets/scss/abstracts/_variables.scss +++ b/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; diff --git a/src/components/nodes/NodeView.vue b/src/components/nodes/NodeView.vue index 3c57276..b385482 100644 --- a/src/components/nodes/NodeView.vue +++ b/src/components/nodes/NodeView.vue @@ -5,7 +5,7 @@ >
@@ -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; } } diff --git a/src/components/nodes/NodeViewHeaderRef.vue b/src/components/nodes/NodeViewHeaderRef.vue index 98d92c2..d0c7fda 100644 --- a/src/components/nodes/NodeViewHeaderRef.vue +++ b/src/components/nodes/NodeViewHeaderRef.vue @@ -7,7 +7,7 @@ {{ toCommaList(node.authors) }}, - +
{{ node.edition.map(ed => ed.name).join(' ') }} diff --git a/src/pages/library/LibraryList.vue b/src/pages/library/LibraryList.vue index 77349fb..db9c762 100644 --- a/src/pages/library/LibraryList.vue +++ b/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)});