Skip to content
Snippets Groups Projects
Commit 6694359f authored by Omar Ibrahim Arfa's avatar Omar Ibrahim Arfa
Browse files

change stylesheet

parent c9791408
No related branches found
No related tags found
No related merge requests found
...@@ -91,48 +91,53 @@ class Bestellung extends Page ...@@ -91,48 +91,53 @@ class Bestellung extends Page
$this->generatePageHeader('Bestellung', './JS/BestellScript.js', false); $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false);
echo <<< HTML echo <<< HTML
<main class="bestellungMain">
<section id="bestellungSection">
<h1 id="bestellungTitle">Bestellung</h1> <h1 id="bestellungTitle">Bestellung</h1>
<hr> <hr class="not-flex-item">
<section id="speisekarteSection"> <section id="speisekarteSection">
<h2>Speisekarte</h2> <h2 class="speisekarteTitle">Speisekarte</h2>
HTML; <div class="pizzaContainer flex-container flex-direction-row justify-content-center align-items-center wrap">
HTML;
foreach ($data as $pizza) { foreach ($data as $pizza) {
echo <<< HTML 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> <br>
{$pizza->getName()}<br> <span class="pizzaInfo flex-item flex-container flex-direction-column align-items-center">
{$pizza->getPrice()} <span class="flex-item">{$pizza->getName()}</span>
<span class="flex-item">{$pizza->getPrice()}</span>
</span>
</label> </label>
<br> <br>
HTML; HTML;
} }
echo <<< HTML echo <<< HTML
</div>
<script>getElements();</script> <script>getElements();</script>
</section> </section>
<hr>
<section id="warenkorbSection"> <section class="flex-container flex-direction-column nowrap justify-content-center" id="warenkorbSection">
<h2>Warenkorb</h2> <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> <label for="warenkorb"></label>
<select id="warenkorb" multiple name="Pizza[]"> <select class="flex-item" id="warenkorb" multiple name="Pizza[]">
</select> </select>
<p id="sum"></p> <p id="sum"></p>
<label for="address"></label> <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="Alles Löschen" onclick="removeAll();">
<input type="button" value="Auswahl Löschen" onclick="removeItem();"> <input type="button" value="Auswahl Löschen" onclick="removeItem();">
<input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();"> <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
</form> </form>
</section> </section>
</section> </main>
HTML;
HTML;
$this->generatePageFooter(); $this->generatePageFooter();
......
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
...@@ -101,7 +101,7 @@ abstract class Page ...@@ -101,7 +101,7 @@ abstract class Page
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title> <title>{$title}</title>
<link rel="stylesheet" href="./CSS/file.css"> <link rel="stylesheet" href="./CSS/test.css">
</head> </head>
<body> <body>
HTML; HTML;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment