commit to save progress

src/Praktikum/Prak5/Bestellung.php

@@ -88,33 +88,33 @@ class Bestellung extends Page
     protected function generateView(): void
     {
         $data = $this->getViewData(); //NOSONAR ignore unused $data
-        $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false);
+        $this->generatePageHeader('Bestellung', './JS/BestellScript.js');
 
         echo <<< HTML
             
-            <section id="bestellungSection">
+            <section class="spacer" id="bestellungSection">
                 <h1 id="bestellungTitle">Bestellung</h1>
                 <hr>
-                <section id="speisekarteSection">
-                    <h2>Speisekarte</h2>
+                <section class="flex-container flex-direction-row wrap justify-content-center" id="speisekarteSection">
+                    <h2>Bitte wählen Sie Ihre Pizzen ...</h2>
         HTML;
 
         foreach ($data as $pizza) {
             echo <<< HTML
-                <label>
+                <label class="flex-item">
+                        
                         <img class="pizzaImage" alt="Image of Pizza {$pizza->getName()}" src="{$pizza->getPicture()}" data-articleID="{$pizza->getArticleId()}" data-name="{$pizza->getName()}" data-price="{$pizza->getPrice()}" onclick="addItem(this);">
-                        <br>
-                        {$pizza->getName()}<br>
-                        {$pizza->getPrice()}€
+                        <div class="flex-container flex-direction-column nowrap justify-content-center">
+                            <div>{$pizza->getName()}</div>
+                            <div>{$pizza->getPrice()}€</div>
+                        </div>
                 </label>
-                <br>
             HTML;
         }
 
         echo <<< HTML
                 <script>getElements();</script>
                 </section>
-                <hr>
                 <section id="warenkorbSection">
                     <h2>Warenkorb</h2>
                     <form accept-charset="UTF-8" action="#" method="post">
@@ -122,13 +122,15 @@ class Bestellung extends Page
                         <select id="warenkorb" multiple name="Pizza[]">
                         </select>
                     
-                        <p id="sum"></p>
+                        <p id="sum">0 €</p>
             
                         <label for="address"></label>
                         <input id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
-                        <input type="button" value="Alles Löschen" onclick="removeAll();">
-                        <input type="button" value="Auswahl Löschen" onclick="removeItem();">
-                        <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
+                        <div id="buttons">
+                            <input type="button" value="Alles Löschen" onclick="removeAll();">
+                            <input type="button" value="Auswahl Löschen" onclick="removeItem();">
+                          <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
+                        </div>
                     </form>
                 </section>
             </section>

src/Praktikum/Prak5/CSS/file.css

 body {
-    background: black;
+    margin: 0;
+    background: url('../img/Pattern/bg_pattern.png'), #17181b;
+    background-size: 20vw;
+    font-family: Helvetica, serif;
+}
+
+
+
+
+
+.flex-container {
+    display: flex;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+
+.flex-direction-row {
+    flex-direction: row;
+}
+
+.flex-direction-column {
+    flex-direction: column;
+}
+
+.justify-content-start {
+    justify-content: flex-start;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.justify-content-end {
+    justify-content: flex-end;
+}
+
+.justify-content-between {
+    justify-content: space-between;
+}
+
+.align-items-start {
+    align-items: flex-start;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.align-items-end {
+    align-items: flex-end;
+}
+.spacer {
+    margin-top: 192px;
+}
+
+.flex-item {
+    flex-grow: inherit;
+    flex-shrink: inherit;
+}
+
+#bestellungSection {
+
+    border-radius: 1.5em;
+    padding: 0.5em 2.5em 2em 2.5em;
+    background: #eee;
+    box-shadow: 0 0 64px black;
+    margin-left: 4em;
+    margin-right: 4em;
+}
+
+#bestellungSection #bestellungTitle{
+
+}
+
+
+
+
+#speisekarteSection h2 {
+    width: 100%;
+    text-align: center;
+}
+
+#speisekarteSection label {
+    padding: 0.5em;
+    margin: 0.5em 1em;
+    text-align: center;
+    border-radius: 0.5em;
+    width: 15%;
+    min-width: 8%;
+    border: 1px solid rgba(0, 0, 0, 0);
+}
+
+#speisekarteSection label:hover {
+    background: #bbb;
+    border: 1px solid #888;
+}
+
+.pizzaImage {
+    width: 100%;;
+    transition-duration: 1.5s;
+    transition-timing-function: ease-in-out;
+}
+
+.pizzaImage:hover {
+    transform: rotate(360deg);
+}
+
+
+
+
+
+#warenkorbSection {
+    background: #bbb;
+    border-radius: 1em;
+    padding: 1em 0.5em;
+    margin: 0 auto;
+    width: 320px;
+    text-align: center;
+    border: 1px solid #888;
+}
+
+#warenkorbSection h2 {
+    margin-top: 0.3em;
+}
+
+#warenkorbSection #sum {
+    font-size: 1.25em;
+    margin: 1em;
+}
+
+#warenkorbSection #address{
+    width: calc(280px - 0.6em);
+    height: 1.5em;
+    padding: 0.25em;
+    margin: 0 auto 0.5em auto;
+    font-size: 1em;
+}
+
+#warenkorbSection #buttons{
+    width: 280px;
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+}
+
+#warenkorbSection #warenkorb{
+    width: 280px;
+}
+
+
+
+
+
+
+
+
+
+.container {
+    width: 1200px;
+    margin: 0 auto;
+}
+
+
+@media only screen and (max-width: 1600px) {
+    .container {
+        width: 800px;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    .container {
+        width: 640px;
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    .container {
+        width: calc(100% - 2em);
+    }
+
+    #bestellungSection {
+        padding: 1em;
+    }
+
+    #speisekarteSection {
+        flex-direction: column;
+    }
+
+    #speisekarteSection label {
+        width: 30%;
+        margin: 0 auto;
+    }
 }
\ No newline at end of file

src/Praktikum/Prak5/Page.php

@@ -99,6 +99,7 @@ abstract class Page
         <html lang="de">
             <head>
                 <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>{$title}</title>
                 <link rel="stylesheet" href="./CSS/file.css">
             </head>