new format for disciplines with video details/summary

index.php

@@ -66,7 +66,7 @@ $org = json_decode('{
 
         <div class="e-content entry-content" property="articleBody">
             <h2><a id="disciplines" name="disciplines">Disciplines of Pa-Kua in Cambridge</a></h2>
-            <div class="grid large">
+            <div class="disciplinelist">
 <?php
 $disciplines = json_decode('{
   "acrobatics": {
@@ -75,7 +75,8 @@ $disciplines = json_decode('{
     "name": "Acrobatics",
     "url": "https://www.pakua.com/acrobatics/",
     "description": "Pa-Kua Acrobatics a discpipline based Chinese acrobatics and acro-yoga",
-    "active": 0
+    "active": 0,
+    "video": [ "" ]
   },
   "archery": {
     "image": "arqueria.jpg",
@@ -83,7 +84,12 @@ $disciplines = json_decode('{
     "name": "Archery",
     "url": "https://www.pakua.com/archery/",
     "description": "Pa-Kua Archery is a Chinese archery that incorporates martial art elements and uses traditional recurve bows and bamboo arrows",
-    "active": 1
+    "active": 1,
+    "video": [
+        "Ds5zO-_ONQY",
+        "FLiNcw7_sGc",
+        "IHQ_-3HOn_g"
+    ]
   },
   "weapons": {
     "image": "armas.jpg",
@@ -91,7 +97,8 @@ $disciplines = json_decode('{
     "name": "Edged Weapons",
     "url": "https://www.pakua.com/edged-weapons/",
     "description": "Pa-Kua Edged Weapons is a discipline where one can learn to use swords, knives, and spears.",
-    "active": 0
+    "active": 0,
+    "video": [ "" ]
   },
   "martialart": {
     "image": "marcial.jpg",
@@ -99,7 +106,11 @@ $disciplines = json_decode('{
     "name": "Martial Art",
     "url": "https://www.pakua.com/martial-art/",
     "description": "Pa-Kua martial art is an internal martial art based on multiple styles and ancient Chinese knowledge.",
-    "active": 1
+    "active": 1,
+    "video": [
+        "AfT2hM5FcgI",
+        "XCw3jzzup3w"
+    ]
   },
   "cosmo": {
     "image": "cosmo.jpg",
@@ -107,7 +118,8 @@ $disciplines = json_decode('{
     "name": "Tai-chi - Cosmodynamics",
     "url": "https://www.pakua.com/tai-chi-en-pakua/",
     "description": "Pa-Kua Tai-Chi - Cosmodynamics is the practise of the internal aspect of martial arts and the the understanding of the universe surrounding us.",
-    "active": 0
+    "active": 0,
+    "video": [ "" ]
   }
 }', True);
 ?>
@@ -119,6 +131,30 @@ foreach($disciplines as $key => $details):
         continue;
     }
 ?>
+                <div vocab="http://schema.org/" typeof="Course" class="course">
+                    <img property="image" src="<?php echo($details['image']); ?>" alt="<?php echo($details['alt']); ?>">
+                    <h4><?php echo($details['name']); ?></h4>
+                    <p property="description" class="description"><?php echo($details['description']); ?></p>
+                    <p><a class="more" property="url" href="<?php echo($details['url']); ?>">more about the discipline on pakua.com »</a></p>
+                    <details>
+                        <summary>Videos</summary>
+                        <?php foreach($details['video'] as $youtubeid): ?>
+                        <div class="video">
+                            <iframe src="https://www.youtube-nocookie.com/embed/<?php echo($youtubeid); ?>"></iframe>
+                        <?php endforeach; ?>
+                        </div>
+                    </details>
+
+                    <div property="provider" vocab="http://schema.org/" typeof="Organization" hidden="hidden">
+                        <img property="image" src="<?php echo($org['logo']); ?>" alt="<?php echo($org['name']); ?>" />
+                        <span property="name"><?php echo($org['name']); ?></span>
+                        <a property="url" href="<?php echo($org['url']); ?>"><?php echo($org['url']); ?></a>
+                        <a href="mailto:<?php echo($org['email']); ?>"><span property="email"><?php echo($org['email']); ?></span></a>
+                        <a href="tel:<?php echo($org['tel']); ?>"><span property="telephone"><?php echo($org['tel']); ?></span></a>
+                    </div>
+                </div>
+
+<!--
                 <div vocab="http://schema.org/" typeof="Course">
                     <img property="image" src="<?php echo($details['image']); ?>" alt="<?php echo($details['alt']); ?>">
                     <h4 property="name"><?php echo($details['name']); ?></h4>
@@ -132,6 +168,7 @@ foreach($disciplines as $key => $details):
                         <a href="tel:<?php echo($org['tel']); ?>"><span property="telephone"><?php echo($org['tel']); ?></span></a>
                     </div>
                 </div>
+-->
 <?php endforeach; ?>
             </div>
 
@@ -272,13 +309,9 @@ $archery_schedules = $archery_schedules["events"];
                 <a href="https://calendar.google.com/calendar/u/0?cid=Y2FtYnJpZGdlQHBha3VhdWsuY29t">Google Calendar</a>,
                 <a href="https://calendar.google.com/calendar/ical/cambridge%40pakuauk.com/public/basic.ics">ICal (IOS, etc)</a>
             </p>
-
+            <p> See online:
-            <iframe
+                <a href="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Europe%2FLondon&showTitle=0&showPrint=0&showDate=1&showTabs=1&showCalendars=1&hl=en_GB&src=Y2FtYnJpZGdlQHBha3VhdWsuY29t&color=%23F6BF26">Google Web Calendar for Pa-Kua Cambridge</a>
-                src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Europe%2FLondon&showTitle=0&showPrint=0&showDate=1&showTabs=1&showCalendars=1&hl=en_GB&src=Y2FtYnJpZGdlQHBha3VhdWsuY29t&color=%23F6BF26"
+            </p>
-                style="border:solid 1px #777; width: 100%; height: 20em;"
-                frameborder="0"
-                scrolling="no"
-            ></iframe>
 
             <h2><a id="payments" name="payments">Payments</a></h2>
 

style.css

@@ -39,12 +39,17 @@ h1 {
 h2 {
     font-size: 1.5em;
     margin: 2em 0 1em 0;
+    clear: both;
 }
 
 h3 {
     margin: 2em 0 1em 0;
 }
 
+h4 {
+    font-size: 1.2em;
+}
+
 body {
     background-image: url("footer-bg.png");
     background-repeat: no-repeat;
@@ -303,6 +308,40 @@ label.wide {
     display: none;
 }
 
+.disciplinelist > * {
+    clear: both;
+}
+
+.disciplinelist > div {
+    margin-bottom: 1em;
+}
+
+.disciplinelist > div img {
+    float:left;
+    width: 20%;
+    margin-right: 2%;
+    margin-bottom: 1em;
+    border: 1px solid #ccc;
+}
+
+.disciplinelist > div details {
+    width: 80%;
+}
+
+.disciplinelist > div details summary {
+}
+
+.disciplinelist > div details .description {
+    font-size: 1.1em;   
+    color: #222;
+}
+
+.disciplinelist iframe {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto;
+}
+
 @media screen and (max-width: 54em) {
     .grid > div {
         max-width: 48%;
@@ -312,4 +351,10 @@ label.wide {
         width: 98%;
         padding: 0 1% 0 1%;
     }
+
+    .disciplinelist > div img {
+        width: 45%;
+        margin-right: 5%;
+    }
+
 }