update focus roll style to match discussions

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')

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;

panikweb_templates/templates/news/roll.html

 {% 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 %}