Merge pull request #347 from ViaCoco/master

nearby events section - did some work on layout and style

Author: ialja

static/scss/_near-event-grid.scss

@@ -0,0 +1,63 @@
+.grid {
+	padding: 5px;
+	overflow: hidden;
+
+	a {
+		color: $primary-color;
+
+		figure {
+			position: relative;
+			overflow: hidden;
+			background: $white;
+			height: 250px;
+			width: 100%;	
+			margin: 0 auto;
+			border: 1px solid $primary-color;
+
+			img {
+				display: block;
+				position: relative;
+				width: 100%; 
+				z-index: 9;
+				-webkit-filter: grayscale(0.5);
+				-moz-filter: grayscale(0.5);
+				filter: grayscale(0.5);
+				opacity: 0.7;
+			}
+
+			.caption-description {
+				position: absolute;
+				padding: 10px;
+				top: 40%;
+				z-index: 10;
+				width: 100%;
+				height: 60%;
+				background: $whitesmoke;
+				border-top: 1px solid $primary-color;
+
+				h4 {
+					margin: 5px;
+					padding-top: 5px;
+					color: $primary-color;
+					text-transform: uppercase;
+					backface-visibility: hidden;
+				}
+
+				span {
+					margin: 0 5px;
+					display: inline-block;
+					backface-visibility: hidden;
+					font-size: 12px;
+				}
+
+				p {
+					width: 90%;
+					margin: 5px auto;
+					display: block;
+					overflow: hidden;
+					color: $aluminum;
+				}
+			}
+		}
+	}
+}

static/scss/style.scss

@@ -33,6 +33,7 @@ of the styles inside media queries.
 
 // Components
 //@import "thumbnails";
+@import "near-event-grid";
 
 // styles in base.scss
 @import "base";

web/templates/layout/near_event_tile.html

@@ -1,16 +1,16 @@
 {% load static %}
-<div class="col-sm-3 col-xs-6">
-	<a href="{% url 'web.view_event' event.id event.slug %}" class="thumbnail clearfix">
-		<h4>{{ event.title }}</h4>
-		<div class="caption">
-			<span class="countdown pull-left caption">
-				{{ event.start_date|date:"F j, Y" }}
-			</span>
-		</div>
+<div class="col-md-3 col-sm-6 grid">
+	<a href="{% url 'web.view_event' event.id event.slug %}">
+		<figure>
 		{% if event.picture %}
 			<img src="{{ event.picture.url }}" alt="{{ event.title }} Image">
-		{% else %}
+			{% else %}
 			<img src="{% static 'img/event_default_picture.png' %}" alt="{{ event.title }} Image">
-		{% endif %}
+			{% endif %}
+			
+			<div class="caption-description">
+				<h4>{{ event.title }}</h4>
+				<span>{{ event.start_date|date:"F j, Y" }}</span><p>{{ event.description|truncatewords:12 }}</p></div>
+		</figure>
 	</a>
 </div>

web/views/events.py

@@ -191,7 +191,7 @@ def view_event_by_country(request, country_code):
 def view_event(request, event_id, slug):
 	event = get_event_by_id(event_id)
 	next_event = get_next_or_previous(event, country_code=event.country)
-	nearby = get_nearby_events(event, limit=10)
+	nearby = get_nearby_events(event, limit=4)
 
 	return render_to_response(
 		'pages/view_event.html', {