Merge pull request #3 from netwerk-digitaal-erfgoed/feature/MMF-28-si…

…debar

Feature/MMF-28: Editor with sidebar and live preview

nuxt/assets/scss/defaults.scss

@@ -23,9 +23,12 @@
 
   // Font weights
   --font-weight-light: 300;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+
+  // Font family
+  --font-family: Poppins;
 
   // Spacing & Dimensions
   --space-0: 0.0625rem; // 1px
@@ -35,4 +38,11 @@
     $value: $i * $increment;
     --space-#{$i}: #{$value};
   }
+
+  // Transitions
+  --transition-page-vertical: top 1s;
+  --transition-page-horizontal: left 1s;
+  --transition-slider: 0.15s ease-in-out;
+  --transition-accordeon: 0.4s ease-in-out;
+  --transition-state: all 0.3s ease;
 }

nuxt/assets/scss/main.scss

@@ -14,7 +14,7 @@ h3 {
   font-weight: var(--font-weight-semibold);
 }
 
-@include sm-screen-down {
+@mixin responsive-typography {
   h1 {
     font-size: var(--font-size-l);
   }
@@ -28,8 +28,22 @@ h3 {
   }
 }
 
+@include sm-screen-down {
+  @include responsive-typography()
+}
+
+#preview {
+  &.preview-tablet,
+  &.preview-cellphone {
+    @include responsive-typography()
+  }
+}
+
 body {
   background-color: var(--background-color);
+}
+
+body, #preview {
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size-base);

nuxt/assets/scss/transitions.scss

@@ -1,10 +1,10 @@
 /**
  * Transition to and from the art pages
  */
- .up {
+.up {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-enter-from {
@@ -17,14 +17,14 @@
 
 .down {
   &.slide-leave-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-leave-from {
     top: 0;
   }
   &.slide-leave-to {
-    top: 100%
+    top: 100%;
   }
 }
 
@@ -34,14 +34,14 @@
 .left {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
     left: 100%;
   }
   &.slide-enter-to {
-    left: 0
+    left: 0;
   }
   &.slide-leave-to {
     left: -100%;
@@ -54,15 +54,15 @@
 .right {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
     left: -100%;
   }
 
   &.slide-enter-to {
-    left: 0%
+    left: 0%;
   }
   &.slide-leave-to {
     left: 100%;

nuxt/components/Atoms/Accordeon.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="accordeon">
+    <div
+      class="accordeon-header"
+      tabindex="0"
+      @click="toggle"
+      @keydown.prevent.enter="toggle">
+      <slot name="header">
+        {{ header }}
+      </slot>
+      <div
+        class="icon"
+        :class="openClasses">
+        <Icon icon="mdi:chevron-right" />
+      </div>
+    </div>
+    <div
+      class="accordeon-body"
+      :class="openClasses">
+      <div
+        class="inner"
+        :class="openClasses">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  header?: string;
+  initial?: boolean;
+}>();
+const open = ref(props.initial ?? false);
+
+const openClasses = computed(() => {
+  return {
+    open: open.value,
+  };
+});
+
+const toggle = () => {
+  open.value = !open.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.accordeon {
+  outline: none;
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-2) 0;
+    cursor: pointer;
+
+    .icon {
+      transition: transform var(--transition-accordeon);
+
+      &.open {
+        transform: rotate(90deg) translate(0, 6px);
+      }
+    }
+  }
+
+  &-body {
+    overflow: hidden;
+    transition: max-height var(--transition-accordeon), opacity var(--transition-accordeon);
+
+    &.open {
+      max-height: 100vh;
+      opacity: 1;
+    }
+
+    &:not(.open) {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    .inner {
+      &:not(.open) {
+        visibility: hidden;
+      }
+    }
+  }
+}
+</style>

nuxt/components/Atoms/ArtworkTeaser.vue

@@ -69,7 +69,7 @@ defineProps<{
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
     }
   }
 

nuxt/components/Atoms/Button.vue

@@ -28,14 +28,19 @@ const classes = computed(() => {
   padding: var(--space-4) var(--space-8);
   border-radius: var(--space-2);
   cursor: pointer;
+  transition: var(--transition-state);
   user-select: none;
 
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   &.primary {
     color: var(--background-color);
     border: var(--space-0) solid transparent;
     background-color: var(--blues-blue);
 
-    &:hover {
+    &:hover:enabled {
       color: var(--blues-blue);
       background-color: var(--background-color);
       border: var(--space-0) solid var(--blues-blue);
@@ -47,7 +52,7 @@ const classes = computed(() => {
     color: var(--blues-blue);
     border: var(--space-0) solid var(--blues-blue);
 
-    &:hover {
+    &:hover:enabled {
       background-color: var(--blues-blue);
       color: var(--background-color);
       border: var(--space-0) solid transparent;

nuxt/components/Atoms/CategoryTeaser.vue

@@ -86,7 +86,7 @@ const to = computed(() => {
       width: var(--max-width-slide);
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
       filter: blur(0.625rem);
       position: absolute;
       left: 50%;