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

fixed card sizes and update Library views

Browse Source
This commit is contained in:
axolotle
2021-06-28 16:50:39 +02:00
parent c33a4cfce5
commit 60d239450c
8 changed files with 130 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/abstracts/_variables.scss
+4
View File
@@ -56,6 +56,7 @@ $grid-breakpoints: (
md: 1024px,
lg: 1200px,
xl: 1440px,
xxl: 1920px,
);
$layout-bp: md;
@@ -173,8 +174,11 @@ $node-card-spacer-sm-x: 8px;
$node-card-spacer-sm-y: 8px;
$node-card-spacer-x: 15px;
$node-card-spacer-y: 10px;
$node-card-width: 560px;
$node-card-height: 350px;
$node-card-width-sm: $node-card-width / 1.5;
$node-card-height-sm: $node-card-height / 1.5;
// MISC
$btn-size: 26px;
src/components/layouts/NodePreviewZone.vue
+18
View File
@@ -63,5 +63,23 @@ export default {
.popover-body {
padding: 0;
}
.node-view {
width: $node-card-width-sm;
max-width: 100%;
max-height: 100%;
@include media-breakpoint-up($size-bp) {
width: $node-card-width;
}
&-wrapper {
height: $node-card-height-sm;
@include media-breakpoint-up($size-bp) {
height: $node-card-height;
}
}
}
}
</style>
src/components/nodes/NodeView.vue
+6 -4
View File
@@ -1,7 +1,7 @@
<template>
<article
class="node-view"
:class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant]"
:class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant, { 'preview': preview }]"
>
<div v-if="!loading" class="node-view-wrapper" :id="'node-' + node.id">
<component
@@ -78,7 +78,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.node-view {
position: relative;
@@ -93,19 +93,21 @@ export default {
// ╰─╴╵ ╵╵ ╰└─╯
&-card {
max-width: $node-card-width;
width: 100%;
.node-view-wrapper {
pointer-events: none;
width: 100%;
max-height: $node-card-height;
height: 100%;
overflow: hidden;
}
&.node-view-depart {
box-shadow: .5rem .5rem 1rem rgba($black, .25);
.node-view-child-list-group {
box-shadow: .5rem .5rem 1rem rgba($black, .25);
}
}
}
src/components/nodes/NodeViewBody.vue
+6
View File
@@ -99,6 +99,10 @@ export default {
.node-view-body {
width: 100%;
img {
max-width: 100%;
}
font: {
family: $font-family-text;
line-height: inherit;
@@ -111,6 +115,7 @@ export default {
&-view {
padding: 0 $node-view-spacer-sm-x;
font-size: 1.25rem;
word-wrap: break-word;
@include media-breakpoint-up($size-bp) {
padding: 0 $node-view-spacer-x;
@@ -128,6 +133,7 @@ export default {
&-card {
padding: 0 $node-card-spacer-sm-x;
font-size: 1.1rem;
word-wrap: anywhere;
@include media-breakpoint-up($size-bp) {
font-size: 2rem;
src/components/nodes/NodeViewFooter.vue
+9
View File
@@ -90,10 +90,19 @@ export default {
.node-view-footer {
margin-top: auto;
font-family: $font-family-base;
font-size: 0.9rem;
@include media-breakpoint-up($size-bp) {
font-size: 1rem;
}
.btn-read {
pointer-events: auto;
}
.btn {
font-size: inherit;
}
}
.popover-siblings {
src/components/nodes/NodeViewHeaderRef.vue
+3 -3
View File
@@ -90,7 +90,7 @@ export default {
font-size: 0.65rem;
}
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 2rem;
.edition {
@@ -113,7 +113,7 @@ export default {
font-size: 0.75rem;
}
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 2.625rem;
.edition {
@@ -125,7 +125,7 @@ export default {
.node-view-child-list {
display: none;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
display: block;
}
}
src/pages/library/LibraryList.vue
+39 -21
View File
@@ -77,39 +77,57 @@ export default {
.library-list {
overflow-y: auto;
height: 100%;
padding: 0 1.15rem;
@include media-breakpoint-up($size-bp) {
padding: 0 2.15rem;
}
h3 {
font-family: $font-family-text;
line-height: 1;
font-size: 16.5rem;
font-size: 6.25rem;
margin-top: 2rem;
@include media-breakpoint-up($size-bp) {
margin-top: 2rem;
font-size: 16.5rem;
}
}
&-nodes-group {
display: flex;
flex-wrap: wrap;
display: grid;
grid-gap: 2.2rem;
grid-template-columns: 1fr;
grid-template-rows: auto;
@include media-breakpoint-up(lg) {
grid-gap: 3.4rem;
}
@media (min-width: 650px) {
grid-template-columns: repeat(2, 1fr);
}
@include media-breakpoint-up(lg) {
grid-template-columns: repeat(3, 1fr);
}
@include media-breakpoint-up(xxl) {
grid-template-columns: repeat(4, 1fr);
}
.node-view {
margin-bottom: 3.4375rem;
$marg: 4.6875rem;
width: 100%;
height: $node-card-height;
max-width: 100%;
height: $node-card-height-sm;
@include media-breakpoint-only(md) {
max-width: calc(50% - #{($marg / 2)});
margin-right: $marg;
&:nth-of-type(2n) {
margin-right: 0;
}
@include media-breakpoint-up($size-bp) {
max-width: $node-card-width;
height: $node-card-height;
}
@include media-breakpoint-up(lg) {
margin-right: $marg;
max-width: calc(33.33% - #{(($marg * 2) / 3)});
&:nth-of-type(3n) {
margin-right: 0;
}
&.preview {
top: -2rem;
}
}
}
src/pages/library/LibraryMap.vue
+45 -19
View File
@@ -84,44 +84,70 @@ export default {
onPreviewNodeClick (ids) {
this.$root.$emit('bv::hide::popover', 'preview-node-' + this.previewNode.id)
this.$emit('open-node', ids)
this.previewNode = null
}
},
created () {
// JS-BP
const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
this.nodes = nodes.map((node, i) => {
return { x: i, rotate: randomUniform(-25, 25)(), data: node }
})
this.simulation.nodes(this.nodes)
.force('attract', forceManyBody().strength(10))
.force('collision', forceCollide().radius(650 / 2))
.force('collision', forceCollide().radius(radius / 2))
})
}
}
</script>
<style lang="scss" scoped>
foreignObject {
width: $node-card-width;
height: $node-card-height;
x: var(--x);
y: var(--y);
transform-origin: var(--x) var(--y);
transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
overflow: visible;
<style lang="scss">
#library-map {
foreignObject {
width: $node-card-width-sm;
height: $node-card-height-sm;
x: var(--x);
y: var(--y);
transform-origin: var(--x) var(--y);
transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
overflow: visible;
@include media-breakpoint-up($size-bp) {
width: $node-card-width;
height: $node-card-height;
}
.node-view {
cursor: pointer;
}
}
.node-view {
cursor: pointer;
}
}
width: $node-card-width-sm;
.node-view.hidden {
border: $line;
border-style: dashed;
background-color: transparent;
@include media-breakpoint-up($size-bp) {
width: $node-card-width;
}
::v-deep .node-view-wrapper {
opacity: 0;
&-wrapper {
height: $node-card-height-sm;
@include media-breakpoint-up($size-bp) {
height: $node-card-height;
}
}
&.hidden {
border: $line;
border-style: dashed;
background-color: transparent;
.node-view-wrapper {
opacity: 0;
}
}
}
}
</style>