Merge pull request #132 from libvue/improve/styling

Improve/styling
libvue · Nov 1, 2023 · 563762b · 563762b
2 parents ed223b0 + d3f3131
commit 563762b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@libvue/core",
-    "version": "0.1.24",
+    "version": "0.1.25",
     "private": false,
     "scripts": {
         "dev": "vite",

diff --git a/src/docs/views/home.vue b/src/docs/views/home.vue
@@ -1,6 +1,21 @@
 <template>
     <div class="splash">
-        <lv-hero v-space-after="4" title="Libvue" description="An opensource collection of vue 3 components.">
+        <lv-hero v-space-after="4" :align="breakpoints.smallerOrEqual.md ? 'center' : 'right'" title="Libvue" description="An opensource collection of vue 3 components.">
+            <template #image>
+                <div class="preview">
+                    <lv-card class="preview__login">
+                        <lv-heading level="3">Welcome Back</lv-heading>
+                        <lv-heading level="6" v-space-after="1" sub>Please login</lv-heading>
+                        <lv-input v-space-after=".5" icon="user" placeholder="Enter your username"></lv-input>
+                        <lv-input v-space-after="1" icon="key" placeholder="Enter your password"></lv-input>
+                        <lv-flex fill>
+                            <lv-button label="Login" color="solid-primary"></lv-button>
+                            <lv-button label="Cancel" color="outline-dimmed-default"></lv-button>
+                        </lv-flex>
+                    </lv-card>
+                    <lv-widget class="preview__chart" title="Followers" amount="2,530" :diff="10" type="chart" :labels="labels" :datasets="followersDatasets"/>
+                </div>
+            </template>
             <template #buttons>
                 <lv-button color="solid-primary" icon="book" @click="$router.push({ path: '/docs/install' })">
                     Documentation
@@ -89,6 +104,8 @@
 </template>
 
 <script>
+import { useBreakpoints } from '../../lib/composables/useBreakpoints';
+
 const install = `
 > npm install --save @libvue/core
 `.trim();
@@ -120,6 +137,12 @@ body {
 `.trim();
 
 export default {
+    setup() {
+        const { breakpoints } = useBreakpoints();
+        return {
+            breakpoints,
+        }
+    },
     data() {
         return {
             install,
@@ -128,6 +151,14 @@ export default {
                 { id: 'main', filename: 'main.js', lang: 'js', code: registerScript },
                 { id: 'scss', filename: 'app.scss', lang: 'css', code: registerScss },
             ],
+            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+            followersDatasets: [
+                {
+                    label: 'Followers',
+                    hue: 24,
+                    data: [55, 12, 20, 34, 7, 4],
+                },
+            ],
         };
     },
     methods: {
@@ -141,8 +172,6 @@ export default {
 <style lang="scss">
 .splash {
     --max-width: 1200px !important;
-}
-.splash {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -153,4 +182,22 @@ export default {
 .feature-card {
     height: 100%;
 }
+
+.preview {
+    position: relative;
+    width: 400px;
+    height: 300px;
+    &__login {
+        width: 70%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+    &__chart {
+        width: 70%;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}
 </style>
diff --git a/src/lib/components/LvHero/LvHero.vue b/src/lib/components/LvHero/LvHero.vue
@@ -79,31 +79,30 @@ export default {
         display: flex;
         flex-shrink: 0;
         gap: 10px;
-        margin-top: auto;
     }
 
     &--align-right {
         #{$self}__image {
             display: flex;
             justify-content: center;
-            margin-left: 1rem;
+            margin-left: 3rem;
             text-align: center;
         }
         #{$self}__content {
-            justify-content: flex-end;
+            justify-content: center;
         }
         #{$self}__description,
         #{$self}__title {
             display: flex;
-            justify-content: flex-end;
-            text-align: right;
+            justify-content: flex-start;
+            text-align: left;
             > * {
                 display: inline;
             }
         }
         #{$self}__buttons {
             display: flex;
-            justify-content: flex-end;
+            justify-content: flex-start;
         }
     }
 
@@ -117,6 +116,20 @@ export default {
         }
         #{$self}__content {
             order: 1;
+            justify-content: center;
+        }
+        #{$self}__description,
+        #{$self}__title {
+            display: flex;
+            justify-content: flex-end;
+            text-align: right;
+            > * {
+                display: inline;
+            }
+        }
+        #{$self}__buttons {
+            display: flex;
+            justify-content: flex-end;
         }
     }
 
@@ -125,7 +138,7 @@ export default {
         justify-content: center;
 
         #{$self}__content {
-            order: 1;
+            order: 0;
             justify-content: center;
         }
         #{$self}__description,
@@ -142,10 +155,10 @@ export default {
             justify-content: center;
         }
         #{$self}__image {
-            order: 0;
+            order: 1;
             display: flex;
             justify-content: center;
-            margin-bottom: 1rem;
+            margin-top: 2rem;
             text-align: center;
         }
     }

diff --git a/src/lib/components/LvLayout/LvLayout.vue b/src/lib/components/LvLayout/LvLayout.vue
@@ -111,7 +111,6 @@ body {
     flex-direction: column;
     background-color: var(--main-background-color);
     width: 100%;
-    overflow: hidden;
 
     &__header {
         z-index: 1;