Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃摝 Upgrade Nuxt to latest major version #4

Merged
merged 5 commits into from
Feb 7, 2019
Merged

馃摝 Upgrade Nuxt to latest major version #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
515a96a
Upgrade linter dependencies
stormwarning Jan 31, 2019
e4368e8
Update formatting from new setup
stormwarning Jan 31, 2019
46d6e6f
Upgrade Nuxt and vue-color
stormwarning Feb 5, 2019
5ef08d0
Add OptionControls component
stormwarning Feb 5, 2019
45ff571
Upgrade chroma-js
stormwarning Feb 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
extends: ['@zazen/eslint-config', '@zazen/eslint-config/vue'],
rules: {
'vue/html-indent': ['error', 4],
// 'vue/html-indent': ['error', 4],
},
}
2 changes: 1 addition & 1 deletion .stylelintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module.exports = {
extends: ['@zazen/stylelint-config'],
extends: ['@zazen/stylelint-config', '@zazen/stylelint-config/sass'],
}
6 changes: 6 additions & 0 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
*,
*::before,
*::after {
box-sizing: border-box;
}

/**
* Fix tracking issue for right-aligned text.
*/
Expand Down
3 changes: 0 additions & 3 deletions components/ColorMode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,3 @@ export default {
},
}
</script>

