- node-csso funktioiniert auf einmal nicht mehr

modified: homepage/redesign2018/markdownExperiment/Makefile - Funktion zu Erzeugen des htmlCodes der Wettkampeinzelansicht modified: homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php - cssStyles für mit Text overlaytes Bild hinzugefügt modified: homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018-wkKalender.css modified: homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018.css modified: homepage/redesign2018/css/cwsvJudo-2018.css
2018-11-02 06:05:49 +01:00
parent 1fecc58681
commit 00a50e2f0c
5 changed files with 97 additions and 18 deletions
--- a/homepage/redesign2018/css/cwsvJudo-2018.css
+++ b/homepage/redesign2018/css/cwsvJudo-2018.css
@@ -114,6 +114,10 @@ body{
 	width:100%;
 }

+.valignMiddle{
+	vertical-align:middle;
+}
+
 /* Bilder in voller Breite */
 .bigPicture{
 	width: 100%;
--- a/homepage/redesign2018/markdownExperiment/Makefile
+++ b/homepage/redesign2018/markdownExperiment/Makefile
@@ -45,10 +45,10 @@ ampTest: $(ampFiles)

 build/css/cwsvJudo.css: $(cssFiles)
 	mkdir -p $(dir $@)
-#	cat $(cssFiles) > $@
+	cat $^ > $@
 #	cat $(cssFiles) | cleancss -o $@
 #	cat $^ | ./node_modules/.bin/csso -o $@
-	cat $^ | csso -o $@
+#	cat $^ | csso -o $@

 build/%.php: src/md/%.md build/yaml/%.yaml pandocTemplate/cwsvJudo.html5.pandocTemplate
 	mkdir -p build
--- a/homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php
+++ b/homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php
@@ -250,6 +250,8 @@ function nicerAkList($akArray){
 	$ret = join(' und ', $both);
 return $ret;
 } 
+
+
 /// Wettkampfdaten als json-formatierte strukturierte Event-Daten
 function wkArray2jsonSdEvent($wk){
 return 
@@ -303,6 +305,23 @@ function wkTableHtml(){
 				"<div class=\"wkInfoBox\">".
 					"<script type=\"application/ld+json\">".wkArray2jsonSdEvent($wk)."</script>".
 					"<h2>".$wk['Veranstaltung']."</h2>".
+					wkBoxMediaGalleryHtml($wkGals);
+/*
+			if( !empty($wkGals) ){
+				foreach($wkGals as $wkGal){
+				// Für den Fall einer ampSeite müssen die imgTags angepasst werden
+					if( strpos( $_SERVER['ORIG_PATH_TRANSLATED'], "pages/amp" ) !== false ){
+						$siteData['mainContent'] .= 
+							"<li><a style=\"position:relative;display:block;\" href=\"".$wkGal['url']."\">".( !empty($wkGal['teaserBildUrl'])?("<amp-img layout=\"responsive\" width=\"200\" height=\"133\" class=\"valignMiddle\" src=\"".$wkGal['teaserBildUrl']."\" ></amp-img>"):"").("<div style=\"color:white;position:absolute;left:0;top:42%;\">".$wkGal['typ']."galerie</div>")."</a></li>";
+					}
+					else{
+						$siteData['mainContent'] .= 
+							"<li><a style=\"position:relative;display:block;\" href=\"".$wkGal['url']."\">".( !empty($wkGal['teaserBildUrl'])?("<img class=\"valignMiddle\" src=\"".$wkGal['teaserBildUrl']."\" />"):"").("<div style=\"color:white;position:absolute;left:0;top:42%;\">".$wkGal['typ']."galerie</div>")."</a></li>";
+					}
+				}
+			}
+*/
+			$siteData['mainContent'] .= 
 					"<h3>Veranstaltungsdaten</h3>".
 					"<ul>".
 						"<li>Datum: <time datetime=".$wk['Datum'].">".strftime("%a, %d. %B %Y", strtotime($wk['Datum']))."</time></li>".
@@ -314,21 +333,6 @@ function wkTableHtml(){
 							"<li><a href =\"".$wk['Ausschreibung']."\"><div>Link zur Ausschreibung</div></a></li>".
 							"<li><a href =\"".$wk['Routenplaner'] ."\"><div>Link zum Routenplaner</div></a></li>".
 							"<li><a href =\"/ressourcen/phpLib/calendar.php?wkID=".$wk['lfdeNr']."\"><div>Termin in Kalender übernehmen</div></a></li>";
-			if( !empty($wkGals) ){
-				foreach($wkGals as $wkGal){
-				// Für den Fall einer ampSeite müssen die imgTags angepasst werden
-					if( strpos( $_SERVER['ORIG_PATH_TRANSLATED'], "pages/amp" ) !== false ){
-						$siteData['mainContent'] .= 
-							"<li><a style=\"position:relative;display:block;\" href=\"".$wkGal['url']."\">".( !empty($wkGal['teaserBildUrl'])?("<amp-img layout=\"responsive\" width=\"200\" height=\"133\" class=\"valignMiddle\" src=\"".$wkGal['teaserBildUrl']."\" ></amp-img>"):"").("<div style=\"color:white;position:absolute;left:0;top:42%;\">".$wkGal['typ']."galerie</div>")."</a></li>";
-					}
-					else{
-						$siteData['mainContent'] .= 
-//							"<li><a href=\"".$wkGal['url']."\">".$wkGal['typ']."galerie</a></li>";
-							"<li><a style=\"position:relative;display:block;\" href=\"".$wkGal['url']."\">".( !empty($wkGal['teaserBildUrl'])?("<img class=\"valignMiddle\" src=\"".$wkGal['teaserBildUrl']."\" />"):"").("<div style=\"color:white;position:absolute;left:0;top:42%;\">".$wkGal['typ']."galerie</div>")."</a></li>";
-//							"<li><a style=\"position:relative;display:block;\" href=\"".$wkGal['url']."\">".( !empty($wkGal['teaserBildUrl'])?("<img class=\"valignMiddle\" style=\"width:100%;\" src=\"".$wkGal['teaserBildUrl']."\" </img>"):"").("<img style=\"width:50%;display:block;color:white;position:absolute;left:0;top:0;opacity:0.5;\" src=\"http://cwsvjudo.bplaced.net/ressourcen/graphiken/icons/filmrolle-grau.svg\" />")."</a></li>";
-				}
-				}
-			}
 			$siteData['mainContent'] .= 
 						"</ul>".
 					"</nav>".
@@ -476,4 +480,40 @@ $wkInfoBoxHtml = "";
 return $wkInfoBoxHtml;
 }

+
+function wkBoxMediaGalleryHtml($wkGals){
+if(empty($wkGals)) return "";
+$retHtml = "";
+
+$retHtml .= "<div class=\"galImgList\">";
+
+foreach($wkGals as $wkGal){
+	$retHtml.=
+		"<a class=\"textoverlayedImage\" href=\"".$wkGal['url']."\">";
+	
+	if(strpos( $_SERVER['ORIG_PATH_TRANSLATED'], "pages/amp" ) !== false)
+		$retHtml .= "<amp-img layout=\"responsive\" ";
+	else
+		$retHtml .= "<img class=\"valignMiddle\" ";
+	
+	$retHtml .=
+		"width=\"200\" height=\"133\" class=\"valignMiddle\" src=\"".
+		$wkGal['teaserBildUrl']."\"";
+	
+	if(strpos( $_SERVER['ORIG_PATH_TRANSLATED'], "pages/amp" ) !== false)
+		$retHtml .= "></amp-img>";
+	else
+		$retHtml .= "/>";
+	
+	$retHtml .= 
+		"<div><p>".$wkGal['typ']."galerie</p></div>";
+	
+	$retHtml .= "</a>";
+}
+
+$retHtml .= "</div>"; // Ende galImgList
+
+return $retHtml;
+}
+
 ?>
--- a/homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018-wkKalender.css
+++ b/homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018-wkKalender.css
@@ -794,3 +794,31 @@
  }
 }
 */
+
+/*
+ * Mit Text overlay-tes Bild
+*/
+
+.textoverlayedImage{
+    position: relative;
+    display: table;
+}
+.textoverlayedImage > img {
+	width: 100%;
+	height: auto;
+}
+.textoverlayedImage > div {
+    z-index: 99;
+    width: 70%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.textoverlayedImage > div > p{
+    text-align: center;
+    color: white;
+    font-weight: lighter;
+    line-height: 2;
+    padding: 0 10%;
+}
--- a/homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018.css
+++ b/homepage/redesign2018/markdownExperiment/src/css/cwsvJudo-2018.css
@@ -38,13 +38,17 @@ html{
 /*
 * Body
 */
+
 body{
 	background: #FFAE00;
 	font-family: arial, helvetica, sans-serif;
 }


-/* Container für eine einzelne News */
+/* 
+ * Container für eine einzelne News
+ */
+
 .newsBox{
 	border: solid 1px #000000;
 	padding: 1vmin;
@@ -113,6 +117,9 @@ body{
 .fullWidth{
 	width:100%;
 }
+.valignMiddle{
+	vertical-align:middle;
+}

 /* Bilder in voller Breite */
 .bigPicture{