Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive Meta Panel #525

Merged
merged 15 commits into from
Jul 29, 2024
Merged

Responsive Meta Panel #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d0e24e8
feat: Break long headings and toc links
SilvanVerhoeven Feb 14, 2024
b24db0f
feat: Add permanent link to headings
SilvanVerhoeven Feb 14, 2024
f22c3e9
feat: Make TOC responsive
SilvanVerhoeven Feb 22, 2024
ef98570
chore: Improve print layout
SilvanVerhoeven Feb 22, 2024
13f8adf
fix: render back button for minutes
SilvanVerhoeven Jul 29, 2024
0ca54b5
fix: set last published again after rebase
SilvanVerhoeven Jul 29, 2024
4af6f19
lint: add prettier to pre-commit hook
SilvanVerhoeven Jul 29, 2024
d08a184
fix: display minutes content over full page
SilvanVerhoeven Jul 29, 2024
d12796a
feat: show heading permanent links on hover only
SilvanVerhoeven Jul 29, 2024
e9f3b5e
lint: bump linter to python 3.12
SilvanVerhoeven Jul 29, 2024
43c0c59
feat: show permanent link icon on click on mobile
SilvanVerhoeven Jul 29, 2024
26012be
fix: correct template tags after formatting
SilvanVerhoeven Jul 29, 2024
a7e7a6d
chore: improve layout of minute navigation buttons
SilvanVerhoeven Jul 29, 2024
9fead3a
feat: hide toc button if toc empty
SilvanVerhoeven Jul 29, 2024
568cb4f
docs: improve linting description
SilvanVerhoeven Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions .pre-commit-config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
default_language_version:
python: python3.11
python: python3.12
repos:
- repo: https://github.com/myint/autoflake
rev: v2.2.1
Expand All @@ -12,10 +12,18 @@ repos:
- --ignore-init-module-imports
- --expand-star-imports
- repo: https://github.com/PyCQA/isort
rev: 5.10.1
rev: 5.13.2
hooks:
- id: isort
- repo: https://github.com/psf/black
rev: 23.9.1
hooks:
- id: black
- id: black
- repo: local
hooks:
- id: prettier-eslint
name: Prettier and ESLint
entry: prettier-eslint --write --list-different
language: node
types_or: [javascript, css, markdown, yaml]
additional_dependencies: ["[email protected]"]
5 changes: 5 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"tabWidth": 2,
"semi": false,
"singleQuote": false
}
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ Test the code with `python manage.py test myhpi.tests`.

### Code style

We recommend installing a pre-commit hook with `pre-commit install`. That will (look at `.pre-commit-config.yaml`) before every commit
We recommend installing a pre-commit hook with `pre-commit install`. The [hook](.pre-commit-config.yaml) will do the following steps before every commit:

