From 9a9dffed2c4538a8bd8695b675cf3f2e2556cfbf Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Thu, 8 Jun 2023 21:25:08 +0200
Subject: [PATCH] Design-Anpassung und Funktionstest

---
 components/Header.vue |   2 +-
 components/Login.vue  |   9 +---
 components/Typ.vue    | 102 ++++++++++++++++++++++++------------------
 layouts/default.vue   |  10 ++++-
 pages/typ.vue         |   1 -
 5 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index 796e05d..e2d3b5e 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -6,7 +6,7 @@
 <!-- Navbar -->
 <nav   style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light">
   <!-- Container wrapper -->
-  <div class="container">
+  <div class="container-xl">
     <!-- Toggle button -->
     <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
       data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
diff --git a/components/Login.vue b/components/Login.vue
index 2726936..ece7e11 100644
--- a/components/Login.vue
+++ b/components/Login.vue
@@ -1,9 +1,5 @@
 <template>
-    <div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');">
-    <!-- Mask -->
-        <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
-            <div class="container d-flex justify-content-center align-items-center h-100">
-                <div >
+    <div >
                     <ClientOnly>
                     <MDBCard>
                         <MDBCardBody>
@@ -81,10 +77,7 @@
                         </MDBCardBody>
                     </MDBCard> 
                 </ClientOnly>
-                </div>
             </div>
-        </div>
-    </div>
     
     
     
diff --git a/components/Typ.vue b/components/Typ.vue
index 0dd5da4..5765052 100644
--- a/components/Typ.vue
+++ b/components/Typ.vue
@@ -1,55 +1,69 @@
 <template>
-    <div>
-      <div style="margin-bottom: 20px;">
+
+      <MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;">
+        <h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3>
         <ClientOnly>
-        <MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm">
-          <MDBCol md="12">
-            <MDBInput
-                                        label="Description"
-                                        v-model="bezeichnung"
-                                        invalidFeedback="Please provide a description of the clothing-type"
-                                        validFeedback="Looks good!"
-                                        required
-                                    />
-          </MDBCol>
+          <MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
+            <MDBCol md="4">
+              <p>Image Galery</p>
+            </MDBCol>
+            <MDBCol md="8">
+              <MDBRow style="margin-bottom:20px;"> 
+                <MDBCol md="12">
+                  <MDBInput
+                                          label="Description *"
+                                          v-model="bezeichnung"
+                                          invalidFeedback="Please provide a description of the clothing-type"
+                                          validFeedback="Looks good!"
+                                          required
+                                      />
+                </MDBCol>
+              </MDBRow> 
+              <MDBRow style="margin-bottom:40px;">
+                <MDBCol md="12">
+                  <MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn>
+                  <MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn>
+                  <MDBBtn  color="danger" @click="onDelete()">DELETE</MDBBtn>
+                  <MDBBtn type="reset" color="dark">Reset</MDBBtn>
+                </MDBCol>
+              </MDBRow> 
+            </MDBCol>
+          </MDBRow>
+              <!--<MDBContainer class="bg-white rounded-4">-->
+                <MDBRow style="margin-bottom:40px;">
+                  <MDBCol md="12">
+                    <MDBTable striped hover bordered sm class="rounded-4">
+                      <thead>
+                        <tr>
+                          <th scope="col">#</th>
+                          <th scope="col">Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="t in typen">
+                          <td>{{ t.id }}</td>
+                          <td>{{ t.bezeichnung }}</td>
+                        </tr>
+                      </tbody>
+                    </MDBTable>
+                  </MDBCol>
+                </MDBRow> 
+            <!--</MDBContainer>-->
+
           
-          <MDBBtn variant="primary" @click="onSubmit()">Neu eintragen</MDBBtn>
-          <b-button  variant="secondary" @click="onUpdate()">Aktualisieren</b-button>
-          <b-button  variant="danger" @click="onDelete()">Löschen</b-button>
-          <b-button type="reset" variant="danger">Reset</b-button>
-        </MDBRow>
-      </ClientOnly>
-      </div>
-      <div>
-        <ClientOnly>
-        <MDBTable striped hover bordered>
-            <thead>
-              <tr>
-                <th scope="col">#</th>
-                <th scope="col">Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="t in typen">
-                <td>{{ t.id }}</td>
-                <td>{{ t.bezeichnung }}</td>
-              </tr>
-            </tbody>
-        </MDBTable>
-        <template #fallback>
-        <!-- this will be rendered on server side -->
-        <p>Loading comments...</p>
-      </template>
-      </ClientOnly>
-      </div>
-    </div>
+          <template #fallback>
+            <!-- this will be rendered on server side -->
+            <p>Loading comments...</p>
+          </template>
+        </ClientOnly>
+      </MDBContainer>
   </template>
   
   <script setup lang="ts">
-    import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit";
+    import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer } from "mdb-vue-ui-kit";
     import { ref } from "vue";
 
-    const bezeichnung = ref("e.g. Shirt");
+    const bezeichnung = ref("");
      
     
     const checkForm = (event: Event) => {
diff --git a/layouts/default.vue b/layouts/default.vue
index 3e7b706..d2f3505 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,14 @@
 <template>
     <div>
         <Header />
-        <slot />
+            <div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');">
+                <!-- Mask -->
+                <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
+                    <div class="container justify-content-center align-items-center h-100">
+                    
+                        <slot />
+                    </div>
+                </div>
+            </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/typ.vue b/pages/typ.vue
index 9285b53..fc56ef1 100644
--- a/pages/typ.vue
+++ b/pages/typ.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-      <h1>Typ</h1>
       <Typ />
     </div>
   </template>