change stylesheet

src/Praktikum/Prak5/Bestellung.php

@@ -91,48 +91,53 @@ class Bestellung extends Page
         $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false);
 
         echo <<< HTML
-            
-            <section id="bestellungSection">
+            <main class="bestellungMain">
                 <h1 id="bestellungTitle">Bestellung</h1>
-                <hr>
+                <hr class="not-flex-item">
                 <section id="speisekarteSection">
-                    <h2>Speisekarte</h2>
-        HTML;
+                    <h2 class="speisekarteTitle">Speisekarte</h2>
+                    <div class="pizzaContainer flex-container flex-direction-row justify-content-center align-items-center wrap">
+HTML;
 
         foreach ($data as $pizza) {
             echo <<< HTML
-                <label>
-                        <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);">
+
+                <label class="pizzaLabel flex-item flex-container flex-direction-column justify-content-center align-items-center wrap">
+                        <img class="pizzaImage flex-item" 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()}€
+                        <span class="pizzaInfo flex-item flex-container flex-direction-column align-items-center">
+                        <span class="flex-item">{$pizza->getName()}</span>
+                        <span class="flex-item">{$pizza->getPrice()}€</span>
+                        </span>
                 </label>
                 <br>
-            HTML;
+HTML;
         }
 
         echo <<< HTML
+                    </div>
                 <script>getElements();</script>
                 </section>
-                <hr>
-                <section id="warenkorbSection">
+               
+                <section class="flex-container flex-direction-column nowrap justify-content-center" id="warenkorbSection">
                     <h2>Warenkorb</h2>
-                    <form accept-charset="UTF-8" action="#" method="post">
+                    <form class="flex-item" accept-charset="UTF-8" action="#" method="post">
                         <label for="warenkorb"></label>
-                        <select id="warenkorb" multiple name="Pizza[]">
+                        <select class="flex-item" id="warenkorb" multiple name="Pizza[]">
                         </select>
                     
                         <p id="sum"></p>
             
                         <label for="address"></label>
-                        <input id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
+                        <input class="flex-item" 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();">
                     </form>
                 </section>
-            </section>
-        HTML;
+            </main>
+ 
+HTML;
 
 
         $this->generatePageFooter();

src/Praktikum/Prak5/CSS/test.css

+body {
+    margin: 0;
+    background: url('../img/Pattern/bg_pattern.png'), #17181b;
+    background-size: 20vw;
+    font-family: Helvetica, serif;
+}
+
+
+.bestellungMain {
+    border-radius: 1.5em;
+    padding: 0 2em 1.5em 2em;
+    background: #eee;
+    box-shadow: 0 0 64px black;
+    margin: 2em;
+}
+
+.bestellungMain h1 {
+    padding-top: 0.5em;
+    margin: 0;
+}
+
+.speisekarteTitle {
+    text-align: center;
+}
+
+.pizzaContainer {
+    width: 100%;
+    align-content: center;
+}
+
+.pizzaLabel {
+    width: 15%;
+    min-width: 8%;
+    margin: 1em;
+    border-radius: 0.5em;
+    border: 1px solid rgba(0, 0, 0, 0);
+}
+
+.pizzaLabel:hover {
+    background: #bbb;
+    border: 1px solid #888;
+}
+
+.pizzaInfo {
+    text-align: center;
+}
+
+.pizzaImage {
+    width: 100%;
+    height: auto;
+}
+
+#warenkorbSection {
+    background: #bbb;
+    border-radius: 1em;
+    padding: 0.5em 0.5em;
+    margin: 2em auto 0 auto;
+    width: fit-content;
+    text-align: center;
+    border: 1px solid #888;
+}
+
+#warenkorbSection h2 {
+    margin: 0 0 0.2em 0;
+}
+
+#warenkorbSection #sum {
+    font-size: 1.25em;
+    margin: 1em;
+}
+
+#warenkorbSection #address{
+    width: calc(100% - 0.2em);
+    padding: 0;
+    height: fit-content;
+    margin: 0 auto 0.5em auto;
+    font-size: 1em;
+}
+
+#warenkorbSection #buttons{
+    width: fit-content;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: auto;
+}
+
+#warenkorbSection #form {
+    padding: 0;
+}
+#warenkorbSection #warenkorb{
+    width: 100%;
+}
+
+
+.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;
+}
+
+.not-flex-item {
+    flex-grow: initial;
+    flex-shrink: initial;
+}
\ No newline at end of file

src/Praktikum/Prak5/Page.php

@@ -101,7 +101,7 @@ abstract class Page
                 <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">
+                <link rel="stylesheet" href="./CSS/test.css">
             </head>
             <body>
 HTML;