simplyfied popup texts as function

This commit is contained in:
Krehan Tim 2018-11-09 15:17:00 +01:00
parent 3fceb49e47
commit 5af2219bac
5 changed files with 47 additions and 40 deletions

5
bin/index.js Normal file
View file

@ -0,0 +1,5 @@
function infoPopUp(infotext){
$("#info-popup-text").text(infotext);
$("#info-popup-text").css("animation", "none");
setTimeout(function(){$("#info-popup-text").css("animation", "fade 4s linear");}, 100);
}

View file

@ -9,14 +9,8 @@ $(document).ready(function(){
id: dataId, id: dataId,
status: $(this).prop("checked") status: $(this).prop("checked")
}, },
success: function(){ success: function(){infoPopUp("SAVED!");},
$("#saved font").css("animation", "none"); error: function(){infoPopUp("Netzwerkfehler! Bitte aktualisieren.");}
setTimeout(function(){$("#saved font").css("animation", "fade 4s linear");}, 100);
},
error: function(){
$("#error font").css("animation", "none");
setTimeout(function(){$("#error font").css("animation", "fade 6s linear");}, 100);
}
}); });
if($(this).prop("checked")){$("[data-id='"+dataId+"']").addClass("checked");} if($(this).prop("checked")){$("[data-id='"+dataId+"']").addClass("checked");}
else{$("[data-id='"+dataId+"']").removeClass("checked");} else{$("[data-id='"+dataId+"']").removeClass("checked");}

View file

@ -35,5 +35,3 @@
?> ?>
</div> </div>
</form> </form>
<div id="saved"><font>SAVED!</font></div>
<div id="error"><font>Netzwerkfehler!<br /> Bitte aktualisieren.</font></div>

View file

@ -92,33 +92,3 @@ border-left: none;
.list_row.odd.checked { .list_row.odd.checked {
border-left: 3px solid #888; border-left: 3px solid #888;
} }
#saved, #error {
pointer-events: none;
position: fixed;
display: flex;
justify-content: center;
bottom: 2%;
margin: 0;
left: 0;
width: 100%;
}
#saved font, #error font {
color: #ffffff;
background-color: #000000;
padding: .1em .5em .2em;
border-radius: 50px;
opacity: 0;
}
#error font {
padding: .1em 1em .2em;
}
@keyframes fade {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}

View file

@ -65,7 +65,47 @@ h3 {
cursor: pointer; cursor: pointer;
} }
.button:hover {
background-color: #4CAFFF;
}
.button-disabled {
background-color: grey;
cursor: not-allowed;
}
.button-disabled:hover {
background-color: grey;
}
.hover:hover { .hover:hover {
background-color: #4CAF50; background-color: #4CAF50;
cursor: pointer; cursor: pointer;
} }
#info-popup {
pointer-events: none;
position: fixed;
display: flex;
justify-content: center;
bottom: 2%;
margin: 0;
left: 0;
width: 100%;
}
#info-popup-text {
color: #ffffff;
background-color: #000000;
padding: .1em .5em .2em;
border-radius: 50px;
opacity: 0;
}
@keyframes fade {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}