Add mobile-ready stylesheet updates to SCSS
With just a couple of edge cases, the stylesheets are now completely ready for all screen sizes. They all scale correctly, mobile pages get a hamburger menu (which is the same header element), and the hamburger menu SVG has a fallback to "☰" so it's always visible.
Also: The cards, when hovered, now only underline the contained text. Another color is not necessary in my opinion at this time.
- Author
- Maarten Vangeneugden
- Date
- April 16, 2018, 1:07 p.m.
- Hash
- c5c379e0e034f20795d2329442a356a63380e467
- Parent
-
416c65ee58cdca6e047c14ba69509218ab04dc13
- Modified files
- joeni/templates/joeni/base.djhtml
- joeni/templates/joeni/header.djhtml
- static/css/classes.scss
- static/css/footer.scss
- static/css/header.scss
joeni/templates/joeni/base.djhtml ¶
2 additions and 1 deletion.
View changes Hide changes
1 |
1 |
{% load i18n %} |
2 |
2 |
{% get_current_language as LANGUAGE_CODE %} |
3 |
3 |
{% get_language_info for LANGUAGE_CODE as lang %} |
4 |
4 |
{% load static %} |
5 |
5 |
{% get_media_prefix as media %} |
6 |
6 |
|
7 |
7 |
<!DOCTYPE html> |
8 |
8 |
<html lang="{{ lang.code }}"> |
9 |
9 |
<head> |
10 |
10 |
<title> |
11 |
11 |
{% block title %} |
12 |
12 |
{#◀ Joeni /▶ | ▶▶ UHasselt#} |
13 |
13 |
▶▶ UHasselt |
14 |
14 |
{% endblock title %} |
15 |
15 |
</title> |
16 |
16 |
|
17 |
17 |
{% block stylesheets %} |
18 |
18 |
{% comment %}<link href="{% static "css/header.css" %}" rel="stylesheet" media="screen, projection" /> |
19 |
19 |
<link href="{% static "css/footer.css" %}" rel="stylesheet" media="screen, projection" /> |
20 |
20 |
<link href="{% static "css/base.css" %}" rel="stylesheet" media="screen, projection" /> |
21 |
21 |
{% endcomment %} |
22 |
22 |
<link href="{% static "css/stylesheet.css" %}" rel="stylesheet" media="screen, projection" /> |
23 |
23 |
<style type="text/css"> |
24 |
24 |
header, footer { |
25 |
25 |
background-color: #{{ user.account.settings.color|default:"UHASSELT" }}; |
26 |
26 |
} |
27 |
27 |
</style> |
28 |
28 |
{% endblock stylesheets %} |
29 |
29 |
|
30 |
30 |
{% block metaflags %} |
31 |
31 |
{# This is standard for all web pages and doesn't require changing. #} |
32 |
32 |
{# UTF-8, always #} |
33 |
33 |
<meta charset="utf-8" /> |
34 |
34 |
{#<meta name="author" content="Maarten Vangeneugden">#} |
35 |
35 |
{# Indicates this page is suited for mobile devices #} |
36 |
36 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
37 |
37 |
<meta |
38 |
38 |
name="description" |
39 |
39 |
content="{% block description %} |
40 |
40 |
{% trans "The digital platform of Hasselt University" %} |
41 |
41 |
{% endblock description %}" /> |
42 |
42 |
{% endblock metaflags %} |
43 |
43 |
<style> |
44 |
44 |
h1 { |
45 |
45 |
color: #{{ main_color|default:"E73B2B" }}; |
46 |
46 |
text-decoration-color: #{{ main_color|default:"E73B2B" }}; |
47 |
47 |
} |
48 |
48 |
header, footer { |
49 |
49 |
background-color: #{{ main_color|default:"E73B2B" }}; |
50 |
50 |
} |
51 |
51 |
</style> |
52 |
52 |
</head> |
53 |
53 |
|
54 |
54 |
<body> |
55 |
55 |
<header> |
| + |
56 |
<input type="checkbox" id="header-mobile" /> |
| + |
57 |
<header> |
56 |
58 |
{% block header %} |
57 |
59 |
{% include "joeni/header.djhtml" %} |
58 |
60 |
{% endblock header %} |
59 |
61 |
</header> |
60 |
62 |
|
61 |
- | <main> |
62 |
63 |
{% block main %} |
63 |
64 |
{% endblock main %} |
64 |
65 |
</main> |
65 |
66 |
|
66 |
67 |
<footer> |
67 |
68 |
{% block footer %} |
68 |
69 |
{% include "joeni/footer.djhtml" %} |
69 |
70 |
{% endblock footer %} |
70 |
71 |
</footer> |
71 |
72 |
|
72 |
73 |
</body> |
73 |
74 |
{% block JavaScript %} |
74 |
75 |
{% comment "JavaScript" %} |
75 |
76 |
My website does not require JavaScript for basic actions. However, it may be |
76 |
77 |
used to make certain things look better, or to spice up some actions for the |
77 |
78 |
user. Should it be necessary, add the appropriate JavaScript code in this |
78 |
79 |
block. |
79 |
80 |
The reason this block is at the bottom? |
80 |
81 |
Remember to always put JavaScript on the bottom to reduce load time. |
81 |
82 |
Otherwise it just errors like a fucktard, which is really the only thing |
82 |
83 |
you can always expect from JavaScript. |
83 |
84 |
{% endcomment %} |
84 |
85 |
{% endblock JavaScript %} |
85 |
86 |
</html> |
86 |
87 |
joeni/templates/joeni/header.djhtml ¶
0 additions and 1 deletion.
View changes Hide changes
1 |
1 |
{% load static %} |
2 |
2 |
{% get_media_prefix as media %} |
3 |
3 |
<input type="checkbox" checked="false" id="header-mobile" /> |
4 |
- | <img src="{% static "logos/uhasselt/simple_white.svg" %}" alt="◀ Joeni /▶" /> |
5 |
4 |
<nav> |
6 |
5 |
<ul> |
7 |
6 |
<li><a href="{% url 'agora-index' %}">Agora</a> |
8 |
7 |
<ul> |
9 |
8 |
</ul> |
10 |
9 |
</li> |
11 |
10 |
|
12 |
11 |
<li><a href="{% url 'administration-index' %}">{% trans "Administration" %}</a> |
13 |
12 |
<ul> |
14 |
13 |
<li><a href="{% url 'administration-settings' %}">{% trans "Personal settings" %}</a></li> |
15 |
14 |
<li><a href="{% url 'administration-curriculum' %}">{% trans "Curricula" %}</a></li> |
16 |
15 |
<li><a href="{% url 'administration-forms' %}">{% trans "Forms" %}</a></li> |
17 |
16 |
<li><a href="{% url 'administration-rooms' %}">{% trans "Rooms" %}</a></li> |
18 |
17 |
<li><a href="{% url 'administration-jobs' %}">{% trans "Jobs" %}</a></li> |
19 |
18 |
<li><a href="{% url 'administration-roster' %}">{% trans "Personal Roster" %}</a></li> |
20 |
19 |
<li><a href="{% url 'administration-bulletin-board' %}">{% trans "Bulletin board" %}</a></li> |
21 |
20 |
</ul> |
22 |
21 |
</li> |
23 |
22 |
|
24 |
23 |
<li><a href="{% url 'courses-index' %}">{% trans "Courses" %}</a> |
25 |
24 |
<ul> |
26 |
25 |
{% for course in user.user_data.current_courses %} |
27 |
26 |
<li><a href="{% url 'courses-course-index' course.slug_name %}">{{ course.name }}</a></li> |
28 |
27 |
{% endfor %} |
29 |
28 |
</ul> |
30 |
29 |
</li> |
31 |
30 |
</ul> |
32 |
31 |
</nav> |
33 |
32 |
{# PingPing: €{{ money }} #} |
34 |
33 |
static/css/classes.scss ¶
0 additions and 1 deletion.
View changes Hide changes
1 |
1 |
div.flex-container { |
2 |
2 |
display: flex; |
3 |
3 |
flex-direction: row; |
4 |
4 |
flex-wrap: wrap; |
5 |
5 |
justify-content: space-between; // Not too sure about this one, experiment if you want to |
6 |
6 |
align-items: stretch; |
7 |
7 |
//align-content: space-around; |
8 |
8 |
} |
9 |
9 |
|
10 |
10 |
.flex-items { |
11 |
11 |
color: white; |
12 |
12 |
font-family: ubuntu; |
13 |
13 |
text-decoration: none; |
14 |
14 |
flex-grow: 1; |
15 |
15 |
margin: .2em; |
16 |
16 |
text-decoration-style: none; |
17 |
17 |
padding: 1em; |
18 |
18 |
|
19 |
19 |
&:hover { |
20 |
20 |
text-decoration: underline solid white; |
21 |
21 |
color: red; |
22 |
22 |
} |
23 |
- | } |
24 |
23 |
static/css/footer.scss ¶
3 additions and 1 deletion.
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 |
13 |
@media screen |
14 |
14 |
and (max-device-width: 440px) |
15 |
15 |
and (max-device-height: 800px) { |
16 |
16 |
//and (-webkit-min-device-pixel-ratio: 2) { |
17 |
17 |
position: relative; |
18 |
18 |
width: 100%; |
| + |
19 |
width: 100%; |
19 |
20 |
img { |
20 |
21 |
height: 1em; |
21 |
- | } |
| + |
22 |
} |
22 |
23 |
} |
| + |
24 |
} |
23 |
25 |
static/css/header.scss ¶
42 additions and 2 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 |
padding: $header-padding; |
7 |
8 |
top: 0; |
8 |
9 |
width: $header-width; |
9 |
10 |
height: 100%; |
10 |
11 |
//background-color: $uhasselt-color; |
11 |
12 |
color: white; |
12 |
13 |
img { |
13 |
14 |
width: 80%; |
14 |
15 |
} |
15 |
16 |
nav ul { |
16 |
17 |
//list-style: none; |
| + |
18 |
//list-style: none; |
17 |
19 |
list-style: none; |
18 |
20 |
} |
19 |
21 |
a { |
20 |
22 |
text-decoration: none; |
21 |
23 |
color: white; |
22 |
24 |
&:hover { |
23 |
25 |
text-decoration: underline solid white; |
24 |
26 |
text-transform: uppercase; |
25 |
27 |
font-weight: bold; |
26 |
28 |
} |
27 |
29 |
} |
28 |
30 |
} |
| + |
31 |
div.menu-background { |
| + |
32 |
display: none; |
| + |
33 |
z-index: 1; |
| + |
34 |
} |
| + |
35 |
|
| + |
36 |
@media print { |
| + |
37 |
display: none; // Header is pretty useless on printed sheets |
| + |
38 |
} |
| + |
39 |
} |
29 |
40 |
/*header ul { |
30 |
41 |
display: inline; |
31 |
42 |
float: right; |
32 |
43 |
}*/ |
33 |
44 |
|
34 |
45 |
@media screen |
35 |
46 |
and (max-device-width: 440px) |
36 |
47 |
and (max-device-height: 800px) { |
37 |
48 |
//and (-webkit-min-device-pixel-ratio: 2) { |
| + |
49 |
//and (-webkit-min-device-pixel-ratio: 2) { |
38 |
50 |
main { |
39 |
51 |
margin-left: 2%; |
40 |
52 |
} |
| + |
53 |
} |
41 |
54 |
input#header-mobile { |
| + |
55 |
z-index: 4; |
| + |
56 |
color: white; |
| + |
57 |
position: absolute; |
| + |
58 |
top: 1.5em; |
| + |
59 |
left: 1em; |
| + |
60 |
} |
| + |
61 |
|
| + |
62 |
input#header-mobile { |
42 |
63 |
display: none; |
43 |
- | &:checked ~ header { |
| + |
64 |
position: absolute; |
| + |
65 |
top: 2em; |
| + |
66 |
left: 1em; |
| + |
67 |
opacity: 0; |
| + |
68 |
/* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile |
| + |
69 |
phones don't allow clicking the label to check the box. */ |
| + |
70 |
|
| + |
71 |
&:checked ~ header { |
44 |
72 |
display: block; |
45 |
73 |
} |
| + |
74 |
/* FIXME: Currently I set the height of the header to a ridiculous |
| + |
75 |
300%, but it should be made that it overlaps the other elements. */ |
| + |
76 |
height: 300%; |
| + |
77 |
top: 0; |
| + |
78 |
width: 100%; |
| + |
79 |
nav { |
| + |
80 |
display: block; |
| + |
81 |
position: relative; |
| + |
82 |
} |
| + |
83 |
} |
46 |
84 |
} |
| + |
85 |
} |
47 |
86 |
|
48 |
87 |
header { |
49 |
88 |
position: relative; |
50 |
89 |
margin-top: 0; |
| + |
90 |
margin-top: 0; |
51 |
91 |
margin-right: 0; |
52 |
92 |
width: 100%; |
53 |
93 |
height: 2em; |
54 |
94 |
img { |
55 |
95 |
height: 1em; |
56 |
- | } |
| + |
96 |
} |
57 |
97 |
|
58 |
98 |
nav { |
59 |
99 |
display: none; |
60 |
100 |
} |
61 |
101 |
} |
62 |
102 |
} |
63 |
103 |