marko/cwsvJudo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: designing main page

Browse Source
This commit is contained in:
marko
2025-06-25 19:59:39 +02:00
parent 5f9643c818
commit d19b3bc854
9 changed files with 145 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
homepage/cwsvJudo/Makefile.heliohost
View File

@@ -105,6 +105,8 @@ dist: all
mkdir -p $(distDir)/ mkdir -p $(distDir)/
# graphics # graphics
# promo images
cp -r ./res/promo $(distDir)/httpdocs/
# - wappen # - wappen
mkdir -p $(distDir)/httpdocs/ressourcen/graphiken/logos mkdir -p $(distDir)/httpdocs/ressourcen/graphiken/logos
find ./build/graphiken/cwsvJudoLogoWappen -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/logos \; find ./build/graphiken/cwsvJudoLogoWappen -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/logos \;

4
homepage/cwsvJudo/configs/heliohost/config.json
View File

@@ -3,7 +3,9 @@
"db": { "db": {
"host": "localhost", "host": "localhost",
"name": "cwsvjudo_main", "name": "cwsvjudo_main",
"user": "cwsvjudo_marko" "user": "cwsvjudo_marko",
"dbCharset": "ISO-8859-1",
"outCharset": "UTF-8"
} }
} }
} }

4
homepage/cwsvJudo/configs/localDocker/config.json
View File

@@ -3,7 +3,9 @@
"db": { "db": {
"host": "db", "host": "db",
"name": "cwsvjudo_main", "name": "cwsvjudo_main",
"user": "cwsvjudo_marko" "user": "cwsvjudo_marko",
"dbCharset": "UTF-8",
"outCharset": "UTF-8"
} }
} }
} }

9
homepage/cwsvJudo/src/css/materialize/card.css Normal file
View File

@@ -0,0 +1,9 @@
.card.horizontal .card-image {
/* width: 38%; */
}
.card.horizontal .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

34
homepage/cwsvJudo/src/css/materialize/parallax.css
View File

@@ -2,13 +2,29 @@
height: 38vh; height: 38vh;
} }
.parallax-container > .parallax > img{ .parallax-container>.parallax>img {
/* object-fit: cover;
prevent scaling that screws the ratio while still "filling" the parallax element width: 300%;
- @todo What would be the conditions to the resolution (ratio?) of the wallpaper to work well with it? height: 300%;
*/ }
width: auto;
min-width: 100%; @media only screen and (min-width: 600px) {
min-height: 150%; .parallax-container>.parallax>img {
max-height: 300%; width: 250%;
height: 250%;
}
}
@media only screen and (min-width: 992px) {
.parallax-container>.parallax>img {
width: 200%;
height: 200%;
}
}
@media only screen and (min-width: 1200px) {
.parallax-container>.parallax>img {
width: 150%;
height: 150%;
}
} }

1
homepage/cwsvJudo/src/pages/responsive/bootstrap.php
View File

