add gradient css for slightly nicer effect

richard-webb-dev · Jan 13, 2020 · afee240 · afee240
1 parent 9ca347d
commit afee240
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/src/components/nav-wheel.css b/src/components/nav-wheel.css
@@ -1,13 +1,55 @@
+/* Annulars */
 .nav-wheel__route-annular {
-  fill: #41b883;
+  fill: url(#linear-gradient);
   stroke: #34495e;
-  stroke-width: 0.7%;
+  stroke-width: 0.5%;
+}
+.linear-gradient-stop-1 {
+  stop-color: #41b883;
+  stop-opacity: 1;
+}
+.linear-gradient-stop-2 {
+  stop-color: #41b883;
+  stop-opacity: 0.9;
+}
+.linear-gradient-stop-3 {
+  stop-color: #41b883;
+  stop-opacity: 0.4;
+}
+.nav-wheel__route-annular--active {
+  fill: url(#linear-gradient--active);
+}
+.linear-gradient-stop-1--active {
+  stop-color: #1f7950;
+  stop-opacity: 1;
+}
+.linear-gradient-stop-2--active {
+  stop-color: #1f7950;
+  stop-opacity: 0.9;
+}
+.linear-gradient-stop-3--active {
+  stop-color: #1f7950;
+  stop-opacity: 0.4;
 }
 .nav-wheel__route-annular:hover {
   transition-duration: 0.4s;
-  fill: #34495e;
+  fill: url(#linear-gradient--hover);
   stroke: #41b883;
 }
+.linear-gradient-stop-1--hover {
+  stop-color: #34495e;
+  stop-opacity: 1;
+}
+.linear-gradient-stop-2--hover {
+  stop-color: #34495e;
+  stop-opacity: 0.9;
+}
+.linear-gradient-stop-3--hover {
+  stop-color: #34495e;
+  stop-opacity: 0.4;
+}
+
+/* Labels */
 .nav-wheel__route-label {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 22px;
@@ -21,6 +63,7 @@
   font-size: 28px;
 }
 
+/* Animations */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;

diff --git a/src/components/nav-wheel.vue b/src/components/nav-wheel.vue
@@ -19,6 +19,21 @@
             <feMergeNode in="SourceGraphic" />
           </feMerge>
         </filter>
+        <linearGradient id="linear-gradient" gradientTransform="rotate(65)">
+          <stop class="linear-gradient-stop-1" offset="0%" />
+          <stop class="linear-gradient-stop-2" offset="50%" />
+          <stop class="linear-gradient-stop-3" offset="100%" />
+        </linearGradient>
+        <linearGradient id="linear-gradient--active" gradientTransform="rotate(65)">
+          <stop class="linear-gradient-stop-1--active" offset="0%" />
+          <stop class="linear-gradient-stop-2--active" offset="50%" />
+          <stop class="linear-gradient-stop-3--active" offset="100%" />
+        </linearGradient>
+        <linearGradient id="linear-gradient--hover" gradientTransform="rotate(65)">
+          <stop class="linear-gradient-stop-1--hover" offset="0%" />
+          <stop class="linear-gradient-stop-2--hover" offset="50%" />
+          <stop class="linear-gradient-stop-3--hover" offset="100%" />
+        </linearGradient>
       </defs>
       <g
         :transform="
@@ -82,7 +97,7 @@ export default {
   data() {
     return {
       scale: this.config.constants.scale,
-      mouse: [
+      panCoords: [
         this.size / this.config.constants.scale / 2,
         this.size / this.config.constants.scale / 2
       ],
@@ -93,8 +108,8 @@ export default {
   computed: {
     panTranslation() {
       return [
-        -(this.mouse[0] - this.size / 2),
-        -(this.mouse[1] - this.size / 2)
+        -(this.panCoords[0] - this.size / 2),
+        -(this.panCoords[1] - this.size / 2)
       ];
     },
     centerScale() {
@@ -117,13 +132,13 @@ export default {
   },
   methods: {
     panSvg($event) {
-      this.mouse = [Math.abs($event.offsetX), Math.abs($event.offsetY)];
+      this.panCoords = [Math.abs($event.offsetX), Math.abs($event.offsetY)];
     },
     scaleSvg($event) {
       this.scale -= $event.deltaY / 1000;
     },
     resetPan() {
-      this.mouse = [this.size / 2, this.size / 2];
+      this.panCoords = [this.size / 2, this.size / 2];
     }
   },
   mounted() {