Änderungen von adresses_index

app.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="main-container">
     <div class="header">
-      <p>
+      <table id="header-table">
+        <tr>
+          <th>
             <router-link to="/header/help">
-          HILFE
+              Hilfe
             </router-link>
+          </th>
+          <th>
             <router-link to="/header/info">
-          INFO
+              Info
             </router-link>
-      </p>
+          </th>
+          <th> Logout </th>
+        </tr>
+      </table>
     </div>
     <div class="sidenav">
       <div class="sidenav-content">
@@ -33,72 +40,4 @@
 
 <script></script>
 
-<style scoped>
+<style src="@/assets/main.css"></style>
-.main-container {
-  max-width: 70vw;
-  margin: auto;
-}
-
-/* Navigation */
-/* The side navigation menu */
-.sidenav {
-  height: 100%;
-  width: 250px;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  background-color: #a5aeb5;
-  overflow-x: hidden;
-  padding-top: 20px;
-}
-
-.sidenav-content {
-  padding: 15px;
-}
-
-/* The menu title */
-.menu-heading {
-  color: #f1f1f1;
-  width: 200px;
-  height: 75px;
-  font-weight: 600;
-  font-size: 40px;
-}
-
-/* The navigation menu links */
-.sidenav a {
-  text-decoration: none;
-  font-size: 25px;
-  color: #e0e2e3;
-  display: block;
-  transition: 0.3s;
-}
-
-/* When you mouse over the navigation links, change their color */
-.sidenav a:hover {
-  color: #f1f1f1;
-}
-
-/* Position and style the close button (top right corner) */
-.sidenav .closebtn {
-  position: absolute;
-  top: 0;
-  right: 25px;
-  font-size: 36px;
-  margin-left: 50px;
-}
-
-/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
-#main {
-  transition: margin-left .5s;
-  padding: 20px;
-}
-
-/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
-@media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
-}
-
-</style>

assets/main.css

@@ -5,14 +5,35 @@
   font-family: "Times New Roman";
 }
 
-.heading {
+/* Header */
-  background-color: beige;
+
+.header {
+  background-color: #a5aeb5;
+  width: 100%;
+
 }
 
+#header-table th {
+  text-transform: uppercase;
+  text-align: left;
+  padding: 8px;
+  min-width: 20px;
+}
+
+#header-table tr {
+  min-width: 20px;
+}
+
+#header-table td {
+  text-align: left;
+  padding: 8px;
+}
+
+/* main content field */
 .main-container {
-  max-width: 45vw;
+  max-width: 70vw;
   margin: auto;
-  padding-top: 60px;
+  padding-top: 10px;
 }
 
 /* The side navigation menu */
@@ -43,7 +64,6 @@
 
 /* The navigation menu links */
 .sidenav a {
-  padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
   color: #e0e2e3;
@@ -78,6 +98,7 @@
 }
 
 /* Styling for adresses */
+/* search input */
 input {
   display: block;
   width: 350px;
@@ -92,22 +113,46 @@ input {
     rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
-.item {
+/* error message */
-  width: 350px;
-  margin: 0 auto 10px auto;
-  padding: 10px 20px;
-  color: white;
-  border-radius: 5px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-}
-
-.adresses {
-  background-color: #a5aeb5;
-  cursor: pointer;
-}
-
 .error {
   background-color: tomato;
 }
 
+/* Adress Table */
+.adress-content {
+  display: block;
+  width: 100%;
+  margin: 20px auto;
+  padding: 10px 45px;
+  background: white no-repeat 15px center;
+  background-size: 15px 15px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.adresses {
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.adress-th {
+  border-radius: 1px;
+  border-style: groove;
+}
+
+.adress-td {
+  border-radius: 1px;
+  border-style: groove;
+}
+
+
+
+
+
+
+

pages/adresses/adresses_index.vue

@@ -5,29 +5,14 @@
         Willkommen in der Adressverwaltung
       </h1>
     </div>
-    <div class="content">
+    <div class="adress-content">
-      <input v-model="input" type="text" placeholder="Suche...">
+      Text
-      <div v-for="adresses in filteredList()" :key="adresses" class="adresses">
-        <p>{{ adresses }}</p>
-      </div>
-      <div v-if="input&&!filteredList().length" class="item error">
-        <p>Nicht gefunden</p>
-      </div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script>
-import { ref } from 'vue'
 
-const input = ref('')
-const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
-function filteredList () {
-  return adresses.filter(adresses =>
-    adresses.toLowerCase().includes(input.value.toLowerCase())
-  )
-}
 </script>
 
-<style scoped src="@/assets/main.css">
+<style src="@/assets/main.css"></style>
-</style>

pages/index.vue

@@ -6,4 +6,4 @@
   </div>
 </template>
 
-<style scoped src="@/assets/main.css"></style>
+<style src="@/assets/main.css"></style>