Change from iview to vuetify

2019-01-21 20:58:25 +01:00
parent 54d8310464
commit ab14a88bdd
8 changed files with 71 additions and 128 deletions
@@ -1,17 +1,21 @@
 <template>
-  <Card dis-hover>
-    <p slot="title"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.band.name}}</p>
-    <Row>
-      <Col :xs="24" :sm="12"><strong>Datum:</strong> {{event.date}}</Col>
-      <Col :xs="24" :sm="12" v-if="event.time"><strong>Tid:</strong> {{event.time}}</Col>
-    </Row>
-    <Row>
-      <Col :xs="24" :sm="12" :md="6"><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.name}}</Col>
-      <Col :xs="24" :sm="12" :md="6"><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.city}}</Col>
-      <Col :xs="24" :sm="12" :md="6"><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.municipality}}</Col>
-      <Col :xs="24" :sm="12" :md="6"><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.state}}</Col>
-    </Row>
-  </Card>
+  <v-card xs12>
+    <v-card-title primary-title>
+      <h3 class="headline mb-0"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.band.name}}</h3>
+    </v-card-title>
+    <v-container>
+      <v-layout row wrap>
+        <v-flex xs12 sm6><strong>Datum:</strong> {{event.date}}</v-flex>
+        <v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
+      </v-layout>
+      <v-layout row wrap>
+        <v-flex xs12 sm6 md3><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.name}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.city}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.municipality}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.state}}</v-flex>
+      </v-layout>
+    </v-container>
+  </v-card>
 </template>

 <script>
@@ -1,16 +1,13 @@
 <template>
  <div>
    <app-loader :show="isLoading" />
-    <div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
-      <Content>
-        <Row :gutter="16" type="flex" justify="space-around" v-for="event in events" :key="event.id" class-name="eventRow">
-          <Col span="24">
-            <Event :event="event" :has-user="hasUser" :ignore="ignore"></Event>
-          </Col>
-        </Row>
-        <br>
-      </Content>
-    </div>
+    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
+      <v-layout row wrap v-for="event in events" :key="event.id">
+        <v-flex xs12>
+          <Event :event="event" :has-user="hasUser" :ignore="ignore" />
+        </v-flex>
+      </v-layout>
+    </v-container>
  </div>
 </template>

@@ -177,11 +174,11 @@
 </script>

 <style lang="scss" scoped>
