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 |
- |