From 75e4f77e92603fa8101b8c029b2c6cd8073c1758 Mon Sep 17 00:00:00 2001 From: Philippe Barbosa Date: Fri, 8 Apr 2016 18:21:28 +0200 Subject: [PATCH] Various fixes from tasks, audio player designed --- app/festival/static/css/index.css | 147 +++++++----------- app/festival/static/js/index.js | 92 ++++++----- .../static/scss/base/_typography.scss | 11 -- app/festival/static/scss/index.scss | 2 +- .../static/scss/modules/audio-player.scss | 56 +++++++ app/festival/static/scss/modules/icons.scss | 2 +- .../templates/festival/artist_detail.html | 1 + .../festival/inc/audio_playlist.html | 43 ++--- .../templates/festival/video_detail.html | 2 +- app/templates/agenda/event_location_list.html | 4 +- app/templates/index.html | 6 +- 11 files changed, 195 insertions(+), 171 deletions(-) create mode 100644 app/festival/static/scss/modules/audio-player.scss diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css index f4640bc8..19c2b12a 100755 --- a/app/festival/static/css/index.css +++ b/app/festival/static/css/index.css @@ -3247,6 +3247,11 @@ th { content: ""; } +/* line 115, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +.icon__play:before { + content: ""; +} + /* line 154, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ .icon__calendar:before { content: ""; @@ -3582,92 +3587,63 @@ th { margin-bottom: 0; } -/** - * Tabs navigation - */ -/* line 8, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav { - display: block; - float: left; - text-align: left; - width: 40%; +/* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__player, +.audio__playlist { + padding: 1rem; + background: #e0cfad; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4); } -/* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link { - color: #d2ba88; +/* line 16, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__player audio, +.audio__playlist audio { + width: 100%; + background: white; + margin: 0 auto; display: block; - transition: color 0.3s; - font-size: .6em; - padding: 0.25rem; } -/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link:last-child { - margin-right: 0; -} - -/* line 40, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link.is-active { - color: #b18d43; +/* line 25, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__player { + border-bottom: 1px solid #fff; + background: #fff; } -/* line 45, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link i, -.c-tabs-nav__link span { - margin: 0; - padding: 0; +/* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__playlist__item { + font-size: .75rem; + color: #555; line-height: 1; + transition: .3s; } -/* line 52, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link i { - font-size: 18px; -} - -/* line 56, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs-nav__link span { - display: none; - font-size: 18px; -} - -/** - * Tab - */ -/* line 74, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tab { - display: none; - float: left; - width: 60%; -} - -/* line 84, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tab.is-active { - display: block; +/* line 35, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__playlist__item:before { + content: normal; + font-family: "Font-Awesome"; + content: ""; + font-size: 0; + transition: .3s; } -/* line 88, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tab__content { - padding-left: .5rem; +/* line 43, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.active .audio__playlist__item { + color: #000; } -/** - * Tabs no-js fallback - */ -/* line 95, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs.no-js .c-tabs-nav { - display: none; +/* line 45, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.active .audio__playlist__item:before { + font-size: 0.5rem; + margin-right: .3rem; + color: #000; } -/* line 99, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs.no-js .c-tab { +/* line 52, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ +.audio__title { display: block; - margin-bottom: 1.5rem; -} - -/* line 104, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ -.c-tabs.no-js .c-tab:last-child { - margin-bottom: 0; + color: #000; + font-size: .75rem; } /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/location.scss */ @@ -3693,15 +3669,6 @@ th { .c-tabs-nav__link span{ display: block; } - /* line 62, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ - .c-tabs-nav__link i{ - margin-bottom: 12px; - font-size: 22px; - } - /* line 66, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ - .c-tabs-nav__link span{ - display: block; - } } @media (min-width: 769px){ /* line 72, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */ @@ -3774,6 +3741,12 @@ th { .hero__slider__name{ font-size: 3rem; } + /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ + .audio__player, + .audio__playlist{ + width: 50%; + margin: 0 auto; + } } @media (min-width: 961px){ /* line 59, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_typography.scss */ @@ -4000,19 +3973,11 @@ th { .c-tab{ width: 70%; } - /* line 8, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ - .c-tabs-nav{ - width: 30%; - } - /* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ - .c-tabs-nav__link{ - padding: 0; - font-size: .75rem; - line-height: 1.6; - } - /* line 74, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */ - .c-tab{ - width: 70%; + /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */ + .audio__player, + .audio__playlist{ + width: 33%; + margin: 0; } /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/location.scss */ .location__title{ diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js index ee42447f..55d86a9a 100644 --- a/app/festival/static/js/index.js +++ b/app/festival/static/js/index.js @@ -130,7 +130,9 @@ $(function() { * Tabs */ + var zeTab = $('#tabs'); + if (zeTab.length) { var myTabs = tabs({ el: '#tabs', tabNavigationLinks: '.c-tabs-nav__link', @@ -138,52 +140,60 @@ $(function() { }); myTabs.init(); + } + /** * Audio player */ - function init_player() { - var audio; - var playlist; - var tracks; - var current; - - current = 0; - audio = $('#audio'); - playlist = $('#playlist'); - tracks = playlist.find('li a'); - len = tracks.length - 1; - audio[0].volume = .90; - // audio[0].play(); - playlist.find('a').click(function(e) { - e.preventDefault(); - link = $(this); - current = link.parent().index(); - run_player(link, audio[0]); - }); - audio[0].addEventListener('ended', function(e) { - current++; - if (current == len) { - current = 0; - link = playlist.find('a')[0]; - } else { - link = playlist.find('a')[current]; - } - run_player($(link), audio[0]); - }); - } - - function run_player(link, player) { - $(player).find('#primarysrc').attr('src', link.attr('href')); - $(player).find('#secondarysrc').attr('src', link.attr('data-altsrc')); - par = link.parent(); - par.addClass('active').siblings().removeClass('active'); - player.load(); - player.play(); - } - - init_player(); + if ($('#audio').length) { + function init_player() { + var audio; + var playlist; + var tracks; + var current; + + current = 0; + audio = $('#audio'); + playlist = $('#playlist'); + tracks = playlist.find('li a'); + len = tracks.length - 1; + audio[0].volume = .90; + // audio[0].play(); + playlist.find('a').click(function(e) { + e.preventDefault(); + link = $(this); + current = link.parent().index(); + run_player(link, audio[0]); + linkTitle = link.text(); + $('.audio__title').html(linkTitle); + }); + audio[0].addEventListener('ended', function(e) { + current++; + if (current == len) { + current = 0; + link = playlist.find('a')[0]; + } else { + link = playlist.find('a')[current]; + } + run_player($(link), audio[0]); + }); + } + + function run_player(link, player) { + $(player).find('#primarysrc').attr('src', link.attr('href')); + $(player).find('#secondarysrc').attr('src', link.attr('data-altsrc')); + par = link.parent(); + par.addClass('active').siblings().removeClass('active'); + player.load(); + player.play(); + } + + init_player(); + } + + }); diff --git a/app/festival/static/scss/base/_typography.scss b/app/festival/static/scss/base/_typography.scss index d65eb4b9..ad9c8373 100755 --- a/app/festival/static/scss/base/_typography.scss +++ b/app/festival/static/scss/base/_typography.scss @@ -234,17 +234,6 @@ pre > p { font-weight: $bold; } -.location__title { - text-transform: uppercase; - margin: 0; - padding: 0; - font: $bold 1.1em/1.2 $base_font_family; - color: $main_color_darker; - @media (min-width : $desktop ) { - font: $bold 1.7em/1.2 $base_font_family; - } -} - .section__title { line-height: $base_line_height; font-family: $base_font_family; diff --git a/app/festival/static/scss/index.scss b/app/festival/static/scss/index.scss index 0f5af632..d1ae5215 100755 --- a/app/festival/static/scss/index.scss +++ b/app/festival/static/scss/index.scss @@ -84,5 +84,5 @@ 'modules/push-calendar', 'modules/calendar', 'modules/tabs', - 'modules/tabs', + 'modules/audio-player', 'modules/location'; \ No newline at end of file diff --git a/app/festival/static/scss/modules/audio-player.scss b/app/festival/static/scss/modules/audio-player.scss new file mode 100644 index 00000000..09b95afc --- /dev/null +++ b/app/festival/static/scss/modules/audio-player.scss @@ -0,0 +1,56 @@ +.audio__player, +.audio__playlist { + + @media (min-width : $tablet ) { + width: 50%; + margin: 0 auto; + } + @media (min-width : $desktop ) { + width: 33%; + margin: 0; + } + + padding: 1rem; + background: lighten($main_color, 10); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4); + audio { + width: 100%; + // max-width: 100%; + background: white; + margin: 0 auto; + display: block; + } +} + +.audio__player { + border-bottom: 1px solid $white; + background: $white; +} + +.audio__playlist__item { + font-size: .75rem; + color: $base_font_color; + line-height: 1; + transition: .3s; + &:before { + content: normal; + font-family: $icon-font; + content: $fa-var-play; + font-size: 0; + transition: .3s; + } +} +.active .audio__playlist__item { + color: $black; + &:before { + font-size: 0.5rem; + margin-right: .3rem; + color: $black; + } +} + +.audio__title { + display: block; + color: $black; + font-size: .75rem; +} \ No newline at end of file diff --git a/app/festival/static/scss/modules/icons.scss b/app/festival/static/scss/modules/icons.scss index 57eff328..2509f0ee 100755 --- a/app/festival/static/scss/modules/icons.scss +++ b/app/festival/static/scss/modules/icons.scss @@ -112,7 +112,7 @@ // .icon__step-backward:before { content: $fa-var-step-backward; } // .icon__fast-backward:before { content: $fa-var-fast-backward; } // .icon__backward:before { content: $fa-var-backward; } -// .icon__play:before { content: $fa-var-play; } +.icon__play:before { content: $fa-var-play; } // .icon__pause:before { content: $fa-var-pause; } // .icon__stop:before { content: $fa-var-stop; } // .icon__forward:before { content: $fa-var-forward; } diff --git a/app/festival/templates/festival/artist_detail.html b/app/festival/templates/festival/artist_detail.html index ace9bd85..22ccc9f1 100644 --- a/app/festival/templates/festival/artist_detail.html +++ b/app/festival/templates/festival/artist_detail.html @@ -22,6 +22,7 @@

+

{% trans "Related events" %}


{% for event in artist.events.all %} {% include 'agenda/includes/event_card.html' %} diff --git a/app/festival/templates/festival/inc/audio_playlist.html b/app/festival/templates/festival/inc/audio_playlist.html index 4a27ae9b..83478730 100644 --- a/app/festival/templates/festival/inc/audio_playlist.html +++ b/app/festival/templates/festival/inc/audio_playlist.html @@ -1,23 +1,26 @@ {% load staticfiles %} -{% for audio in playlist.audios.all %} -{% if forloop.first %} - - -{% endif %} - - - + + + + {% endif %} + diff --git a/app/festival/templates/festival/video_detail.html b/app/festival/templates/festival/video_detail.html index e4a7de5e..94a3b082 100644 --- a/app/festival/templates/festival/video_detail.html +++ b/app/festival/templates/festival/video_detail.html @@ -28,7 +28,7 @@ {% endwith %}
-

{% trans 'Related event' %}

+

{% trans 'Related event' %}

{% with video.event as event %} {% include 'agenda/includes/event_card.html' %} {% endwith %} diff --git a/app/templates/agenda/event_location_list.html b/app/templates/agenda/event_location_list.html index 18d0e29c..414cd5ea 100644 --- a/app/templates/agenda/event_location_list.html +++ b/app/templates/agenda/event_location_list.html @@ -44,8 +44,8 @@ {{ location.address }}
{% trans "Click to get the interactive map" %}

- - {% google_static_map location 900 300 15 %} + + {% google_static_map location 900 300 15 %} {% endeditable %} {% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 355ad563..03660133 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -23,7 +23,7 @@ {% for post in featured.blogposts.all %}
- {% trans "Article" %} + {% trans "Article" %} : {% include 'blog/includes/post_card.html' %} {% trans "All" %} {% trans "articles" %}
@@ -31,7 +31,7 @@ {% for artist in featured.artists.all %}
- {% trans "Artist" %} + {% trans "Artist" %} : {% include "festival/inc/artist_card.html" %} {% trans "All" %} {% trans "artists" %}
@@ -39,7 +39,7 @@ {% for video in featured.videos.all %}
- {% trans "Video" %} + {% trans "Video" %} : {% include 'festival/inc/video_card.html' %} {% trans "All" %} {% trans "videos" %}
-- 2.39.5