dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Styling und in Dash einbauen

Browse Source
This commit is contained in:
Georg Reisinger 2019-03-24 17:18:19 +01:00
parent f9fb9c61e3
commit 3ab823a025
3 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
express-server/public/javascripts/user.js
View File

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

32
express-server/views/dash.ejs
View File

@ -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"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
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"
aria-hidden="true">
<div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog"
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"
aria-hidden="true">
<div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog"
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">

13
express-server/views/user.ejs
View File

@ -22,21 +22,28 @@
<!-- 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">
<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="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<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-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
Foto setzten
</button>
</div>