- run `autoflake` with a couple of flags to remove unused imports,
- run `isort .` to sort imports,
- run `black .` to format the code. You can also check out the [IDE integration](https://github.com/psf/black#editor-integration)
- run `autoflake` with a couple of flags to remove unused imports,
- run `isort .` to sort imports,
- run `black .` to format the python code. You can also check out the [IDE integration](https://github.com/psf/black#editor-integration)
- run `prettier-eslint --write --list-different` to format the JavaScript code and Markdown files. You can also check out the [Prettier IDE integration](https://prettier.io/docs/en/editors.html), e. g. the [prettier-eslint](vscode:extension/rvest.vs-code-prettier-eslint) Visual Studio Code extension

If you want to do that manually, run `pre-commit run --all-files`. Next to that, we also run `pylint myhpi` to check for semantic issues in the code.

Expand Down
69 changes: 35 additions & 34 deletions myhpi/core/templates/core/information_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,39 @@
{% load tz %}

{% block content %}
{% with page.body|markdown as parsed_md %}
<div class="row flex-column-reverse flex-lg-row">
<div class="col-lg-9">
<h1 class="page-title">
<span class="underline">
{{ page.title }}
</span>
</h1>
{{ parsed_md.0|touchify_abbreviations|tag_external_links }}
</div>
<div class="col-lg-3">
<div class="side-panel-container">
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Last edited" %}</h1>
{% if not page.last_published_at %}
{% translate "A long time ago" %}
{% else %}
{% get_current_timezone as TIMEZONE %}
<time id="last-published" datetime="{{ page.last_published_at|date:"c" }}" title="{{ TIMEZONE }}">
{% blocktranslate with date=page.last_published_at|date:"SHORT_DATE_FORMAT" time=page.last_published_at|time:"TIME_FORMAT" trimmed %}
{{ date }} at {{ time }}
{% endblocktranslate %}
</time>
{% endif %}
{% if page.author_visible and page.last_edited_by %}
<i>{% translate "by" %}</i>
{{ page.last_edited_by }}
{% endif %}
</aside>
{% include "core/sidebar.html" %}
{% with page.body|markdown as parsed_md %}
{% include "core/toc_button.html" with toc=parsed_md.1 %}
<div class="row flex-column flex-lg-row">
<div class="col-lg-9">
<h1 class="page-title">
<span class="underline">
{{ page.title }}
</span>
</h1>
{{ parsed_md.0|touchify_abbreviations|tag_external_links }}
</div>
<div class="col-lg-3">
<div class="side-panel-container">
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Last edited" %}</h1>
{% if not page.last_published_at %}
{% translate "A long time ago" %}
{% else %}
{% get_current_timezone as TIMEZONE %}
<time id="last-published" datetime="{{ page.last_published_at|date:'c' }}" title="{{ TIMEZONE }}">
{% blocktranslate with date=page.last_published_at|date:"SHORT_DATE_FORMAT" time=page.last_published_at|time:"TIME_FORMAT" trimmed %}
{{ date }} at {{ time }}
{% endblocktranslate %}
</time>
{% endif %}
{% if page.author_visible and page.last_edited_by %}
<i>{% translate "by" %}</i>
{{ page.last_edited_by }}
{% endif %}
</aside>
{% include "core/sidebar.html" %}
</div>
</div>
</div>
</div>
</div>
{% endwith %}
{% endblock %}
{% endwith %}
{% endblock %}
143 changes: 74 additions & 69 deletions myhpi/core/templates/core/minutes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,82 +6,87 @@
{% load bootstrap_icons %}

{% block content %}
<div class="row minutes-container">
{% with page.body|markdown as parsed_md %}
<div class="d-none d-print-block minutes-title">
<h1>{{ page.title }}</h1>
</div>
<div class="col-9 minutes-text">
{{ parsed_md.0|touchify_abbreviations|tag_external_links }}
</div>
<div class="col-3 minutes-meta">
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Date" %}</h1>
<p>{{ page.date }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Moderator" %}</h1>
<p>{{ page.moderator.get_full_name }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Minutes taker" %}</h1>
<p>{{ page.author.get_full_name }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Participants" %}</h1>
<ul>
{% for participant in page.participants.all %}
<li>{{ participant.get_full_name }}</li>
{% endfor %}
</ul>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Guests" %}</h1>
{% if page.guests %}
{% with page.body|markdown as parsed_md %}
{% include "core/toc_button.html" with toc=parsed_md.1 %}
<div class="row flex-column flex-lg-row">
<h1 class="page-title">
<span class="underline">
{{ page.title }}
</span>
</h1>
<div class="col-lg-9 minutes-text">
{{ parsed_md.0|touchify_abbreviations|tag_external_links }}
</div>
<div class="col-lg-3 minutes-meta">
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Date" %}</h1>
<p>{{ page.date }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Moderator" %}</h1>
<p>{{ page.moderator.get_full_name }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Minutes taker" %}</h1>
<p>{{ page.author.get_full_name }}</p>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Participants" %}</h1>
<ul>
{% for guest in page.guests %}
<li>{{ guest }}</li>
{% endfor %}
{% for participant in page.participants.all %}
<li>{{ participant.get_full_name }}</li>
{% endfor %}
</ul>
{% else %}
<i>{% translate "No guests" %}</i>
{% endif %}
</aside>
{% if page.location %}
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Location" %}</h1>
<p>{{ page.location }}</p>
</aside>
{% endif %}
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Labels" %}</h1>
{% if page.labels.all %}
<p>{% include "core/label.html" with minutes=page %}</p>
{% else %}
<i>{% translate "No labels"%}</i>
</aside>
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Guests" %}</h1>
{% if page.guests %}
<ul>
{% for guest in page.guests %}
<li>{{ guest }}</li>
{% endfor %}
</ul>
{% else %}
<i>{% translate "No guests" %}</i>
{% endif %}
</aside>
{% if page.location %}
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Location" %}</h1>
<p>{{ page.location }}</p>
</aside>
{% endif %}
</aside>
{% include "core/sidebar.html" %}
</div>
<div id="minutes-footer" class="d-none d-print-block"></div>
<div id="minutes-navigation" class="row d-print-none">
<div class="col-4">
{% prev_minutes page as prev %}
{% if prev %}
<a href="{{ prev.url }}" class="btn btn-outline-primary minutes-navigation-button">{% bs_icon 'arrow-left' extra_classes='minutes-navigation-icon' %} {% translate "Previous minutes" %}</a>
{% endif %}
<aside class="side-panel border-accent">
<h1 class="side-panel-title">{% translate "Labels" %}</h1>
{% if page.labels.all %}
<p>{% include "core/label.html" with minutes=page %}</p>
{% else %}
<i>{% translate "No labels"%}</i>
{% endif %}
</aside>
{% include "core/sidebar.html" %}
</div>
<div class="col-5 text-end">
{% next_minutes page as next %}
{% if next %}
<a href="{{ next.url }}" class="btn btn-outline-primary minutes-navigation-button"> {% translate "Next minutes" %} {% bs_icon 'arrow-right' extra_classes='minutes-navigation-icon' %}</a>
{% endif %}
<div id="minutes-footer" class="d-none d-print-block"></div>
<div id="minutes-navigation" class="col container">
<div class="col-lg-9 row justify-content-between d-print-none">
<div class="col-6">
{% prev_minutes page as prev %}
{% if prev %}
<a href="{{ prev.url }}" class="btn btn-outline-primary minutes-navigation-button">{% bs_icon 'arrow-left' extra_classes='minutes-navigation-icon' %} {% translate "Previous minutes" %}</a>
{% endif %}
</div>
<div class="col-6 text-end">
{% next_minutes page as next %}
{% if next %}
<a href="{{ next.url }}" class="btn btn-outline-primary minutes-navigation-button"> {% translate "Next minutes" %} {% bs_icon 'arrow-right' extra_classes='minutes-navigation-icon' %}</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endwith %}
</div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="{% static 'js/print_processor.js' %}"></script>
{% endblock %}
<script type="text/javascript" src="{% static 'js/print_processor.js' %}"></script>
{% endblock %}
72 changes: 51 additions & 21 deletions myhpi/core/templates/core/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,67 @@

{% if perms.wagtail.edit_page %}
{% if page.has_unpublished_changes %}
<aside class="side-panel border-accent toc-container d-print-none">
<h1 class="side-panel-warning">{% translate "Page has unpublished changes!" %}</h1>
</aside>
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-warning">{% translate "Page has unpublished changes!" %}</h1>
</aside>
{% endif %}
{% with page.visible_for.all|join:", " as visibility %}
{% if visibility %}
<aside class="side-panel border-accent toc-container d-print-none">
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-title">{% translate "Visibility" %}</h1>
{{ visibility }}
</aside>
{% endif %}
{% endwith %}
{% endif %}
{% with parsed_md.1 as toc %}
{% if toc|non_empty %}
<aside class="side-panel border-accent toc-container d-print-none">
<h1 class="side-panel-title">{% translate "Table of contents" %}</h1>
{{ toc }}

<!-- Bootstrap 5.2 supports responsive offcanvas.
This duplication is a workaround and should be removed after the upgrade -->
<div class="d-none d-lg-block side-panel-container">
{%if parsed_md.1|hasTocContent %}
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-title">{% translate "Table of contents" %}</h1>
{{ parsed_md.1 }}
</aside>
{% endif %}
{% if page.attachments.all %}
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-title">{% translate "Attachments" %}</h1>
<ul>
{% for attachment in page.attachments.all %}
<li>
<a href="{{ attachment.url }}">{{ attachment.title }}</a>
</li>
{% endfor %}
</ul>
</aside>
{% endif %}
{% endwith %}
</div>

{% if page.attachments.all %}
<aside class="side-panel border-accent toc-container d-print-none">
<h1 class="side-panel-title">{% translate "Attachments" %}</h1>
<ul>
{% for attachment in page.attachments.all %}
<li>
<a href="{{ attachment.url }}">{{ attachment.title }}</a>
</li>
{% endfor %}
</ul>
</aside>
{%if parsed_md.1|hasTocContent %}
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="sidebar-offcanvas" aria-labelledby="sidebar-offcanvas-label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebar-offcanvas-label">{% translate "Table of contents" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="{% translate 'Close' %}"></button>
</div>
<div class="offcanvas-body">
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-title">{% translate "Table of contents" %}</h1>
{{ parsed_md.1 }}
</aside>
{% if page.attachments.all %}
<aside class="side-panel border-accent sidebar-container d-print-none">
<h1 class="side-panel-title">{% translate "Attachments" %}</h1>
<ul>
{% for attachment in page.attachments.all %}
<li>
<a href="{{ attachment.url }}">{{ attachment.title }}</a>
</li>
{% endfor %}
</ul>
</aside>
{% endif %}
</div>
</div>
{% endif %}
15 changes: 15 additions & 0 deletions myhpi/core/templates/core/toc_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- usage requires Table of Contents HTML in include context: https://docs.djangoproject.com/en/5.0/ref/templates/builtins/#include -->

{% load core_extras %}
{% load i18n %}
{% load bootstrap_icons %}

{%if toc|hasTocContent %}
<div id="sidebar-toggle" class="d-grid d-lg-none d-print-none">
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar-offcanvas"
aria-controls="sidebar-offcanvas" class="btn btn-light mb-3" aria-label="{% translate 'Table of contents' %}">
{% bs_icon 'list-ol' size='1.3rem' %}
{% translate "Table of contents" %}
</button>
</div>
{% endif %}
Loading
Loading