From aab344bdd43f05768241b7657d2436c0aab912d2 Mon Sep 17 00:00:00 2001
From: Max <m4ks@o2.pl>
Date: Wed, 10 Oct 2018 12:06:08 +0200
Subject: [PATCH] Fixed WebKit vendor gradient directions

---
 src/App.vue                         | 4 ++++
 src/components/modals/CodeModal.vue | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 33a33573..046c73ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,7 @@
     <CodeModal
       :gradient="currentGradient"
       :direction="currentDirection"
+      :directionWebkit="currentDirectionWebkit"
       :show="showingCodeModal"
       :closeModals="closeModals" />
   </main>
@@ -62,7 +63,9 @@ export default {
       preloading: true,
       directionIndex: 2,
       currentDirection: 'to right',
+      currentDirectionWebkit: 'left',
       directions: ['to left', 'to bottom', 'to right', 'to top'],
+      directionsWebkit: ['right', 'top', 'left', 'bottom'],
       currentGradient: {
         name: null,
         colors: ['#ffffff', '#ffffff'],
@@ -181,6 +184,7 @@ export default {
     },
     directionIndex(id) {
       this.currentDirection = this.directions[id];
+      this.currentDirectionWebkit = this.directionsWebkit[id];
       this.updateFavicon();
     },
   },
diff --git a/src/components/modals/CodeModal.vue b/src/components/modals/CodeModal.vue
index d68fb0c0..2cb2f0a8 100644
--- a/src/components/modals/CodeModal.vue
+++ b/src/components/modals/CodeModal.vue
@@ -13,7 +13,7 @@
 
 <pre class="codeblock" v-else><code>
   <span class="codeblock__property">background</span>: <span class="codeblock__spec">{{ this.gradient.colors[0] | lowercase }}</span>; <span class="codeblock__comment">/* fallback for old browsers */</span>
-  <span class="codeblock__property">background</span>: -webkit-linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* Chrome 10-25, Safari 5.1-6 */</span>
+  <span class="codeblock__property">background</span>: -webkit-linear-gradient({{ this.directionWebkit }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* Chrome 10-25, Safari 5.1-6 */</span>
   <span class="codeblock__property">background</span>: linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */</span>
 </code></pre>
 
@@ -37,7 +37,7 @@ import Modal from '../Modal';
 
 export default {
   name: 'codemodal',
-  props: ['show', 'gradient', 'direction', 'closeModals'],
+  props: ['show', 'gradient', 'direction', 'directionWebkit', 'closeModals'],
   components: {
     Modal,
   },
@@ -54,7 +54,7 @@ export default {
   computed: {
     copyData() {
       return `background: ${this.gradient.colors[0]};  /* fallback for old browsers */
-background: -webkit-linear-gradient(${this.direction}, ${[...this.gradient.colors].reverse().join(', ')});  /* Chrome 10-25, Safari 5.1-6 */
+background: -webkit-linear-gradient(${this.directionWebkit}, ${[...this.gradient.colors].reverse().join(', ')});  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(${this.direction}, ${[...this.gradient.colors].reverse().join(', ')}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 `;
     },