templates: redo homepage with big link tiles

diff --git a/panikweb/views.py b/panikweb/views.py
index dcdf30e9cb97154208639e3ce03ed8a06a1d4707..479136d56c206149de5cd93cdae3ade9f40b6c4d 100644 (file)
--- a/panikweb/views.py
+++ b/panikweb/views.py
@@ -502,7 +502,7 @@ class Home(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super(Home, self).get_context_data(**kwargs)
-        context['emissions'] = Emission.objects.filter(archived=False).order_by('-creation_timestamp')[:3]
+        context['emissions'] = Emission.objects.filter(archived=False).order_by('?') #-creation_timestamp')[:3]
         context['newsitems'] = NewsItem.objects.exclude(date__gt=date.today()).order_by('-date')[:3]
 
         context['soundfiles'] = SoundFile.objects.prefetch_related('episode__emission__categories').filter(

diff --git a/panikweb_templates/static/css/_general.scss b/panikweb_templates/static/css/_general.scss
index ec6862da6f5e38e1bef3d50f5dfdce242126a290..391fc77a3347cfa7ee67d657c52f738ab5e7ba1d 100644 (file)
--- a/panikweb_templates/static/css/_general.scss
+++ b/panikweb_templates/static/css/_general.scss
@@ -39,7 +39,7 @@ button, .button{
        cursor:pointer ;
        background:none;
 }
-img {max-width:100%;}
+img {max-width:100%; max-height: 100%;}
 img.logo{border:2px solid black;}
 
 header{

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index fdf3ff3668be7f13d633586d90506dff5feede9b..04c748932adc4c85262b5bb7958a216559a26a7e 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -293,9 +293,6 @@ body{
        #metaNav ul li#nav-language {
                padding: 0.2em 0 0 1em;
        }
-       div#Changing {
-               margin: 0 5px;
-       }
 }
 @media screen and (max-width:400px){
        #metaNav ul li#nav-language {
@@ -324,12 +321,14 @@ body{
 }
 #mainHeader {
        padding-bottom:1em;
+       display: inline-block;
 }
-#mainHeader {
-    font-size:70%;
+#Player {
+       display: inline-block;
+       min-width: 350px
 }
+
 #mainHeader *{color:black !important;line-height:1em;}
-#mainHeader #radioPanik{}
 
 #Panik img{display:block;margin:auto;max-height:200px;}
 #mainHeader h1{
@@ -345,17 +344,11 @@ body{
 }
 
 @media screen and (max-width: 760px) {
+       #mainHeader {
+               display: block;
+       }
        #All h1.top {
                font-size: 60px;
-               padding: 0;
-               padding-top: 10px;
-               text-align: center;
-       }
-       #specialHome .leftPart h1.top {
-               display: none;
-       }
-       #specialHome .leftPart h2 {
-               padding-top: 10px;
                text-align: center;
        }
 }
@@ -367,25 +360,19 @@ body{
 
 @media screen and (min-width: 760px) {
        #Commons {
-               float: left;
-               width: 50%;
-               position: fixed;
                box-sizing: border-box;
                padding: 0 20px;
        }
        #Changing {
-               position: relative;
-               float: right;
-               width: 50%;
                box-sizing: border-box;
-               padding: 0 20px;
+               padding: 0;
        }
        #All h1.top {
-               font-size: 120px;
                text-transform: uppercase;
                padding-left: 0;
-               padding-top: 40px;
-               padding-bottom: 0;
+               padding-top: 20px;
+               padding-bottom: 20px;
+               text-align: center;
        }
 
        #metaNav {
@@ -469,9 +456,9 @@ body{
 }
 
 #All #backgroundBox h1.top {
-       font-size: 50px;
+       font-size: 20px;
        padding-left: 10px;
-       width: 200%;
+       width: 350px;
 }
 
 #backgroundBox h1 {
@@ -479,10 +466,8 @@ body{
 }
 
 #All h1.top#radiopanik {
-       padding-top: 0;
-       color: black !important;
-       padding-bottom: 30px;
-        height: 130px;
+       padding-top: 36px;
+       background: pink;
 }
 
 #All #backgroundBox h1 {
@@ -566,9 +551,6 @@ h1.top#frequence {
 /****************************************************/
 /*#Home #player{   float: left; } */
 
-#player-container,
-   #player-container *{border-color:white !important;color:white !important;}
-
 #player-container .metas, #player-container img{border-color:#fff;}
 #player-container .padded{padding:0.3em;}
 
@@ -578,13 +560,16 @@ h1.top#frequence {
     float:right;
 }
 #DirectStreamPanikControler {
-       display:inline !important;
 }
+#DirectStreamPanikControler div.label {
+       margin-top: -10px;
+}
+
 #chatSymbol,
 #streamSymbol{
        font-size:3em;
        float:left;
-       margin-right:5px;
+       margin-right:15px;
        position: relative;
        z-index: 10;
        top: -6px;
@@ -594,6 +579,7 @@ h1.top#frequence {
 }
 
 #Player {
+       padding-top: 36px;
        padding-left: 8px;
 }
 
@@ -693,7 +679,6 @@ h1.top#frequence {
 #player #CurrentlyPlaying,
  #player-container #Playlist ol{
        opacity:0.9;
-       padding-top:0.2em;
        height:auto;
        overflow: hidden;
 }
@@ -701,10 +686,8 @@ h1.top#frequence {
 @media screen and (max-width: 760px) {
         #backgroundBox {
                 background-position: center 30px;
-                background-size: 130px;
         }
         #All h1.top#radiopanik {
