diff --git a/about.html b/about.html index 127ab50..811dc76 100644 --- a/about.html +++ b/about.html @@ -20,7 +20,9 @@
- + + +
@@ -41,22 +43,34 @@
-

Willkommen!

-
-

Um was geht’s?
Zürcher Stadtkreise nachhaltig optimieren: Durch unsere App erhalten deine Ideen zur Verbesserung des Stadtbildes ein Gehör. Ziel ist es, die gesamte Bevölkerung aktiv am Wandel des Stadtbilds miteinzubeziehen und zum mitspinnen zu bewegen. -

-

Egal ob aufwendige Bepflanzung oder simple Mülltonnen – umfangreichere Projekte, aber auch nur kleine Spinnereien sind auf unserer Plattform willkommen. Ist eine Idee einmal an einem Ort erfasst, kann sich die Community mittels Kommentarfunktion einbringen. So können Spinnereien konkretisiert oder diskutiert werden.

+
+
+

Willkommen!

+
+

Um was geht’s?
Zürcher Stadtkreise nachhaltig optimieren: Durch unsere App erhalten deine Ideen zur Verbesserung des Stadtbildes ein Gehör. Ziel ist es, die gesamte Bevölkerung aktiv am Wandel des Stadtbilds miteinzubeziehen und zum mitspinnen zu bewegen. +

+

Egal ob aufwendige Bepflanzung oder simple Mülltonnen – umfangreichere Projekte, aber auch nur kleine Spinnereien sind auf unserer Plattform willkommen. Ist eine Idee einmal an einem Ort erfasst, kann sich die Community mittels Kommentarfunktion einbringen. So können Spinnereien konkretisiert oder diskutiert werden.

+
+
+ +
+

Das sind wir

+
+

Die App wurde im Rahmen einer studentischen Arbeit von Flavia Hodel, Marlon Portmann, Noah Eckert und Monia Rosenow ins Leben gerufen. Zur Zeit studieren wir alle gemeinsam Media Engineering an der Fachhochschule Graubünden. Mit unserer Idee wollen wir uns aktiv an der Umgestaltung und Optimierung der Limmatstadt beteiligen und auch allen anderen die Möglichkeit dazu geben. +

+

Bei dieser Website handelt es sich um einen ersten Prototyp. Leider werden die Ideen nicht realisiert, aber wer weiss: Vielleicht zieht Züri nach und bald wird es eine Plattform/Forum für die Stadtgestaltung geben! +

+

Gespannt freuen wir uns auf deine Spinnerei! +

+
+
-

Das sind wir

-
-

Die App wurde im Rahmen einer studentischen Arbeit von Flavia Hodel, Marlon Portmann, Noah Eckert und Monia Rosenow ins Leben gerufen. Zur Zeit studieren wir alle gemeinsam Media Engineering an der Fachhochschule Graubünden. Mit unserer Idee wollen wir uns aktiv an der Umgestaltung und Optimierung der Limmatstadt beteiligen und auch allen anderen die Möglichkeit dazu geben. -

-

Bei dieser Website handelt es sich um einen ersten Prototyp. Leider werden die Ideen nicht realisiert, aber wer weiss: Vielleicht zieht Züri nach und bald wird es eine Plattform/Forum für die Stadtgestaltung geben! -

-

Gespannt freuen wir uns auf deine Spinnerei! -

-
+ +

zurück zu Karte

