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

User bearbeiten Fix

Browse Source
This commit is contained in:
Georg Reisinger 2019-03-21 21:23:44 +01:00
parent ecbfabc0e8
commit 524bf627e8
2 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,9 @@ var vue = new Vue({
methods: {
updateUser(){
},
fotoChoose(){
},
getPicUrl(){
return this.picUrl;

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

@ -18,15 +18,7 @@
<body>
<div id="vue-app">
<!-- Square card -->
<style>
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
}
</style>
<div class="demo-card-image mdl-card mdl-shadow--2dp">
<img v-bind:src="this.dataPic" width="100%"/>
<div class="mdl-card__title mdl-card--expand"></div>
@ -34,15 +26,53 @@
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Ändere Foto
</a>
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Foto setzten
</button>
<button @click="updateUser" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Fertig
</a>
</button>
</div>
</div>
</div>
<style lang="scss">
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
}
.dropbox {
outline: 2px dashed grey; /* the dash box */
outline-offset: -10px;
background: lightcyan;
color: dimgray;
padding: 10px 10px;
min-height: 200px; /* minimum height */
position: relative;
cursor: pointer;
}
.input-file {
opacity: 0; /* invisible but it's there! */
width: 100%;
height: 200px;
position: absolute;
cursor: pointer;
}
.dropbox:hover {
background: lightblue; /* when mouse over to the drop zone, change color */
}
.dropbox p {
font-size: 1.2em;
text-align: center;
padding: 50px 0;
}
</style>
<script src="javascripts/user.js"></script>
</body>
</html>