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;
text-align: left;
max-width: 1000px;
margin: 0 auto;
padding-left: 230px;
margin-bottom: 30px;
}
.course-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 0 auto;
gap: 40px;
margin-left: 20px;
}
@media screen and (max-width: 765px) {
.course-grid{
margin-left: 0;
}
}
.course-card {
background: var(--brand-white);
border-radius: 12px;

1
CSS/Element/filter_box.css
View File

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

12
CSS/Element/form.css
View File

@ -51,6 +51,12 @@ textarea {
margin: auto;
}
@media screen and (max-width: 1024px) {
.form-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
@ -113,3 +119,9 @@ form .error {
background: 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);
font-size: 15px;
margin: 0;
overflow-x: hidden;
}
h1 {
@ -48,6 +49,13 @@ main {
margin-top: 190px;
}
@media screen and (max-width: 1024px) {
main{
margin-top: 50px;
}
}
.msg {
text-align: center;
font-size: 17px;
@ -110,6 +118,14 @@ main {
align-items: center;
}
@media only screen and (max-width: 500px) {
.d-flex-between{
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
}
.hover:hover {
opacity: 0.75;
text-decoration: none;

39
CSS/style_columns.css
View File

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

200
Views/Welcome/showWelcome.phtml
View File

@ -2,10 +2,10 @@
include dirname(__DIR__) . '/header.phtml';
// Filter auslesen
$rating = $_GET['rating'] ?? '';
$price = $_GET['price'] ?? '';
$rating = $_GET['rating'] ?? '';
$price = $_GET['price'] ?? '';
$location = $_GET['location'] ?? '';
?>
?>
<div class="container">
<div class="row">
@ -13,114 +13,112 @@ $location = $_GET['location'] ?? '';
<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="row">
<div class="col-4">
<div class="filter-box">
<form method="get">
<label for="rating">Bewertung:</label>
<select name="rating" id="rating">
<option value="">Alle</option>
<option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
<option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
<option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
</select>
<div class="row">
<div class="col-3 col-m-12">
<div class="filter-box">
<form method="get">
<label for="rating">Bewertung:</label>
<select name="rating" id="rating">
<option value="">Alle</option>
<option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
<option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
<option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
</select>
<label for="price">Preis:</label>
<select name="price" id="price">
<option value="">Alle</option>
<option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
<option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
</select>
<button type="submit">Anwenden</button>
</form>
<label for="price">Preis:</label>
<select name="price" id="price">
<option value="">Alle</option>
<option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
<option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
</select>
<button type="submit">Anwenden</button>
</form>
</div>
</div>
</div>
<div class="col-8">
<!-- KURSLISTE -->
<div class="course-grid row">
<?php
$kurse = [
[
'bewertung' => 5,
'titel' => 'Marketing Pro',
'adresse' => 'Bulu ulu Straße 17',
'preis' => '59,99€',
'ort' => '33333 Frankfurt',
'leiter' => 'Max Mustermann'
],
[
'bewertung' => 4,
'titel' => 'Design Basics',
'adresse' => 'Musterstraße 10',
'preis' => '39,99€',
'ort' => '10115 Berlin',
'leiter' => 'Lisa Beispiel'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
];
<div class="col-9">
<!-- KURSLISTE -->
<div class="course-grid row">
<?php
$kurse = [
[
'bewertung' => 5,
'titel' => 'Marketing Pro',
'adresse' => 'Bulu ulu Straße 17',
'preis' => '59,99€',
'ort' => '33333 Frankfurt',
'leiter' => 'Max Mustermann'
],
[
'bewertung' => 4,
'titel' => 'Design Basics',
'adresse' => 'Musterstraße 10',
'preis' => '39,99€',
'ort' => '10115 Berlin',
'leiter' => 'Lisa Beispiel'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
[
'bewertung' => 5,
'titel' => 'Excel Masterclass',
'adresse' => 'Tabellenweg 5',
'preis' => '49,99€',
'ort' => '20457 Hamburg',
'leiter' => 'Thomas Tabelle'
],
];
// Filter anwenden
$filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) {
if ($rating && $kurs['bewertung'] < $rating) return false;
if ($location && stripos($kurs['ort'], $location) === false) return false;
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;
// Filter anwenden
$filteredKurse = array_filter($kurse, function ($kurs) use ($rating, $location) {
if ($rating && $kurs['bewertung'] < $rating) return false;
if ($location && stripos($kurs['ort'], $location) === false) return false;
return true;
});
}
foreach ($filteredKurse as $kurs): ?>
<div class="course-card col-4">
<div class="course-image"></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>
// 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): ?>
<div class="course-card col-card-4 col-m-6">
<div class="course-image"></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>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>

40
Views/header.phtml
View File

@ -14,25 +14,31 @@
</head>
<body>
<header>
<nav class="d-flex-between">
<a id="logo" href="index.php">bib<span>course</span></a>
<div style="column-gap: 8px;" class="d-flex-between">
<div style="column-gap: 8px;" class="d-flex-between">
<?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">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<nav class="d-flex-between">
<a id="logo" href="index.php">bib<span>course</span></a>
<div style="column-gap: 8px;" class="d-flex-between">
<div style="column-gap: 8px;" class="d-flex-between">
<?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>
</a>
<?php else: ?>
<a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
<a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
<?php endif; ?>
</div>
</a>
<?php else: ?>
<a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
<a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
<?php endif; ?>
</div>
</div>
</nav>
</header>
</div>
</nav>
</header>
</div>
</div>
<!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
<main>