blog

Convert to new CSS framework

Author
Maarten Vangeneugden
Date
April 10, 2020, 5 p.m.
Hash
6f6ac981de01a4a948f2b1fcc97bbd307f3de13d
Parent
71731539ebe1fd497bdaa77018632eb0f98d54a7
Modified files
TODO.org
templates/blog/index.html
templates/blog/post.html
templates/blog/weekly_archive.html

TODO.org

10 additions and 0 deletions.

View changes Hide changes
1
1
  annoying bug where the layout of the input fields cannot be reverted to the
2
2
  browser default, despite using a class for *exactly that fucking reason*. I'm
3
3
  currently too fed up to care about fixing that shit right now.
4
4
- Add notification regarding identities :: Remember to put up a notification
+
5
     that, the input fields will also be fixed properly, and maybe even
+
6
     automatically.
+
7
- Add notification regarding identities :: Remember to put up a notification
5
8
     that comments are not checked for identity, and, unless verified by a
6
9
     trustworthy source, cannot be seen as being an actual statement from the commenter.
7
10
- Notification regarding languages :: Add a warning that comments show up in all
8
11
     language versions, regardless of the active language during submission.
9
12
+
13
* Weekly-archive
+
14
- Date ranges :: Write a tiny function in the backend that reformats the dates
+
15
in the headers to a "more human readable" format.
+
16
- IDs :: Make the IDs of the elements better, and more descriptive.
+
17
- Hardcoding :: Currently the files are hardcoded, but that's not really
+
18
good. Put the files in a hardcoded list, then iterate over that.
+
19

templates/blog/index.html

0 additions and 86 deletions.

