aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/css/lustige-styles.css31
-rw-r--r--assets/css/src/lustige-styles.scss48
-rw-r--r--assets/js/lustiges-relive-script.js14
-rw-r--r--index.php5
-rw-r--r--pages/relive.php11
-rw-r--r--template/page.phtml4
-rw-r--r--template/relive.phtml29
7 files changed, 142 insertions, 0 deletions
diff --git a/assets/css/lustige-styles.css b/assets/css/lustige-styles.css
index 2a54ac6..ba8baff 100644
--- a/assets/css/lustige-styles.css
+++ b/assets/css/lustige-styles.css
@@ -5689,6 +5689,37 @@ a.inverted {
.mejs-container .mejs-overlay-loading {
background: none !important; }
+/* events overview */
+.event-previews .event-preview {
+ margin: 16px 0;
+ display: block;
+ clear: both;
+ height: 120px;
+ color: black; }
+ .event-previews .event-preview.template {
+ display: none; }
+ .event-previews .event-preview .video-thumbnail {
+ float: left;
+ height: 120px;
+ width: 160px; }
+ .event-previews .event-preview:hover, .event-previews .event-preview:focus, .event-previews .event-preview:active {
+ text-decoration: none; }
+ .event-previews .event-preview:hover .metadata li, .event-previews .event-preview:hover h3, .event-previews .event-preview:focus .metadata li, .event-previews .event-preview:focus h3, .event-previews .event-preview:active .metadata li, .event-previews .event-preview:active h3 {
+ color: #d87500; }
+ .event-previews .event-preview .metadata {
+ text-align: left;
+ border: none; }
+ .event-previews .event-preview .metadata li {
+ padding: 1px;
+ padding-right: 5px;
+ color: #333333;
+ min-width: inherit; }
+ .event-previews .event-preview .caption {
+ margin-left: 160px;
+ padding-left: 16px; }
+ .event-previews .event-preview .caption h3 {
+ margin-top: 0; }
+
/* and now for medium screens: */
@media all and (min-width: 450px) and (max-width: 700px) {
/* events overview */
diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index ee431a0..95201b8 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -562,6 +562,54 @@ a.inverted {
}
}
+/* events overview */
+.event-previews {
+ .event-preview {
+ margin: 16px 0;
+ display: block;
+ clear: both;
+ height: 120px;
+ color: black;
+
+ &.template { display: none; }
+
+ .video-thumbnail {
+ float: left;
+ height: 120px;
+ width: 160px;
+ }
+
+ &:hover, &:focus, &:active {
+ text-decoration: none;
+ .metadata li, h3 {
+ color: $link-color;
+ }
+ }
+
+
+ .metadata {
+ text-align: left;
+ border: none;
+
+ li {
+ padding: $padding-xs-vertical;
+ padding-right: $padding-xs-horizontal;
+ color: $gray-dark;
+ min-width: inherit;
+ }
+ }
+
+ .caption {
+ margin-left: 160px;
+ padding-left: $padding-large-horizontal;
+
+ h3 {
+ margin-top: 0;
+ }
+ }
+ }
+}
+
/* and now for medium screens: */
@media all and (min-width: $screen-sm-min) and (max-width: $container-desktop) {
diff --git a/assets/js/lustiges-relive-script.js b/assets/js/lustiges-relive-script.js
new file mode 100644
index 0000000..fe2ead7
--- /dev/null
+++ b/assets/js/lustiges-relive-script.js
@@ -0,0 +1,14 @@
+$(function() {
+ var
+ $parent = $('.event-previews'),
+ $loading = $parent,
+ $tpl = $parent.find('.template').detach().removeClass('template');
+
+ $.ajax({
+ url: '/~peter/relive.json',
+ success: function(els) {
+ console.log(els);
+ $loading.hide();
+ }
+ });
+}); \ No newline at end of file
diff --git a/index.php b/index.php
index a504c90..d554a94 100644
--- a/index.php
+++ b/index.php
@@ -74,6 +74,11 @@ else if(preg_match('@^feedback$@', $route, $m))
include('pages/feedback.php');
}
+else if(preg_match('@^relive$@', $route, $m))
+{
+ include('pages/relive.php');
+}
+
else
{
include('pages/404.php');
diff --git a/pages/relive.php b/pages/relive.php
new file mode 100644
index 0000000..2d7f3d6
--- /dev/null
+++ b/pages/relive.php
@@ -0,0 +1,11 @@
+<?php
+
+require_once('lib/bootstrap.php');
+
+echo $tpl->render(array(
+ 'page' => 'relive',
+ 'title' => 'Relive!',
+ 'extraScripts' => array(
+ 'assets/js/lustiges-relive-script.js',
+ ),
+));
diff --git a/template/page.phtml b/template/page.phtml
index 3e12e22..e120993 100644
--- a/template/page.phtml
+++ b/template/page.phtml
@@ -40,6 +40,10 @@
<script type="text/javascript" src="assets/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/lib/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="assets/js/lustiges-script.js"></script>
+
+ <? if(isset($extraScripts)) foreach($extraScripts as $script): ?>
+ <script type="text/javascript" src="<?=h($script)?>"></script>
+ <? endforeach ?>
</head>
<body class="<?=h($page)?>">
<? include("$assemblies/header.phtml") ?>
diff --git a/template/relive.phtml b/template/relive.phtml
new file mode 100644
index 0000000..248056f
--- /dev/null
+++ b/template/relive.phtml
@@ -0,0 +1,29 @@
+<div class="container-fluid">
+ <h1>Experimetal ReLive Recordings</h1>
+
+ <div class="event-previews">
+ <h2 class="loading">Loading…</h2>
+
+ <a class="event-preview template" href="url.html">
+ <img alt="Readable Title" class="video-thumbnail" src="">
+ <div class="caption">
+ <ul class="metadata">
+ <li>
+ <span class="fa fa-clock-o"></span>
+ 36 min
+ </li>
+ <li>
+ <span class="fa fa-calendar-o"></span>
+ 2013-12-28
+ </li>
+ <li class="persons">
+ <span class="fa fa-user"></span>
+ C B
+ </li>
+ </ul>
+ <h3>Readable Title</h3>
+ </div>
+ </a>
+
+ </div>
+</div>