-  .container {
-    display: flex;
-    will-change: opacity;
-    padding: 1.5rem 1rem;
-  }
+  /*.container {*/
+    /*display: flex;*/
+    /*will-change: opacity;*/
+    /*padding: 1.5rem 1rem;*/
+  /*}*/

  .left {
    padding: 1.5rem 1rem;
@@ -1,27 +1,29 @@
 <template>
-  <main>
-    <Layout class="layout">
-      <Menu theme="light" mode="horizontal">
-        <MenuItem v-if="!hasUser" name="user">
-          <span @click="() => { doLogin(); }">Login</span>
-        </MenuItem>
-        <Submenu v-if="hasUser" name="user">
-          <template slot="title">
-            <Avatar :src="user.picture" />
-            {{ user.name }}
-          </template>
-          <nuxt-link to="/logout/">
-            <DropdownItem>
-              Log out
-            </DropdownItem>
-          </nuxt-link>
-        </Submenu>
-      </Menu>
-      <Content>
+  <v-app>
+    <!--<v-navigation-drawer app></v-navigation-drawer>-->
+    <v-toolbar app>
+      <v-toolbar-title>
+        <span v-if="!hasUser"><span @click="() => { doLogin(); }">Login</span></span>
+        <v-menu v-if="hasUser" offset-y >
+          <v-btn flat slot="activator" color="primary">
+            <v-avatar size="24"><img :src="user.picture"></v-avatar>&nbsp;{{ user.name }}
+          </v-btn>
+          <v-list>
+            <v-list-tile>
+              <v-list-tile-title flat><nuxt-link to="/logout/">Logga ut</nuxt-link></v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+        </v-menu>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid>
        <nuxt />
-      </Content>
-    </Layout>
-  </main>
+      </v-container>
+    </v-content>
+    <v-footer app></v-footer>
+  </v-app>
 </template>

 <style lang="scss">
@@ -1,6 +1,6 @@
 module.exports = {
  css: [
-    'iview/dist/styles/iview.css',
+    'vuetify/dist/vuetify.css',
  ],
  head: {
    link: [
@@ -9,7 +9,10 @@ module.exports = {
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff' },
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Material+Icons" },
+      { rel: "stylesheet", href: "https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css" }
    ],
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, minimal-ui' }
@@ -17,7 +20,7 @@ module.exports = {
  },
  mode: 'spa',
  plugins: [
-    { src: '~/plugins/iview.js', ssr: false },
+    { src: '~/plugins/vuetify.js', ssr: false },
    { src: '~/plugins/graph-routing.js', ssr: false },
    { src: '~/plugins/app-components.js', ssr: false },
    { src: '~/plugins/vue-lazyload.js', ssr: false }
@@ -15,14 +15,14 @@
    "eslint-plugin-vue": "^4.5.0",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
-    "iview": "^3.0.0",
    "lodash": "^4.17.10",
    "node-sass": "^4.9.0",
    "nuxt": "^2.0.0",
    "s-ago": "^1.3.0",
    "sass-loader": "^7.0.3",
    "vue": "^2.5.22",
-    "vue-lazyload": "^1.2.6"
+    "vue-lazyload": "^1.2.6",
+    "vuetify": "^1.4.2"
  },
  "scripts": {
    "dev": "NODE_ENV=development node server/index.js",
@@ -1,9 +0,0 @@
-import Vue from 'vue';
-import iView from 'iview';
-import locale from 'iview/dist/locale/en-US';
-
-// add exceptions for these since they conflict with the linting if we use them out of the box
-Vue.component('i-row', iView.Row);
-Vue.component('i-col', iView.Col);
-
-Vue.use(iView, { locale });
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify);
@@ -1456,13 +1456,6 @@ async-limiter@~1.0.0:
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==

-async-validator@^1.10.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.10.1.tgz#41e9b0b9f8e719e6edf946372f018a958c2e70f3"
-  integrity sha512-VLiLKZuJc8VIeAMC3YobVsZov8XPNhbwyIkKjhPW5cFnhZXH+HHJpkE270YMD/6zJIOJXUN/Cq0t3fR7XPwaDQ==
-  dependencies:
-    babel-runtime "6.x"
-
 async@2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/async/-/async-2.4.0.tgz#4990200f18ea5b837c2cc4f8c031a6985c385611"
@@ -1553,7 +1546,7 @@ babel-plugin-transform-vue-jsx@^4.0.1:
  dependencies:
    esutils "^2.0.2"

-babel-runtime@6.x, babel-runtime@^6.18.0:
+babel-runtime@^6.18.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -1584,11 +1577,6 @@ base@^0.11.1:
    mixin-deep "^1.2.0"
    pascalcase "^0.1.1"

-batch-processor@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
-
 bcrypt-pbkdf@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -2815,11 +2803,6 @@ deep-is@~0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=

-deepmerge@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.0.0.tgz#ca7903b34bfa1f8c2eab6779280775a411bfc6ba"
@@ -3022,13 +3005,6 @@ elegant-spinner@^1.0.1:
  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
  integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=

-element-resize-detector@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.0.tgz#63344fd6f4e5ecff6f018d027e17b281fd4fa338"
-  integrity sha512-UmhNB8sIJVZeg56gEjgmMd6p37sCg8j8trVW0LZM7Wzv+kxQ5CnRHcgRKBTB/kFUSn3e7UP59kl2V2U8Du1hmg==
-  dependencies:
-    batch-processor "1.0.0"
-
 elliptic@^6.0.0:
  version "6.4.1"
  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -4578,20 +4554,6 @@ iterall@^1.2.2:
  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
  integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

-iview@^3.0.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/iview/-/iview-3.2.1.tgz#ea578948408a21f4c74c168dba19ee8fa04bd5e0"
-  integrity sha512-CO2fda2QJa6bSSS+Hg5QaPP28auppmS/qyJNE9cgZv8HlVV9Q/7uJ59NQv89ndMZ0uuU8jVCPCDOgO+nHK+QsQ==
-  dependencies:
-    async-validator "^1.10.0"
-    deepmerge "^2.2.1"
-    element-resize-detector "^1.2.0"
-    js-calendar "^1.2.3"
-    lodash.throttle "^4.1.1"
-    popper.js "^1.14.6"
-    tinycolor2 "^1.4.1"
-    v-click-outside-x "^3.5.6"
-
 joi@^13.0.0:
  version "13.7.0"
  resolved "https://registry.yarnpkg.com/joi/-/joi-13.7.0.tgz#cfd85ebfe67e8a1900432400b4d03bbd93fb879f"
@@ -4606,11 +4568,6 @@ js-base64@^2.1.8:
  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
  integrity sha512-wlEBIZ5LP8usDylWbDNhKPEFVFdI5hCHpnVoT/Ysvoi/PRhJENm/Rlh9TvjYB38HFfKZN7OzEbRjmjvLkFw11g==

-js-calendar@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/js-calendar/-/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
-  integrity sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw==
-
 js-cookie@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
@@ -4958,11 +4915,6 @@ lodash.templatesettings@^4.0.0:
  dependencies:
    lodash._reinterpolate "~3.0.0"

-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
 lodash.uniq@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5938,11 +5890,6 @@ pluralize@^7.0.0:
  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==

-popper.js@^1.14.6:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0"
-  integrity sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==
-
 posix-character-classes@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -7915,11 +7862,6 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

-tinycolor2@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
-  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
-
 tmp@0.0.31:
  version "0.0.31"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
@@ -8252,11 +8194,6 @@ uuid@^3.1.0, uuid@^3.3.2:
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==

-v-click-outside-x@^3.5.6:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/v-click-outside-x/-/v-click-outside-x-3.6.0.tgz#7df7382b029fd742da9cde9b26e729f2f20b9880"
-  integrity sha512-5htYDRaZ4HPsTd43VywinIxXjBGlfMauNc013/qZo+Jthv7pGDK4Gdgsmex/Bivc9KJ9X63n3OfSkL74+ucvlQ==
-
 validate-npm-package-license@^3.0.1:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -8384,6 +8321,11 @@ vue@^2.5.17, vue@^2.5.22:
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.22.tgz#3bf88041af08b8539c37b268b70ca79245e9cc30"
  integrity sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g==

+vuetify@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.4.2.tgz#3e136397463d1e980e8ccdd78e4dcfcdfa4c538c"
+  integrity sha512-HnMBBtO5FqTPzr6FXVlxnYulGMrHVlcmBL7SSLE/AQnNbdUpT6Jw9D/Kdw9fbK5mdn7JSWMcfWpPJUrqYTtK1w==
+
 vuex@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"