joeni | Gitar

Start necessary changes for printer style support

I will not be implementing functionality to create specially fancy generated PDF documents if a browser is perfectly capable of doing that for me. Instead, I will be implementing a CSS file that can be called by the printer to know how a printed file should look like. Users should have the minimal amount of knowledge about their software to know how they can print from their browser.

Author: Maarten Vangeneugden
Date: April 16, 2018, 1:21 p.m.
Hash: ec3aa4faf1308643a2e3aa2c33dbe460ad9767c4
Parent: c5c379e0e034f20795d2329442a356a63380e467
Modified files: joeni/templates/joeni/base.djhtml; static/css/header.scss

joeni/templates/joeni/base.djhtml ¶

1 addition and 1 deletion.

View changes Hide changes

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_language_info for LANGUAGE_CODE as lang %}
{% load static %}
{% get_media_prefix as media %}

<!DOCTYPE html>
<html lang="{{ lang.code }}">
    <head>
        <title>
            {% block title %}
                {#◀ Joeni /▶ | ▶▶ UHasselt#}
                ▶▶ UHasselt
            {% endblock title %}
        </title>

        {% block stylesheets %}
            {% comment %}<link href="{% static "css/header.css" %}" rel="stylesheet" media="screen, projection" />
            <link href="{% static "css/footer.css" %}" rel="stylesheet" media="screen, projection" />
            <link href="{% static "css/base.css" %}" rel="stylesheet" media="screen, projection" />
            {% endcomment %}
            <link href="{% static "css/stylesheet.css" %}" rel="stylesheet" media="screen, projection" />
            <style type="text/css">
            <style type="text/css">
                header, footer {
                    background-color: #{{ user.account.settings.color|default:"UHASSELT" }};
                }
            </style>
        {% endblock stylesheets %}

        {% block metaflags %}
            {# This is standard for all web pages and doesn't require changing. #}
            {# UTF-8, always #}
            <meta charset="utf-8" />
            {#<meta name="author" content="Maarten Vangeneugden">#}
            {# Indicates this page is suited for mobile devices #}
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta
                name="description"
                content="{% block description %}
                    {% trans "The digital platform of Hasselt University" %}
                {% endblock description %}" />
        {% endblock metaflags %}
        <style>
            h1 {
                color: #{{ main_color|default:"E73B2B" }};
                text-decoration-color: #{{ main_color|default:"E73B2B" }};
            }
            header, footer {
            background-color: #{{ main_color|default:"E73B2B" }};
            }
        </style>
    </head>

    <body>
        <label for="header-mobile"><img src="{% static 'icons/menu.svg' %}" alt="&#9776;" /></label>
        <input type="checkbox" id="header-mobile" />
        <header>
                {% block header %}
                    {% include "joeni/header.djhtml" %}
                {% endblock header %}
        </header>
        <main>
            {% block main %}
            {% endblock main %}
        </main>

        <footer>
            {% block footer %}
                {% include "joeni/footer.djhtml" %}
            {% endblock footer %}
        </footer>

    </body>
    {% block JavaScript %}
    {% comment "JavaScript" %}
    My website does not require JavaScript for basic actions. However, it may be
    used to make certain things look better, or to spice up some actions for the
    user. Should it be necessary, add the appropriate JavaScript code in this
    block.
    The reason this block is at the bottom?
	Remember to always put JavaScript on the bottom to reduce load time.
    Otherwise it just errors like a fucktard, which is really the only thing
    you can always expect from JavaScript.
    {% endcomment %}
    {% endblock JavaScript %}
</html>


13 additions and 4 deletions.

View changes Hide changes

    float: left;
    margin-right: 50px;
    position: fixed;
    //display: flow;
    //height: 100%;
    z-index: 3;
    padding: $header-padding;
    top: 0;
    width: $header-width;
    height: 100%;
    //background-color: $uhasselt-color;
    color: white;
    img {
        width: 80%;
    }
    nav ul {
        overflow-wrap: break-word;  // Breaks the word if it overlaps with the right border
        //list-style: none;
        list-style: none;
        }
    a {
        text-decoration: none;
        color: white;
        &:hover {
            text-decoration: underline solid white;
            text-transform: uppercase;
            font-weight: bold;
        }
    }

    div.menu-background {
        display: none;
        z-index: 1;
    }

    @media print {
        display: none; // Header is pretty useless on printed sheets
    }
}
/*header ul {
    display: inline;
    float: right;
}*/

@media print {
    header, input#header-mobile, label[for="header-mobile"] {
        visibility: collapse;
        display: none;
    }
    header nav {
        display: none;
    }
    main {
        margin-left: 0;
    }
}

@media screen
and (max-device-width: 440px)
and (max-device-height: 800px) {

//and (-webkit-min-device-pixel-ratio: 2) {
    main {
        margin-left: 2%;
        margin-right: 2%;
    }
    label[for="header-mobile"] {
        z-index: 4;
        color: white;
        position: absolute;
        top: 1.5em;
        left: 1em;
    }

    input#header-mobile {
        z-index: 4;
        position: absolute;
        top: 2em;
        left: 1em;
        opacity: 0;
        /* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile
        phones don't allow clicking the label to check the box. */

        &:checked ~ header {
            display: block;
            position: relative;
            /* FIXME: Currently I set the height of the header to a ridiculous
            300%, but it should be made that it overlaps the other elements. */
            height: 300%;
            top: 0;
            width: 100%;
            nav {
                display: block;
                position: relative;
            }
        }

    }

    header {
        position: relative;
        z-index: 3;
        margin-top: 0;
        margin-right: 0;
        width: 100%;
        height: 2em;
        img {
            height: 2em;
        }

        nav {
            display: none;
        }
    }
}


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	-	<style type="text/css">
+	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	<label for="header-mobile"><img src="{% static 'icons/menu.svg' %}" alt="☰" /></label>
56	56	<input type="checkbox" id="header-mobile" />
57	57	<header>
58	58	{% block header %}
59	59	{% include "joeni/header.djhtml" %}
60	60	{% endblock header %}
61	61	</header>
62	62	<main>
63	63	{% block main %}
64	64	{% endblock main %}
65	65	</main>
66	66
67	67	<footer>
68	68	{% block footer %}
69	69	{% include "joeni/footer.djhtml" %}
70	70	{% endblock footer %}
71	71	</footer>
72	72
73	73	</body>
74	74	{% block JavaScript %}
75	75	{% comment "JavaScript" %}
76	76	My website does not require JavaScript for basic actions. However, it may be
77	77	used to make certain things look better, or to spice up some actions for the
78	78	user. Should it be necessary, add the appropriate JavaScript code in this
79	79	block.
80	80	The reason this block is at the bottom?
81	81	Remember to always put JavaScript on the bottom to reduce load time.
82	82	Otherwise it just errors like a fucktard, which is really the only thing
83	83	you can always expect from JavaScript.
84	84	{% endcomment %}
85	85	{% endblock JavaScript %}
86	86	</html>
87	87

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	15	}
16	16	nav ul {
17	17	overflow-wrap: break-word; // Breaks the word if it overlaps with the right border
18	18	//list-style: none;
19	19	list-style: none;
20	20	}
21	21	a {
22	22	text-decoration: none;
23	23	color: white;
24	24	&:hover {
25	25	text-decoration: underline solid white;
26	26	text-transform: uppercase;
27	27	font-weight: bold;
28	28	}
29	29	}
30	30
31	31	div.menu-background {
32	32	display: none;
33	33	z-index: 1;
34	34	}
35	35
36	36	@media print {
37	37	display: none; // Header is pretty useless on printed sheets
38	38	}
39	39	}
40	40	/*header ul {
41	-	display: inline;
42	-	float: right;
43	-	}*/
44	-
+	41	@media print {
+	42	header, input#header-mobile, label[for="header-mobile"] {
+	43	visibility: collapse;
+	44	display: none;
+	45	}
+	46	header nav {
+	47	display: none;
+	48	}
+	49	main {
+	50	margin-left: 0;
+	51	}
+	52	}
+	53
45	54	@media screen
46	55	and (max-device-width: 440px)
47	56	and (max-device-height: 800px) {
48	57
49	58	//and (-webkit-min-device-pixel-ratio: 2) {
50	59	main {
51	60	margin-left: 2%;
52	61	margin-right: 2%;
53	62	}
54	63	label[for="header-mobile"] {
55	64	z-index: 4;
56	65	color: white;
57	66	position: absolute;
58	67	top: 1.5em;
59	68	left: 1em;
60	69	}
61	70
62	71	input#header-mobile {
63	72	z-index: 4;
64	73	position: absolute;
65	74	top: 2em;
66	75	left: 1em;
67	76	opacity: 0;
68	77	/* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile
69	78	phones don't allow clicking the label to check the box. */
70	79
71	80	&:checked ~ header {
72	81	display: block;
73	82	position: relative;
74	83	/* FIXME: Currently I set the height of the header to a ridiculous
75	84	300%, but it should be made that it overlaps the other elements. */
76	85	height: 300%;
77	86	top: 0;
78	87	width: 100%;
79	88	nav {
80	89	display: block;
81	90	position: relative;
82	91	}
83	92	}
84	93
85	94	}
86	95
87	96	header {
88	97	position: relative;
89	98	z-index: 3;
90	99	margin-top: 0;
91	100	margin-right: 0;
92	101	width: 100%;
93	102	height: 2em;
94	103	img {
95	104	height: 2em;
96	105	}
97	106
98	107	nav {
99	108	display: none;
100	109	}
101	110	}
102	111	}
103	112

Start necessary changes for printer style support

joeni/templates/joeni/base.djhtml ¶

static/css/header.scss ¶