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

color-picker funkt aber noch nicht alle farben und nicht angepasst

Browse Source
This commit is contained in:
InesSuess 2019-01-24 15:14:33 +01:00
parent 5100099790
commit c219364908
4 changed files with 143 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
express-server/public/javascripts/ajax.js
View File

@ -75,7 +75,7 @@ $(document).ready(function() {
data: {
sl_id: globaleAddZwischenID,
name: $("#groupname").val(),
color: $("#groupfarbe").val()
color: $( "input:checked" ).val()
},
success(res){
console.log("groupadd funktioniert");
@ -269,7 +269,7 @@ function Detail(){
`);
for (let i = 0; i < res.groups.length; i++) {
const el = res.groups[i];
$(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:${el.color};">
$(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:#${el.color};">
<div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
<div class="${el.name}">
</div>

95
express-server/public/stylesheets/colorpicker-style.css Normal file
View File

@ -0,0 +1,95 @@
/* @import url(https://fonts.googleapis.com/css?family=Lato:400,300);
* {
box-sizing: border-box;
}
body {
position: absolute;
top: 35%;
left: 35%;
transform: translate(-35%, -35%);
font-family: 'lato';
color: #333;
} */
input[type="radio"] {
display: none;
border: 1px solid black;
}
input[type="radio"]:checked + label span {
transform: scale(1.25);
}
input[type="radio"]:checked + label .farbe1 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe2 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe3 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe4 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe5 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe6 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe7 {
border: 1px solid black;
}
input[type="radio"]:checked + label .violet {
border: 1px solid black;
}
input[type="radio"]:checked + label .purple {
border: 1px solid black;
}
input[type="radio"]:checked + label .pink {
border: 1px solid black;
}
label {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
cursor: pointer;
}
label:hover span {
transform: scale(1.25);
}
label span {
display: block;
width: 100%;
height: 100%;
transition: transform 0.2s ease-in-out;
}
label span.farbe1 {
background: #F44336;
}
label span.farbe2 {
background: #e91e63;
}
label span.farbe3 {
background: #9c27b0;
}
label span.farbe4 {
background: #673ab7;
}
label span.farbe5 {
background: #3F51B5;
}
label span.farbe6 {
background: #2196F3;
}
label span.blue {
background: #03A9F4;
}
label span.violet {
background: #00BCD4;
}
label span.purple {
background: #009688;
}
label span.pink {
background: #4CAF50;
}

4
express-server/public/stylesheets/style.css
View File

@ -57,3 +57,7 @@
margin-top:-40px;
border: 0px;
}
.farbeeen{
margin-left: 19px;
}

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

@ -4,6 +4,7 @@
<title></title>
<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='/bootstrap/dist/css/bootstrap.min.css'>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
@ -64,7 +65,47 @@
<div class="form-group layout">
<label for="exampleInputPassword1">Farbe</label>
<input type="text" class="form-control" id="groupfarbe" placeholder="zB: Red">
<div class="farbeeen">
<input type="radio" name="color" id="farbe1" value="F44336" />
<label for="farbe1"><span class="farbe1 border"></span></label>
<input type="radio" name="color" id="farbe2" value="e91e63" />
<label for="farbe2"><span class="farbe2"></span></label>
<input type="radio" name="color" id="farbe3" value="9c27b0" />
<label for="farbe3"><span class="farbe3"></span></label>
<input type="radio" name="color" id="farbe4" value="673ab7" />
<label for="farbe4"><span class="farbe4"></span></label>
<input type="radio" name="color" id="farbe5" value="3F51B5" />
<label for="farbe5"><span class="farbe5"></span></label>
<input type="radio" name="color" id="farbe6" value="2196F3" />
<label for="farbe6"><span class="farbe6"></span></label>
<!-- <br>
<input type="radio" name="color" id="violet" value="violet" />
<label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="purple" value="purple" />
<label for="purple"><span class="purple"></span></label>
<input type="radio" name="color" id="pink" value="pink" />
<label for="pink"><span class="pink"></span></label>
<input type="radio" name="color" id="blue" value="blue" />
<label for="blue"><span class="blue"></span></label>
<input type="radio" name="color" id="violet" value="violet" />
<label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="purple" value="purple" />
<label for="purple"><span class="purple"></span></label> -->
</div>
</div>
<center><button type="submit" class="btn btn-outline-dark gruppenadd">Hinzufügen</button></center>