Fix: Improve mobile layout (#197)

stormwarning · Jan 8, 2022 · f0c460d · f0c460d
1 parent f8f9ac7
commit f0c460d
Show file tree

Hide file tree

Showing 19 changed files with 25,176 additions and 105 deletions.
diff --git a/.changeset/happy-pots-jump.md b/.changeset/happy-pots-jump.md
@@ -0,0 +1,6 @@
+---
+'polychroma': patch
+---
+
+Fix mobile layout
+Layout on tablets no longer completely broken.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -9,6 +9,11 @@ updates:
       interval: monthly
     commit-message:
       prefix: 'Upgrade: '
-    labels:
-      - upgrade
     versioning-strategy: increase-if-necessary
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: 'Chore: '
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -5,6 +5,6 @@ module.exports = {
             true,
             { ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] },
         ],
-        'value-list-comma-newline-after': 'never-multi-line',
+        'value-list-comma-newline-after': null,
     },
 }
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -26,13 +26,8 @@
     --blue-7: #1c7ed6;
 }
 
-body {
-    overscroll-behavior: none;
-}
-
 code,
 .code {
-    /* stylelint-disable-next-line value-list-comma-newline-after */
     font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
         monospace;
 }

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -1,10 +1,10 @@
 <template>
     <footer
-        class="relative z-10 flex items-end px-8 py-8 sm:py-16 overflow-hidden"
+        class="relative z-10 flex items-end px-8 py-8 lg:py-16 overflow-hidden"
         :class="$style.footer"
     >
-        <app-masthead class="hidden sm:block" aria-hidden="true" />
-        <div class="flex-auto max-w-lg sm:mt-8 mx-auto">
+        <app-masthead class="hidden lg:block" aria-hidden="true" />
+        <div class="flex-auto max-w-md lg:mt-8 mx-auto">
             <p
                 class="text-xs leading-normal tracking-widest text-right uppercase"
             >
@@ -63,7 +63,6 @@
 
 <script>
 import AppMasthead from '~/components/AppMasthead'
