Skip to content
This repository was archived by the owner on Sep 19, 2018. It is now read-only.

Commit 48ece86

Browse files
ialjaialja
committed
Merge pull request #392 from ViaCoco/master
scoreboard and nearby events - some style/design fixes
2 parents 905a24b + c0af9f0 commit 48ece86

File tree

6 files changed

+87
-64
lines changed

6 files changed

+87
-64
lines changed

‎static/scss/_near-event-grid.scss‎

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,61 @@
1-
.grid {
2-
padding: 5px;
3-
overflow: hidden;
4-
5-
a {
6-
color: $primary-color;
7-
8-
figure {
9-
position: relative;
10-
overflow: hidden;
11-
background: $white;
12-
height: 250px;
13-
width: 100%;
14-
margin: 0 auto;
15-
border: 1px solid $primary-color;
16-
17-
img {
18-
display: block;
1+
.ne-wrapper {
2+
margin: 0 auto;
3+
padding: 20px 5px;
4+
5+
.ne-box{
6+
display: inline-block;
7+
background: $very-light-gray;
8+
position: relative;
9+
height: 240px;
10+
padding: 5px;
11+
border: solid 5px $white;
12+
transition: all 0.5s ease-in-out;
13+
14+
&:hover {
15+
background: $whitesmoke;
16+
}
17+
18+
a {
19+
color: $primary-color;
20+
21+
.box-inner{
22+
padding: 5px;
23+
left:0;
1924
position: relative;
20-
width: 100%;
21-
z-index: 9;
22-
-webkit-filter: grayscale(0.5);
23-
-moz-filter: grayscale(0.5);
24-
filter: grayscale(0.5);
25-
opacity: 0.7;
25+
width: 50%;
26+
height: 30%;
27+
overflow: hidden;
28+
29+
img {
30+
display: block;
31+
position: relative;
32+
width: 100%;
33+
z-index: 9;
34+
-webkit-filter: grayscale(0.5);
35+
-moz-filter: grayscale(0.5);
36+
filter: grayscale(0.5);
37+
}
2638
}
2739

28-
.caption-description {
29-
position: absolute;
30-
padding: 10px;
31-
top: 40%;
32-
z-index: 10;
33-
width: 100%;
34-
height: 60%;
35-
background: $whitesmoke;
36-
border-top: 1px solid $primary-color;
40+
.ne-description {
41+
position: relative;
42+
margin: 10px 5px 5px 5px;
43+
padding: 0 5px;
44+
background: white;
45+
height: 140px;
46+
overflow: hidden;
3747

3848
h4 {
39-
margin: 5px;
49+
margin: 5px 5px 0 5px;
4050
padding-top: 5px;
4151
color: $primary-color;
52+
font-size: 16px;
4253
text-transform: uppercase;
43-
backface-visibility: hidden;
4454
}
4555

4656
span {
4757
margin: 0 5px;
4858
display: inline-block;
49-
backface-visibility: hidden;
5059
font-size: 12px;
5160
}
5261

@@ -57,7 +66,9 @@
5766
overflow: hidden;
5867
color: $aluminum;
5968
}
60-
}
69+
}
6170
}
6271
}
6372
}
73+
74+

‎static/scss/_scoreboard.scss‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SCOREBOARD STYLES
66
display: block;
77
position: relative;
88
z-index: 999;
9-
padding-left: 0;
9+
padding: 0 25px;
1010
overflow: visible;
1111

1212
.one-row{
@@ -17,8 +17,8 @@ SCOREBOARD STYLES
1717

1818
.sb-box{
1919
display: table-cell;
20-
border: solid white 4px;
21-
background: $silver;
20+
border: solid white 5px;
21+
background: $light-gray;
2222
position: relative;
2323
list-style:none;
2424
height: 160px;
@@ -55,23 +55,28 @@ SCOREBOARD STYLES
5555

5656
.box-inner{
5757
top: 25%;
58-
padding: 0 25px;
58+
padding: 0 15px 0 25px;
5959
position: relative;
6060
}
6161

6262
.country-name {
6363
display: block;
6464
position: relative;
65-
font-size: 20px;
65+
font-size: 16px;
6666
padding-top: 10px;
6767
}
6868

69+
p {
70+
font-size: 12px;
71+
margin: 0 0 5px;
72+
}
73+
6974
a {
7075
display: inline-block;
7176

7277
.event-number {
7378
position: relative;
74-
font-size: 18px;
79+
font-size: 16px;
7580
left: 0;
7681
display: block;
7782
text-decoration: none;

‎static/scss/variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ $whitesmoke: #f5f5f5;
1212
$brand-primary: #428BCA;
1313
$golden: #FCD04B;
1414
$bronze: #cd7f32;
15+
$very-light-gray: #e8e8e8;
16+
$light-gray: #dbdbdb;
1517

1618
$dark-blue: #478ac8;//#198182;
1719
$light-blue: #386ea0;//lighten(#386ea0, 20%);//#26BCBB;

‎web/templates/layout/near_event_tile.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
{% load static %}
2-
<div class="col-md-3 col-sm-6 grid">
2+
3+
<div class="col-md-3 col-sm-6 col-xs-12 ne-box">
34
<a href="{% url 'web.view_event' event.id event.slug %}">
4-
<figure>
5-
{% if event.picture %}
5+
<div class="box-inner">
6+
{% if event.picture %}
67
<img src="{{ event.picture.url }}" alt="{{ event.title }} Image">
78
{% else %}
89
<img src="{% static 'img/event_default_picture.png' %}" alt="{{ event.title }} Image">
910
{% endif %}
10-
11-
<div class="caption-description">
12-
<h4>{{ event.title }}</h4>
13-
<span>{{ event.start_date|date:"F j, Y" }}</span><p>{{ event.description|truncatewords:12 }}</p></div>
14-
</figure>
11+
</div>
12+
<div class="ne-description">
13+
<h4>{{ event.title }}</h4>
14+
<span>{{ event.start_date|date:"F j, Y" }}</span>
15+
<p>{{ event.description|truncatewords:10 }}</p>
16+
</div>
1517
</a>
1618
</div>
19+

‎web/templates/pages/scoreboard.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
<h1>#codeEU Events Scoreboard</h1>
88
<p>Which countries in Europe are buzzing with coding activity? The scoreboard is sorted by the number of listed coding events per population, so don't be surprised to see some of the smaller countries higher up on the list!</p>
99
<div class="sb-wrapper">
10-
<ol class="one-row">
10+
<ol class="one-row">
1111
{% for country in counts %}
12-
<li class="col-md-3 col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0 col-md-offset-0 sb-box">
12+
<li class="col-md-3 col-sm-4 col-xs-12 sb-box">
1313
<img src="/static/flags/{{ country.country_code|lower }}.png" alt="{{ country.country_name }}" />
1414
<div class="box-inner">
15-
<span class="country-name">{{ country.country_name }}</span><p> is participating with </p>
16-
<a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">
17-
<span class="event-number">{{ country.events }} event{% if country.events != 1 %}s{% endif %}</span></a>
15+
<span class="country-name">{{ country.country_name }}</span><p> is participating with </p>
16+
<a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">
17+
<span class="event-number">{{ country.events }} event{% if country.events != 1 %}s{% endif %}</span></a>
1818
</div>
1919
</li>
2020
{% endfor %}
21-
</ol>
21+
</ol>
2222
</div>
2323
</div>
2424
{% endblock content %}

‎web/templates/pages/view_event.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -201,16 +201,18 @@ <h1>{{ event.title }}</h1>
201201
<div id="view-event-map"></div>
202202
</div>
203203
</div>
204-
<div class="col-md-12 first">
204+
<div class="col-md-12">
205205
<hr>
206206
</div>
207207
{% if nearby %}
208-
<div class="col-md-12 first">
209-
<h3>Nearby events:</h3>
210-
{% for event in nearby %}
211-
{% include 'layout/near_event_tile.html' %}
212-
{% endfor %}
213-
</div>
208+
<div class="col-md-12">
209+
<h3>Nearby events:</h3>
210+
<div class="container-fluid ne-wrapper">
211+
{% for event in nearby %}
212+
{% include 'layout/near_event_tile.html' %}
213+
{% endfor %}
214+
</div>
215+
</div>
214216
{% endif %}
215217
</div>
216218
{% endblock content %}

0 commit comments

Comments
 (0)