Wettkampftermine als Cards; schön ist etwas anderes, aber zeitgemäßer sieht es aus...

neue Datei: pandocTemplate/cwsvJudo.html5.pandocTemplate geändert: wkParticipo/index.php geändert: wkParticipo/lib/wkParticipoLib.inc.php geändert: wkParticipo/showWkEvent.php geändert: wkParticipo/wkParticipo.css
2018-07-22 16:33:01 +02:00
parent 66376d2418
commit bd69ca1888
5 changed files with 439 additions and 122 deletions
--- a/homepage/redesign2018/markdownExperiment/pandocTemplate/cwsvJudo.html5.pandocTemplate
+++ b/homepage/redesign2018/markdownExperiment/pandocTemplate/cwsvJudo.html5.pandocTemplate
@@ -0,0 +1,270 @@
+<?php
+/// Einbinden der Konfiguration, insbesondere Basisvariablen, 
+/// relative Pfadangabe
+///  - jedes Verzeichnis sollte seine eigene haben
+///  - theoretisch sollte es bereits von der aufrufenden Datei 
+///    eingebunden sein
+	require_once("./config.inc.php");
+//	include_once("./config.inc.php");
+	require_once($$basePath."/config/phpcount.config.php");
+	require_once($$basePath."/config/cwsvJudo.config.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/newsLib.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/wkKalender.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/galTable.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/newsTableHtml.php");
+	require_once($$basePath."/ressourcen/phpLib/cwsvJudo/galleryRedirector.php");
+	require_once($$basePath."/ressourcen/phpLib/phpcount/phpcount.php");
+	
+	galleryRedirector();
+	
+$if(phpTitleString)$
+	PHPCount::AddHit($phpTitleString$);?>
+$else$
+	PHPCount::AddHit("$title$");?>
+$endif$
+<!DOCTYPE html>
+<html$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+$for(author-meta)$
+		<meta name="author" content="$author-meta$">
+$endfor$
+$if(date-meta)$
+		<meta name="dcterms.date" content="$date-meta$">
+$endif$
+$if(keywords)$
+		<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
+$endif$
+$if(description)$
+		<meta name="description" content="$description$" />
+$endif$
+$if(canonicalLink)$
+		<link rel="canonical" href="$canonicalLink$" />
+$endif$
+$if(ampVersionLink)$
+		<link rel="amphtml" href="$ampVersionLink$" />
+$endif$
+$if(phpTitleFunction)$
+		<title><?php $phpTitleFunction$();?></title>
+$else$
+		<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+$endif$
+		<style>code{white-space: pre;}</style>
+$if(quotes)$
+		<style>
+			q { quotes: "“" "”" "‘" "’"; }
+			.fontSizeXxSmall{font-size: xx-small;}
+			.displayNone{display: none;}
+		</style>
+$endif$
+$if(highlighting-css)$
+		<style type="text/css">
+$highlighting-css$
+		</style>
+$endif$
+$for(css)$
+		<link rel="stylesheet" href="/$css$">
+$endfor$
+$for(extraCss)$
+		<link rel="stylesheet" href="$extraCss$">
+$endfor$
+$if(math)$
+  $math$
+$endif$
+		<script type='application/ld+json'> 
+			{
+			  "@context": "http://www.schema.org",
+			  "@type": "WebSite",
+			  "name": "$title$",
+			  "alternateName": "$description$",
+			  "url": "http://cwsvjudo.bplaced.net",
+			  "image": "http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.256w.png"
+			}
+		</script>
+$if(jsonSdFiles)$
+		<script type='application/ld+json'>
+	$for(jsonSdFiles)$
+			<?php include($$basePath."/ressourcen/structuredData/json/$jsonSdFiles$");?>
+	$endfor$
+		</script>
+$endif$
+$if(jsLibs)$
+	$for(jsLibs)$
+		<script src="$jsLibs$" type="text/javascript"></script>
+	$endfor$
+$endif$
+		<link rel="alternate" type="application/rss+xml" href="/rss">
+		<?php require_once($$basePath."/pages/shared/favicon.html.inc");?>
+$for(header-includes)$
+	$header-includes$
+$endfor$
+	</head>
+	<body>
+<!-- Kopfzeile mit Titel, Promobildern und Breadcrumbs -->
+		<header class="cwsvHeader">
+			<img 
+				width="200" height="140" 
+				title="Judo im Chemnitzer WSV" alt="Judo im Chemnitzer WSV - Promo" 
+				src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/banner/bannerlogo.1.jpg"
+			/>
+			<span>Judo</span>
+			<span class="breadcrumbs"></span>
+			<img 
+				width="64" height="52"
+				title="Judo im Chemnitzer WSV"
+				alt="Judo im Chemnitzer WSV - Logo"
+				src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.64w.png" 
+				srcset="http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.128w.png 2x, http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.x256.png 4x"
+			/>
+		</header>
+
+$if(mainNav)$
+		<nav id="mainNav">
+	$for(mainNav)$
+			<a href="$mainNav.url$" 
+				$if(mainNav.caption)$title="$mainNav.caption$" $endif$
+				$if(mainNav.active)$class="activeNav" $endif$
+			>
+				$if(mainNav.icon)$
+					<span><img 
+						src="$if(mainNav.icon.src)$$mainNav.icon.src$$else$$mainNav.icon$$endif$"
+						$if(mainNav.caption)$
+							alt="$mainNav.caption$" 
+						$else$
+							$if(mainNav.icon.alt)$
+								alt="$mainNav.icon.alt$"
+							$endif$
+						$endif$
+						$if(mainNav.icon.width)$
+							width="$mainNav.icon.width$"
+						$endif$
+						$if(mainNav.icon.height)$
+							height="$mainNav.icon.height$"
+						$endif$
+						$if(mainNav.icon.title)$
+							title="$mainNav.icon.title$"
+						$endif$
+						$if(mainNav.icon.srcset)$
+							srcset="$mainNav.icon.srcset$"
+						$endif$
+					/>
+					</span>
+				$endif$
+				$if(mainNav.caption)$<span>$mainNav.caption$</span>$endif$
+			</a>
+	$endfor$
+		</nav>
+$endif$
+
+$if(subNav)$
+		<nav class="subNav">
+	$for(subNav)$
+			<a href="$subNav.url$" 
+				$if(subNav.caption)$title="$subNav.caption$" $endif$
+				$if(subNav.active)$class="activeNav" $endif$
+			>
+				$if(subNav.icon)$
+					<img 
+						src="$if(subNav.icon.src)$$subNav.icon.src$$else$$subNav.icon$$endif$"
+						$if(subNav.caption)$
+							alt="$subNav.caption$" 
+						$else$
+							$if(subNav.icon.alt)$
+								alt="$subNav.icon.alt$"
+							$endif$
+						$endif$
+						$if(subNav.icon.width)$
+							width="$subNav.icon.width$"
+						$endif$
+						$if(subNav.icon.height)$
+							height="$subNav.icon.height$"
+						$endif$
+						$if(subNav.icon.title)$
+							title="$subNav.icon.title$"
+						$endif$
+						$if(subNav.icon.srcset)$
+							srcset="$subNav.icon.srcset$"
+						$endif$
+					/>
+				$endif$
+				$if(subNav.caption)$<span>$subNav.caption$</span>$endif$
+			</a>
+	$endfor$
+			<a href="#mainNav" 
+				title="Hauptnavigation"
+			>
+				<img src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/icons/arrowRightDown.svg" alt="Menü" />
+				<span>zur Hauptnavigation</span>
+			</a>
+		</nav>
+$endif$
+
+$for(include-before)$
+	$include-before$
+$endfor$
+$if(toc)$
+<nav id="$idprefix$TOC">
+$toc$
+</nav>
+$endif$
+
+<main id="content">
+$body$
+</main>
+
+<aside class="sideNotes">
+	Die Judoka des CWSV bedanken sich bei ihren Förderern:
+	<ul class="sponsorList">	
+		<li>
+			Familie Mögel für den unermüdlichen Einsatz als Fans, Fahrer, Fotograf und Vertretung
+		</li>
+		<li>
+			Druck + Werbestudio Eckart &amp; Partner
+			<div><a title="Druck + Werbestudio Eckart &amp; Partner" href="http://www.dws-eckart.de">
+					<img width="300" height="107" src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/sponsoren/EckartUndPartner.png" title="Druck + Werbestudio Eckart &amp; Partner GmbH" alt="Druck + Werbestudio Eckart &amp; Partner Logo">
+				</a>
+			</div>
+		</li>
+		<li>
+			Der CWSV ist anerkannter Stützpunktverein des Bundesprogrammes „Integration durch Sport”
+			<div>
+				<a href="http://www.integration-durch-sport.de" title="Integration durch Sport">
+					<img src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/IntegrationDurchSport2018.250x.png" title="Integration durch Sport - Anerkannter Stützpunktverein" alt="Integration durch Sport - Anerkannter Stützpunktverein" width="250" height="416">
+				</a>
+			</div>
+		</li>
+	</ul>
+</aside>
+
+<footer class="footerBar">
+	<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>
+	<a class="touchLink" title="Möglichkeiten mit dem Chemnitzer Freizeit- und Wohngebietssportverein in Kontakt zu treten" href="/kontakt" >Kontakt</a>
+	<a class="touchLink" title="Impressum" href="<?php echo($$baseUrl);?>/impressum" >Impressum</a>
+	<a class="touchLink" title="Datenschutz" href="<?php echo($$baseUrl);?>/datenschutz" >Datenschutz</a>
+	<a class="touchLink" 
+		title="News-Feed Abonnieren"
+		href="http://cwsvjudo.bplaced.net/rss"
+	><img 
+		src="/ressourcen/graphiken/icons/newsFeedIcon.svg"
+		alt="Newsfeed"
+		title="News Feed Icon"
+		class="charImg">
+	</a>
+</footer>
+
+$for(include-after)$
+$include-after$
+$endfor$
+</body>
+</html>
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/index.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/index.php
@@ -80,9 +80,9 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		<h2 id="meldungen">Eingeschrieben zu kommenden Wettkämpfen:</h2>
 <?php
 		foreach( explode( ',', getUserData($mysqli, $_SESSION['user']['userId'])['kinder']) as $kindId){
-			$kindDaten = getUserData($mysqli, $kindId);
+			$kindDaten = getUserData($mysqli, $kindId, array('outCharset'=>"UTF-8") );
 ?>
-			<h3><?php echo( mb_convert_encoding($kindDaten['name'].", ".$kindDaten['vorname'].": ", 'UTF-8', 'ISO-8859-1') );?></h3>
+			<h3><?php echo( $kindDaten['name'].", ".$kindDaten['vorname'].": " );?></h3>
 <?php
 				$wkEventData = getUsersCommingWkEvents( $mysqli, $kindId, array('outCharset'=>"UTF-8") );
 				if(empty($wkEventData)){
@@ -189,8 +189,9 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		<hr />
 		
 		<h2 id="wettkaempfen">Anstehende Wettkämpfe</h2>
+		Nicht wundern, dass hier eventuell etwas doppelt steht! Ich experimentiere gerade.
 <?php
-		$wkEvents = getCommingWkEvents($mysqli);
+		$wkEvents = getCommingWkEvents($mysqli, array('outCharset'=>"UTF-8") );
 		
 		if( empty($wkEvents) ){
 ?>
@@ -200,7 +201,7 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		else{
 			foreach( $wkEvents as $wk){
 				//print_r($wk);
-				$wkEvent = getWkEventData($mysqlConn, $wk['id']);
+				$wkEvent = getWkEventData($mysqlConn, $wk['id'], array('outCharset'=>"UTF-8"));
 ?>
 				<h3><?php echo( $wkEvent['Veranstaltung'] );?></h3>
 				<?php
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/lib/wkParticipoLib.inc.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/lib/wkParticipoLib.inc.php
@@ -1,5 +1,4 @@
 <?php
-
 $startTyp = array( '1' => "Kämpfer", '2' => "Zuschauer", '3' => "keine Teilnahme" );


@@ -203,8 +202,18 @@ $ret = array();
 return $ret;
 }

-function getUserData($anMysqlConn, $anUserId){
-	$ret = array();
+function getUserData( $anMysqlConn, $anUserId, $someOptions = array() ){
+// wir befinden uns in der Übergangsphase:
+// - als Standard wird das derzeitige Verhalten definiert (ISO-8859-1 
+//   und die Konvertierung erfolgt ausserhalb)
+// - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
+//   das gewünschte Verhalten umgestellt werden
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";
+
+$ret = array();
+
 	if( (string)(int)$anUserId == $anUserId ){
 		$query = sprintf(
 			"SELECT * FROM wkParticipo_Users WHERE id='%s';",
@@ -214,6 +223,21 @@ function getUserData($anMysqlConn, $anUserId){
 		if( !$results ) die("ERR: Fehler bei Datenbankabfrage (".$query.")!\n");
 		$ret  = $results->fetch_assoc();
 	}
+	
+//	var_dump($someOptions);
+//	var_dump($results);
+//	var_dump($ret);
+
+// Zeichensatzkonvertierung
+	array_walk(
+		$ret,
+		function (&$value, $key, $someOptions) {
+			$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+		},
+		$someOptions
+	);
+//	var_dump($ret);
+
 return $ret;
 }

@@ -280,7 +304,11 @@ return $ret;
 /// Der Rückgabewert sollte vor Verwendung (und zur Fehlerbeheandlung) 
 /// auf NULL und/oder leeres Array getestet werden.
 /// 
-function getWkEventData($anMysqlConn, $anEventId){
+function getWkEventData($anMysqlConn, $anEventId, $someOptions = array()){
+
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";
+
 $ret = array();
 if( (string)(int)$anEventId != $anEventId ) return $ret;
 	$anMysqlConn->query("USE cwsvjudo;");
@@ -310,12 +338,15 @@ if( (string)(int)$anEventId != $anEventId ) return $ret;
 	// Bei einem leeren Ergebnis (NULL oder leeres Array) soll ein leeres Array zurückgeliefert werden
 	if( empty($ret) ) return array();

-array_walk(
-    $ret,
-    function (&$entry) {
-        $entry = iconv("ISO-8859-1", "UTF-8", $entry);
-    }
-);
+// Zeichensatzkonvertierung
+	array_walk(
+		$ret,
+		function (&$value, $key, $someOptions) {
+			$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+		},
+		$someOptions
+	);
+
 return $ret;
 }

@@ -328,7 +359,17 @@ return $ret;
 /// Der Rückgabewert sollte vor Verwendung (und zur Fehlerbeheandlung) 
 /// auf NULL und/oder leeres Array getestet werden.
 /// 
-function getCommingWkEvents($anMysqlConn){
+function getCommingWkEvents($anMysqlConn, $someOptions=array() ){
+
+// wir befinden uns in der Übergangsphase:
+// - als Standard wird das derzeitige Verhalten definiert (ISO-8859-1 
+//   und die Konvertierung erfolgt ausserhalb)
+// - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
+//   das gewünschte Verhalten umgestellt werden
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";
+
 $ret = array();
 	$anMysqlConn->query("USE cwsvjudo;");
 	$query = sprintf(
@@ -364,13 +405,14 @@ $ret = array();
 	while( $result = $results->fetch_assoc() ){
 		array_walk(
 			$result,
-			function (&$entry) {
-				$entry = iconv("ISO-8859-1", "UTF-8", $entry);
-			}
+			function (&$value, $key, $someOptions) {
+				$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+			},
+			$someOptions
 		);
 		array_push( $ret, $result);
 	}
-//echo("Results: "); print_r($ret);
+
 return $ret;
 }

@@ -557,9 +599,9 @@ function getUsersCommingWkEvents($anMysqlConn, $anUserId, $someOptions=array() )
 //   und die Konvertierung erfolgt ausserhalb)
 // - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
 //   das gewünschte Verhalten umgestellt werden
-if( empty($optionsArray['dbCharset'])  ) $optionsArray['dbCharset'] = "ISO-8859-1";
-//if( empty($optionsArray['outCharset']) ) $optionsArray['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
-if( empty($optionsArray['outCharset']) ) $optionsArray['outCharset'] = "ISO-8859-1";
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";

 $ret = array();
 	$anMysqlConn->query("USE cwsvjudo;");
@@ -594,10 +636,10 @@ $ret = array();
 	foreach($ret as &$entry){
 		array_walk(
 			$entry,
-			function (&$value, $key, $optionsArray) {
-				$value = iconv($optionsArray['dbCharset'], $optionsArray['outCharset'], $value);
+			function (&$value, $key, $someOptions) {
+				$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
 			},
-			$optionsArray
+			$someOptions
 		);
 	}

@@ -1157,101 +1199,82 @@ return $url;

 /// Erzeugen des htmlCodes der Infobox für ein wkEvent
 function htmlWkEvent($aWkEvent, $starters, $fahrten){
+//var_dump($aWkEvent, $starters, $fahrten);
+
 $retHtml = "";

-	$retHtml .= "<fieldset><legend>". $aWkEvent['Veranstaltung'] ."</legend><div class=\"wkBox\">";
-	$retHtml .= "<div class=\"wkBoxWkData\" ><div>Wettkampfdaten</div><ul>";
-	$retHtml .= "<li>Datum: ";
-	if( empty($aWkEvent['Datum']) ){
-		$retHtml .= "fehlendes Datum";
-	}
-	else{
-		$retHtml .= "<time datetime=\"" . $aWkEvent['Datum'] . "\">" . $aWkEvent['Datum'] . "</time> <a class=\"touchLink\" href =\"" . addToGcalUrl( $aWkEvent['Veranstaltung'], $aWkEvent['Datum'] ) . "\" >In Google Calendar eintragen</a>";
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Einschreibefrist: ";
-	if( empty($aWkEvent['meldefrist']) ){
-		$retHtml .= "fehlende Einschreibefrist";
-	}
-	else{
-		$retHtml .= "<time datetime=\"" . $aWkEvent['meldefrist'] . "\">" . $aWkEvent['meldefrist'] . "</time> <a class=\"touchLink\" href =\"" . addToGcalUrl(  "Einschreibefrist " . $aWkEvent['Veranstaltung'],  $aWkEvent['meldefrist'] ) . "\" >In Google Calendar eintragen</a>";
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Wettkampf: ";
-	if( empty($aWkEvent['Veranstaltung']) ){
-		$retHtml .= "fehlender Wettkampfname";
-	}
-	else{
-		$retHtml .= $aWkEvent['Veranstaltung'];
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Altersklassen: ";
-	if( empty( $aWkEvent['Altersklassen'] ) ){
-		$retHtml .= "fehlende Altersklassen";
-	}
-	else{
-		$retHtml .= $aWkEvent['Altersklassen'];
-	}
-	$retHtml .= "</li>";
+	if( empty($aWkEvent['Datum']) )
+		$aWkEvent['Datum'] = "0000-00-00";
+	$anzPlätze = 0;
+	foreach($fahrten as $fahrt)
+		$anzPlätze += $fahrt['plaetze'];

-	if( !empty($_SESSION['login']) ){
-	//	$starters = getStarterForEvent($mysqlConn, $aWkEvent['id']);
-		$retHtml .= "<li>angemeldete Starter: ";
-		if( empty($starters) ){
-			$retHtml .= "Noch hat sich niemand für diesen Wettkampf gemeldet!";
-		}
-		else{
-			$retHtml .= count($starters);
-		}
-		$retHtml .= "</li>";
-		
-	//	$fahrten = getFahrtenForEvent($mysqlConn, $aWkEvent['id']);
-		$anzPlätze = 0;
-		foreach($fahrten as $fahrt)
-			$anzPlätze += $fahrt['plaetze'];
-		$retHtml .= "<li" . ( ($anzPlätze<count($starters)) ? " style=\"color: red\"" : "" ) . ">Anzahl Plätze: " . $anzPlätze . "</li>";
-		
-		if( !empty( $aWkEvent['bemerkungen'] ) ){
-			$retHtml .= "<li>Bemerkungen: " . $aWkEvent['bemerkungen'] . "</li>";
-		}
-	}
+	$retHtml = 
+		"<div class=\"wkInfoCard\">".
+			"<time class=\"wkInfoCardDate\" datetime=\"".$aWkEvent['Datum']."\">".
+				"<span class=\"wkInfoCardDateWeekday\">".strftime("%a", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateDay\">"    .strftime("%d", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateMonth\">"  .strftime("%b", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateYear\">"   .strftime("%Y", strtotime($aWkEvent['Datum']))."</span>".
+			"</time>".

-	$retHtml .= "</ul></div>";
+			"<div class=\"wkInfoCardWkData\">".
+				"<div class=\"wkInfoCardWkInfo\">".
+					"<h3 class=\"fontWeightLighter\" >".$aWkEvent['Veranstaltung']."</h4>".
+					"<ul>".
+						"<li>Altersklassen: ".$aWkEvent['Altersklassen']."</li>".
+						"<li>Einschreibefrist: ".(
+							empty($aWkEvent['meldefrist'])?
+							"fehlende Einschreibefrist"
+							:"<time datetime=\"" . $aWkEvent['meldefrist'] . "\">" . $aWkEvent['meldefrist'] . "</time>".
+							"<div class=\"wkInfoCardButtonBar flexFlowRow justifyContentFlexStart\">".
+								"<a class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\" href =\"" . addToGcalUrl(  "Einschreibefrist " . $aWkEvent['Veranstaltung'],  $aWkEvent['meldefrist'] ) . "\" >In Google Calendar übernehmen</a>".
+							"</div>"
+						)."</li>".
+						(!empty($_SESSION['login'])?
+							"<li>angemeldete Starter: ".(
+								empty($starters)?
+								"Noch hat sich niemand für diesen Wettkampf gemeldet!":
+								count($starters)
+							)."</li>"
+						:"").
+						(empty($_SESSION['login'])?
+							"Ein Einschreiben ist nur eingeloggt möglich!"
+							:"<form action=\"./addStarter.php\" method=\"post\">".
+								"<input type=\"hidden\" name=\"f[eventId]\" value=".
+									( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "").
+								" />".
+								( date("Y-m-d") > $aWkEvent['meldefrist']?
+									"<button type=\"submit\" disabled>ist die Einschreibefrist bereits abgelaufen!</button>".
+									"<p>Frist für das Einschreiben verpasst? Für ein nachträgliches Einschreiben mit dem Admin verständigen (<a href=\"mailto:cwsvjudo@arcor.de?Subject=" . ( rawurlencode("Meldefrist ".$aWkEvent['Veranstaltung']) ) . "\" target=\"_top\">Email an cwsvjudo@arcor.de</a>).</p>"
+									:"<button type=\"submit\">jmd. einschreiben</button>"
+								).
+							"</form>"
+						).
+						"<li" . ( ($anzPlätze<count($starters)) ? " style=\"color: red\"" : "" ) . ">Anzahl Plätze: " . $anzPlätze . "</li>".
+						(empty($_SESSION['login'])?
+							"Das Anbieten von Mitfahrgelegenheiten ist nur eingeloggt möglich!"
+							:"<form action=\"./addFahrt.php\" method=\"post\">".
+								"<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "" ) . "\" />".
+								($aWkEvent['Datum'] > date("Y-m-d")?
+									"<button type=\"submit\">Mitfahr&shy;gelegenheit anbieten</button>"
+									:"<button type=\"submit\" disabled>ist es leider zu spät, noch Mitfahrgelegenheiten hinzuzufügen.</button>"
+								).
+							"</form>"
+						).
+						( !empty( $aWkEvent['bemerkungen'] )?
+							"<li>Bemerkungen: " . $aWkEvent['bemerkungen'] . "</li>"
+						:"").
+					"</ul>".
+				"</div>".

-	$retHtml .= "<nav style=\"width: 100%; clear: both;\"><ul>";
-	$retHtml .= "<li><a href =\"./showWkEvent.php?eventId=" . (isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "") . "\" ><div>Detailansicht</div></a></li>";
-	$retHtml .= "<li><a href =\"/ressourcen/phpLib/calendar.php?wkID=" . ($aWkEvent['wkId']) . "\" ><div>Termin als iCal</div></a></li>";
-	$retHtml .= "<li><a href =\"" . addToGcalUrl($aWkEvent['Veranstaltung'], $aWkEvent['Datum'] ) . "\"><div>In den Google Calendar</div></a></li>";
-	$retHtml .= "</ul></nav>";
-
-	$retHtml .= "<div>";
-	if (empty($_SESSION['login'])){
-		$retHtml .= "Ein Einschreiben ist nur eingeloggt möglich!";
-	}
-	else{
-		$retHtml .= "Für diesen Wettkampf ...";
-		$retHtml .= "<form action=\"./addStarter.php\" method=\"post\">";
-		$retHtml .= "<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "") . " />";
-		if( date("Y-m-d") > $aWkEvent['meldefrist'] ){
-			$retHtml .= "<button type=\"submit\" disabled>ist die Einschreibefrist bereits abgelaufen!</button>";
-			$retHtml .= "<p>Frist für das Einschreiben verpasst? Für ein nachträgliches Eintragen mit dem Admin verständigen (<a href=\"mailto:cwsvjudo@arcor.de?Subject=" . ( rawurlencode("Meldefrist ".$aWkEvent['Veranstaltung']) ) . "\" target=\"_top\">Email an cwsvjudo@arcor.de</a>).</p>";
-		}
-		else{
-			$retHtml .= "<button type=\"submit\">einen Starter melden</button>";
-		}
-		$retHtml .= "</form>";
-		$retHtml .= "<form action=\"./addFahrt.php\" method=\"post\">";
-		$retHtml .= "<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "" ) . "\" />";
-		
-		if($aWkEvent['Datum'] > date("Y-m-d")){
-			$retHtml .= "<button type=\"submit\">eine Mitfahrgelegenheiten melden.</button>";
-		}
-		else{
-			$retHtml .= "<button type=\"submit\" disabled>ist es leider zu spät, noch Mitfahrgelegenheiten hinzuzufügen.</button>";
-		}
-		$retHtml .= "</form>";
-	}
-	$retHtml .= "</div></div></fieldset>";
+				"<div class=\"wkInfoCardButtonBar\">".
+					"<a href =\"./showWkEvent.php?eventId=".$aWkEvent['eventId']."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">Detailansicht</a>".
+					"<a href =\"/ressourcen/phpLib/calendar.php?wkID=".$aWkEvent['wkId']."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">Termin als iCal</a>".
+					"<a href =\"".addToGcalUrl( $aWkEvent['Veranstaltung'], $aWkEvent['Datum'] )."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">In den Google Calendar</a>".
+				"</div>".
+			"</div>".
+		"</div>";

 return $retHtml;
 }
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/showWkEvent.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/showWkEvent.php
@@ -229,7 +229,7 @@
 <!--Beginn der Einbindung des Counters-->
 <?php
 	$chCounter_page_title = "Wettkampfplaner -- Eventansicht -- ".mb_convert_encoding($eventData['Veranstaltung'], 'UTF-8', 'ISO-8859-1');
-	$chCounter_page_url = $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
+	$chCounter_page_url = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
 	$chCounter_visible =0 ;
 //	include( $_SERVER['DOCUMENT_ROOT'].'/expCounter/counter.php');
 ?>
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/wkParticipo.css
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/wkParticipo.css
@@ -17,25 +17,29 @@
 }

 .wkInfoCardDate{
-	align-items: center;
-	color: #291670;
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
+	align-items: center;
+	color: #291670;
 	padding: 0rem 0.5rem 0rem 0rem;
 	width: 6rem;
 }
+@media (min-width: 640px){
+	.wkInfoCardDate{
+	justify-content: center;
+	}
+}

 .wkInfoCardDateDay{
-  font-size: 1.75rem;
+	font-size: 1.75rem;
 }

 .wkInfoCardDateWeekday{
-  font-size: 1.15rem;
+	font-size: 1.15rem;
 }

 .wkInfoCardDateMonth{
-  font-size: 1.15rem;
+	font-size: 1.15rem;
 }

 .wkInfoCardWkData{
@@ -55,6 +59,18 @@
 	flex-grow: 1;
 }

+.wkInfoCardWkInfo ul{
+	padding: 0;
+	list-style-type: none;
+}
+
+@media (min-width: 640px){
+	.wkInfoCardWkInfo ul{
+		padding: initial;
+		list-style-type: initial;
+	}
+}
+
 .wkInfoCardButtonBar{
 	align-items: center;
 	display: flex;
@@ -88,6 +104,13 @@
 	font-weight: lighter;
 }

+.flexFlowRow{
+	flex-flow: row;
+}
+
+.justifyContentFlexStart{
+	justify-content: flex-start;
+}


 .card__icon {