View changes Hide changes
1
-
{% load i18n %}
2
-
{% load static %}
3
-
4
-
{% block stylesheets %}
5
-
{{ block.super }}
6
-
{#<link href="{% static "blog/stylesheet.css" %}" rel="stylesheet" media="screen, projection" />#}
7
-
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
8
-
9
-
    <!-- Compiled and minified JavaScript -->
10
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
11
-
{% endblock %}
12
-
13
-
{% block title %}{% trans "Maarten's blog" %}{% endblock title %}
14
-
15
-
{% block description %}{% blocktrans %}The always coherently put together, yet
16
-
fuzzy blog of whatever sprouts in my mind.{% endblocktrans %}
17
-
{% endblock description %}
18
-
19
-
{% block main %}
20
-
{% with color="brown" accent_color="yellow" %}
21
-
<div class="section {{ color }} z-depth-3">
22
-
    <div class="container">
23
-
        <div class="white-text">
24
-
            <h3>{% trans "Blog" %}</h3>
25
-
            <p>
26
-
                {% blocktrans %}Welcome to my blog. Here, I write
27
-
                about things that interest me. Politics, coding,
28
-
                studying, life, or anything else I fancy rambling
29
-
                about. If you're in luck, I may've written it in a
30
-
                language that you understand better than English.
31
-
                {% endblocktrans %}
32
-
            </p>
33
-
        </div>
34
-
    </div>
35
-
</div>
36
-
37
-
<div class="fixed-action-btn">
38
-
    <a href="{% url 'blog-feed' %}" id="feed-fab" class="btn-floating waves-effect waves-light btn-large orange accent-4">
39
-
    <i class="large material-icons">rss_feed</i>
40
-
    </a>
41
-
</div>
42
-
43
-
44
-
<div class="container row">
45
-
    <div class="col s12 m6">
46
-
        <h1 id="weekly" class="{{ color }}-text">Weekly</h1>
47
-
		<a class="btn black-text waves-effect {{ accent_color }} accent-4"
48
-
		   href="{% url "weekly-archive" %}">
49
-
                Open archief
50
-
		</a><hr />
51
-
        {% include "blog/weekly.html" %}
52
-
    </div>
53
-
    <div class="container col s12 m6">
54
-
        {% for title, date, blog_text, link in posts %}
55
-
            <h1 class="{{ color}}-text">{{ title }}</h2>
56
-
            <span class="grey-text">{{ date|date:"DATE_FORMAT" }}</span>
57
-
            <p class="hide-on-small-only">{{ blog_text|safe|truncatewords_html:100 }}</p>
58
-
            <a class="btn black-text waves-effect {{accent_color}} accent-4" href="{{link}}">
59
-
                📚 {% trans "Read on"%}
60
-
            </a>
61
-
            <hr />
62
-
        {% endfor %}
63
-
    </div>
64
-
</div>
65
-
66
-
{% if introduce_feed %}
67
-
    <div class="orange accent-4 tap-target" data-target="feed-fab">
68
-
        <div class="white-text tap-target-content">
69
-
            <h5>{% trans "Never miss an update again." %}</h5>
70
-
            <p>{% blocktrans %}Getting info on updates to blog posts, major website changes, and other important
71
-
                news items is now easy and convenient with RSS.
72
-
                {% endblocktrans %}</p>
73
-
        </div>
74
-
    </div>
75
-
    <script>
76
-
	    var elem = document.querySelector('.tap-target');
77
-
		console.log(elem);
78
-
		var instance = M.TapTarget.init(elem, null);
79
-
		console.log(instance);
80
-
		instance.open();
81
-
    </script>
82
-
{% endif %}
83
-
84
-
{% endwith %}
85
-
{% endblock main %}
86
-

templates/blog/post.html

0 additions and 100 deletions.

View changes Hide changes
1
-
{% load humanize %}
2
-
{% load i18n %}
3
-
{% load static %}
4
-
5
-
{% block stylesheets %}
6
-
{{ block.super }}
7
-
<link href="{% static "blog/stylesheet.css" %}" rel="stylesheet" media="screen, projection" />
8
-
{% endblock %}
9
-
10
-
{% block description %}
11
-
{{ article|safe|truncatewords_html:10 }}
12
-
{% endblock description %}
13
-
{% block title %}📚 {{ navbar_title }}{% endblock title %}
14
-
15
-
16
-
{% block main %}
17
-
{% with color="brown" accent_color="yellow" %}
18
-
<div class="section {{ color }} lighten-1 z-depth-3">
19
-
    <div class="container">
20
-
        <article style="font-family:serif;">
21
-
            {{ article|safe }}
22
-
        </article>
23
-
24
-
25
-
<h5 class="white-text">{% trans "This article in other languages" %}</h5>
26
-
27
-
{% get_language_info for 'nl' as LANG %}
28
-
<a {% if dutch_link %} href="{{dutch_link}}" {% endif %}
29
-
   class="btn {{accent_color}} accent-4 black-text waves-effect
30
-
   {% if not dutch_link %}disabled{% endif %}">
31
-
    🇧🇪 {{ LANG.name_translated}} 🇳🇱
32
-
</a>
33
-
{% get_current_language as lang %}
34
-
{% get_language_info for 'fr' as LANG %}
35
-
<a {% if french_link %} href="{{french_link}}" {% endif %}
36
-
   class="btn {{accent_color}} accent-4 black-text waves-effect
37
-
   {% if not french_link %}disabled{% endif %}">
38
-
    🇧🇪 {{ LANG.name_translated}} 🇫🇷
39
-
</a>
40
-
{% get_language_info for 'en' as LANG %}
41
-
<a {% if english_link %} href="{{english_link}}" {% endif %}
42
-
   class="btn {{accent_color}} accent-4 black-text waves-effect
43
-
   {% if not english_link %}disabled{% endif %}">
44
-
    🇬🇧 {{ LANG.name_translated}} 🇺🇸
45
-
</a>
46
-
{% get_language_info for 'de' as LANG %}
47
-
<a {% if german_link %} href="{{german_link}}" {% endif %}
48
-
   class="btn {{accent_color}} accent-4 black-text waves-effect
49
-
   {% if not german_link %}disabled{% endif %}">
50
-
    🇧🇪 {{ LANG.name_translated}} 🇩🇪
51
-
</a>
52
-
{% get_language_info for 'es' as LANG %}
53
-
<a {% if spanish_link %} href="{{spanish_link}}" {% endif %}
54
-
   class="btn {{accent_color}} accent-4 black-text waves-effect
55
-
   {% if not spanish_link %}disabled{% endif %}">
56
-
    🇪🇸 {{ LANG.name_translated}} 🇲🇽
57
-
</a>
58
-
59
-
<h5 class="white-text">{% trans "Comments" %}</h5>
60
-
{% for comment in comments %} {# Whoops =P #}
61
-
    <span class="white-text">{{ comment.name|title }} | </span>
62
-
    <time class="grey-text" datetime="{{ comment.date|date:'c' }}">{{ comment.date|naturaltime }}</time>
63
-
    <br />
64
-
    <p class="white-text">{{ comment.text|urlize }}</p>
65
-
    <hr />
66
-
{% endfor %}
67
-
    {# Form for new comment #}
68
-
    <form action="" method="POST">
69
-
        {% csrf_token %}
70
-
        {{ form.name.label_tag }}
71
-
        <input class="white-text browser-default" type="text" id="id_name" name="name" maxlength="64" required />
72
-
        {{ form.text.label_tag }}
73
-
        <textarea id="id_text" class="white-text" name="text" maxlength="1000" required></textarea>
74
-
        <input type="submit" value="{% trans "Submit" %}" />
75
-
    </form>
76
-
77
-
78
-
{% comment %}
79
-
<a href="{% url 'blog-post' post_slug %}" class="btn {{accent_color}} accent-4 black-text tooltipped" data-position="bottom" data-delay="50" data-tooltip="{% trans "Multilingual link. Links to the version in the viewer's preferred language." %}">🏳️‍🌈 {% trans "All available languages" %}</a>
80
-
    {# TODO: Change to rainbow flag when possible #}
81
-
{% endcomment %}
82
-
    </div>
83
-
84
-
</div>
85
-
<div class="container">
86
-
    {% for title, date, description, link in post_links %}
87
-
        <h2 class="{{ color}}-text">{{ title }}</h2>
88
-
        {# FIXME: Date is in all languages of the same format. Fix for each language #}
89
-
        <span class="grey-text">{{ date|date:"l j F Y" }}</span>
90
-
        {#<p class="hide-on-small-only">{{ description }}</p>#}
91
-
        <p class="hide-on-small-only">{% lorem %}</p>
92
-
        <a class="btn {{accent_color}} accent-3" href="{{link}}">
93
-
            {% trans "Read on"%}
94
-
        </a>
95
-
        <hr />
96
-
    {% endfor %}
97
-
</div>
98
-
{% endwith %}
99
-
{% endblock main %}
100
-

templates/blog/weekly_archive.html

0 additions and 49 deletions.

View changes Hide changes
1
-
{% load i18n %}
2
-
{% load static %}
3
-
4
-
{% block stylesheets %}
5
-
{{ block.super }}
6
-
<style>
7
-
  a {
8
-
	  color: #2962ff;
9
-
  }
10
-
  a:hover {
11
-
	  text-decoration: underline #2962ff;
12
-
  }
13
-
  img, video, picture {
14
-
	  max-height: 500px;
15
-
  }
16
-
</style>
17
-
{% endblock stylesheets %}
18
-
19
-
{% block title %}Weekly | Archief{% endblock title %}
20
-
21
-
{% block description %}
22
-
Voor een duik terug in de geschiedenis van mijn publieke dagboek.
23
-
{% endblock description %}
24
-
25
-
{% block main %}
26
-
{% with color="brown" accent_color="blue" %}
27
-
<div class="row">
28
-
	<div class="white offset-m2 col s12 m8 z-depth-2 sheet">
29
-
	<p>Dit is het archief van de vorige weekly's, een soort van
30
-
	"(bijna-)wekelijks" dagboek, waarin ik kort praat over de dingen die er die
31
-
	week gebeurd zijn. Ik maak vanaf nu ook de vorige posts beschikbaar voor wie
32
-
		ze wilt inkijken.</p>
33
-
	</div>
34
-
	<div class="white offset-m2 col s12 m8 z-depth-2 sheet">
35
-
	<h1 id="2017" class="{{ color }}-text">2017</h1>
36
-
	{{ t2017|safe }}
37
-
	</div>
38
-
	<div class="white offset-m2 col s12 m8 z-depth-2 sheet">
39
-
	<h1 id="2018" class="{{ color }}-text">2018</h1>
40
-
	{{ t2018|safe }}
41
-
	</div>
42
-
	<div class="white offset-m2 col s12 m8 z-depth-2 sheet">
43
-
	<h1 id="2019" class="{{ color }}-text">2019</h1>
44
-
	{{ t2019|safe }}
45
-
	</div>
46
-
</div>
47
-
{% endwith %}
48
-
{% endblock main %}
49
-