Styling und in Dash einbauen

express-server/public/javascripts/user.js

@@ -30,6 +30,9 @@ var vue = new Vue({
 
     },
     methods: {
+        backToDash(){
+            window.location.href = "/";
+        },
         fertig() {
             if(!this.image){
                 this.image = this.dataPic

express-server/views/dash.ejs

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel='stylesheet' href='/stylesheets/style.css'>
     <link rel='stylesheet' href='/stylesheets/colorpicker-style.css'>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
-        crossorigin="anonymous">
+        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.min.css'>
     <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
 
@@ -28,9 +28,21 @@
                 <button class="btn btn-outline-light border-secondary sl_add" style="color: black">Shoppingliste
                     Hinzufügen</button>
             </li>
+
+        </ul>
+        <ul class="nav justify-content-end liste">
+            <li class="nav-item">
+                <a class="btn btn-outline-light border-secondary userbearbeiten" href="/user" style="color: black">User
+                    bearbeiten</a>
+            </li>
+            &nbsp;
+            <li class="nav-item">
+                <button class="btn btn-outline-danger logout" style="color: red">Logout</button>
+            </li>
         </ul>
         <!-- <a href="/logout"> -->
-        <button class="btn btn-outline-light border-secondary logout" style="color: black">Logout</button>
+
+
         <!-- </a> -->
     </nav>
     <br>
@@ -60,8 +72,8 @@
 
 
     <!-- Modal Group Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
+    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog"
-        aria-hidden="true">
+        aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div>
@@ -129,8 +141,8 @@
 
 
     <!-- Modal Item Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
+    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog"
-        aria-hidden="true">
+        aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div class="inhalt">
@@ -145,7 +157,8 @@
 
                     <div class="form-group layout">
                         <label for="Anzahl-example">Anzahl</label>
-                        <input type="number" class="form-control" id="inputGroupSelect01" placeholder="zB: 2" maxlength="3">
+                        <input type="number" class="form-control" id="inputGroupSelect01" placeholder="zB: 2"
+                            maxlength="3">
                     </div>
 
                 </div>
@@ -170,7 +183,8 @@
 
                     <div class="form-group layout">
                         <label for="exampleInputPassword1">Beschreibung</label>
-                        <input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="zB: Großeinkauf bei Billa">
+                        <input type="text" class="form-control" id="einkaufslistenbeschreibung"
+                            placeholder="zB: Großeinkauf bei Billa">
                     </div>
 
                     <div class="form-group layout">

express-server/views/user.ejs

@@ -22,25 +22,32 @@
     <!-- Square card -->
     <center>
       <div class="demo-card-image mdl-card mdl-shadow--2dp">
+          <button @click="backToDash" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
+              zu SmartShopper</button>
         <img v-bind:src="this.dataPic" width="100%" />
-        <div class="mdl-card__title mdl-card--expand"></div>
+        <div class="mdl-card__title mdl-card--expand">
+            
+        </div>
         <div class="mdl-card__actions">
           <label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
         </div>
         <div class="mdl-card__actions mdl-card--border">
           <div v-if="!showUploadButtons">
-            <input type="file" @change="onFileChange">
+              <Label class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
+                  Foto ändern
+                  <input type="file" @change="onFileChange">
+                </label>
             <button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
               Fertig
             </button>
           </div>
           <div v-else>
-            <button @click="removeImage" class="mdl-button mdl-button--raised mdl-button--accent">Remove image</button>
+            <button @click="removeImage" class="mdl-button mdl-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove image</button>
-            <button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+            <button @click="fotoChoose" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
               Foto setzten
             </button>
           </div>
-
+          
         </div>
       </div>
     </center>