diff options
| -rw-r--r-- | assets/css/lustige-styles.css | 31 | ||||
| -rw-r--r-- | assets/css/src/lustige-styles.scss | 48 | ||||
| -rw-r--r-- | assets/js/lustiges-relive-script.js | 14 | ||||
| -rw-r--r-- | index.php | 5 | ||||
| -rw-r--r-- | pages/relive.php | 11 | ||||
| -rw-r--r-- | template/page.phtml | 4 | ||||
| -rw-r--r-- | template/relive.phtml | 29 |
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 @@ -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> |