-
 export default {
     components: {
         AppMasthead,

diff --git a/components/AppMasthead.vue b/components/AppMasthead.vue
@@ -6,7 +6,7 @@
         >
         <div class="mt-4">
             <span
-                class="block font-bold text-right text-sm sm:text-base leading-none capsize"
+                class="block font-bold text-right text-sm lg:text-base leading-none capsize"
                 >v{{ version }}</span
             >
         </div>
@@ -15,7 +15,6 @@
 
 <script>
 import { mapState } from 'vuex'
-
 export default {
     computed: {
         ...mapState({

diff --git a/components/BaseButton.vue b/components/BaseButton.vue
@@ -1,6 +1,6 @@
 <template>
     <button
-        class="relative flex items-center p-2 sm:p-4 text-xs font-medium text-gray-900 leading-none uppercase tracking-widest bg-gray-100 hover:bg-white focus:bg-white border-none rounded-sm outline-none cursor-pointer shadow-a"
+        class="relative flex items-center p-2 lg:p-4 text-xs font-medium text-gray-900 leading-none uppercase tracking-widest bg-gray-100 hover:bg-white focus:bg-white border-none rounded-sm outline-none cursor-pointer shadow-a"
         v-on="$listeners"
     >
         <slot />

diff --git a/components/BaseInput.vue b/components/BaseInput.vue
@@ -34,11 +34,7 @@ export default {
     width: 100%;
     padding: 0;
     margin: 0;
-    font-family: 'SF Mono',
- 'SFMono-Regular',
- Consolas,
- 'Liberation Mono',
- Menlo,
+    font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
         monospace;
     line-height: 1;
     border: 0;

diff --git a/components/ColorField.vue b/components/ColorField.vue
@@ -49,7 +49,6 @@
 
 <script>
 import chroma from 'chroma-js'
-
 import BaseInput from '~/components/BaseInput'
 import RangeField from '~/components/RangeField'
 

diff --git a/components/ColorMode.vue b/components/ColorMode.vue
@@ -5,7 +5,7 @@
         >
 
         <div
-            class="flex items-center p-4 sm:p-8 bg-white rounded-sm shadow-a overflow-hidden"
+            class="flex items-center p-4 lg:p-8 bg-white rounded-sm shadow-a overflow-hidden"
         >
             <label
                 v-for="(m, index) in modes"
@@ -19,7 +19,7 @@
                     type="radio"
                     name="mode"
                 />
-                <span class="text-xs sm:text-sm tracking-widest">{{ m }}</span>
+                <span class="text-xs lg:text-sm tracking-widest">{{ m }}</span>
             </label>
         </div>
     </fieldset>

diff --git a/components/Gradient.vue b/components/Gradient.vue
@@ -27,7 +27,7 @@
                     ></path>
                     <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                 </svg>
-                <span class="relative ml-1 sm:ml-2 leading-none">
+                <span class="relative ml-1 lg:ml-2 leading-none">
                     {{ copyButtonText }}
                 </span>
             </base-button>
@@ -50,7 +50,7 @@
                         d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
                     ></path>
                 </svg>
-                <span class="relative ml-1 sm:ml-2 leading-none">
+                <span class="relative ml-1 lg:ml-2 leading-none">
                     {{ shareButtonText }}
                 </span>
             </base-button>
@@ -61,7 +61,6 @@
 <script>
 import chroma from 'chroma-js'
 import { mapState } from 'vuex'
-
 import BaseButton from '~/components/BaseButton'
 import { copyTextToClipboard } from '~/utils/clipboard'
 
@@ -88,11 +87,10 @@ export default {
             mode: (state) => state.colorMode,
         }),
 
-        gradientCSS: function() {
+        gradientCSS: function () {
             let dir = `${this.dir}deg`
             let stops = this.stops
             let mode = this.mode
-
             let steps = mode !== 'rgb' ? stops.length + 5 : stops.length
             let string = 'linear-gradient('
             let keyColors = []
@@ -101,10 +99,7 @@ export default {
             let positions = []
 
             stops.map((stop) => keyColors.push(stop.color.hex))
-            scale = chroma
-                .scale(keyColors)
-                .mode(mode)
-                .correctLightness()
+            scale = chroma.scale(keyColors).mode(mode).correctLightness()
             ;[...Array(steps).keys()].map((col, index) => {
                 let t = index / (steps - 1)
                 colors.push(scale(t).hex())
@@ -117,7 +112,7 @@ export default {
         },
     },
 
-    created: function() {
+    created: function () {
         if (process.client) {
             this.origin = window.location.origin
         }
@@ -127,7 +122,6 @@ export default {
         copyCSS(code) {
             copyTextToClipboard(code)
             this.copyButtonText = 'Copied!'
-
             setTimeout(() => {
                 this.copyButtonText = COPY_LABEL
             }, 2000)
@@ -143,7 +137,6 @@ export default {
 
             copyTextToClipboard(this.origin + str)
             this.shareButtonText = 'Copied!'
-
             setTimeout(() => {
                 this.shareButtonText = SHARE_LABEL
             }, 2000)

diff --git a/components/OptionControls.vue b/components/OptionControls.vue
@@ -1,11 +1,11 @@
 <template>
     <details>
         <summary class="cursor-pointer outline-none" @click="notifyOfClick">
-            <div class="w-full flex items-center justify-between p-4 sm:p-8">
+            <div class="w-full flex items-center justify-between p-4 lg:p-8">
                 <slot name="summary"></slot>
             </div>
         </summary>
-        <div class="relative p-4 sm:p-8 sm:pt-0 sm:pr-4 -mt-4 mr-8 sm:mr-16">
+        <div class="relative p-4 lg:p-8 lg:pt-0 lg:pr-4 -mt-4 mr-8 lg:mr-16">
             <slot></slot>
         </div>
     </details>

diff --git a/components/OptionGroup.vue b/components/OptionGroup.vue
@@ -27,7 +27,7 @@ export default {
 
     methods: {
         handleChildClicked(childId) {
-            for (const id in this.childrenToggled) {
+            for (let id in this.childrenToggled) {
                 if (this.childrenToggled[id] && id !== childId) {
                     this.$emit('toggle-child', id)
                     this.childrenToggled[id] = false

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,24 +1,23 @@
 <template>
     <article class="min-h-screen">
         <div
-            class="header sticky top-0 z-10 sm:h-screen pointer-events-none mix-burn"
+            class="header lg:sticky top-0 z-10 lg:h-screen pointer-events-none mix-burn"
         >
             <app-masthead class="mix-burn" />
         </div>
         <main>
             <app-nav />
-            <section class="p-8 sm:pt-0 sm:pb-16">
+            <section class="p-8 lg:pt-0 lg:pb-16">
                 <nuxt />
             </section>
-            <gradient-result class="sticky sm:top-0 sm:bottom-0 sm:h-screen" />
+            <gradient-result class="sticky lg:top-0 lg:bottom-0 lg:h-screen" />
         </main>
-        <app-footer class="sticky sm:top-0 sm:bottom-0 sm:h-screen" />
+        <app-footer class="sticky lg:top-0 lg:bottom-0 lg:h-screen" />
     </article>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-
 import AppFooter from '~/components/AppFooter'
 import AppMasthead from '~/components/AppMasthead'
 import AppNav from '~/components/AppNav.vue'

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -34,15 +34,15 @@ export default {
             { name: 'twitter:creator', content: '@stormwarning' },
             {
                 name: 'twitter:image:src',
-                content: 'https://polychroma.app/icon-1024.png',
+                content: 'https://polychroma.app/icon.png',
             },
 
             { property: 'og:title', content: 'Polychroma' },
             { property: 'og:type', content: 'website' },
             { property: 'og:url', content: 'https://polychroma.app/' },
             {
                 property: 'og:image',
-                content: 'https://polychroma.app/icon-1024.png',
+                content: 'https://polychroma.app/icon.png',
             },
             {
                 property: 'og:description',
@@ -64,6 +64,8 @@ export default {
     build: {
         postcss: {
             plugins: {
+                autoprefixer: {},
+
                 // https://github.com/jonathantneal/postcss-advanced-variables#features
                 'postcss-advanced-variables': {},
 
@@ -80,16 +82,18 @@ export default {
     modules: [
         ['@nuxtjs/google-analytics', { ua: 'UA-58836125-4' }],
         ['@nuxtjs/markdownit', { preset: 'commonmark', typographer: true }],
-        '@nuxtjs/pwa',
+        [
+            '@nuxtjs/pwa',
+            {
+                meta: { appleStatusBarStyle: 'black-translucent' },
+                manifest: { name: 'Polychroma' },
+            },
+        ],
     ],
 
     buildModules: ['@nuxtjs/tailwindcss'],
 
     tailwindcss: {
         cssPath: '~/assets/css/main.css',
     },
-
-    manifest: {
-        name: 'Polychroma',
-    },
 }