randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

nicer layout with dark buttons and topic highlights

Browse source
This commit is contained in:
Kiritan Flux 2017-01-23 11:15:49 +01:00
parent e8c2fd545f
commit 3ca644241a
3 changed files with 46 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
6_video.html
View file

@ -25,7 +25,7 @@ permalink: /video/
{% assign allTopicsABC = allTopics | sort %} {% assign allTopicsABC = allTopics | sort %}
<div class="content container-fluid"> <div class="content">
<div class="row"> <div class="row">
@ -38,6 +38,14 @@ permalink: /video/
{% endfor %} {% endfor %}
</div> </div>
</div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="dark_bg col-md-10 col-md-offset-1">
<div id="video-roster" class="container-fluid"> <div id="video-roster" class="container-fluid">
{% for post in site.posts %} {% for post in site.posts %}
@ -47,7 +55,7 @@ permalink: /video/
{% if talk.topics %} {% if talk.topics %}
{% assign tags = (talk.topics | split:",") %} {% assign tags = (talk.topics | split:",") %}
{% endif %} {% endif %}
<div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}"> <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3 embed-responsive embed-responsive-16by9" vimeo="{{vimeo_id}}">
<div class="video-title">{{talk.artist}}</div> <div class="video-title">{{talk.artist}}</div>
<div class="playbutton"></div> <div class="playbutton"></div>
<div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div> <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
@ -134,6 +142,7 @@ permalink: /video/
}); });
$('#video-roster').isotope({ $('#video-roster').isotope({
// options
itemSelector: '.videobox' itemSelector: '.videobox'
}); });
// init Isotope // init Isotope
@ -143,6 +152,8 @@ permalink: /video/
$('.filter-button-group').on( 'click', 'button', function() { $('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter'); var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue }); $grid.isotope({ filter: filterValue });
$('.filter-button-group').find('button').css('background-color', 'black');
$(this).css('background-color', '#5a4b68');
}); });
}); });
</script> </script>

14
7_video_no_header_or_footer.html
View file

@ -25,7 +25,7 @@ permalink: /video_fullscreen/
{% assign allTopicsABC = allTopics | sort %} {% assign allTopicsABC = allTopics | sort %}
<div class="content container-fluid"> <div class="content-no-header">
<div class="row"> <div class="row">
@ -38,7 +38,15 @@ permalink: /video_fullscreen/
{% endfor %} {% endfor %}
</div> </div>
<div id="video-roster container-fluid"> </div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="dark_bg col-md-10 col-md-offset-1">
<div id="video-roster" class="container-fluid">
{% for post in site.posts %} {% for post in site.posts %}
{% for talk in post.talks %} {% for talk in post.talks %}
@ -144,6 +152,8 @@ permalink: /video_fullscreen/
$('.filter-button-group').on( 'click', 'button', function() { $('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter'); var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue }); $grid.isotope({ filter: filterValue });
$('.filter-button-group').find('button').css('background-color', 'black');
$(this).css('background-color', '#5a4b68');
}); });
}); });
</script> </script>

23
css/video.css
View file

@ -1,3 +1,7 @@
.content-no-header
{
margin-top:-20px;
}
#video-roster { #video-roster {
margin:0; margin:0;
@ -117,10 +121,25 @@
} }
.filter-button-group{ .filter-button-group{
margin: 10px 0; margin: 10px 10px;
} }
.filter-button-group button{ .filter-button-group button{
color: #000; color: #fff;
margin-bottom: 4px; margin-bottom: 4px;
background-color: #000;
border-radius: 5px;
border-color: #000;
border-width: 1px;
}
.filter-button-group button:hover, .filter-button-group button:first-child
{
background-color: #5a4b68;
border-color: #5a4b68;
}
.spacer
{
margin-top:20px;
} }