-                height: 80px;
         }
        #Player{
         margin-top:1em;
@@ -741,7 +724,6 @@ h1.top#frequence {
 }
 
 #Main{
-       max-width: 800px;
        flex-grow: 1;
        position: relative;
        z-index: 1;
@@ -753,7 +735,6 @@ h1.top#frequence {
        min-height:0;
 }
 #Changing a:hover,#Changing button:hover {
-       opacity:0.6;
        text-decoration:none;
 }
 /* GLOBAL SITE NAV */
@@ -2057,3 +2038,42 @@ div.programCell a.playlist {
        user-select: none;
        cursor: default;
 }
+
+div.emission-tile {
+       background: $primary;
+       position: relative;
+       box-sizing: border-box;
+       width: 25%;
+       height: 25vw;
+       @media screen and (max-width: 760px) {
+               width: 50%;
+               height: 50vw;
+       }
+       float: left;
+       &:hover img {
+               display: none;
+       }
+       div.image {
+               //filter: grayscale(100%);
+               border: none;
+               height: 100%;
+               width: 100%;
+               img {
+                       width: 100%;
+                       height: 100%;
+               }
+       }
+       div.name {
+               position: absolute;
+               text-transform: uppercase;
+               top: 50%;
+               margin-top: -10px;
+               font-size: 20px;
+               text-align: center;
+               width: 100%;
+               span {
+                       background: $primary;
+                       padding: 5px 20px;
+               }
+       }
+}

diff --git a/panikweb_templates/templates/base.html b/panikweb_templates/templates/base.html
index 1257bcaf823165457bceaf3ff3f3c0b521683473..f727de4c29ddccf0a1fd8c43f09f252d76fb24d2 100644 (file)
--- a/panikweb_templates/templates/base.html
+++ b/panikweb_templates/templates/base.html
@@ -37,9 +37,9 @@
 
 <body {% block bodyattr %}id="{{sectionName}}" class="section-{{sectionName}}"{% endblock %}>
        <div id="All">
-               <div id="Commons" class="cf" >
-            <div class="wrapper sided" >
-                <div id="backgroundBox" class="cf">
+               <div id="Commons" >
+            <div class="sided" >
+                <div id="backgroundBox">
                                <a href="{% url 'home' %}" id="mainHeader"><div>
                                        <h1 class="top" id="radiopanik">Radio Esperanzah! - 106.2 FM</h1>
                                </div></a>
@@ -49,19 +49,19 @@
                        </div>
                    </div>
                </div>
-               <div id="Changing" class="cf" data-section="{{ sectionName }}">
+               <div id="Changing" data-section="{{ sectionName }}">
                        {% block toptitle %}{% endblock %}
-                       <div id="Nav" class="cf" >
+                       <div id="Nav">
                                {% block nav %}{% endblock %}
                        </div>
-                       <div id="Main" class="cf">
+                       <div id="Main">
                                {% block main %}{% endblock %}
                        </div>
-                       <div id="Related" class="cf">
+                       <div id="Related">
                                {% block related %}{% endblock %}
                        </div>
                <div id="Footer">
-                       <nav class="wrapper">
+                       <nav class="">
                        </nav>
                </div>
                </div>

diff --git a/panikweb_templates/templates/home.html b/panikweb_templates/templates/home.html
index 261e05a153c7352adf081110bc9d170b33642f76..49ec8150ce0b7343ecaef348dba1352a7dd8bbb4 100644 (file)
--- a/panikweb_templates/templates/home.html
+++ b/panikweb_templates/templates/home.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load paniktags staticfiles i18n %}
+{% load paniktags staticfiles i18n thumbnail %}
 {% block bodyID %}Home{% endblock %}
 {% block title %}{% trans 'Home' %}{% endblock %}
 
@@ -17,10 +17,25 @@
 
 {% block main %}
 
-<div class="wrapper navigation" id="specialHome">
+<div class="" id="specialHome">
     <div>
            <h1 class="top">Radio Esperanzah! 2017</h1>
 
+           {% spaceless %}
+           {% for emission in emissions %}
+           <a href="{% url 'emission-view' slug=emission.slug %}">
+           <div class="emission-tile">
+                   <div class="image">
+                       {% thumbnail emission.image "400x400" crop="50% 50%" as im %}
+                       <img src="{{im.url}}">
+                       {% endthumbnail %}
+                   </div>
+                   <div class="name"><span>{{emission.title}}</span></div>
+           </div>
+           </a>
+           {% endfor %}
+           {% endspaceless %}
+
             {% if newsitems %}
 
                    <div id="recent-news">

diff --git a/panikweb_templates/templates/includes/player.html b/panikweb_templates/templates/includes/player.html
index 468ecc93024dae793d5a402e89aff5082015a8d4..b1c0bfc6757ddf666b7141f0582078bfd119b5d7 100644 (file)
--- a/panikweb_templates/templates/includes/player.html
+++ b/panikweb_templates/templates/includes/player.html
@@ -7,11 +7,11 @@
                                <span class="button" id="DirectStreamPanikControler">
                                        <div id="streamSymbol" class="icon-volume-up resymbol"></div>
                                        <div class="label">{% trans 'live' %}</div>
-                               </span>
                                <div id="CurrentlyPlaying">
                                        <span id="WhatsOnAir"></span>
                                        <button class="icon-refresh" id="RefreshWhatsOnAir"></button>
                                </div>
+                               </span>
                                <div id="CurrentlyChatting" style="display: none;">
                                         <a href=""><div id="chatSymbol" class="icon-comments control"></div>
                                                 <div class="label">CHAT</div></a>