PBBFA23AHR/kurs-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsivität

Browse Source
This commit is contained in:
Illia Hromovoi 2025-07-10 12:46:18 +02:00
parent aa20731efc
commit 96e569c66d
7 changed files with 193 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CSS/Element/card.css
View File

@ -24,18 +24,23 @@ body {
color: white; color: white;
text-align: left; text-align: left;
max-width: 1000px; max-width: 1000px;
margin: 0 auto;
padding-left: 230px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.course-grid { .course-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 30px; gap: 40px;
margin: 0 auto; margin-left: 20px;
} }
@media screen and (max-width: 765px) {
.course-grid{
margin-left: 0;
}
}
.course-card { .course-card {
background: var(--brand-white); background: var(--brand-white);
border-radius: 12px; border-radius: 12px;

1
CSS/Element/filter_box.css
View File

@ -2,7 +2,6 @@
background: #EB8202; background: #EB8202;
color: #fff; color: #fff;
padding: 1em; padding: 1em;
max-width: 300px;
border-radius: 8px; border-radius: 8px;
font-family: sans-serif; font-family: sans-serif;
margin-bottom: 1em; margin-bottom: 1em;

12
CSS/Element/form.css
View File

@ -51,6 +51,12 @@ textarea {
margin: auto; margin: auto;
} }
@media screen and (max-width: 1024px) {
.form-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.form-grid-3 { .form-grid-3 {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -113,3 +119,9 @@ form .error {
background: transparent!important; background: transparent!important;
border: transparent!important; border: transparent!important;
} }
@media only screen and (max-width: 500px) {
.input-transparent{
display: none;
}
}

16
CSS/style.css
View File

@ -24,6 +24,7 @@ body {
color: var(--brand-white); color: var(--brand-white);
font-size: 15px; font-size: 15px;
margin: 0; margin: 0;
overflow-x: hidden;
} }
h1 { h1 {
@ -48,6 +49,13 @@ main {
margin-top: 190px; margin-top: 190px;
} }
@media screen and (max-width: 1024px) {
main{
margin-top: 50px;
}
}
.msg { .msg {
text-align: center; text-align: center;
font-size: 17px; font-size: 17px;
@ -110,6 +118,14 @@ main {
align-items: center; align-items: center;
} }
@media only screen and (max-width: 500px) {
.d-flex-between{
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
}
.hover:hover { .hover:hover {
opacity: 0.75; opacity: 0.75;
text-decoration: none; text-decoration: none;

39
CSS/style_columns.css
View File

@ -7,25 +7,37 @@
/*** Container ***/ /*** Container ***/
.container{ .container {
max-width: 90%; max-width: 90%;
padding: 24px 42px 24px 42px; /* padding: 24px 42px 24px 42px; */
margin: 0 auto; margin: 0 auto;
color: var(--brand-white); color: var(--brand-white);
} }
@media only screen and (max-width: 500px) {
.container {
padding: 5px;
}
}
.row { .row {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 800px) {
.row {
display: block;
}
}
/*** Spaltendefinitionen Smartphone Ansicht ***/ /*** Spaltendefinitionen Smartphone Ansicht ***/
@media (max-width: 529px) { @media (max-width: 529px) {
.col-s-12 { .col-s-12 {
flex: 0 0 100%; flex: 0 0 100%;
} }
/*** Loesung Workshop-Seite ***/ /*** Loesung Workshop-Seite ***/
.textContent { .textContent {
padding: 15px 0 0 0; padding: 15px 0 0 0;
@ -33,19 +45,22 @@
} }
/*** Spaltendefinitionen Tablet Ansicht ***/ /*** Spaltendefinitionen Tablet Ansicht ***/
@media (min-width: 530px) { @media (min-width: 750px) {
.col-m-1 { .col-m-1 {
flex: 0 0 100%; flex: 0 0 100%;
} }
.col-m-4 { .col-m-4 {
flex: 0 0 33.3333333%; flex: 0 0 33.3333333%;
} }
.col-m-6 { .col-m-6 {
flex: 0 0 50%; flex: 0 0 50%;
} }
.col-m-12 { .col-m-12 {
flex: 0 0 100%; flex: 0 0 100%;
} }
} }
/*** Spaltendefinitionen Desktop Ansicht ***/ /*** Spaltendefinitionen Desktop Ansicht ***/
@ -53,21 +68,35 @@
.col-1 { .col-1 {
flex: 0 0 8.3333333%; flex: 0 0 8.3333333%;
} }
.col-3 { .col-3 {
flex: 0 0 25%; flex: 0 0 25%;
} }
.col-4 { .col-4 {
flex: 0 0 33.3333333%; flex: 0 0 33.3333333%;
} }
.col-card-4{
flex: 1 1 calc((100% - (3 - 1) * 40px) / 3);
}
.col-5 { .col-5 {
flex: 0 0 41.6666667%; flex: 0 0 41.6666667%;
} }
.col-6 { .col-6 {
flex: 0 0 50%; flex: 0 0 50%;
} }
.col-8 { .col-8 {
flex: 0 0 66.66666667%; flex: 0 0 66.66666667%;
} }
.col-9{
flex: 0 0 75%;
}
.col-12 { .col-12 {
flex: 0 0 100%; flex: 0 0 100%;
} }

200
Views/Welcome/showWelcome.phtml
View File

@ -2,10 +2,10 @@
include dirname(__DIR__) . '/header.phtml'; include dirname(__DIR__) . '/header.phtml';
// Filter auslesen // Filter auslesen
$rating = $_GET['rating'] ?? ''; $rating = $_GET['rating'] ?? '';
$price = $_GET['price'] ?? ''; $price = $_GET['price'] ?? '';
$location = $_GET['location'] ?? ''; $location = $_GET['location'] ?? '';
?> ?>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -13,114 +13,112 @@ $location = $_GET['location'] ?? '';
<h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1> <h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
<p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p> <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-3 col-m-12">
<div class="filter-box"> <div class="filter-box">
<form method="get"> <form method="get">
<label for="rating">Bewertung:</label> <label for="rating">Bewertung:</label>
<select name="rating" id="rating"> <select name="rating" id="rating">
<option value="">Alle</option> <option value="">Alle</option>
<option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option> <option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
<option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option> <option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
<option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option> <option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
</select> </select>
<label for="price">Preis:</label> <label for="price">Preis:</label>
<select name="price" id="price"> <select name="price" id="price">
<option value="">Alle</option> <option value="">Alle</option>
<option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option> <option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
<option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option> <option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
</select> </select>
<button type="submit">Anwenden</button> <button type="submit">Anwenden</button>
</form> </form>
</div>
</div> </div>
</div>
<div class="col-8"> <div class="col-9">
<!-- KURSLISTE --> <!-- KURSLISTE -->
<div class="course-grid row"> <div class="course-grid row">
<?php <?php
$kurse = [ $kurse = [
[ [
'bewertung' => 5, 'bewertung' => 5,
'titel' => 'Marketing Pro', 'titel' => 'Marketing Pro',
'adresse' => 'Bulu ulu Straße 17', 'adresse' => 'Bulu ulu Straße 17',
'preis' => '59,99€', 'preis' => '59,99€',
'ort' => '33333 Frankfurt', 'ort' => '33333 Frankfurt',
'leiter' => 'Max Mustermann' 'leiter' => 'Max Mustermann'
], ],
[ [
'bewertung' => 4, 'bewertung' => 4,
'titel' => 'Design Basics', 'titel' => 'Design Basics',
'adresse' => 'Musterstraße 10', 'adresse' => 'Musterstraße 10',
'preis' => '39,99€', 'preis' => '39,99€',
'ort' => '10115 Berlin', 'ort' => '10115 Berlin',
'leiter' => 'Lisa Beispiel' 'leiter' => 'Lisa Beispiel'
], ],
[ [
'bewertung' => 5, 'bewertung' => 5,
'titel' => 'Excel Masterclass', 'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5', 'adresse' => 'Tabellenweg 5',
'preis' => '49,99€', 'preis' => '49,99€',
'ort' => '20457 Hamburg', 'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle' 'leiter' => 'Thomas Tabelle'
], ],
[ [
'bewertung' => 5, 'bewertung' => 5,
'titel' => 'Excel Masterclass', 'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5', 'adresse' => 'Tabellenweg 5',
'preis' => '49,99€', 'preis' => '49,99€',
'ort' => '20457 Hamburg', 'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle' 'leiter' => 'Thomas Tabelle'
], ],
[ [
'bewertung' => 5, 'bewertung' => 5,
'titel' => 'Excel Masterclass', 'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5', 'adresse' => 'Tabellenweg 5',
'preis' => '49,99€', 'preis' => '49,99€',
'ort' => '20457 Hamburg', 'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle' 'leiter' => 'Thomas Tabelle'
], ],
]; ];
// Filter anwenden // Filter anwenden
$filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) { $filteredKurse = array_filter($kurse, function ($kurs) use ($rating, $location) {
if ($rating && $kurs['bewertung'] < $rating) return false; if ($rating && $kurs['bewertung'] < $rating) return false;
if ($location && stripos($kurs['ort'], $location) === false) return false; if ($location && stripos($kurs['ort'], $location) === false) return false;
return true; return true;
});
// Preise in Float umwandeln für Sortierung
if ($price) {
usort($filteredKurse, function($a, $b) use ($price) {
$priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis'])));
$priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis'])));
return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA;
}); });
}
foreach ($filteredKurse as $kurs): ?> // Preise in Float umwandeln für Sortierung
<div class="course-card col-4"> if ($price) {
<div class="course-image"></div> usort($filteredKurse, function ($a, $b) use ($price) {
<div class="course-content"> $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis'])));
<div class="course-left"> $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis'])));
<div><?= $kurs['bewertung'] ?> ★</div> return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA;
<div><?= $kurs['titel'] ?></div> });
<div>Kursleiter: <?= $kurs['leiter'] ?></div> }
<div><?= $kurs['adresse'] ?></div>
</div> foreach ($filteredKurse as $kurs): ?>
<div class="course-right"> <div class="course-card col-card-4 col-m-6">
<div><?= $kurs['preis'] ?></div> <div class="course-image"></div>
<div><?= $kurs['ort'] ?></div> <div class="course-content">
<div class="course-left">
<div><?= $kurs['bewertung'] ?> ★</div>
<div><?= $kurs['titel'] ?></div>
<div>Kursleiter: <?= $kurs['leiter'] ?></div>
<div><?= $kurs['adresse'] ?></div>
</div>
<div class="course-right">
<div><?= $kurs['preis'] ?></div>
<div><?= $kurs['ort'] ?></div>
</div>
</div> </div>
</div> </div>
</div> <?php endforeach; ?>
<?php endforeach; ?> </div>
</div> </div>
</div> </div>
</div>
</div> </div>

40
Views/header.phtml
View File

@ -14,25 +14,31 @@
</head> </head>
<body> <body>
<header> <div class="container">
<nav class="d-flex-between"> <div class="row">
<a id="logo" href="index.php">bib<span>course</span></a> <div class="col-12">
<div style="column-gap: 8px;" class="d-flex-between"> <header>
<div style="column-gap: 8px;" class="d-flex-between"> <nav class="d-flex-between">
<?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?> <a id="logo" href="index.php">bib<span>course</span></a>
<a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage"> <div style="column-gap: 8px;" class="d-flex-between">
<?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?> <div style="column-gap: 8px;" class="d-flex-between">
<span class="btn btn-user"> <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
<a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage">
<?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
<span class="btn btn-user">
<span class="material-icons">person</span> <span class="material-icons">person</span>
</span> </span>
</a> </a>
<?php else: ?> <?php else: ?>
<a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a> <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
<a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a> <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div>
</nav>
</header>
</div> </div>
</nav> </div>
</header> </div>
<!-- TODO Transparent mit Fehleranzeige bei der Anmeldung --> <!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
<main> <main>