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