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

add css to Baeker + finish css for Bestellung

parent 32a755ce
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 299 additions and 221 deletions
src/Praktikum/Prak5/Baecker.php
+ 13
− 5
View file @ 5a323222
......@@ -18,6 +18,7 @@
// to do: change name 'baecker' throughout this file
require_once './Page.php';
require_once './DB_Classes/OrderedArticle.php';
require_once './navbar.php';
/**
* This is a template for top level classes, which represent
* a complete web page and which are called directly by the user.
......@@ -91,12 +92,18 @@ class Baecker extends Page
protected function generateView():void
{
$data = $this->getViewData(); //NOSONAR ignore unused $data
$this->generatePageHeader('Bäcker',"",true); //to do: set optional parameters
$this->generatePageHeader('Bäcker',"",true, "./CSS/Beacker.css"); //to do: set optional parameters
echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
buildNavbar(null, true);
echo "<img src='./img/Header.png' alt='Header Image'>\n";
echo "</header>\n";
echo <<< HTML
\n<section id="baecker">
<h2>Bestellung</h2>
<main>
<section id="baecker">
<h2>Bestellungen</h2>
<form id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
<form class="flex-container flex-direction-row justify-content-center wrap" id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
HTML;
$noOrders = true;
......@@ -152,7 +159,8 @@ HTML;
echo <<< HTML
</form>
</section>\n
</section>
</main>\n
HTML;
$this->generatePageFooter();
......
src/Praktikum/Prak5/Bestellung.php
+ 9
− 5
View file @ 5a323222
......@@ -18,7 +18,7 @@ declare(strict_types=1);
require_once './Page.php';
require_once './DB_Classes/Article.php';
require_once './navbar.php';
/**
* This is a template for top level classes, which represent
* a complete web page and which are called directly by the user.
......@@ -88,8 +88,12 @@ 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', false, './CSS/Bestellung.css');
echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
buildNavbar(null, true);
echo "<img src='./img/Header.png' alt='Header Image'>\n";
echo "</header>\n";
echo <<< HTML
<main class="bestellungMain">
<h1 id="bestellungTitle">Bestellung</h1>
......@@ -119,9 +123,9 @@ HTML;
<script>getElements();</script>
</section>
<section class="flex-container flex-direction-column nowrap justify-content-center" id="warenkorbSection">
<section id="warenkorbSection">
<h2>Warenkorb</h2>
<form class="flex-item" accept-charset="UTF-8" action="#" method="post">
<form class="flex-container flex-direction-column nowrap justify-content-center" accept-charset="UTF-8" action="#" method="post">
<label for="warenkorb"></label>
<select class="flex-item" id="warenkorb" multiple name="Pizza[]">
</select>
......@@ -130,8 +134,8 @@ HTML;
<label for="address"></label>
<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 type="button" value="Alles Löschen" onclick="removeAll();">
<input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
</form>
</section>
......
src/Praktikum/Prak5/CSS/Beacker.css 0 → 100644
+ 40
− 0
View file @ 5a323222
main {
border-radius: 1.5em;
padding: 0 2em 1.5em 2em;
background: #eee;
box-shadow: 0 0 4em black;
margin: 0 2em;
}
h2 {
padding-top: 0.5em;
margin: 0;
}
fieldset {
border-radius: 1.5em;
background: #eee;
padding: 1em;
margin: 2em;
border: 3px solid #888;
width: fit-content;
}
fieldset legend {
border-radius: 1.5em;
font-size: 1.1em;
margin: 0;
padding: 0.5em;
border: 3px solid #888;
}
fieldset label input {
margin: 0.3em;
font-size: 1em;
}
fieldset label input[type='radio'] {
accent-color: black;
scale: 1.25;
}
src/Praktikum/Prak5/CSS/Bestellung.css 0 → 100644
+ 80
− 0
View file @ 5a323222
.bestellungMain {
border-radius: 1.5em;
padding: 0 2em 1.5em 2em;
background: #eee;
box-shadow: 0 0 4em black;
margin: 0 2em;
}
.bestellungMain h1 {
padding-top: 0.5em;
margin: 0;
}
.speisekarteTitle {
text-align: center;
}
.pizzaContainer {
width: 100%;
align-content: center;
}
.pizzaLabel {
width: 15%;
min-width: 160px;
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;
font-size: 1em;
}
.pizzaImage {
width: 100%;
height: auto;
}
#warenkorbSection {
background: #bbb;
border-radius: 1em;
padding: 0.5em 0.5em;
margin: 2em auto 0 auto;
width: 40%;
text-align: center;
border: 1px solid #888;
}
#warenkorbSection h2 {
margin: 0 0 0.2em 0;
}
#warenkorbSection #sum {
font-size: 1.25em;
margin: 0.25em;
}
#warenkorbSection #address{
width: calc(100% - 0.2em);
padding: 0;
margin: 0 auto 0.5em auto;
font-size: 1em;
}
#warenkorbSection #form {
padding: 0;
}
#warenkorbSection #warenkorb{
width: 100%;
}
src/Praktikum/Prak5/CSS/Fahrer.css 0 → 100644
+ 0
− 0
View file @ 5a323222
src/Praktikum/Prak5/CSS/Kunde.css 0 → 100644
+ 0
− 0
View file @ 5a323222
src/Praktikum/Prak5/CSS/file.css deleted 100644 → 0
+ 0
− 204
View file @ 32a755ce
body {
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/CSS/test.css → src/Praktikum/Prak5/CSS/global.css
+ 134
− 0
View file @ 5a323222
......@@ -6,91 +6,66 @@ body {
}
.bestellungMain {
border-radius: 1.5em;
padding: 0 2em 1.5em 2em;
nav {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
background: #eee;
box-shadow: 0 0 64px black;
margin: 2em;
}
.bestellungMain h1 {
padding-top: 0.5em;
margin: 0;
}
.speisekarteTitle {
text-align: center;
}
.pizzaContainer {
position: sticky;
top: 0;
width: 100%;
align-content: center;
padding: 0.5em 0;
text-align: center;
}
.pizzaLabel {
width: 15%;
min-width: 8%;
margin: 1em;
border-radius: 0.5em;
border: 1px solid rgba(0, 0, 0, 0);
nav a{
color: black;
text-decoration: none;
margin: 0 1vw;
padding: 0.25em;
border: 2px solid rgba(0,0,0,0);
font-size: 1.5em;
font-weight: bold;
}
.pizzaLabel:hover {
background: #bbb;
border: 1px solid #888;
nav .active {
border: 2px solid black;
}
.pizzaInfo {
text-align: center;
nav a:hover{
border: 2px solid black;
}
.pizzaImage {
width: 100%;
height: auto;
}
@media only screen and (max-width: 780px) {
nav {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#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;
}
header {
margin-bottom: 1em;
}
#warenkorbSection h2 {
margin: 0 0 0.2em 0;
}
header img {
display: none;
}
a {
flex-grow: inherit;
flex-shrink: inherit;
margin: 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;
@media only screen and (max-width: 480px) {
#warenkorbSection {
width: fit-content;
}
}
#warenkorbSection #form {
padding: 0;
}
#warenkorbSection #warenkorb{
width: 100%;
}
.flex-container {
......
src/Praktikum/Prak5/Page.php
+ 10
− 2
View file @ 5a323222
......@@ -84,7 +84,7 @@ abstract class Page
* @param bool $autoreload true: auto reload the page every 5 s, false: not auto reload
* @return void
*/
protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false):void
protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false, string $stylesheet =""):void
{
$title = htmlspecialchars($title);
header("Content-type: text/html; charset=UTF-8");
......@@ -101,7 +101,15 @@ 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/test.css">
HTML;
$globalCSS = "./CSS/global.css";
if (is_file($globalCSS)) {
echo "\n\t<link rel='stylesheet' href='{$globalCSS}'>\n";
}
if (is_file($stylesheet)) {
echo "\n\t<link rel='stylesheet' href='{$stylesheet}'>\n";
}
echo <<< HTML
</head>
<body>
HTML;
......
src/Praktikum/Prak5/img/Header.png 0 → 100644
+ 0
− 0
View file @ 5a323222
src/Praktikum/Prak5/img/Header.png

892 KiB

src/Praktikum/Prak5/index.php
+ 1
− 1
View file @ 5a323222
......@@ -64,7 +64,7 @@ class Index extends Page
*/
protected function getViewData():array
{
return array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
return array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
"Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
}
......
src/Praktikum/Prak5/navbar.php
+ 12
− 4
View file @ 5a323222
......@@ -3,15 +3,23 @@
function buildNavbar (array $urlArray = [], bool $target_blank = false) : void {
function buildNavbar (array $urlArray = null, bool $target_blank = false) : void {
if (empty($urlArray)) {
$urlArray = array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
$urlArray = array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
"Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
}
echo "\n<nav>\n";
$target = $target_blank ? "target='_blank'" : "";
$target = $target_blank ? 'target="_blank"' : "";
foreach ($urlArray as $key => $value) {
echo "\t<a href='$value'" . $target . ">$key</a>\n";
$activePath = htmlspecialchars( "./" . basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
if ($value == $activePath) {
echo "\t<a class='active' href='$value' " . $target . ">$key</a>\n";
}
else {
echo "\t<a href='$value' " . $target . ">$key</a>\n";
}
}
echo "</nav>\n";
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment