WIP: designing main page

2025-06-25 19:59:39 +02:00
parent 5f9643c818
commit d19b3bc854
9 changed files with 145 additions and 24 deletions
--- a/homepage/cwsvJudo/Makefile.heliohost
+++ b/homepage/cwsvJudo/Makefile.heliohost
@@ -105,6 +105,8 @@ dist: all
 	mkdir -p $(distDir)/

 # graphics
+# promo images
+	cp -r ./res/promo $(distDir)/httpdocs/
 # - wappen
 	mkdir -p $(distDir)/httpdocs/ressourcen/graphiken/logos
 	find ./build/graphiken/cwsvJudoLogoWappen -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/logos \;
--- a/homepage/cwsvJudo/configs/heliohost/config.json
+++ b/homepage/cwsvJudo/configs/heliohost/config.json
@@ -3,7 +3,9 @@
        "db": {
            "host": "localhost",
            "name": "cwsvjudo_main",
-            "user": "cwsvjudo_marko"
+            "user": "cwsvjudo_marko",
+            "dbCharset": "ISO-8859-1",
+            "outCharset": "UTF-8"
        }
    }
 }
--- a/homepage/cwsvJudo/configs/localDocker/config.json
+++ b/homepage/cwsvJudo/configs/localDocker/config.json
@@ -3,7 +3,9 @@
        "db": {
            "host": "db",
            "name": "cwsvjudo_main",
-            "user": "cwsvjudo_marko"
+            "user": "cwsvjudo_marko",
+            "dbCharset": "UTF-8",
+            "outCharset": "UTF-8"
        }
    }
 }
--- a/homepage/cwsvJudo/src/css/materialize/card.css
+++ b/homepage/cwsvJudo/src/css/materialize/card.css
@@ -0,0 +1,9 @@
+.card.horizontal .card-image {
+  /* width: 38%; */
+}
+
+.card.horizontal .card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
--- a/homepage/cwsvJudo/src/css/materialize/parallax.css
+++ b/homepage/cwsvJudo/src/css/materialize/parallax.css
@@ -2,13 +2,29 @@
    height: 38vh;
 }

-.parallax-container > .parallax > img{
-/* 
-    prevent scaling that screws the ratio while still "filling" the parallax element 
-    - @todo What would be the conditions to the resolution (ratio?) of the wallpaper to work well with it? 
-*/
-    width: auto;
-    min-width: 100%;
-    min-height: 150%;
-    max-height: 300%;
+.parallax-container>.parallax>img {
+    object-fit: cover;
+    width: 300%;
+    height: 300%;
+}
+
+@media only screen and (min-width: 600px) {
+    .parallax-container>.parallax>img {
+        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%;
+    }
 }
--- a/homepage/cwsvJudo/src/pages/responsive/bootstrap.php
+++ b/homepage/cwsvJudo/src/pages/responsive/bootstrap.php
@@ -3,6 +3,7 @@ require_once "config.php";

 require_once "phpLibs/cwsvJudo/dbConnector.php";
 require_once "phpLibs/cwsvJudo/news.php";
+require_once "phpLibs/cwsvJudo/helper.php";

 $config = json_decode(
    json: file_get_contents(filename: $home . "/.local/config.json"),
--- a/homepage/cwsvJudo/src/pages/responsive/index.php
+++ b/homepage/cwsvJudo/src/pages/responsive/index.php
@@ -15,18 +15,16 @@ $mainNav = [
 ];

 $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(
        dbHandle: $dbHandle,
        options: [
            "limit" => 6,
-            "dbCharset" => "ISO-8859-1",
-            // "dbCharset" => "UTF-8",
-            // "outCharset" => "ISO-8859-1",
-            "outCharset" => "UTF-8",
+            "dbCharset" => $config["cwsvJudo"]["db"]["dbCharset"],
+            "outCharset" => $config["cwsvJudo"]["db"]["outCharset"],
        ]
    ),
-    "dolor sit amet",
-    "consectetur adipiscing elit",
+    // "dolor sit amet",
 ];

 $wallpapers = [
@@ -86,19 +84,34 @@ function main($sections, $wallpapers)
            "</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>
    <!--Imports-->
    <!-- - 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 -->
    <link type="text/css" rel="stylesheet" href="/ressourcen/css/cwsvJudo.css">

    <!--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>

 <body>
@@ -143,6 +156,46 @@ function main($sections, $wallpapers)
        <?php main($sections, $wallpapers); ?>
    </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-->
    <!-- Import external libraries -->
    <!-- - materialize framework -->
--- a/homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/helper.php
+++ b/homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/helper.php
@@ -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;
+}
--- a/homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/news.php
+++ b/homepage/cwsvJudo/src/pages/responsive/phpLibs/cwsvJudo/news.php
@@ -95,13 +95,20 @@ class PromoImage

    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="' .
            $this->src .
            '" width="' .
            $this->width .
-            '" heigth="' .
+            '" height="' .
            $this->height .
-            '" >';
+            '"' .
+            $style .
+            ">";
    }

    private string $src;
@@ -130,16 +137,24 @@ class Entry

    function as_card(): string
    {
+        $date_as_string = $this->date->format("Y-m-d");
        return '<div class="card horizontal">' .
            '<div class="card-image">' .
            $this->promo->as_html() .
            "</div>" .
            '<div class="card-content">' .
-            '<span class="card-title">' .
+            '<time datetime="' .
+            $date_as_string .
+            '">' .
+            $date_as_string .
+            "</time>" .
+            '<div class="card-title">' .
            $this->title .
-            "</span>" .
+            "</div>" .
+            '<div class="">' .
            $this->content .
            "</div>" .
+            "</div>" .
            "</div>";
    }
    // private