Prepare templates and stylesheets for mobile visits
- Author
- Maarten Vangeneugden
- Date
- April 16, 2018, 2:21 p.m.
- Hash
- 416c65ee58cdca6e047c14ba69509218ab04dc13
- Parent
- 8da420b8ac7883d9104519a502768d80c0c186fe
- Modified files
- joeni/templates/joeni/header.djhtml
- static/css/_variables.scss
- static/css/footer.scss
- static/css/header.scss
- static/css/stylesheet.scss
joeni/templates/joeni/header.djhtml ¶
1 addition and 0 deletions.
View changes Hide changes
1 |
1 |
{% load static %} |
2 |
2 |
{% get_media_prefix as media %} |
3 |
3 |
<img src="{% static "logos/uhasselt/simple_white.svg" %}" alt="◀ Joeni /▶" /> |
+ |
4 |
<img src="{% static "logos/uhasselt/simple_white.svg" %}" alt="◀ Joeni /▶" /> |
4 |
5 |
<nav> |
5 |
6 |
<ul> |
6 |
7 |
<li><a href="{% url 'agora-index' %}">Agora</a> |
7 |
8 |
<ul> |
8 |
9 |
</ul> |
9 |
10 |
</li> |
10 |
11 |
|
11 |
12 |
<li><a href="{% url 'administration-index' %}">{% trans "Administration" %}</a> |
12 |
13 |
<ul> |
13 |
14 |
<li><a href="{% url 'administration-settings' %}">{% trans "Personal settings" %}</a></li> |
14 |
15 |
<li><a href="{% url 'administration-curriculum' %}">{% trans "Curricula" %}</a></li> |
15 |
16 |
<li><a href="{% url 'administration-forms' %}">{% trans "Forms" %}</a></li> |
16 |
17 |
<li><a href="{% url 'administration-rooms' %}">{% trans "Rooms" %}</a></li> |
17 |
18 |
<li><a href="{% url 'administration-jobs' %}">{% trans "Jobs" %}</a></li> |
18 |
19 |
<li><a href="{% url 'administration-roster' %}">{% trans "Personal Roster" %}</a></li> |
19 |
20 |
<li><a href="{% url 'administration-bulletin-board' %}">{% trans "Bulletin board" %}</a></li> |
20 |
21 |
</ul> |
21 |
22 |
</li> |
22 |
23 |
|
23 |
24 |
<li><a href="{% url 'courses-index' %}">{% trans "Courses" %}</a> |
24 |
25 |
<ul> |
25 |
26 |
{% for course in user.user_data.current_courses %} |
26 |
27 |
<li><a href="{% url 'courses-course-index' course.slug_name %}">{{ course.name }}</a></li> |
27 |
28 |
{% endfor %} |
28 |
29 |
</ul> |
29 |
30 |
</li> |
30 |
31 |
</ul> |
31 |
32 |
</nav> |
32 |
33 |
{# PingPing: €{{ money }} #} |
33 |
34 |
static/css/_variables.scss ¶
0 additions and 15 deletions.
View changes Hide changes
1 |
1 |
$uhasselt-color: #E73B2B; |
2 |
2 |
$fos-color: #0076BE; |
3 |
3 |
$fots-color: #C0D633; |
4 |
4 |
$foaaa-color: #F4802D; |
5 |
5 |
$fobe-color: #00ACEE; |
6 |
6 |
$fomals-color: #9C3591; |
7 |
7 |
$foet-color: #5BC4BA; |
8 |
8 |
$fol-color: #E41F3A; |
9 |
9 |
|
10 |
10 |
$colors: ( |
11 |
11 |
"uhasselt": $uhasselt-color, |
12 |
12 |
"fos": $fos-color, |
13 |
13 |
"fots": $fots-color, |
14 |
14 |
"foaaa": $foaaa-color, |
15 |
15 |
"fobe": $fobe-color, |
16 |
16 |
"fomals": $fomals-color, |
17 |
17 |
"foet": $foet-color, |
18 |
18 |
"fol": $fol-color, |
19 |
19 |
); |
20 |
20 |
|
21 |
21 |
@each $color_name, $color_value in $colors { |
22 |
22 |
.#{$color_name} { |
23 |
23 |
background-color: $color_value; |
24 |
24 |
} |
25 |
25 |
.#{$color_name}-text { |
26 |
26 |
color: $color_value; |
27 |
27 |
} |
28 |
28 |
} |
29 |
29 |
|
30 |
30 |
|
31 |
31 |
// SIZING |
32 |
- | $small-screen-up: 601px !default; |
33 |
- | $medium-screen-up: 993px !default; |
34 |
- | $large-screen-up: 1201px !default; |
35 |
- | $small-screen: 600px !default; |
36 |
- | $medium-screen: 992px !default; |
37 |
- | $large-screen: 1200px !default; |
38 |
- | |
39 |
- | $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; |
40 |
- | $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; |
41 |
- | $extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default; |
42 |
- | $small-and-down: "only screen and (max-width : #{$small-screen})" !default; |
43 |
- | $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; |
44 |
- | $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; |
45 |
- | |
46 |
- | $header-padding: 1%; |
47 |
32 |
$header-width: 20%; |
48 |
33 |
static/css/footer.scss ¶
10 additions and 0 deletions.
View changes Hide changes
1 |
1 |
margin-left: ($header-padding * 2) + $header-width; |
2 |
2 |
padding: 0.5em; |
3 |
3 |
background-color: $uhasselt-color; |
4 |
4 |
color: white; |
5 |
5 |
width: 78%; |
6 |
6 |
position: fixed; |
7 |
7 |
bottom: 0; |
8 |
8 |
img { |
9 |
9 |
vertical-align: middle; |
10 |
10 |
height: 2em; |
11 |
11 |
} |
12 |
12 |
} |
+ |
13 |
@media screen |
+ |
14 |
and (max-device-width: 440px) |
+ |
15 |
and (max-device-height: 800px) { |
+ |
16 |
//and (-webkit-min-device-pixel-ratio: 2) { |
+ |
17 |
position: relative; |
+ |
18 |
width: 100%; |
+ |
19 |
img { |
+ |
20 |
height: 1em; |
+ |
21 |
} |
+ |
22 |
} |
13 |
23 |
static/css/header.scss ¶
30 additions and 0 deletions.
View changes Hide changes
1 |
1 |
float: left; |
2 |
2 |
margin-right: 50px; |
3 |
3 |
position: fixed; |
4 |
4 |
//display: flow; |
5 |
5 |
//height: 100%; |
6 |
6 |
padding: $header-padding; |
7 |
7 |
top: 0; |
8 |
8 |
width: $header-width; |
9 |
9 |
height: 100%; |
10 |
10 |
//background-color: $uhasselt-color; |
11 |
11 |
color: white; |
12 |
12 |
img { |
13 |
13 |
width: 80%; |
14 |
14 |
} |
15 |
15 |
nav ul { |
16 |
16 |
//list-style: none; |
17 |
17 |
list-style: none; |
18 |
18 |
} |
19 |
19 |
a { |
20 |
20 |
text-decoration: none; |
21 |
21 |
color: white; |
22 |
22 |
&:hover { |
23 |
23 |
text-decoration: underline solid white; |
24 |
24 |
text-transform: uppercase; |
25 |
25 |
font-weight: bold; |
26 |
26 |
} |
27 |
27 |
} |
28 |
28 |
} |
29 |
29 |
/*header ul { |
30 |
30 |
display: inline; |
31 |
31 |
float: right; |
32 |
32 |
}*/ |
33 |
33 |
|
+ |
34 |
@media screen |
+ |
35 |
and (max-device-width: 440px) |
+ |
36 |
and (max-device-height: 800px) { |
+ |
37 |
//and (-webkit-min-device-pixel-ratio: 2) { |
+ |
38 |
main { |
+ |
39 |
margin-left: 2%; |
+ |
40 |
} |
+ |
41 |
input#header-mobile { |
+ |
42 |
display: none; |
+ |
43 |
&:checked ~ header { |
+ |
44 |
display: block; |
+ |
45 |
} |
+ |
46 |
} |
+ |
47 |
|
+ |
48 |
header { |
+ |
49 |
position: relative; |
+ |
50 |
margin-top: 0; |
+ |
51 |
margin-right: 0; |
+ |
52 |
width: 100%; |
+ |
53 |
height: 2em; |
+ |
54 |
img { |
+ |
55 |
height: 1em; |
+ |
56 |
} |
+ |
57 |
|
+ |
58 |
nav { |
+ |
59 |
display: none; |
+ |
60 |
} |
+ |
61 |
} |
+ |
62 |
} |
+ |
63 |
static/css/stylesheet.scss ¶
1 addition and 1 deletion.
View changes Hide changes
1 |
1 |
by using sassc, put in one single file, stylesheet.css. However, that may not be |
2 |
2 |
what you want when using HTTP/2. In that case, edit the scripts and templates |
3 |
3 |
accordingly. */ |
4 |
4 |
@import 'variables'; |
5 |
5 |
@import 'classes.scss'; |
6 |
6 |
@import 'global.scss'; |
7 |
7 |
@import 'header.scss'; |
8 |
- | @import 'main.scss'; |
9 |
8 |
@import 'footer.scss'; |
+ |
9 |
@import 'footer.scss'; |
10 |
10 |