petermolnar/pakua-cambridge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new format for disciplines with video details/summary

Browse source
This commit is contained in:
Peter Molnar 2021-09-29 21:29:51 +01:00
parent 520990f570
commit b70daf4ceb
2 changed files with 91 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
index.php
View file

@ -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>
<iframe
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"
style="border:solid 1px #777; width: 100%; height: 20em;"
frameborder="0"
scrolling="no"
></iframe>
<p> See online:
<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>
</p>
<h2><a id="payments" name="payments">Payments</a></h2>

45
style.css
View file

@ -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%;
}
}