👕 Fix formatting settings for good and all (#7)

...I hope.
stormwarning · Feb 13, 2019 · 753517e · 753517e
1 parent ff16dd9
commit 753517e
Show file tree

Hide file tree

Showing 14 changed files with 1,219 additions and 146 deletions.
diff --git a/components/ColorField.vue b/components/ColorField.vue
@@ -6,9 +6,19 @@
             type="text"
             @input="updateHex($event.target.value)"
         />
-        <span class="dib mt3 f7 ttu tracked black-30">Hue {{ Math.floor(hsl.h) }}º</span>
-        <range-field class="mt1" :value="hsl.h" :min="0" :max="360" @input="updateHue"></range-field>
-        <span class="dib mt2 f7 ttu tracked black-30">Saturation {{ Math.floor(hsl.s * 100) }}%</span>
+        <span class="dib mt3 f7 ttu tracked black-30">
+            Hue {{ Math.floor(hsl.h) }}º
+        </span>
+        <range-field
+            class="mt1"
+            :value="hsl.h"
+            :min="0"
+            :max="360"
+            @input="updateHue"
+        ></range-field>
+        <span class="dib mt2 f7 ttu tracked black-30">
+            Saturation {{ Math.floor(hsl.s * 100) }}%
+        </span>
         <range-field
             class="mt1"
             :value="hsl.s"
@@ -17,7 +27,9 @@
             :step="0.01"
             @input="updateSaturation"
         ></range-field>
-        <span class="dib mt2 f7 ttu tracked black-30">Lightness {{ Math.floor(hsl.l * 100) }}%</span>
+        <span class="dib mt2 f7 ttu tracked black-30">
+            Lightness {{ Math.floor(hsl.l * 100) }}%
+        </span>
         <range-field
             class="mt1"
             :value="hsl.l"
@@ -50,10 +62,10 @@ export default {
         color: {
             type: String,
             default: '',
-        }
+        },
     },
 
