kleine ui fixes
This commit is contained in:
parent
b5118a699f
commit
7ce389d179
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,42 +2,98 @@
|
||||
include dirname(__DIR__).'/header.phtml';
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<h2>Neuer Kurs</h2>
|
||||
<form method="post" class="form-grid">
|
||||
<form method="post">
|
||||
<?php
|
||||
function createInputField($label, $name, $errors, $validData, $type = 'input') {
|
||||
$errorClass = isset($errors[$name]) ? 'error' : '';
|
||||
$value = htmlspecialchars($validData[$name] ?? '');
|
||||
$errorMessage = isset($errors[$name]) ? '<p class="error">' . htmlspecialchars($errors[$name]) . '</p>' : '';
|
||||
|
||||
if($type === 'textarea') {
|
||||
return <<<HTML
|
||||
<div style="grid-column: 1 / -1;" class="input">
|
||||
<label for="{$name}">{$label}</label>
|
||||
<textarea class="{$errorClass}" name="{$name}">{$value}</textarea>
|
||||
{$errorMessage}
|
||||
</div>
|
||||
HTML;
|
||||
}
|
||||
|
||||
return <<<HTML
|
||||
<div class="input">
|
||||
<label for="{$name}">{$label}</label>
|
||||
<input class="{$errorClass}" type="text" name="{$name}" value="{$value}">
|
||||
{$errorMessage}
|
||||
</div>
|
||||
HTML;
|
||||
}
|
||||
echo '<div style="margin-top: 32px;" class="form-grid-3">';
|
||||
foreach ($labels as $name => $label) {
|
||||
if($name === "|") {
|
||||
echo '</div>';
|
||||
echo '<div style="margin-top: 32px;" class="form-grid-3">';
|
||||
} else {
|
||||
echo createInputField($label, $name, $errors, $validData, $type = $name === 'beschreibung' ? 'textarea' : 'input');
|
||||
}
|
||||
}
|
||||
echo '</div>';
|
||||
?>
|
||||
<input type="hidden" name="controller" value="admin">
|
||||
<input type="hidden" name="do" value="validateForm">
|
||||
<div class="form-grid-3" style="margin-top: 16px;">
|
||||
<input style="grid-column: 3;" type="submit" name="submit" value="Absenden">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
$index = 0;
|
||||
$adminModel = new \Blog\Model\AdminModel();
|
||||
$courses = $adminModel->getMyCourses();
|
||||
$doc = new DOMDocument('1.0', 'UTF-8');
|
||||
|
||||
foreach ($labels as $key => $value) {
|
||||
$hasError = isset($errors[$key]);
|
||||
$errorClass = $hasError ? ' error' : '';
|
||||
if (!empty($courses)) {
|
||||
echo '<div class="courses-view">';
|
||||
foreach ($courses as $kurs) {
|
||||
$courseCard = $doc->createElement('div');
|
||||
$courseCard->setAttribute('class', 'course-card');
|
||||
|
||||
echo '<div class="input">';
|
||||
echo '<label for="' . $key . '">' . $value . '</label>';
|
||||
$courseImage = $doc->createElement('div');
|
||||
$courseImage->setAttribute('class', 'course-image');
|
||||
$courseCard->appendChild($courseImage);
|
||||
|
||||
if ($key == "beschreibung") {
|
||||
echo '<textarea id="' . $key . '" name="' . $key . '" class="' . $errorClass . '">';
|
||||
if (isset($validData[$key])) {
|
||||
echo $validData[$key];
|
||||
}
|
||||
echo '</textarea>';
|
||||
} else {
|
||||
echo '<input class="' . $errorClass . '" type="text" name="' . $key . '" value="' . (isset($validData[$key]) ? $validData[$key] : '') . '">';
|
||||
$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);
|
||||
}
|
||||
|
||||
if ($hasError) {
|
||||
echo '<p class="error">' . $errors[$key] . '</p>';
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
$index++;
|
||||
} else {
|
||||
echo '<p>Keine Kurse gefunden.</p>';
|
||||
}
|
||||
?>
|
||||
|
||||
<input type="hidden" name="controller" value="admin">
|
||||
<input type="hidden" name="do" value="validateForm">
|
||||
<input type="submit" name="submit" value="Absenden"></form>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
||||
@ -7,7 +7,7 @@ include dirname(__DIR__) . '/header.phtml';
|
||||
<div class="col-12">
|
||||
<h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
|
||||
<p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
|
||||
<div class="course-grid">
|
||||
<div class="courses-view">
|
||||
<?php
|
||||
// Beispiel-Kurse
|
||||
$kurse = [
|
||||
|
||||
@ -44,4 +44,4 @@
|
||||
</nav>
|
||||
</header>
|
||||
<!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
|
||||
<main style="color: transparent">
|
||||
<main>
|
||||
Loading…
x
Reference in New Issue
Block a user