eckertnoah
/
spinn_mit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new push

master
nooahe 2022-11-16 10:32:30 +01:00
parent 2ba51e0c80
commit e8be1ed470
3 changed files with 72 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
css/style.css
View File

@ -1,10 +1,14 @@
body, html { body, html {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: 100%;
} }
@ -19,11 +23,39 @@ h1 {
#overlay{ #overlay{
position: absolute; position: absolute;
top: 10vh; top: 10vh;
height: 90vh; height: 80vh;
width: 100vw;
background: wheat; 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{
}
.hidden{ .hidden{
display: none; display: none;
} }
@ -46,7 +78,7 @@ h1 {
.MapControls { .MapControls {
height: 300px; height: 300px;
width: 100px; width: 80px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -54,9 +86,6 @@ h1 {
display: flex; display: flex;
justify-content: end; justify-content: end;
} }

6
index.php
View File

@ -40,11 +40,11 @@ dbVerbindungErzeugen()
<div id="overlay" class="hidden"> <div id="overlay" class="hidden">
<img src="/images/cancel.png" id="cancel"> <img src="/images/cancel.png" id="cancel">
<div id="idee"> <div id="overlay_container">
</div> </div>
<div class="image-preview" id="image-upload">
</div> </div>
</div> </div>

58
js/functions.js
View File

@ -7,6 +7,13 @@
let localLikes = {} 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(){ $(document).ready(function(){
@ -59,7 +66,7 @@ function openOverlay(){
$("#overlay").removeClass("hidden").addClass("show") $("#overlay").removeClass("hidden").addClass("show")
$("#cancel").click(function() { $("#cancel").click(function() {
document.getElementById("idee").innerHTML = ""; document.getElementById("overlay_container").innerHTML = "";
$("#overlay").removeClass("show").addClass("hidden") $("#overlay").removeClass("show").addClass("hidden")
}) })
@ -111,27 +118,27 @@ function chageLocalStorrage(typ, id, addRemove){
function ideeAnzeigen(data) { function ideeAnzeigen(data) {
document.getElementById("idee").innerHTML = ""; document.getElementById("overlay_container").innerHTML = "";
document.querySelectorAll('.loeschen').forEach(e => e.remove()); document.querySelectorAll('.loeschen').forEach(e => e.remove());
let titelErstellen = document.createElement("h1"); let titelErstellen = document.createElement("h1");
let titelInhalt = document.createTextNode(data.titel); let titelInhalt = document.createTextNode(data.titel);
titelErstellen.appendChild(titelInhalt); titelErstellen.appendChild(titelInhalt);
titelErstellen.classList.add("loeschen"); titelErstellen.classList.add("loeschen");
document.getElementById('idee').appendChild(titelErstellen); document.getElementById('overlay_container').appendChild(titelErstellen);
let inhaltErstellen = document.createElement("p"); let inhaltErstellen = document.createElement("p");
let inhaltInhalt = document.createTextNode(data.inhalt); let inhaltInhalt = document.createTextNode(data.inhalt);
inhaltErstellen.appendChild(inhaltInhalt); inhaltErstellen.appendChild(inhaltInhalt);
inhaltErstellen.classList.add("loeschen"); inhaltErstellen.classList.add("loeschen");
document.getElementById('idee').appendChild(inhaltErstellen); document.getElementById('overlay_container').appendChild(inhaltErstellen);
let likesErstellen = document.createElement("p"); let likesErstellen = document.createElement("p");
let likes = document.createTextNode(data.likes + " Likes"); let likes = document.createTextNode(data.likes + " Likes");
likesErstellen.appendChild(likes); likesErstellen.appendChild(likes);
likesErstellen.classList.add("likeDisplay"); 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 bildContainer = $("<div>").addClass("ImgContainer");
let imgUrlArr = JSON.parse(data.bild); let imgUrlArr = JSON.parse(data.bild);
for (let i = 0; i < imgUrlArr.length; i++) { 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"); 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") let kommentare_container = document.createElement("div")
kommentare_container.setAttribute("id", "kommentare_container"); 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("action", "../system/kommentarSpeichern.php");
formular.setAttribute("method", "post"); formular.setAttribute("method", "post");
formular.setAttribute("id", "kommentarform"); formular.setAttribute("id", "kommentarform");
document.getElementById("idee").appendChild(formular); document.getElementById("overlay_container").appendChild(formular);
let text_label = document.createElement("label"); let text_label = document.createElement("label");
text_label.setAttribute("for", "text"); text_label.setAttribute("for", "text");
@ -338,7 +345,7 @@ function kommentarErstellen(idee_id) {
// Idee formular erstellen // Idee formular erstellen
function formularErstellen(koordianten) { function formularErstellen(koordianten) {
document.getElementById("idee").innerHTML = ""; document.getElementById("overlay_container").innerHTML = "";
let formular = document.createElement("form"); let formular = document.createElement("form");
@ -346,7 +353,7 @@ function formularErstellen(koordianten) {
formular.setAttribute("action", "../system/ideeSpeichern.php"); formular.setAttribute("action", "../system/ideeSpeichern.php");
formular.setAttribute("method", "post"); formular.setAttribute("method", "post");
formular.setAttribute("id", "form"); formular.setAttribute("id", "form");
document.getElementById("idee").appendChild(formular); document.getElementById("overlay_container").appendChild(formular);
let koordinaten_lng = document.createElement("input"); let koordinaten_lng = document.createElement("input");
koordinaten_lng.setAttribute("type", "hidden"); koordinaten_lng.setAttribute("type", "hidden");
@ -358,21 +365,20 @@ function formularErstellen(koordianten) {
koordinaten_lat.setAttribute("name", "lat") koordinaten_lat.setAttribute("name", "lat")
koordinaten_lat.value = koordianten.toJSON().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"); let titel_input = document.createElement("input");
titel_input.setAttribute("type", "text"); 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"); let text_input = document.createElement("input");
text_input.setAttribute("type", "text"); text_input.setAttribute("type", "textarea");
text_input.setAttribute("name", "text") text_input.setAttribute("name", "text");
text_input.setAttribute("placeholder", "Deine Idee...");
let image_links = document.createElement("input"); let image_links = document.createElement("input");
image_links.setAttribute("type", "hidden"); image_links.setAttribute("type", "hidden");
@ -383,16 +389,18 @@ function formularErstellen(koordianten) {
submit_input.setAttribute("value", "Formular Absenden"); submit_input.setAttribute("value", "Formular Absenden");
document.getElementById("form").appendChild(titel_label); document.getElementById("form").appendChild(titel_input);
document.getElementById("form").appendChild(titel_input);
document.getElementById("form").appendChild(text_label);
document.getElementById("form").appendChild(text_input); document.getElementById("form").appendChild(text_input);
document.getElementById("form").appendChild(submit_input); document.getElementById("form").appendChild(submit_input);
document.getElementById("form").appendChild(koordinaten_lat); document.getElementById("form").appendChild(koordinaten_lat);
document.getElementById("form").appendChild(koordinaten_lng); document.getElementById("form").appendChild(koordinaten_lng);
document.getElementById("form").appendChild(image_links); 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 // get a widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true}); const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});