-    data () {
+    data() {
         return {
             hex: this.color.toLowerCase(),
         }
@@ -64,45 +76,45 @@ export default {
      *       if hue returns NaN.
      */
     computed: {
-        hsl () {
+        hsl() {
             return {
                 h: chroma(this.color).get('hsl.h'),
                 s: chroma(this.color).get('hsl.s'),
                 l: chroma(this.color).get('hsl.l'),
             }
         },
 
-        lastValidHue () {
+        lastValidHue() {
             return chroma(this.color).get('hsl.h')
         },
     },
 
     methods: {
-        setColor (color) {
+        setColor(color) {
             this.$emit('update', color)
         },
 
         /**
          * @todo Check for valid hex value before setting.
          */
-        updateHex (hex) {
+        updateHex(hex) {
             if (hex !== this.hex) {
                 this.hex = hex
                 this.setColor(hex)
             }
         },
 
-        updateHue (hue) {
+        updateHue(hue) {
             this.hsl.h = hue
             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
         },
 
-        updateSaturation (saturation) {
+        updateSaturation(saturation) {
             this.hsl.s = saturation
             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
         },
 
-        updateLightness (lightness) {
+        updateLightness(lightness) {
             this.hsl.l = lightness
             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
         },
@@ -111,6 +123,7 @@ export default {
 </script>
 
 <style>
-.color-hex { outline: 0; }
+.color-hex {
+    outline: 0;
+}
 </style>
-
diff --git a/components/ColorMode.vue b/components/ColorMode.vue
@@ -2,13 +2,21 @@
     <fieldset class="pa0 ma0 mb5 bn measure center">
         <legend class="f6 ttu tracked black-30 mb2">Colour Mode</legend>
 
-        <div class="drop-shadow flex items-center pa3 pa4-ns bg-white br1 overflow-hidden">
+        <div
+            class="drop-shadow flex items-center pa3 pa4-ns bg-white br1 overflow-hidden"
+        >
             <label
                 v-for="(m, index) in modes"
                 :key="index"
                 class="flex items-center mv2 mr3 lh-solid pointer"
             >
-                <input v-model="mode" :value="m.toLowerCase()" class="mr2" type="radio" name="mode">
+                <input
+                    v-model="mode"
+                    :value="m.toLowerCase()"
+                    class="mr2"
+                    type="radio"
+                    name="mode"
+                />
                 <span class="f7 f6-ns tracked">{{ m }}</span>
             </label>
         </div>

diff --git a/components/Footer.vue b/components/Footer.vue
@@ -3,7 +3,12 @@
         <div class="flex-auto mt4-ns measure center">
             <p class="f7 lh-copy ttu tracked tr">
                 By
-                <a class="link black hover-black-70" href="http://tidaltheory.co/">@stormwarning</a>
+                <a
+                    class="link black hover-black-70"
+                    href="http://tidaltheory.co/"
+                >
+                    @stormwarning
+                </a>
             </p>
             <p class="mt2 f7 lh-copy ttu tracked tr">
                 <a
@@ -52,6 +57,7 @@
 footer {
     grid-area: footer;
 }
+
 @media screen and (min-width: 60em) {
     footer {
         grid-area: sidebar;

diff --git a/components/Gradient.vue b/components/Gradient.vue
@@ -9,7 +9,9 @@
                     :style="{ backgroundImage: gradientCSS }"
                     class="button-bg child absolute absolute--fill"
                 />
-                <div class="button-text absolute absolute--fill flex ma1 bg-white">
+                <div
+                    class="button-text absolute absolute--fill flex ma1 bg-white"
+                >
                     <div class="ma-auto">
                         <svg
                             class="relative w1 h1 mr2 v-mid"
@@ -26,13 +28,24 @@
                             <path
                                 d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                             ></path>
-                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+                            <rect
+                                x="8"
+                                y="2"
+                                width="8"
+                                height="4"
+                                rx="1"
+                                ry="1"
+                            ></rect>
                         </svg>
-                        <span class="relative lh-solid v-mid">{{ copyButtonText }}</span>
+                        <span class="relative lh-solid v-mid">
+                            {{ copyButtonText }}
+                        </span>
                     </div>
                 </div>
             </button>
-            <pre class="source-code ph4 pv5 ma0 ttl ws-normal bg-light-gray"><code>{{ gradientCSS }}</code></pre>
+            <pre
+                class="source-code ph4 pv5 ma0 ttl ws-normal bg-light-gray"
+            ><code>{{ gradientCSS }}</code></pre>
         </div>
     </figure>
 </template>
@@ -93,7 +106,8 @@ export default {
         },
     },
 
-    methods: {copyCSS(code) {
+    methods: {
+        copyCSS(code) {
             copyTextToClipboard(code)
             this.copyButtonText = 'Copied!'
 
@@ -120,7 +134,7 @@ figure > div {
 }
 
 .source-code > code {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
 }
 
 .ma-auto {

diff --git a/components/OptionControls.vue b/components/OptionControls.vue
@@ -12,31 +12,28 @@
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style scoped>
 details {
     transition: box-shadow 200ms ease-in-out;
 }
 details[open] {
-    box-shadow: rgba(0, 0, 0, 0.12) 0 2px 10px, 0 20px 50px 0 rgba(0, 0, 0, 0.14);
+    box-shadow: rgba(0, 0, 0, 0.12) 0 2px 10px,
+        0 20px 50px 0 rgba(0, 0, 0, 0.14);
 }
 
 summary {
     list-style-type: none;
     cursor: pointer;
     outline: none;
 }
-
 summary::-webkit-details-marker {
-  display: none;
+    display: none;
 }
 
 .options-drawer {
     margin-top: -1rem;
 }
 </style>
-
diff --git a/components/RangeField.vue b/components/RangeField.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="range-field" :class="{'is-disabled': disabled}">
+    <div class="range-field" :class="{ 'is-disabled': disabled }">
         <label v-if="label" class="range-field__label">
             <slot>{{ label }}</slot>
         </label>
@@ -14,52 +14,52 @@
             :value="value"
             v-bind="$attrs"
             @input="input"
-        >
+        />
     </div>
 </template>
 
 <script>
 export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+
+        label: {
+            type: String,
+            default: '',
+        },
+
+        max: {
+            type: Number,
+            default: 100,
+        },
+
+        min: {
+            type: Number,
+            default: 0,
+        },
+
+        step: {
+            type: Number,
+            default: 1,
+        },
+
+        value: {
+            type: Number,
+            default: 50,
+        },
     },
 
-    label: {
-      type: String,
-      default: ''
+    methods: {
+        input($event) {
+            if (!this.disabled) {
+                this.$emit('input', parseFloat($event.target.value))
+            }
+        },
     },
-
-    max: {
-      type: Number,
-      default: 100
-    },
-
-    min: {
-      type: Number,
-      default: 0
-    },
-
-    step: {
-      type: Number,
-      default: 1
-    },
-
-    value: {
-      type: Number,
-      default: 50
-    }
-  },
-
-  methods: {
-    input($event) {
-      if (!this.disabled) {
-        this.$emit('input', parseFloat($event.target.value));
-      }
-    }
-  }
-};
+}
 </script>
 
 <style lang="scss">