feat: mock of the UI

assets/css/vuetifycardwrapfix.css

@@ -0,0 +1,3 @@
+.v-card__text, .v-card__title {
+  word-break: normal !important;
+}

components/itemCard.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-card nuxt :to="'/posts/' + id">
+    <v-img :src="image" max-height="200px"></v-img>
+    <v-card-title>Lorem Ipsum</v-card-title>
+    <v-card-subtitle> <v-img></v-img> przez Lorem Ipsum </v-card-subtitle>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    image: String,
+    id: Number,
+  },
+}
+</script>

layouts/default.vue

@@ -1,63 +1,42 @@
 <template>
-  <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar :clipped-left="clipped" fixed app>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn icon @click.stop="miniVariant = !miniVariant">
-        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="clipped = !clipped">
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="fixed = !fixed">
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
+  <v-app>
+    <v-app-bar color="primary" fixed app>
+      <v-toolbar-title class="white--text"> Fundacyjni </v-toolbar-title>
       <v-spacer />
-      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
-        <v-icon>mdi-menu</v-icon>
+      <v-btn
+        v-for="item in items"
+        :key="item.title"
+        class="ml-5 d-none d-md-flex"
+        nuxt
+        :to="item.to"
+      >
+        <v-icon left>{{ item.icon }}</v-icon>
+        {{ item.title }}
+      </v-btn>
+      <v-btn class="ml-5 d-none d-md-flex" nuxt to="/login">
+        <v-icon left>mdi-login</v-icon>
+        Zaloguj się
       </v-btn>
     </v-app-bar>
-    <v-main>
-      <v-container>
+    <v-main style="background: #f5f5f5">
+      <v-container style="height: 100%">
         <nuxt />
       </v-container>
     </v-main>
-    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light> mdi-repeat </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer :absolute="!fixed" app>
-      <span>&copy; {{ new Date().getFullYear() }}</span>
+    <v-bottom-navigation
+      class="d-sm-flex d-md-none"
+      app
+      background-color="primary"
+      dark
+    >
+      <v-btn v-for="item in items" :key="item.title" nuxt :to="item.to">
+        <span>{{ item.title }}</span>
+
+        <v-icon>{{ item.icon }}</v-icon>
+      </v-btn>
+    </v-bottom-navigation>
+    <v-footer color="primary">
+      <span class="white--text">&copy; {{ new Date().getFullYear() }}</span>
     </v-footer>
   </v-app>
 </template>
@@ -66,25 +45,23 @@
 export default {
   data() {
     return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
       items: [
         {
           icon: 'mdi-apps',
-          title: 'Welcome',
+          title: 'Strona główna',
           to: '/',
         },
         {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire',
+          icon: 'mdi-gift',
+          title: 'Podaruj rzeczy',
+          to: '/gifting',
+        },
+        {
+          icon: 'mdi-hand-heart',
+          title: 'Podaruj pieniądze',
+          to: '/fundraising',
         },
       ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: 'Vuetify.js',
     }
   },
 }

nuxt.config.js

@@ -1,5 +1,3 @@
-import colors from 'vuetify/es5/util/colors'
-
 export default {
   // Target: https://go.nuxtjs.dev/config-target
   target: 'static',
@@ -17,7 +15,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [],
+  css: ['~/assets/css/vuetifycardwrapfix'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],
@@ -50,18 +48,26 @@ export default {
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ['~/assets/css/variables.scss'],
     theme: {
-      dark: true,
       themes: {
+        light: {
+          primary: '#6680e6',
+          accent: '#b3ffff',
+          secondary: '#66b3e6',
+          info: '#66b3e6',
+          warning: '#ffc107',
+          error: '#dd2c00',
+          success: '#00e676',
+        },
         dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3,
+          primary: '#1976d2',
+          accent: '#424242',
+          secondary: '#ff8f00',
+          info: '#26a69a',
+          warning: '#ffc107',
+          error: '#dd2c00',
+          success: '#00e676',
         },
       },
     },

pages/fundraising.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <v-row justify="center">
+      <v-col cols="12">
+        <v-text-field
+          v-model="searchQuery"
+          append-outer-icon="mdi-magnify"
+          filled
+          clear-icon="mdi-close-circle"
+          clearable
+          label="Wyszukaj"
+          type="text"
+          @click:append-outer="sendQuery"
+          @click:clear="clearQuery"
+        />
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-col v-for="post in posts" :key="post.id" cols="12" md="6">
+        <item-card image="https://picsum.photos/1000" class="mb-5" />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      posts: [
+        {
+          id: 1,
+        },
+        {
+          id: 2,
+        },
+        {
+          id: 3,
+        },
+        {
+          id: 4,
+        },
+        {
+          id: 5,
+        },
+      ],
+      searchQuery: '',
+    }
+  },
+  methods: {
+    sendQuery() {
+      this.clearQuery()
+    },
+    clearQuery() {
+      this.searchQuery = ''
+    },
+  },
+}
+</script>