Add new SCSS classes to improve style layout of courses
- Author
- Maarten Vangeneugden
- Date
- April 18, 2018, 6:17 p.m.
- Hash
- 7876160a509d480e11c2f0c9587aeea3abf65aaf
- Parent
-
00aeee740b4932ec9de33d726fa524003437e323
- Modified files
- courses/templates/courses/course.djhtml
- static/css/classes.scss
- static/css/header.scss
courses/templates/courses/course.djhtml ¶
60 additions and 51 deletions.
View changes Hide changes
1 |
1 |
{% load static %} |
2 |
2 |
{% load i18n %} |
3 |
3 |
{% load humanize %} |
4 |
4 |
{% load joeni_org %} |
5 |
5 |
|
6 |
6 |
{% block title %} |
7 |
7 |
{{ course.name }} | {{ block.super }} |
8 |
8 |
{% endblock %} |
9 |
9 |
|
10 |
10 |
{% block main %} |
11 |
11 |
<h1>{{ course.name }}</h1> |
12 |
12 |
|
13 |
13 |
<h2 id="{% trans "announcements" %}">{% trans "Announcements" %}</h2> |
14 |
14 |
{% for announcement in announcements %} |
| + |
15 |
{% for announcement in announcements %} |
15 |
16 |
<h3 id="{{ announcement.title|slugify }}">{{ announcement.title }}</h3> |
16 |
- | <time datetime="{{ announcement.posted|date:'Y-m-d' }}T{{ announcement.posted|date:'H:i' }}"> |
17 |
- | {% trans "Posted" %} {{ announcement.posted|naturaltime }} |
18 |
- | </time> |
19 |
- | <p>{{ announcement.text|org }}</p> |
20 |
- | <hr /> |
21 |
- | {% empty %} |
| + |
17 |
<h3 id="{{ announcement.title|slugify }}">{{ announcement.title }}</h3> |
| + |
18 |
<time datetime="{{ announcement.posted|date:'c' }}"> |
| + |
19 |
{% trans "Posted" %} {{ announcement.posted|naturaltime }} |
| + |
20 |
</time> |
| + |
21 |
<p>{{ announcement.text|org }}</p> |
| + |
22 |
</div> |
| + |
23 |
{% empty %} |
22 |
24 |
{% trans "No announcements have been made for this course." %} |
23 |
25 |
{% endfor %} |
24 |
26 |
|
| + |
27 |
|
25 |
28 |
<h2 id="{% trans "assignments" %}">{% trans "Assignments" %}</h2> |
26 |
29 |
{% for assignment in assignments %} |
| + |
30 |
{% for assignment in assignments %} |
27 |
31 |
<h3 id="{{ assignment.title|slugify }}">{{ assignment.title }}</h3> |
28 |
- | {% if assignment.information %} |
29 |
- | <p>{{ assignment.information|org }}</p> |
30 |
- | {% endif %} |
31 |
- | {#{% trans "Posted" %}: {{ assignment.posted|naturaltime }}#} |
32 |
- | {% trans "Posted" %}: {{ assignment.posted|date:"DATE_FORMAT" }} |
33 |
- | {% if assignment.digital_task %} |
34 |
- | <h4>{% trans "Your uploads" %}</h4> |
35 |
- | {% for upload in uploads %} |
36 |
- | {% if upload.assignment == assignment %} |
37 |
- | {% trans "Uploaded:"%} {{ upload.upload_time|date:"SHORT_DATETIME_FORMAT" }}<br /> |
38 |
- | {% if upload.comment %} |
39 |
- | <p>{{ upload.comment }}</p> |
40 |
- | {% endif %} |
| + |
32 |
<h3 id="{{ assignment.title|slugify }}">{{ assignment.title }}</h3> |
| + |
33 |
<time datetime="{{ assignment.posted|date:'c' }}"> |
| + |
34 |
{% trans "Posted" %} {{ assignment.posted|naturaltime }} |
| + |
35 |
</time> |
| + |
36 |
{% if assignment.information %} |
| + |
37 |
<p>{{ assignment.information|org }}</p> |
| + |
38 |
{% endif %} |
| + |
39 |
{#{% trans "Posted" %}: {{ assignment.posted|naturaltime }}#} |
| + |
40 |
{% trans "Posted" %}: {{ assignment.posted|date:"DATE_FORMAT" }} |
| + |
41 |
{% if assignment.digital_task %} |
| + |
42 |
<h4>{% trans "Your uploads" %}</h4> |
| + |
43 |
{% for upload in uploads %} |
| + |
44 |
{% if upload.assignment == assignment %} |
| + |
45 |
{% trans "Uploaded:"%} {{ upload.upload_time|date:"SHORT_DATETIME_FORMAT" }}<br /> |
| + |
46 |
{% if upload.comment %} |
| + |
47 |
<p>{{ upload.comment }}</p> |
| + |
48 |
{% endif %} |
| + |
49 |
{% if upload.upload_time > assignment.deadline %} |
| + |
50 |
<strong>{% trans "This upload is overdue." %}</strong> |
| + |
51 |
{% endif %} |
| + |
52 |
{% endif %} |
41 |
53 |
{% if upload.upload_time > assignment.deadline %} |
42 |
- | <strong>{% trans "This upload is overdue." %}</strong> |
43 |
- | {% endif %} |
44 |
- | {% endif %} |
45 |
- | {% empty %} |
46 |
- | {% with now as current_time %} |
47 |
- | {% if current_time > assignment.deadline %} |
48 |
- | <p> |
49 |
- | <strong> |
50 |
- | {% blocktrans %} |
| + |
54 |
{% with now as current_time %} |
| + |
55 |
{% if current_time > assignment.deadline %} |
| + |
56 |
<p> |
| + |
57 |
<strong> |
| + |
58 |
{% blocktrans %} |
| + |
59 |
You have failed to provide an upload for this |
| + |
60 |
assignment. Any future uploads will be automatically |
| + |
61 |
overdue. |
| + |
62 |
{% endblocktrans %} |
| + |
63 |
</strong> |
| + |
64 |
</p> |
| + |
65 |
{% else %} |
| + |
66 |
<p> |
| + |
67 |
{% blocktrans %} |
51 |
68 |
You have failed to provide an upload for this |
52 |
- | assignment. Any future uploads will be automatically |
53 |
- | overdue. |
54 |
- | {% endblocktrans %} |
| + |
69 |
yet. |
| + |
70 |
{% endblocktrans %} |
55 |
71 |
</strong> |
56 |
- | </p> |
57 |
- | {% else %} |
58 |
- | <p> |
59 |
- | {% blocktrans %} |
60 |
- | You haven't uploaded anything for this assignment |
61 |
- | yet. |
62 |
- | {% endblocktrans %} |
63 |
- | </p> |
64 |
- | {% endif %} |
65 |
- | {% endwith %} |
66 |
- | {% endfor %} |
67 |
- | <h5>{% trans "Upload a task" %}</h5> |
68 |
- | <form action="{% url "courses-course-index" course.slug_name %}" method="post"> |
69 |
- | {% csrf_token %} {# todo i don't think that's necessary here #} |
70 |
- | {% include "joeni/form.djhtml" with form=upload_form %} |
71 |
- | <input type="submit" value="{% trans "Submit" %}" /> |
72 |
- | </form> |
73 |
- | {% endif %} |
74 |
- | <hr /> |
75 |
- | {% endfor %} |
| + |
72 |
{% endif %} |
| + |
73 |
{% endwith %} |
| + |
74 |
{% endfor %} |
| + |
75 |
<h5>{% trans "Upload a task" %}</h5> |
| + |
76 |
<form action="{% url "courses-course-index" course.slug_name %}" method="post"> |
| + |
77 |
{% csrf_token %} {# todo i don't think that's necessary here #} |
| + |
78 |
{% include "joeni/form.djhtml" with form=upload_form %} |
| + |
79 |
<input type="submit" value="{% trans "Submit" %}" /> |
| + |
80 |
</form> |
| + |
81 |
{% endif %} |
| + |
82 |
</div> |
| + |
83 |
{% endfor %} |
76 |
84 |
{% endblock main %} |
| + |
85 |
{% endblock main %} |
77 |
86 |
static/css/classes.scss ¶
9 additions and 1 deletion.
View changes Hide changes
1 |
1 |
div.flex-container { |
2 |
2 |
display: flex; |
3 |
- | flex-direction: row; |
| + |
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 |
} |
22 |
22 |
} |
23 |
23 |
|
24 |
24 |
a.course-link { |
25 |
25 |
text-decoration: underline dotted $uhasselt-color; |
26 |
26 |
color: $uhasselt-color; |
27 |
27 |
&:hover { |
28 |
28 |
font-weight: bold; |
29 |
29 |
text-transform: uppercase; |
30 |
30 |
} |
31 |
31 |
@media print { |
32 |
32 |
text-decoration: none; |
33 |
33 |
color: black; |
34 |
34 |
} |
35 |
35 |
} |
36 |
36 |
|
37 |
37 |
div.flex-item { |
| + |
38 |
padding: 1em; |
| + |
39 |
margin: .2em; |
| + |
40 |
border-width: .4em; |
| + |
41 |
border-style: solid; |
| + |
42 |
border-color: $uhasselt-color; |
| + |
43 |
} |
| + |
44 |
|
| + |
45 |
static/css/header.scss ¶
6 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 |
z-index: 3; |
7 |
7 |
padding: $header-padding; |
8 |
8 |
top: 0; |
9 |
9 |
width: $header-width; |
10 |
10 |
height: 100%; |
11 |
11 |
//background-color: $uhasselt-color; |
12 |
12 |
color: white; |
13 |
13 |
img { |
14 |
14 |
width: 80%; |
| + |
15 |
//margin-bottom: -10px; // When you want to attach logo to menu |
| + |
16 |
width: 80%; |
15 |
17 |
} |
16 |
18 |
nav ul { |
| + |
19 |
//margin-top: -10px; // idem |
| + |
20 |
// border: white solid 0.4em; // idem |
| + |
21 |
} |
| + |
22 |
nav ul { |
17 |
23 |
overflow-wrap: break-word; // Breaks the word if it overlaps with the right border |
18 |
24 |
//list-style: none; |
19 |
25 |
list-style: none; |
20 |
26 |
} |
21 |
27 |
a { |
22 |
28 |
text-decoration: none; |
23 |
29 |
color: white; |
24 |
30 |
&:hover { |
25 |
31 |
text-decoration: underline solid white; |
26 |
32 |
text-transform: uppercase; |
27 |
33 |
font-weight: bold; |
28 |
34 |
} |
29 |
35 |
} |
30 |
36 |
|
31 |
37 |
div.menu-background { |
32 |
38 |
display: none; |
33 |
39 |
z-index: 1; |
34 |
40 |
} |
35 |
41 |
|
36 |
42 |
@media print { |
37 |
43 |
display: none; // Header is pretty useless on printed sheets |
38 |
44 |
} |
39 |
45 |
} |
40 |
46 |
|
41 |
47 |
@media print { |
42 |
48 |
footer, header, input#header-mobile, label[for="header-mobile"] { |
43 |
49 |
visibility: collapse; |
44 |
50 |
display: none; |
45 |
51 |
} |
46 |
52 |
main { |
47 |
53 |
margin-left: 0; |
48 |
54 |
} |
49 |
55 |
} |
50 |
56 |
|
51 |
57 |
@media screen |
52 |
58 |
and (max-device-width: 440px) |
53 |
59 |
and (max-device-height: 800px) { |
54 |
60 |
|
55 |
61 |
//and (-webkit-min-device-pixel-ratio: 2) { |
56 |
62 |
main { |
57 |
63 |
margin-left: 2%; |
58 |
64 |
margin-right: 2%; |
59 |
65 |
} |
60 |
66 |
label[for="header-mobile"] { |
61 |
67 |
z-index: 4; |
62 |
68 |
color: white; |
63 |
69 |
position: absolute; |
64 |
70 |
top: 1.5em; |
65 |
71 |
left: 1em; |
66 |
72 |
} |
67 |
73 |
|
68 |
74 |
input#header-mobile { |
69 |
75 |
z-index: 4; |
70 |
76 |
position: absolute; |
71 |
77 |
top: 2em; |
72 |
78 |
left: 1em; |
73 |
79 |
opacity: 0; |
74 |
80 |
/* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile |
75 |
81 |
phones don't allow clicking the label to check the box. */ |
76 |
82 |
|
77 |
83 |
&:checked ~ header { |
78 |
84 |
display: block; |
79 |
85 |
position: relative; |
80 |
86 |
/* FIXME: Currently I set the height of the header to a ridiculous |
81 |
87 |
300%, but it should be made that it overlaps the other elements. */ |
82 |
88 |
height: 300%; |
83 |
89 |
top: 0; |
84 |
90 |
width: 100%; |
85 |
91 |
nav { |
86 |
92 |
display: block; |
87 |
93 |
position: relative; |
88 |
94 |
} |
89 |
95 |
} |
90 |
96 |
|
91 |
97 |
} |
92 |
98 |
|
93 |
99 |
header { |
94 |
100 |
position: relative; |
95 |
101 |
z-index: 3; |
96 |
102 |
margin-top: 0; |
97 |
103 |
margin-right: 0; |
98 |
104 |
width: 100%; |
99 |
105 |
height: 2em; |
100 |
106 |
img { |
101 |
107 |
height: 2em; |
102 |
108 |
} |
103 |
109 |
|
104 |
110 |
nav { |
105 |
111 |
display: none; |
106 |
112 |
} |
107 |
113 |
} |
108 |
114 |
} |
109 |
115 |