<style>
</style>
25 changes: 14 additions & 11 deletions components/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,44 @@
<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
class="link black hover-black-70 dib w1"
href="https://github.com/stormwarning/polychroma">
href="https://github.com/stormwarning/polychroma"
>
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill-rule="evenodd"
clip-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="1.414">
<path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/>
stroke-miterlimit="1.414"
>
<path
d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"
></path>
</svg>
</a>
<a
class="link black hover-black-70 dib w1 ml3"
href="https://twitter.com/stormwarning">
href="https://twitter.com/stormwarning"
>
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill-rule="evenodd"
clip-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="1.414">
stroke-miterlimit="1.414"
>
<path
d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z"
fill-rule="nonzero"/>
fill-rule="nonzero"
></path>
</svg>
</a>
</p>
Expand Down
39 changes: 17 additions & 22 deletions components/Gradient.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<figure
:style="{ backgroundImage: gradientCSS }"
class="flex pa5">
<figure :style="{ backgroundImage: gradientCSS }" class="flex pa5">
<div class="dn db-l w-100 mw6 ma-auto bg-white br1 overflow-hidden">
<button
class="button-reset w-100 pa4 f7 f7-ns ttu tracked lh-solid black-90 bg-white ba bw2 b--white tl pointer hide-child relative"
@click="copyCSS(gradientCSS)">
@click="copyCSS(gradientCSS)"
>
<div
:style="{ backgroundImage: gradientCSS }"
class="button-bg child absolute absolute--fill"/>
class="button-bg child absolute absolute--fill"
/>
<div class="button-text absolute absolute--fill flex ma1 bg-white">
<div class="ma-auto">
<svg
Expand All @@ -21,15 +21,12 @@
stroke="#000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<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"/>
<rect
x="8"
y="2"
width="8"
height="4"
rx="1"
ry="1"/>
stroke-linejoin="round"
>
<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>
</svg>
<span class="relative lh-solid v-mid">{{ copyButtonText }}</span>
</div>
Expand All @@ -47,8 +44,8 @@ import { copyTextToClipboard } from '../utils/clipboard'
export default {
props: {
dir: {
type: String,
default: '30',
type: Number,
default: 30,
},
stops: {
type: Array,
Expand All @@ -60,14 +57,14 @@ export default {
},
},

data () {
data() {
return {
copyButtonText: 'Copy CSS',
}
},

computed: {
gradientCSS: function () {
gradientCSS: function() {
let dir = `${this.dir}deg`
let stops = this.stops
let mode = this.mode
Expand Down Expand Up @@ -96,8 +93,7 @@ export default {
},
},

methods: {
copyCSS (code) {
methods: {copyCSS(code) {
copyTextToClipboard(code)
this.copyButtonText = 'Copied!'

Expand All @@ -124,8 +120,7 @@ figure > div {
}

.source-code > code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
monospace;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.ma-auto {
Expand Down
28 changes: 28 additions & 0 deletions components/OptionControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<details class="bb b--black-10">
<summary class="w-100 flex items-center justify-between pa3 pa4-ns">
<slot name="summary"></slot>
</summary>
<div>
<slot></slot>
</div>
</details>
</template>

<script>
export default {

}
</script>

<style scoped>
summary {
list-style-type: none;
cursor: pointer;
}

summary::-webkit-details-marker {
display: none;
}
</style>

164 changes: 164 additions & 0 deletions components/SliderInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<template>
<div class="range-field" :class="{'is-disabled': disabled}">
<label v-if="label" class="range-field__label">
<slot>{{ label }}</slot>
</label>

<input
class="range-field__input"
type="range"
:disabled="disabled"
:max="max"
:min="min"
:value="value"
v-bind="$attrs"
@input="input"
>
</div>
</template>

<script>
export default {
name: 'RangeField',

props: {
disabled: {
type: Boolean,
default: false
},

label: {
type: String,
default: ''
},

max: {
type: Number,
default: 100
},

min: {
type: Number,
default: 0
},

value: {
type: Number,
default: 50
}
},

methods: {
input($event) {
if (!this.disabled) {
this.$emit('input', parseFloat($event.target.value));
}
}
}
};
</script>

<style lang="scss">
$fallbackAccentColor: #0078d7;

:root {
--range-accent-color: #0078d7;
}

.range-field {
margin: 8px 0;
font-size: 15px;

&.is-disabled {
color: lighten(#000, 60%);
}
}
.range-field__label {
display: block;
margin-bottom: 4px;
line-height: 30px;
color: #000100;
}
.range-field__input {
appearance: none;
width: 100%;
margin: 8px 0;

&:focus {
outline: none;
}

@mixin track() {
height: 2px;
background: lighten(#000, 60%);
}

&::-ms-track {
height: 24px;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
@include track;
}
&::-ms-fill-lower {
background: var(--range-accent-color, $fallbackAccentColor);
}
&::-moz-range-track {
@include track;
}
&::-moz-progress-bar {
margin-inline-start: 0;
margin-inline-end: 0;
}
&::-webkit-slider-runnable-track {
@include track;
}

@mixin thumb() {
background: var(--range-accent-color, $fallbackAccentColor);
height: 24px;
width: 8px;
border-radius: 4px;
cursor: pointer;
border: 0;
margin: 0;

&:focus {
background: #000;
}
}

&::-webkit-slider-thumb {
@include thumb;
-webkit-appearance: none;
margin-top: -11px;
margin-bottom: 11px;
}
&::-ms-thumb {
@include thumb;
}
&::-moz-range-thumb {
@include thumb;
}

&:disabled {
@mixin slider-disabled() {
background: lighten(#000, 80%);
cursor: default;
}
&::-ms-fill-lower,
&::-ms-fill-upper,
&::-ms-thumb {
@include slider-disabled;
}
&::-webkit-slider-thumb,
&::-webkit-slider-runnable-track {
@include slider-disabled;
}
&::-moz-range-track,
&::-moz-range-thumb {
@include slider-disabled;
}
}
}
</style>
12 changes: 2 additions & 10 deletions layouts/error.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
<template>
<section class="container">
<img
src="../assets/img/NuxtMicro.png"
alt="NuxtMicro.js Logo"
class="logo" >
<img src="../assets/img/NuxtMicro.png" alt="NuxtMicro.js Logo" class="logo">
<h1 class="title"/>
<h2 class="info"/>
<nuxt-link
v-if="error.statusCode === 404"
class="button"
to="/">
Homepage
</nuxt-link>
<nuxt-link v-if="error.statusCode === 404" class="button" to="/">Homepage</nuxt-link>
</section>
</template>

Expand Down