Create the design in the app.vue file

138b47c2 · Giildo · 3df4fc50 · 138b47c2 · 138b47c2 · 138b47c2
Commit 138b47c2 authored 2 years ago by Giildo
--- a/index.html
+++ b/index.html
@@ -4,7 +4,13 @@
  <meta charset="UTF-8"/>
  <link rel="icon" href="/favicon.ico"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Vite App</title>
+  <title>Tuto DIP</title>
+  <link rel="stylesheet"
+        href="https://s3.unistra.fr/master/common/assets/fonts/unistra-symbol/1.0.4/css/unistra-symbol.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&amp;Signature=lfTwAVnRXjgZc9ryRpAcWhiMbCA%3D&amp;Expires=1876298241"/>
+  <link rel="stylesheet"
+        href="https://s3.unistra.fr/master/common/assets/fonts/unistra-font/1.0.0/css/unistra-font.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&amp;Signature=Ros22u4Tp0Dy106qr0rRkGBPoJM%3D&amp;Expires=1870971370"/>
+  <link rel="stylesheet"
+        href="https://s3.unistra.fr/master/common/assets/fonts/nova-icons/1.0.2/css/nova-icons.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&amp;Signature=hFFKhRhE9%2B1xVyIi%2F%2BQPD%2BftVbk%3D&amp;Expires=1887617035"/>
 </head>
 <body>
 <div id="app"></div>

--- a/src/App.vue
+++ b/src/App.vue
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
+<script lang="ts" setup>
+import { RouterView } from 'vue-router'</script>

 <template>
-  <section>
-    <RouterView/>
-  </section>
+  <QLayout view="hHh lpR fff">
+    <QHeader bordered class="bg-primary text-white" height-hint="98" reveal>
+      <nav>
+        <ul>
+          <li>
+            <QBtn
+              :to="{name: 'Home'}"
+              flat
+              icon="mdi-home"
+            />
+          </li>
+        </ul>
+      </nav>
+    </QHeader>
+
+    <QPageContainer>
+      <RouterView/>
+    </QPageContainer>
+
+    <QFooter bordered class="bg-grey-8 text-white">
+      <div>
+        <span>Direction du Numérique</span>
+        &nbsp;-&nbsp;
+        <span>DIP</span>
+        &nbsp;- 2022 - Université de Strasbourg - Tous droits réservés
+      </div>
+    </QFooter>
+
+  </QLayout>
 </template>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "assets/style/container";
+
+* {
+  font-family: "Unistra C", "Unistra A", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Unistra A", sans-serif;
+}
+
+.q-header {
+  height: 50px;
+
+  > nav {
+    height: 100%;
+    @include container(false);
+
+    ul {
+      height: 100%;
+      padding: 0;
+      margin: 0;
+
+      li {
+        list-style: none;
+        height: 100%;
+
+        a {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.q-footer {
+  height: 50px;
+
+  > div {
+    font-size: 1rem;
+    line-height: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+
+    > span {
+      font-weight: bold;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+html {
+  font-size: 20px;
+}
+</style>
--- a/src/assets/style/_container.scss
+++ b/src/assets/style/_container.scss
+$xs: 768px;
+$sm: 1024px;
+$md: 1440px;
+$lg: 1920px;
+
+@mixin container($withPadding) {
+  margin: 0 auto;
+  width: 100%;
+
+  @if ($withPadding) {
+    padding: 1rem;
+  }
+
+  @media all and (min-width: $sm) {
+    width: $sm;
+  }
+  @media all and (min-width: $md) {
+    width: $md;
+  }
+  @media all and (min-width: $lg) {
+    width: $lg;
+  }
+
+  > section {
+    padding-bottom: 2rem;
+  }
+}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,7 @@ const router = createRouter({
  routes: [
    {
      path: '/',
-      name: 'home',
+      name: 'Home',
      component: import('@/views/HomeView.vue'),
    },
  ],

--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
 <template>
-  <main/>
+  <section>
+    <h1>Home page</h1>
+  </section>
 </template>
+
+<style lang="scss" scoped>
+section {
+}
+</style>