From 6694359fd94dd2c28d9ed15afb2589d9dbe06e81 Mon Sep 17 00:00:00 2001 From: stomarfaa <8613-stomarfaa@users.noreply.code.fbi.h-da.de> Date: Mon, 22 Jan 2024 22:43:46 +0100 Subject: [PATCH] change stylesheet --- src/Praktikum/Prak5/Bestellung.php | 39 ++++--- src/Praktikum/Prak5/CSS/test.css | 159 +++++++++++++++++++++++++++++ src/Praktikum/Prak5/Page.php | 2 +- 3 files changed, 182 insertions(+), 18 deletions(-) create mode 100644 src/Praktikum/Prak5/CSS/test.css diff --git a/src/Praktikum/Prak5/Bestellung.php b/src/Praktikum/Prak5/Bestellung.php index 34d4745..90834e5 100644 --- a/src/Praktikum/Prak5/Bestellung.php +++ b/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(); diff --git a/src/Praktikum/Prak5/CSS/test.css b/src/Praktikum/Prak5/CSS/test.css new file mode 100644 index 0000000..1def5f8 --- /dev/null +++ b/src/Praktikum/Prak5/CSS/test.css @@ -0,0 +1,159 @@ +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 diff --git a/src/Praktikum/Prak5/Page.php b/src/Praktikum/Prak5/Page.php index de8ecf0..9979443 100644 --- a/src/Praktikum/Prak5/Page.php +++ b/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; -- GitLab