update focus roll style to match discussions

diff --git a/panikweb/views.py b/panikweb/views.py
index 261648deb53fefcfe209c281d126fe4f8a734578..583764603aaade085330399df8770b4eabc2c649 100644 (file)
--- a/panikweb/views.py
+++ b/panikweb/views.py
@@ -396,7 +396,7 @@ class Home(TemplateView):
     def get_context_data(self, **kwargs):
         context = super(Home, self).get_context_data(**kwargs)
         context['sectionName'] = "Home"
-        context['focus'] = NewsItem.objects.select_related('category').filter(focus=True).exclude(image__isnull=True).exclude(image__exact='').order_by('-date')[:9]
+        context['focus'] = NewsItem.objects.select_related('category').filter(focus=True).exclude(image__isnull=True).exclude(image__exact='').order_by('-date')[:5]
         context['emissions'] = Emission.objects.filter(archived=False,
                 creation_timestamp__gte=datetime(2013, 9, 13)).order_by('title')
         schedules = Schedule.objects.select_related().order_by('datetime')

diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
index 4c3a5b6bf3895b97bd3a512f220383c5cd6910d8..60493a579f232ac77bebb68acf8499372d2cbdba 100644 (file)
--- a/panikweb_templates/static/css/specifics.css
+++ b/panikweb_templates/static/css/specifics.css
@@ -667,23 +667,39 @@ body{
 /**** News ****/
 /****************************************************/
 
-#newsRoll {
-       border-top:2px solid black;
-       border-bottom:2px solid black;
-       -moz-box-shadow: 0px 0px 100px rgb(0, 0, 0) inset;
-       -webkit-box-shadow: 0px 0px 100px rgb(0, 0, 0) inset;
-       box-shadow: 0px 0px 100px rgb(0, 0, 0) inset;
-}
-
-.newsRoll li{
+#Nav .newsRoll li {
        background:black;
        color:white;
-       border:2px solid black !important;
+       border: none;
+}
+
+.newsRoll li.first {
+       width: 30%;
+}
+
+.newsRoll li {
+       width: 15%;
+       display: table-cell;
+       vertical-align: top;
+}
+
+.newsRoll .first .title{
+       font-size: 130%;
 }
+
+.newsRoll a {
+       position: relative;
+}
+
+.newsRoll a:hover img {
+       opacity: 0.8;
+}
+
+
 .newsRoll .title{
 }
 @media (max-width: 600px){
-       .newsRoll li.largeScreens{
+       .newsRoll .title {
                display:none;
        }
 }
@@ -700,8 +716,20 @@ body{
        bottom:0px;
        width:100%;
        opacity:0.8;
+       padding: 1em 0px 2px 0px;
+       text-align: left;
+       font-family: "RegloBold";
+       position: absolute;
+       left: 0;
 }
+
+.newsRoll .title span {
+       padding: 0 0.5ex;
+       display: inline-block;
+}
+
 .newsRoll .labels{
+       top: 0;
 }
 .newsRoll .labels .item{
        display:block;
@@ -710,9 +738,24 @@ body{
        margin:0.1em;
        font-size:0.9em;
        padding:0.3em;
+}
+
+.newsRoll li .labels .title{
+       display: none;
+}
+.newsRoll li:hover .labels .title{
+       display:block;
+       background: black;
+       opacity: 0.9;
+       color:white;
+       margin:0.1em;
+       font-size:0.9em;
+       padding:0.3em;
        opacity:0.9;
-       border-radius:0.3em;
+       text-align: left;
 }
+
+
 .newsRoll h5{
        font-size:1em;
        color:white;

diff --git a/panikweb_templates/templates/news/roll.html b/panikweb_templates/templates/news/roll.html
index 2e5bd80bb17962cb592aca3fba10d5b4f81ab899..c8f2cf4825b9c86c77ed85a3844799a6c4510ebe 100644 (file)
--- a/panikweb_templates/templates/news/roll.html
+++ b/panikweb_templates/templates/news/roll.html
@@ -1,25 +1,24 @@
 {% load thumbnails %}{% load i18n %}
 <div id="newsRoll">
        <div class="newsRoll center wrapper">
-               <ul class="custom distributed">
-                       <li class="rollLabel">
-                               <h4 class="label vertical">{% trans 'News' %}</h4>
-                       </li>
+               <ul class="custom">
                        {% for content in news %}
-                               <li class="{% if forloop.counter > 3 %}largeScreens{% endif %}">
-                                       <a title="{{content.title|striptags|addslashes}}" class="block news relative" href="{% url 'news-view' slug=content.slug %}">                                   
-                                               {% if content.image %}  
+                               <li class="{% if forloop.counter == 1 %}first{% endif %}">
+                                       <a class="block news relative" href="{% url 'news-view' slug=content.slug %}">
+
+                               {% if forloop.counter == 1 %}
+                                               <img class="logo" src="{{ content.image|thumbnail:'640x480' }}"/>       
+                               {% else %}
+                                               <img class="logo" src="{{ content.image|thumbnail:'320x480' }}"/>       
+                               {% endif %}
+
                                                {% if content.category %}
                                                        <div class="labels absolute">
                                                                <span class="item inBlock">{{ content.category.title }}</span>
                                                        </div>  
                                                {% endif %}
-                                                       <div class="absolute title ">
-                                                               <h5 class="ellipsis">{{ content.date|date:"D m/m" }}</h5>
-                                                       </div>  
 
-                                               <img class="logo" src="{{ content.image|thumbnail:'240x320' }}"/>       
-                                               {% endif %}                             
+                                               <span class="title inBlock"><span>{{ content.title }}</span></span>
                                        </a>
                                </li>
                        {% endfor %}