diff options
Diffstat (limited to '')
-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 |
3 files changed, 93 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 |