Fix linting thrown from default template when enabling prettier optio…

…n, container centering when enabling tailwind option (nuxt#98) * fix default linting errors when enabling prettier option * fix centering issue for tailwind option, fix vuetify styles for prettier option
NickBolles · Sep 25, 2018 · 5ecab1c · 5ecab1c
1 parent dc089eb
commit 5ecab1c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 41 deletions.
diff --git a/template/_package.json b/template/_package.json
@@ -50,6 +50,7 @@
     "eslint": "^5.0.1",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-vue": "^4.0.0"<% } %><% if (prettier === 'yes') { %>,
+    "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-prettier": "2.6.2",
     "prettier": "1.14.3"<% } %><% if (ui === 'tailwind') { %>,
     "autoprefixer": "^8.6.4",

diff --git a/template/frameworks/vuetify/components/Logo.vue b/template/frameworks/vuetify/components/Logo.vue
@@ -29,7 +29,7 @@
 .Triangle--one {
   border-left: 105px solid transparent;
   border-right: 105px solid transparent;
-  border-bottom: 180px solid #41B883;
+  border-bottom: 180px solid #41b883;
 }
 
 .Triangle--two {
@@ -38,7 +38,7 @@
   animation: goright 0.5s linear forwards 3.5s;
   border-left: 87.5px solid transparent;
   border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3B8070;
+  border-bottom: 150px solid #3b8070;
 }
 
 .Triangle--three {
@@ -47,7 +47,7 @@
   animation: goright 0.5s linear forwards 3.5s;
   border-left: 70px solid transparent;
   border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495E;
+  border-bottom: 120px solid #35495e;
 }
 
 .Triangle--four {

diff --git a/template/frameworks/vuetify/components/VuetifyLogo.vue b/template/frameworks/vuetify/components/VuetifyLogo.vue
@@ -6,14 +6,15 @@
 </template>
 
 <style>
-  .VuetifyLogo {
-    width: 180px;
-    transform: rotateY(560deg);
-    animation: turn 3.5s ease-out forwards 1s;
-  }
-  @keyframes turn {
-    100% {
-      transform: rotateY(0deg);
-    }
+.VuetifyLogo {
+  width: 180px;
+  transform: rotateY(560deg);
+  animation: turn 3.5s ease-out forwards 1s;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateY(0deg);
   }
+}
 </style>
diff --git a/template/nuxt/components/Logo.vue b/template/nuxt/components/Logo.vue
@@ -29,7 +29,7 @@
 .Triangle--one {
   border-left: 105px solid transparent;
   border-right: 105px solid transparent;
-  border-bottom: 180px solid #41B883;
+  border-bottom: 180px solid #41b883;
 }
 
 .Triangle--two {
@@ -38,7 +38,7 @@
   animation: goright 0.5s linear forwards 3.5s;
   border-left: 87.5px solid transparent;
   border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3B8070;
+  border-bottom: 150px solid #3b8070;
 }
 
 .Triangle--three {
@@ -47,7 +47,7 @@
   animation: goright 0.5s linear forwards 3.5s;
   border-left: 70px solid transparent;
   border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495E;
+  border-bottom: 120px solid #35495e;
 }
 
 .Triangle--four {

diff --git a/template/nuxt/layouts/default.vue b/template/nuxt/layouts/default.vue
@@ -5,9 +5,9 @@
 </template>
 
 <style>
-html
-{
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+html {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
@@ -16,27 +16,29 @@ html
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
 }
-*, *:before, *:after
-{
+
+*,
+*:before,
+*:after {
   box-sizing: border-box;
   margin: 0;
 }
-.button--green
-{
+
+.button--green {
   display: inline-block;
   border-radius: 4px;
   border: 1px solid #3b8070;
   color: #3b8070;
   text-decoration: none;
   padding: 10px 30px;
 }
-.button--green:hover
-{
+
+.button--green:hover {
   color: #fff;
   background-color: #3b8070;
 }
-.button--grey
-{
+
+.button--grey {
   display: inline-block;
   border-radius: 4px;
   border: 1px solid #35495e;
@@ -45,8 +47,8 @@ html
   padding: 10px 30px;
   margin-left: 15px;
 }
-.button--grey:hover
-{
+
+.button--grey:hover {
   color: #fff;
   background-color: #35495e;
 }

diff --git a/template/nuxt/nuxt.config.js b/template/nuxt/nuxt.config.js
@@ -26,7 +26,7 @@ module.exports = {
   /*
   ** Customize the progress-bar color
   */
-  loading: { color: '#FFFFFF' },
+  loading: { color: '#fff' },
 
   /*
   ** Global CSS

diff --git a/template/nuxt/pages/index.vue b/template/nuxt/pages/index.vue
@@ -35,39 +35,39 @@ export default {
 <style>
 <% if (ui === 'tailwind') { %>
 /* Sample `apply` at-rules with Tailwind CSS
-.container
-{
-  @apply min-h-screen flex justify-center items-center text-center;
+.container {
+  @apply min-h-screen flex justify-center items-center text-center mx-auto;
 }
 */
+
 <% } %>
-.container
-{
+.container {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }
-.title
-{
-  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
+
+.title {
+  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   display: block;
   font-weight: 300;
   font-size: 100px;
   color: #35495e;
   letter-spacing: 1px;
 }
-.subtitle
-{
+
+.subtitle {
   font-weight: 300;
   font-size: 42px;
   color: #526488;
   word-spacing: 5px;
   padding-bottom: 15px;
 }
-.links
-{
+
+.links {
   padding-top: 15px;
 }
 </style>