+ + +
diff --git a/css/photoswipe.css b/css/photoswipe.css index fbd0556..ac1fa2b 100644 --- a/css/photoswipe.css +++ b/css/photoswipe.css @@ -27,6 +27,7 @@ */ .pswp { + font-family: bd-supper, sans-serif; position: fixed; top: 0; left: 0; @@ -407,7 +408,7 @@ div.pswp__img--placeholder, .pswp__counter { height: 30px; margin: 15px 0 0 20px; - font-size: 14px; + font-size: 16px; line-height: 30px; color: var(--pswp-icon-color); text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); diff --git a/css/style.css b/css/style.css index 2ae98ca..aedd4d5 100644 --- a/css/style.css +++ b/css/style.css @@ -9,6 +9,7 @@ --helllachs: #FFF5EE; --borderRadSmall: 14px; + --borderRadLarge: 30px; } @@ -94,6 +95,10 @@ img.mapControl { } +.desktopOnly{ + display: none; +} + /*----------------------------------------------------*/ /*-------------------- STARTSCREEN -------------------*/ /*----------------------------------------------------*/ @@ -154,10 +159,16 @@ img.mapControl { background-color: #27177A; overflow-x: hidden; overflow-y: scroll; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } +#overlay::-webkit-scrollbar { + display: none; +} + #overlay_container{ margin: 3%; @@ -183,6 +194,8 @@ img.mapControl { #cancel { + z-index: 100; + transform: translateZ(10px); width: 40px; height: 40px; position: sticky; @@ -211,6 +224,7 @@ form{ width: 100%; height: 93%; margin-top: 7%; + margin-bottom: -25px; } input, textarea{ @@ -263,20 +277,29 @@ textarea { input.titel{ width: 75%; - margin-bottom: 5%; + margin-bottom: 3%; + height: 30px; max-height: 15%; } +input.adresse{ + margin-bottom: 3%; + height: 30px; + max-height: 15%; + font-size: 12pt; +} + button.submit{ background-image: url("../images/absenden.svg"); + background-repeat: no-repeat; + background-color: transparent; border-radius: 40px; border: none; width: 80px; height: 80px; - background-color: #fad8c4; - position: absolute; - bottom: 8px; + position: relative; + bottom: 25px; left: 25px; } @@ -295,38 +318,69 @@ div.image-preview{ flex-direction: row-reverse; align-items: flex-end; margin: 20px; - height: 25%; + + height: 60px; } div.ImgPrevContainer { height: 100%; + margin-left: 100%; + + display: flex; + flex-direction: row; +} + +div.prevIMG { aspect-ratio: 1; + background-position: center; background-size: cover; - margin-right: 20px; + margin-right: 5px; + height: 60px; border-radius: var(--borderRadSmall); } -img.prevIMG { - height: 100%; - border-radius: var(--borderRadSmall); + + +/*------------- Upload Care Widget ----------------*/ + +.uploadcare--widget{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; } + .uploadcare--widget__button, -.uploadcare--widget__button_type_open, -.uploadcare--widget__button_type_open:focus, -.uploadcare--widget__button_type_open:hover{ +.uploadcare--widget__button_type_open{ height: 40px; width: 40px; background-image: url("../images/uploadImage.svg"); background-color: transparent; } -.uploadcare--widget__text, .uploadcare--widget__progress { +.uploadcare--widget__button_type_open{ + position: relative; + left: 90%; + left: calc(100% - 40px); +} + +.uploadcare--progress_type_canvas{ + color: var(--marine); + border-color: var(--orange); +} + +.uploadcare--widget__text{ + font-family: bd-supper, sans-serif; +} + +.uploadcare--link, .uploadcare--widget__file-size{ display: none; } + .uploadcare--widget__button_type_cancel{ height: 40px; width: 40px; @@ -341,6 +395,16 @@ img.prevIMG { background-color: transparent; } +.uploadcare--widget__button_type_cancel:active, .uploadcare--widget__button_type_cancel:hover, .uploadcare--widget__button_type_remove:active, .uploadcare--widget__button_type_remove:hover { + background: none; + background-image: url("../images/cancel.svg"); +} + +.uploadcare--widget__button_type_open:active, .uploadcare--widget__button_type_open:hover { + background-image: url("../images/uploadImageHover.svg"); + background-color: transparent; + +} /*----------------------------------------------------*/ /*------------------ IDEE ANZEIGEN -------------------*/ @@ -349,11 +413,33 @@ img.prevIMG { div.ImgContainer { + width: 100%; margin-top: 20px; + margin-right: 0; height: 160px; + background-position: center; background-size: cover; - background-position: center center; border-radius: var(--borderRadSmall); + display: flex; + position: relative; + z-index: 12; + + +} + +.pswp img { + max-width: none; + object-fit: contain; +} + +div.ImgContainer a:first-child{ + width: 100%; + height: 100%; +} + +img.thumbnail{ + + opacity: 0; } #inhaltContainer { @@ -413,6 +499,18 @@ p.likeDisplay { h1.ideeTitel { color: var(--helllachs); font-size: 28px; + margin: 0; + +} + +p.ideeAdresse{ + color: white; + font-size: 9pt; + margin: 0; + font-family: bd-supper, sans-serif; +} + +div.titleLocationContainer{ margin: 10px; padding-top: 10px; padding-bottom: 10px; @@ -582,7 +680,7 @@ img.commentLike{ body.aboutInfo { background-image: url("/images/Background2.svg"); background-size: cover; - color: var(--marine); + color: var(--royalblau); position: relative; overflow-y: scroll; } @@ -600,7 +698,7 @@ div.subPageHeader { body.aboutInfo h1 { background-color: var(--helllachs); - color: var(--marine); + color: var(--royalblau); font-weight: 400; font-size: 22pt; @@ -628,4 +726,124 @@ div.textContainer { .fixedPos { position: fixed; top: 7px; -} \ No newline at end of file +} + + + +/*------- Loading --------*/ + +.loadingscreen{ + position: absolute; + top: 80px; + left: 43%; + z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + +} + +.loader { + border: 10px solid rgba(0,0,0,0); + border-radius: 50%; + border-top: 13px solid var(--orange); + width: 50px; + height: 50px; + animation: spinner 2s linear infinite; + + } + + + + @keyframes spinner { + + 0% { transform: rotate(0deg); } + + 100% { transform: rotate(360deg); } + + } + + + + /*------- DESKTOP -----------*/ + + @media screen and (min-width: 900px) { + div.content{ + display: flex; + flex-direction: column; + justify-content: space-around; + margin: auto; + + padding: 0; + min-height: 500px; + + width: 70%; + background-color: var(--helllachs); + border-radius: var(--borderRadSmall); + + } + + div.innerContent{ + display: flex; + } + + article{ + margin: 20px; + width: calc(50% - 40px); + background-color: none; + } + + body.aboutInfo h1{ + border-color: var(--royalblau); + border-radius: 100px; + padding: 2px 25px 0px; + border-style: solid; + border-width: 2px; + } + + a.desktopOnly{ + display: flex; + align-self: flex-end; + margin-right: 20px; + margin-bottom: 20px; + border-radius: 1000px; + padding: 10px 20px 8px; + background-color: var(--royalblau); + color: var(--helllachs); + text-decoration: none; + transition: background-color .5s; + } + + a.desktopOnly:hover{ + background-color: var(--marine); + transition: background-color .5s; + } + + .desktopOnly p{ + margin: 0; + } + + + /*------- Overlay --------*/ + + #overlay{ + bottom: 5vh; + right: 0; + border-radius: var(--borderRadLarge) 0 0 var(--borderRadLarge) ; + } + + .hidden{ + + transform: translateX(100%); + -webkit-transform: translateX(100%); + } + + .show{ + + transform: translateX(0); + -webkit-transform: translateX(0); + } + + + } \ No newline at end of file diff --git a/help.html b/help.html index a555eda..5aac7cf 100644 --- a/help.html +++ b/help.html @@ -20,7 +20,10 @@
- + + + +
@@ -44,22 +47,34 @@
-

Spinnerei erfassen

-
-

Willkommen! Hier erfährst du, wie du deine Ideen festhalten und publizieren kannst:

-

Klicke in der Karte auf die Location, um an diesem Ort eine neue Spinnerei zu erfassen.

-

Trage den Titel und deine Idee ein. Wichtig: Überprüfe, ob der erfasste Standort korrekt eingetragen wurde – ansonsten kannst du diesen auch noch anpassen. - Optional kannst du auch noch bis zu vier Bilder oder Skizzen hochladen. So können sich deine Mitspinner deine Vision besser vorstellen. -

+
+
+

Spinnerei erfassen

+
+

Willkommen! Hier erfährst du, wie du deine Ideen festhalten und publizieren kannst:

+

Klicke in der Karte auf die Location, um an diesem Ort eine neue Spinnerei zu erfassen.

+

Trage den Titel und deine Idee ein. Wichtig: Überprüfe, ob der erfasste Standort korrekt eingetragen wurde – ansonsten kannst du diesen auch noch anpassen. + Optional kannst du auch noch bis zu vier Bilder oder Skizzen hochladen. So können sich deine Mitspinner deine Vision besser vorstellen. +

+
+
+
+

Kommentare & Votes

+
+

Gefällt dir eine andere Idee besonders gut, kannst du diese voten. So wird die Idee grösser auf der Karte abgebildet, da sie anscheinend mehrere Personen begeistert. Negative Votes gibt es nicht, jedoch findet Kritik in der Kommentarspalte Platz. +

+

Durch die Kommentarfunktion können sich deine Mitmenschen oder du selbst bei fremden Ideen einbringen. Die einzelnen Spinnereien können so kritisiert, gelobt oder gar weitergesponnen werden.

+ +
+
-

Kommentare & Votes

-
-

Gefällt dir eine andere Idee besonders gut, kannst du diese voten. So wird die Idee grösser auf der Karte abgebildet, da sie anscheinend mehrere Personen begeistert. Negative Votes gibt es nicht, jedoch findet Kritik in der Kommentarspalte Platz. -

-

Durch die Kommentarfunktion können sich deine Mitmenschen oder du selbst bei fremden Ideen einbringen. Die einzelnen Spinnereien können so kritisiert, gelobt oder gar weitergesponnen werden.

- -
+ +

zurück zu Karte

+ + + +
diff --git a/images/uploadImageHover.svg b/images/uploadImageHover.svg new file mode 100644 index 0000000..29e4d72 --- /dev/null +++ b/images/uploadImageHover.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/index.php b/index.php index 3009e2f..6311aad 100644 --- a/index.php +++ b/index.php @@ -21,22 +21,13 @@ dbVerbindungErzeugen() - + - + @@ -80,12 +71,13 @@ dbVerbindungErzeugen() - - + + + diff --git a/js/functions.js b/js/functions.js index d9a1183..5de793d 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1,7 +1,4 @@ - - - //LocalLike Objekt erstellen let localLikes = {} @@ -34,11 +31,13 @@ $(document).ready(function(){ // submit kommentar nicht seite neu laden $("#kommentarform").submit(function(e) { - console.log("Submitted") + console.log("Comment Submitted") e.preventDefault(); // avoid to execute the actual submit of the form. }); + + if(!localStorage.getItem('firstVisit')){ console.log("loadStartscreen"); @@ -52,7 +51,6 @@ $(document).ready(function(){ } - //LocalStorage erstellen oder auslesen @@ -81,9 +79,6 @@ $(document).ready(function(){ } - - - }) @@ -127,9 +122,6 @@ function openOverlay(){ } - - - //LocalStorage Anpassen (Likes hinzufügen oder entfernen) @@ -165,11 +157,8 @@ function chageLocalStorrage(typ, id, addRemove){ } - // IDEE ANZEIGEN - - function ideeAnzeigen(data) { document.getElementById("overlay_container").innerHTML = ""; @@ -182,11 +171,19 @@ function ideeAnzeigen(data) { likesErstellen.appendChild(likes); likesErstellen.classList.add("likeDisplay"); + let titleLocationContainer = document.createElement("div"); + titleLocationContainer.classList.add("titleLocationContainer"); let titelErstellen = document.createElement("h1"); let titelInhalt = document.createTextNode(data.titel); titelErstellen.appendChild(titelInhalt); titelErstellen.classList.add("ideeTitel"); + + let adresseErstellen = document.createElement("p"); + let adresseInhalt = document.createTextNode(data.adresse); + adresseErstellen.appendChild(adresseInhalt); + adresseErstellen.classList.add("ideeAdresse"); + let inhaltErstellen = document.createElement("p"); @@ -194,50 +191,47 @@ function ideeAnzeigen(data) { inhaltErstellen.appendChild(inhaltInhalt); inhaltErstellen.classList.add("ideeInhalt"); -/* -
- - - - -
*/ + if(data.bild != null && data.bild != ""){ - let bildContainer = $("
").addClass("ImgContainer"); + let bildContainer = $("
").attr({id: "gallery--getting-started", class: "ImgContainer pswp-gallery pswp-gallery--single-column"}); + let loadingscreen = $("
").addClass("loadingscreen"); + let loader = $("
").addClass("loader"); + + loader.appendTo(loadingscreen) + loadingscreen.appendTo($("#overlay_container")) + let imgUrlArr = JSON.parse(data.bild); + + bildContainer.css("background-image", "url(" + imgUrlArr[0] + ")"); + + for (let i = 0; i < imgUrlArr.length; i++) { - //let img = $("").addClass("previewImage"); - //img.attr("src", imgUrlArr[i]); - //img.appendTo(bildContainer); - bildContainer.css("background-image","url(" + imgUrlArr[i] + ")") + + + let pswpA = $("").attr({href: imgUrlArr[i], 'data-cropped': "true", target: "_blank"}) + + + pswpA.appendTo(bildContainer) } bildContainer.prependTo($("#overlay_container")) + + + + + + } else { inhaltContainer.classList.add("class","topMargin") } - /* - let bild = document.createElement("img"); - bild.src = data.bild; - bild.classList.add("ideeBilder"); - bild.classList.add("loeschen"); - document.getElementById('idee').appendChild(bild); - console.log(data); - - */ - - let ideeLike = document.createElement("img"); ideeLike.classList.add("herz"); @@ -255,7 +249,9 @@ function ideeAnzeigen(data) { document.getElementById('overlay_container').appendChild(inhaltContainer); document.getElementById('inhaltContainer').appendChild(likesErstellen); document.getElementById('inhaltContainer').appendChild(ideeLike); - document.getElementById('inhaltContainer').appendChild(titelErstellen); + titleLocationContainer.appendChild(titelErstellen); + titleLocationContainer.appendChild(adresseErstellen); + document.getElementById('inhaltContainer').appendChild(titleLocationContainer); document.getElementById('inhaltContainer').appendChild(inhaltErstellen); @@ -368,8 +364,6 @@ function removeLike(typ, id, element){ - - // kommentar formular likesErstellen function kommentarErstellen(idee_id) { @@ -428,7 +422,7 @@ function kommentarErstellen(idee_id) { // Idee formular erstellen -function formularErstellen(koordianten) { + function formularErstellen(koordianten, ergebnisAdresse) { document.getElementById("overlay_container").innerHTML = ""; @@ -458,6 +452,11 @@ function formularErstellen(koordianten) { titel_input.setAttribute("name", "titel"); titel_input.setAttribute("placeholder", "TITEL"); + let adresse_input = document.createElement("input"); + adresse_input.setAttribute("type", "text"); + adresse_input.classList.add("adresse"); + adresse_input.setAttribute("name", "adresse"); + adresse_input.setAttribute("value", ergebnisAdresse); let text_input = $("