@@ -3,6 +3,7 @@ require_once "config.php";
require_once "phpLibs/cwsvJudo/dbConnector.php"; require_once "phpLibs/cwsvJudo/dbConnector.php";
require_once "phpLibs/cwsvJudo/news.php"; require_once "phpLibs/cwsvJudo/news.php";
require_once "phpLibs/cwsvJudo/helper.php";
$config = json_decode( $config = json_decode(
json: file_get_contents(filename: $home . "/.local/config.json"), json: file_get_contents(filename: $home . "/.local/config.json"),

71
homepage/cwsvJudo/src/pages/responsive/index.php
View File

@@ -15,18 +15,16 @@ $mainNav = [
]; ];
$sections = [ $sections = [
'<h2>Judo im Chemnitzer WSV</h2>Herzlich willkommen auf der Website des Judo-Teams des <a href="http://www.cwsv-sport.de">Chem&shy;nitzer Frei&shy;zeit- und Wohng&shy;ebiets&shy;sport&shy;vereines e.&nbsp;V.</a>',
\CwsvJudo\News\newsBoard( \CwsvJudo\News\newsBoard(
dbHandle: $dbHandle, dbHandle: $dbHandle,
options: [ options: [
"limit" => 6, "limit" => 6,
"dbCharset" => "ISO-8859-1", "dbCharset" => $config["cwsvJudo"]["db"]["dbCharset"],
// "dbCharset" => "UTF-8", "outCharset" => $config["cwsvJudo"]["db"]["outCharset"],
// "outCharset" => "ISO-8859-1",
"outCharset" => "UTF-8",
] ]
), ),
"dolor sit amet", // "dolor sit amet",
"consectetur adipiscing elit",
]; ];
$wallpapers = [ $wallpapers = [
@@ -86,19 +84,34 @@ function main($sections, $wallpapers)
"</div>"; "</div>";
echo '<div class="section container">' . $section . "</div>"; echo '<div class="section container">' . $section . "</div>";
} }
echo '<div class="parallax-container">' .
'<div class="parallax">' .
"<img" .
' class="lazyload" ' .
' src="' .
$wallpapers[$idx + 1]["src"] .
'" ' .
' data-src="' .
$wallpapers[$idx + 1]["data-src"] .
'" ' .
">" .
"</div></div>";
} }
?> ?>
<html> <html lang="de">
<head> <head>
<!--Imports--> <!--Imports-->
<!-- - materialize Framework --> <!-- - materialize Framework -->
<link type="text/css" rel="stylesheet" href="/ressourcen/css/materialize.min.css" media="screen,projection" /> <link type="text/css" rel="stylesheet" href="/ressourcen/css/materialize.min.css" media="screen,projection">
<!-- - cwsvJudo adjustments --> <!-- - cwsvJudo adjustments -->
<link type="text/css" rel="stylesheet" href="/ressourcen/css/cwsvJudo.css"> <link type="text/css" rel="stylesheet" href="/ressourcen/css/cwsvJudo.css">
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judo im Chemnitzer WSV - Kinder- und Erwachsenentraining</title>
</head> </head>
<body> <body>
@@ -143,6 +156,46 @@ function main($sections, $wallpapers)
<?php main($sections, $wallpapers); ?> <?php main($sections, $wallpapers); ?>
</main> </main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="l6 s12">
<h5>Footer Content</h5>
<p>You can use rows and columns here to organize your footer content.</p>
</div>
<div class="l4 offset-l8 s12">
<h5>Links</h5>
<ul>
<li><a class="touchLink"
title="Seite auf HTML 5 Konformität prüfen"
href="http://validator.w3.org/check?uri=<?php echo urlencode(
getCurPagesUrl()
); ?>"
rel="nofollow"
>Valid <img
src="/ressourcen/graphiken/icons/HTML5_1Color_Black.svg"
alt="HTML 5"
title="HTML 5 Logo"
class="charImg">
</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2025 Copyright Text
<a class="right" href="#!">More Links</a>
</div>
</div>
</footer>
<!--JavaScript at end of body for optimized loading--> <!--JavaScript at end of body for optimized loading-->
<!-- Import external libraries --> <!-- Import external libraries -->
<!-- - materialize framework --> <!-- - materialize framework -->

21
homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/helper.php Normal file
View File

@@ -0,0 +1,21 @@
<?php
/// @brief Gibt die URL der gerade aufgerufenen Seite zurück
function getCurPagesUrl()
{
$pageURL = "http";
if ($_SERVER["HTTPS"] ?? null == "on") {
$pageURL .= "s";
}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .=
$_SERVER["SERVER_NAME"] .
":" .
$_SERVER["SERVER_PORT"] .
$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
}
return $pageURL;
}

23
homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/news.php
View File

@@ -95,13 +95,20 @@ class PromoImage
public function as_html() public function as_html()
{ {
// default style (photos): cropping image so it filles the box
// graphic style: scaling, so it is fully contained in the box
$style = str_ends_with($this->src, ".png")
? ' style="object-fit:contain"'
: "";
return '<img src="' . return '<img src="' .
$this->src . $this->src .
'" width="' . '" width="' .
$this->width . $this->width .
'" heigth="' . '" height="' .
$this->height . $this->height .
'" >'; '"' .
$style .
">";
} }
private string $src; private string $src;
@@ -130,16 +137,24 @@ class Entry
function as_card(): string function as_card(): string
{ {
$date_as_string = $this->date->format("Y-m-d");
return '<div class="card horizontal">' . return '<div class="card horizontal">' .
'<div class="card-image">' . '<div class="card-image">' .
$this->promo->as_html() . $this->promo->as_html() .
"</div>" . "</div>" .
'<div class="card-content">' . '<div class="card-content">' .
'<span class="card-title">' . '<time datetime="' .
$date_as_string .
'">' .
$date_as_string .
"</time>" .
'<div class="card-title">' .
$this->title . $this->title .
"</span>" . "</div>" .
'<div class="">' .
$this->content . $this->content .
"</div>" . "</div>" .
"</div>" .
"</div>"; "</div>";
} }
// private // private