From 7ce389d179e0a22203faeefa785e96ddccd6c387 Mon Sep 17 00:00:00 2001 From: pbbfa23abi Date: Fri, 4 Jul 2025 16:50:03 +0200 Subject: [PATCH] kleine ui fixes --- CSS/Element/card.css | 123 ++++++++++++++--------------- CSS/Element/form.css | 134 ++++++++++++++++++-------------- CSS/style.css | 93 +++++++++++----------- Controller/AdminController.php | 13 +++- Model/AdminModel.php | 19 +++++ Views/Admin/showAdminForm.phtml | 114 ++++++++++++++++++++------- Views/Welcome/showWelcome.phtml | 2 +- Views/header.phtml | 2 +- 8 files changed, 299 insertions(+), 201 deletions(-) diff --git a/CSS/Element/card.css b/CSS/Element/card.css index 272a636..3c42570 100644 --- a/CSS/Element/card.css +++ b/CSS/Element/card.css @@ -1,111 +1,104 @@ /* === Grundlayout === */ body { - margin: 0; - font-family: var(--font-family-main); - background-color: var(--brand-background); - color: var(--brand-white); + margin: 0; + font-family: var(--font-family-main); + background-color: var(--brand-background); + color: var(--brand-white); } /* === Header-Bereich === */ .welcome-header { - text-align: center; - margin: 60px 20px 40px 20px; + text-align: center; + margin: 60px 20px 40px 20px; } .welcome-heading { - font-size: 50px; - font-weight: 500; - color: var(--brand-primary); - margin-bottom: 20px; + font-size: 50px; + font-weight: 500; + color: var(--brand-primary); + margin-bottom: 20px; } .welcome-subheading { - font-size: 28px; - font-weight: bold; - color: white; - text-align: left; - max-width: 1000px; - margin: 0 auto; - padding-left: 230px; + font-size: 28px; + font-weight: bold; + color: white; + text-align: left; + max-width: 1000px; + margin: 0 auto; + padding-left: 230px; } /* === Kurs-Grid === */ -.course-grid { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 30px; - margin: 0 auto; +.courses-view { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 30px; + justify-content: center; + padding: 30px 0 30px 0; } /* === Kurs-Karte === */ .course-card { - flex: 0 0 calc(33.333% - 20px); /* Drei nebeneinander */ - background: var(--brand-white); - border-radius: 12px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - min-height: 300px; - display: flex; - flex-direction: column; - margin-top: 30px; + background: var(--brand-white); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + min-height: 300px; + display: flex; + flex-direction: column; + width: 100%; + max-width: 600px; } /* Optional: Kurs-Bildbereich */ .course-image { - background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */ - height: 180px; - width: 100%; + background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */ + height: 180px; + width: 100%; } /* === Kurs-Inhalt === */ .course-content { - background-color: var(--brand-primary); /* Orange */ - color: var(--brand-white); - padding: 20px; - font-size: 16px; - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 10px; + background-color: var(--brand-primary); /* Orange */ + color: var(--brand-white); + padding: 20px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 10px; } .course-left, .course-right { - display: flex; - flex-direction: column; - font-size: 14px; - line-height: 1.4; + display: flex; + flex-direction: column; + font-size: 14px; + line-height: 1.4; } .course-left div:first-child, .course-right div:first-child { - font-weight: bold; - font-size: 16px; + font-weight: bold; + font-size: 16px; } .course-right { - text-align: right; + text-align: right; } -/* === Responsive Anpassung === */ @media screen and (max-width: 1024px) { - .course-card { - flex: 0 0 calc(50% - 20px); - } } @media screen and (max-width: 640px) { - .course-card { - flex: 0 0 100%; - } + .welcome-heading { + font-size: 36px; + } - .welcome-heading { - font-size: 36px; - } - - .welcome-subheading { - font-size: 20px; - text-align: center; - } + .welcome-subheading { + font-size: 20px; + text-align: center; + } } diff --git a/CSS/Element/form.css b/CSS/Element/form.css index 49eef03..2ab719d 100644 --- a/CSS/Element/form.css +++ b/CSS/Element/form.css @@ -1,97 +1,115 @@ -main a{ - color: var(--brand-white) +main a { + color: var(--brand-white); } .form-flex { - display: flex; - flex-direction: column; - row-gap: 8px; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + row-gap: 8px; + align-items: center; + width: 100%; } form label { - width: fit-content; + width: fit-content; + color: var(--brand-white); } form input { - height: var(--h-md); - padding-left: 8px; - padding-right: 8px; + height: var(--h-md); + padding-left: 8px; + padding-right: 8px; } -form input, textarea { - border: var(--border-primary); - padding: 8px; - font-size: 1rem; - margin-top: 5px; - width: 100%; +form input, +textarea { + border: var(--border-primary); + padding: 8px; + font-size: 1rem; + margin-top: 5px; + width: 100%; } .input { - display: flex; - flex-direction: column; - row-gap: 2px; - align-items: start; - width: 100%; + display: flex; + flex-direction: column; + row-gap: 2px; + align-items: start; + width: 100%; } .input-short { - max-width: 240px; + max-width: 240px; } .form-grid { - display: grid; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + width: 100%; + max-width: 600px; + margin: auto; +} + +.form-grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + width: 100%; + max-width: 600px; + margin: auto; +} + +@media screen and (max-width: 1024px) { + .form-grid-3 { grid-template-columns: repeat(2, 1fr); - gap: 20px; - width: 100%; - max-width: 600px; - margin: auto; + } +} + +@media screen and (max-width: 640px) { + .form-grid-3 { + grid-template-columns: repeat(1, 1fr); + } } .form-grid label { - display: flex; - flex-direction: column; - font-weight: bold; + display: flex; + flex-direction: column; + font-weight: bold; } .form-grid textarea { - min-height: 100px; - width: 100%; -} - -.form-grid input:last-child, div:nth-last-child(4) { - grid-column: 1 / -1; - column-span: 2; + min-height: 100px; + width: 100%; } form .error { - color: var(--error); - border-color: var(--error); - margin-block-start: 4px; - margin-block-end: 0; - outline-color: var(--error); + color: var(--error); + border-color: var(--error); + margin-block-start: 4px; + margin-block-end: 0; + outline-color: var(--error); } -.form-user{ - justify-content: center!important; - grid-template-columns: auto!important; +.form-user { + justify-content: center !important; + grid-template-columns: auto !important; } /* fix radio buttons registration */ -.input:nth-child(5){ - flex-direction: row; - justify-content: space-between; - max-width: 290px; - align-items: center; +.radio { + flex-direction: row; + justify-content: space-between; + max-width: 290px; + align-items: center; } -.input:nth-child(5) label{ - display: flex; - flex-direction: row; - align-items: center; - gap: 10px; +.radio { + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; } -.input:nth-child(5) label input{ - margin-top: 0; +.radio input { + margin-top: 0; } diff --git a/CSS/style.css b/CSS/style.css index fcb7762..367bdb9 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -7,7 +7,9 @@ @import url(Element/button.css); @import url(Element/card.css); -*, *:before, *:after { +*, +*:before, +*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -15,99 +17,98 @@ } body { - background-color: var(--brand-background); - color: #666; - font-size: 15px; - margin: 0; + background-color: var(--brand-background); + color: var(--brand-white); + font-size: 15px; + margin: 0; } h1 { - color: var(--brand-white); - font-size: var(--font-size-title-h1); + color: var(--brand-white); + font-size: var(--font-size-title-h1); } h1 span { - color: orange; - font-size: 40px; + color: orange; + font-size: 40px; } h2 { - color: orange; + color: orange; } main { - margin-top: 190px; + margin-top: 190px; } .msg { - text-align: center; - font-size: 17px; - font-weight: 700; + text-align: center; + font-size: 17px; + font-weight: 700; } .msg a { - text-decoration: none; - color: #09add0; - + text-decoration: none; + color: #09add0; } .msg a:hover { - color: orange; + color: orange; } .articleImg { - width: 100%; - border: 2px solid lightskyblue; - padding: 5px; - margin: 0 0 15px 0; + width: 100%; + border: 2px solid lightskyblue; + padding: 5px; + margin: 0 0 15px 0; } .welcomeImg { - width: 100%; - padding: 5px; + width: 100%; + padding: 5px; } .articleInfo { - font-weight: bold; + font-weight: bold; } /*** Loesung Workshop-Seite ***/ .textContent { - padding: 0 10px 0 30px; + padding: 0 10px 0 30px; } @media (max-width: 529px) { - .textContent { - padding: 15px 0 0 0; - } + .textContent { + padding: 15px 0 0 0; + } } .event h3 { - margin: 15px 0 5px 0; - font-size: 20px; - text-align: left; + margin: 15px 0 5px 0; + font-size: 20px; + text-align: left; } .orange { - color: orange; - display: block; - font-size: 18px; - margin: 0 0 5px 0; + color: orange; + display: block; + font-size: 18px; + margin: 0 0 5px 0; } -.d-flex-between{ - display: flex; - justify-content: space-between; - align-items: center; +.d-flex-between { + display: flex; + justify-content: space-between; + align-items: center; } -.hover:hover{ - opacity: .75; - text-decoration: none; +.hover:hover { + opacity: 0.75; + text-decoration: none; } -.paragraph{ - font-size: var(--font-size-smalltext); - color: var(--brand-white); +.paragraph { + font-size: var(--font-size-smalltext); + color: var(--brand-white); } diff --git a/Controller/AdminController.php b/Controller/AdminController.php index a0caf74..aeb17f4 100644 --- a/Controller/AdminController.php +++ b/Controller/AdminController.php @@ -10,7 +10,18 @@ class AdminController private $db; private $validData = array(); private $errors = array(); - private $labels = array("name" => "Name*", "preis" => "€ Preis*", "dauer" => "Dauer* (Stunden)", "rabatt" => "Rabatt", "kategorie" => "Kategorie", "stadt" => "Stadt*", "strasse" => "Straße und Nummer*", "plz" => "PLZ*" ,"beschreibung" => "Beschreibung"); + private $labels = array( + "name" => "Name*", + "preis" => "€ Preis*", + "dauer" => "Dauer* (Stunden)", + "rabatt" => "Rabatt", + "kategorie" => "Kategorie", + "|" => "", + "stadt" => "Stadt*", + "strasse" => "Straße und Nummer*", + "plz" => "PLZ*", + "|" => "", + "beschreibung" => "Beschreibung"); public function __construct($view) diff --git a/Model/AdminModel.php b/Model/AdminModel.php index 63dc2da..98b771d 100644 --- a/Model/AdminModel.php +++ b/Model/AdminModel.php @@ -59,4 +59,23 @@ class AdminModel extends Database return true; } + + public function getMyCourses() { + $sql = "SELECT k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, o.stadt, o.strasse, o.plz, b.note, b.kommentar + FROM kurs AS k + JOIN ort AS o ON o.id = k.ort_id + LEFT JOIN bewertungen AS b ON b.kurs_id = k.id + ORDER BY k.name;"; + + $pdo = $this->linkDB(); + + try { + $sth = $pdo->prepare($sql); + $sth->execute(); + return $sth->fetchAll(\PDO::FETCH_ASSOC); + } catch (PDOException $e) { + new \Blog\Library\ErrorMsg("Fehler beim Lesen der Daten.", $e); + die; + } + } } \ No newline at end of file diff --git a/Views/Admin/showAdminForm.phtml b/Views/Admin/showAdminForm.phtml index 9cf5c33..138f254 100644 --- a/Views/Admin/showAdminForm.phtml +++ b/Views/Admin/showAdminForm.phtml @@ -2,42 +2,98 @@ include dirname(__DIR__).'/header.phtml'; ?> - -

Neuer Kurs

-
+ +' . htmlspecialchars($errors[$name]) . '

' : ''; - + + + {$errorMessage} + + HTML; + } -foreach ($labels as $key => $value) { - $hasError = isset($errors[$key]); - $errorClass = $hasError ? ' error' : ''; - - echo '
'; - echo ''; - - if ($key == "beschreibung") { - echo ''; - } else { - echo ''; } - - if ($hasError) { - echo '

' . $errors[$key] . '

'; - } - echo '
'; - $index++; +?> + + +
+ +
+
+ +getMyCourses(); +$doc = new DOMDocument('1.0', 'UTF-8'); + +if (!empty($courses)) { + echo '
'; + foreach ($courses as $kurs) { + $courseCard = $doc->createElement('div'); + $courseCard->setAttribute('class', 'course-card'); + + $courseImage = $doc->createElement('div'); + $courseImage->setAttribute('class', 'course-image'); + $courseCard->appendChild($courseImage); + + $courseContent = $doc->createElement('div'); + $courseContent->setAttribute('class', 'course-content'); + $courseCard->appendChild($courseContent); + + $courseLeft = $doc->createElement('div'); + $courseLeft->setAttribute('class', 'course-left'); + $courseContent->appendChild($courseLeft); + + $note = $doc->createElement('div', htmlspecialchars($kurs['note'] ?? 'Keine Bewertung') . ' ★'); + $courseLeft->appendChild($note); + + $name = $doc->createElement('div', htmlspecialchars($kurs['name'])); + $courseLeft->appendChild($name); + + $address = $doc->createElement('div', htmlspecialchars($kurs['strasse'] . ', ' . $kurs['stadt'] . ' ' . $kurs['plz'])); + $courseLeft->appendChild($address); + + $courseRight = $doc->createElement('div'); + $courseRight->setAttribute('class', 'course-right'); + $courseContent->appendChild($courseRight); + + $price = $doc->createElement('div', htmlspecialchars($kurs['preis']) . ' €'); + $courseRight->appendChild($price); + + $category = $doc->createElement('div', htmlspecialchars($kurs['kategorie'] ?? 'Keine Kategorie')); + $courseRight->appendChild($category); + + echo $doc->saveHTML($courseCard); + } + echo '
'; +} else { + echo '

Keine Kurse gefunden.

'; } ?> - - - - \ No newline at end of file diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml index 78c2255..dd820db 100644 --- a/Views/Welcome/showWelcome.phtml +++ b/Views/Welcome/showWelcome.phtml @@ -7,7 +7,7 @@ include dirname(__DIR__) . '/header.phtml';

KURSE & ERLEBNISSE JEDER ART

Alle Kurse in deiner Nähe – auf einen Blick

-
+
-
\ No newline at end of file +
\ No newline at end of file