From 56edcda3140e28ea6ade0c2f1760106592ed983b Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Sun, 7 Aug 2022 20:06:24 +0800
Subject: feat: implement cards ui

Still in an early stage now, further improvements needed.
---
 src/App.vue                 |  18 +++---
 src/components/MainPage.vue | 130 ++++----------------------------------------
 src/components/SubCard.vue  |  20 +++++++
 src/plugins/vuetify.js      |   6 +-
 4 files changed, 44 insertions(+), 130 deletions(-)
 create mode 100644 src/components/SubCard.vue

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 88ad076..8c80550 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,9 @@
 <template>
-  <v-app>
+  <v-app :style="bg">
     <v-main>
-      <v-app-bar>
-        <template v-slot:prepend>
-          <v-app-bar-nav-icon></v-app-bar-nav-icon>
-        </template>
-        <v-app-bar-title>Otonashi</v-app-bar-title>
-      </v-app-bar>
-      <MainPage />
+      <v-container>
+        <MainPage class="float-end w-50" />
+      </v-container>
     </v-main>
   </v-app>
 </template>
@@ -23,7 +19,11 @@ export default {
   },
 
   data: () => ({
-    //
+    bg: {
+      backgroundColor: "grey",
+      // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
+      backgroundPosition: "center",
+    },
   }),
 };
 </script>
diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
index 4694510..97dad53 100644
--- a/src/components/MainPage.vue
+++ b/src/components/MainPage.vue
@@ -1,131 +1,21 @@
 <template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to the Vuetify 3 Beta
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br />please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank"
-            >Discord Community</a
-          >
-        </p>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">What's next?</h2>
-
-        <v-row justify="center">
-          <v-btn
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </v-btn>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">Important Links</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col class="mb-5" cols="12">
-        <h2 class="headline font-weight-bold mb-5">Ecosystem</h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
+  <div class="d-flex align-end justify-start flex-row-reverse flex-wrap">
+    <SubCard class="ma-2 pa-2" v-for="n in 6" :key="n" />
+  </div>
 </template>
 
 <script>
+import SubCard from "./SubCard.vue";
+
 export default {
   name: "MainPage",
 
+  components: {
+    SubCard,
+  },
+
   data: () => ({
-    ecosystem: [
-      {
-        text: "vuetify-loader",
-        href: "https://github.com/vuetifyjs/vuetify-loader",
-      },
-      {
-        text: "github",
-        href: "https://github.com/vuetifyjs/vuetify",
-      },
-      {
-        text: "awesome-vuetify",
-        href: "https://github.com/vuetifyjs/awesome-vuetify",
-      },
-    ],
-    importantLinks: [
-      {
-        text: "Chat",
-        href: "https://community.vuetifyjs.com",
-      },
-      {
-        text: "Made with Vuetify",
-        href: "https://madewithvuejs.com/vuetify",
-      },
-      {
-        text: "Twitter",
-        href: "https://twitter.com/vuetifyjs",
-      },
-      {
-        text: "Articles",
-        href: "https://medium.com/vuetify",
-      },
-    ],
-    whatsNext: [
-      {
-        text: "Explore components",
-        href: "https://vuetifyjs.com",
-      },
-      {
-        text: "Roadmap",
-        href: "https://vuetifyjs.com/introduction/roadmap/",
-      },
-      {
-        text: "Frequently Asked Questions",
-        href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
-      },
-    ],
+    //
   }),
 };
 </script>
diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue
new file mode 100644
index 0000000..5b611f6
--- /dev/null
+++ b/src/components/SubCard.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-card variant="outlined">
+    <v-card-item>
+      <v-card-title>{{ title }}</v-card-title>
+      <div class="text-caption">
+        {{ content }}
+      </div>
+    </v-card-item>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "SubCard",
+  data: () => ({
+    title: "Default Title",
+    content: "Bruh",
+  }),
+};
+</script>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 2cb3bef..f479d43 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -7,5 +7,9 @@ import * as directives from "vuetify/directives";
 // Vuetify
 import { createVuetify } from "vuetify";
 
-export default createVuetify({ components, directives });
+export default createVuetify({
+  theme: { defaultTheme: "dark" },
+  components,
+  directives,
+});
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-- 
cgit v1.2.3