new push
nooahe
parent
2ba51e0c80
commit
e8be1ed470
|
|
@ -1,10 +1,14 @@
|
|||
|
||||
|
||||
body, html {
|
||||
|
||||
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -19,8 +23,36 @@ h1 {
|
|||
#overlay{
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
height: 90vh;
|
||||
height: 80vh;
|
||||
width: 100vw;
|
||||
background: wheat;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
#overlay_container{
|
||||
width: 95vw;
|
||||
margin: 2.5vw;
|
||||
}
|
||||
|
||||
form{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input{
|
||||
background-color: #e0824a;
|
||||
display: block;
|
||||
width: 98%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 18pt;
|
||||
margin-bottom: 10px;
|
||||
padding: 4px 0 4px 2%;
|
||||
|
||||
}
|
||||
|
||||
input#deineIdee{
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +78,7 @@ h1 {
|
|||
|
||||
.MapControls {
|
||||
height: 300px;
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -54,9 +86,6 @@ h1 {
|
|||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ dbVerbindungErzeugen()
|
|||
<div id="overlay" class="hidden">
|
||||
<img src="/images/cancel.png" id="cancel">
|
||||
|
||||
<div id="idee">
|
||||
<div id="overlay_container">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="image-preview" id="image-upload">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,13 @@
|
|||
let localLikes = {}
|
||||
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
// We execute the same script as before
|
||||
let vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
|
|
@ -59,7 +66,7 @@ function openOverlay(){
|
|||
$("#overlay").removeClass("hidden").addClass("show")
|
||||
|
||||
$("#cancel").click(function() {
|
||||
document.getElementById("idee").innerHTML = "";
|
||||
document.getElementById("overlay_container").innerHTML = "";
|
||||
$("#overlay").removeClass("show").addClass("hidden")
|
||||
|
||||
})
|
||||
|
|
@ -111,27 +118,27 @@ function chageLocalStorrage(typ, id, addRemove){
|
|||
|
||||
function ideeAnzeigen(data) {
|
||||
|
||||
document.getElementById("idee").innerHTML = "";
|
||||
document.getElementById("overlay_container").innerHTML = "";
|
||||
document.querySelectorAll('.loeschen').forEach(e => e.remove());
|
||||
let titelErstellen = document.createElement("h1");
|
||||
let titelInhalt = document.createTextNode(data.titel);
|
||||
titelErstellen.appendChild(titelInhalt);
|
||||
titelErstellen.classList.add("loeschen");
|
||||
document.getElementById('idee').appendChild(titelErstellen);
|
||||
document.getElementById('overlay_container').appendChild(titelErstellen);
|
||||
|
||||
let inhaltErstellen = document.createElement("p");
|
||||
let inhaltInhalt = document.createTextNode(data.inhalt);
|
||||
inhaltErstellen.appendChild(inhaltInhalt);
|
||||
inhaltErstellen.classList.add("loeschen");
|
||||
document.getElementById('idee').appendChild(inhaltErstellen);
|
||||
document.getElementById('overlay_container').appendChild(inhaltErstellen);
|
||||
|
||||
let likesErstellen = document.createElement("p");
|
||||
let likes = document.createTextNode(data.likes + " Likes");
|
||||
likesErstellen.appendChild(likes);
|
||||
likesErstellen.classList.add("likeDisplay");
|
||||
document.getElementById('idee').appendChild(likesErstellen);
|
||||
document.getElementById('overlay_container').appendChild(likesErstellen);
|
||||
|
||||
if(data.bild != null){
|
||||
if(data.bild != null && data.bild != undefined){
|
||||
let bildContainer = $("<div>").addClass("ImgContainer");
|
||||
let imgUrlArr = JSON.parse(data.bild);
|
||||
for (let i = 0; i < imgUrlArr.length; i++) {
|
||||
|
|
@ -141,7 +148,7 @@ function ideeAnzeigen(data) {
|
|||
|
||||
}
|
||||
|
||||
bildContainer.prependTo($("#idee"))
|
||||
bildContainer.prependTo($("#overlay_container"))
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -171,7 +178,7 @@ function ideeAnzeigen(data) {
|
|||
ideeLike.classList.add("unliked");
|
||||
}
|
||||
|
||||
document.getElementById('idee').appendChild(ideeLike);
|
||||
document.getElementById('overlay_container').appendChild(ideeLike);
|
||||
|
||||
|
||||
|
||||
|
|
@ -197,7 +204,7 @@ function ideeAnzeigen(data) {
|
|||
|
||||
let kommentare_container = document.createElement("div")
|
||||
kommentare_container.setAttribute("id", "kommentare_container");
|
||||
document.getElementById('idee').appendChild(kommentare_container);
|
||||
document.getElementById('overlay_container').appendChild(kommentare_container);
|
||||
|
||||
|
||||
|
||||
|
|
@ -294,7 +301,7 @@ function kommentarErstellen(idee_id) {
|
|||
formular.setAttribute("action", "../system/kommentarSpeichern.php");
|
||||
formular.setAttribute("method", "post");
|
||||
formular.setAttribute("id", "kommentarform");
|
||||
document.getElementById("idee").appendChild(formular);
|
||||
document.getElementById("overlay_container").appendChild(formular);
|
||||
|
||||
let text_label = document.createElement("label");
|
||||
text_label.setAttribute("for", "text");
|
||||
|
|
@ -338,7 +345,7 @@ function kommentarErstellen(idee_id) {
|
|||
// Idee formular erstellen
|
||||
function formularErstellen(koordianten) {
|
||||
|
||||
document.getElementById("idee").innerHTML = "";
|
||||
document.getElementById("overlay_container").innerHTML = "";
|
||||
|
||||
|
||||
let formular = document.createElement("form");
|
||||
|
|
@ -346,7 +353,7 @@ function formularErstellen(koordianten) {
|
|||
formular.setAttribute("action", "../system/ideeSpeichern.php");
|
||||
formular.setAttribute("method", "post");
|
||||
formular.setAttribute("id", "form");
|
||||
document.getElementById("idee").appendChild(formular);
|
||||
document.getElementById("overlay_container").appendChild(formular);
|
||||
|
||||
let koordinaten_lng = document.createElement("input");
|
||||
koordinaten_lng.setAttribute("type", "hidden");
|
||||
|
|
@ -358,21 +365,20 @@ function formularErstellen(koordianten) {
|
|||
koordinaten_lat.setAttribute("name", "lat")
|
||||
koordinaten_lat.value = koordianten.toJSON().lat;
|
||||
|
||||
let titel_label = document.createElement("label");
|
||||
titel_label.setAttribute("for", "titel");
|
||||
titel_label.innerHTML = "Titel:";
|
||||
|
||||
|
||||
let titel_input = document.createElement("input");
|
||||
titel_input.setAttribute("type", "text");
|
||||
titel_input.setAttribute("name", "titel")
|
||||
titel_input.setAttribute("id", "deineIdee");
|
||||
titel_input.setAttribute("name", "titel");
|
||||
titel_input.setAttribute("placeholder", "titel");
|
||||
|
||||
|
||||
let text_label = document.createElement("label");
|
||||
text_label.setAttribute("for", "text");
|
||||
text_label.innerHTML = "Text:";
|
||||
|
||||
let text_input = document.createElement("input");
|
||||
text_input.setAttribute("type", "text");
|
||||
text_input.setAttribute("name", "text")
|
||||
text_input.setAttribute("type", "textarea");
|
||||
text_input.setAttribute("name", "text");
|
||||
text_input.setAttribute("placeholder", "Deine Idee...");
|
||||
|
||||
let image_links = document.createElement("input");
|
||||
image_links.setAttribute("type", "hidden");
|
||||
|
|
@ -383,16 +389,18 @@ function formularErstellen(koordianten) {
|
|||
submit_input.setAttribute("value", "Formular Absenden");
|
||||
|
||||
|
||||
document.getElementById("form").appendChild(titel_label);
|
||||
document.getElementById("form").appendChild(titel_input);
|
||||
document.getElementById("form").appendChild(text_label);
|
||||
document.getElementById("form").appendChild(text_input);
|
||||
document.getElementById("form").appendChild(submit_input);
|
||||
document.getElementById("form").appendChild(koordinaten_lat);
|
||||
document.getElementById("form").appendChild(koordinaten_lng);
|
||||
document.getElementById("form").appendChild(image_links);
|
||||
|
||||
document.getElementById("image-upload").innerHTML = '<input type="hidden" role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-public- data-clearable data-tabs="file camera" data-image-shrink: "1024x1024" data-system-dialog="false"/>';
|
||||
let imageUpload = $('<div class="image-preview" id="image-upload">')
|
||||
imageUpload.html('<input type="hidden" role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-public- data-clearable data-tabs="file camera" data-image-shrink: "1024x1024" data-system-dialog="false"/>')
|
||||
imageUpload.appendTo("#overlay_container");
|
||||
|
||||
|
||||
|
||||
// get a widget reference
|
||||
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});
|
||||
|
|
|
|||
Loading…
Reference in New Issue