Final final

larsenwork · Jun 9, 2018 · 3a3803e · 3a3803e
1 parent a88ada5
commit 3a3803e
Show file tree

Hide file tree

Showing 11 changed files with 469 additions and 153 deletions.
diff --git a/assets/css/_base.css b/assets/css/_base.css
@@ -43,7 +43,7 @@ button,
   }
 }
 
-input,
+input:not([type='range']),
 select {
   display: flex;
   font-family: inherit;
@@ -73,6 +73,11 @@ select {
   opacity: 1;
 }
 
+input::selection {
+  background-color: var(--color-themed-bg);
+  color: var(--color-themed-fg);
+}
+
 :focus {
   outline: 1px solid var(--color-brand);
   box-shadow: var(--shadow--hover);

diff --git a/assets/css/_slideshow.css b/assets/css/_slideshow.css
@@ -29,7 +29,7 @@
 
 .eg-slide-scroll {
   overflow-y: scroll;
-  display: block;
+  display: block !important;
 }
 
 .eg-slide-gradient {
@@ -70,6 +70,12 @@
   flex-direction: column;
   justify-content: center;
 
+  &.is-horisontal {
+    flex-direction: row;
+    align-items: center;
+    justify-content: unset;
+  }
+
   & iframe {
     animation: fadeIn 1s;
     width: 100%;

diff --git a/assets/css/_transitions.css b/assets/css/_transitions.css
@@ -9,6 +9,23 @@
   will-change: opacity;
 }
 
+.tr-slides-enter-active,
+.tr-slides-leave-active {
+  transition: var(--transition);
+}
+
+.tr-slides-enter {
+  transform: translateY(calc(var(--spacer-xsmall) * -1));
+  opacity: 0;
+  will-change: transform, opacity;
+}
+
+.tr-slides-leave-to {
+  transform: translateY(calc(var(--spacer-xsmall) * 1));
+  opacity: 0;
+  will-change: transform, opacity;
+}
+
 .tr-dropdown-enter-active,
 .tr-dropdown-leave-active {
   transition: var(--transition);

diff --git a/assets/css/_utilities.css b/assets/css/_utilities.css
@@ -78,6 +78,11 @@
   grid-template-rows: repeat(2, 1fr);
 }
 
+.u-grid--3-4 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+}
+
 .u-grid--2-2 {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);

diff --git a/components/mixins/slideshow.js b/components/mixins/slideshow.js
@@ -20,5 +20,14 @@ export default {
           gradient,
         })
     },
+    updateGrayscale(greyscale) {
+      console.log(greyscale)
+      database
+        .collection('piter')
+        .doc('state')
+        .update({
+          greyscale,
+        })
+    },
   },
 }
diff --git a/components/slides/blur.vue b/components/slides/blur.vue
@@ -43,14 +43,12 @@
         <label class="c-gradientEditor-label">
           Blur
         </label>
-        <input v-model="blur" type="number" class="u-marginBottom">
+        <input v-model="blur" type="number" min="0" class="u-marginBottom">
       </div>
 
       <svg>
         <filter id="sharpBlur">
           <feGaussianBlur :stdDeviation="blur" />
-          <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0" />
-          <feComposite in2="SourceGraphic" operator="in" />
         </filter>
       </svg>
     </div>
@@ -60,13 +58,16 @@
 <script>
 import eagle from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
+import slideshowMethods from '~/components/mixins/slideshow'
 
 export default {
-  mixins: [eagle.slide, gradientOutput],
+  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  props: {
+    id: { default: '', type: String },
+  },
   data: function() {
     return {
-      blur: 20,
-      show: true,
+      blur: 0,
     }
   },
   watch: {
@@ -77,6 +78,7 @@ export default {
     },
     active: function() {
       if (this.active) {
+        this.updateSlideId(this.id)
         this.$store.state.gradient.ease1 = {
           x: 0.42,
           y: 0,

diff --git a/components/slides/color-spaces-demo.vue b/components/slides/color-spaces-demo.vue
@@ -40,15 +40,17 @@ import eagle from 'eagle.js'
 import easingEdit from '~/components/tools/gradient/easing-edit'
 import easingPreview from '~/components/tools/gradient/easing-preview'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
+import slideshowMethods from '~/components/mixins/slideshow'
 
 export default {
   components: {
     easingEdit,
     easingPreview,
   },
-  mixins: [eagle.slide, gradientOutput],
+  mixins: [eagle.slide, gradientOutput, slideshowMethods],
   props: {
     steps: { default: 3, type: Number },
+    id: { default: '', type: String },
   },
   watch: {
     step: function() {
@@ -64,6 +66,7 @@ export default {
     },
     active: function() {
       if (this.active) {
+        this.updateSlideId(this.id)
         this.$store.state.gradient.ease1 = {
           x: 0,
           y: 0,