Skip to content

New navigation pattern for journals page #459

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

Open
joemull wants to merge 1 commit into
base: main
Choose a base branch
from
Open

New navigation pattern for journals page #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 10 additions & 0 deletions templates/custom/journal-gallery-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<li>
<a href="#{{ journal.name|slugify }}">
<img
class="block max-lg:w-40 lg:w-56"
src="{% if journal.default_cover_image %}
{{ journal.default_cover_image.url }}
{% endif %}"
alt="{{ journal.name }}">
</a>
</li>
4 changes: 2 additions & 2 deletions templates/custom/journal-list-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
alt="{{ journal.name }}">
</div>
<div class="md:basis-2/3 prose lg:prose-lg">
<h2
<h3
id="{{ journal.name|slugify }}"
class="name font-poppins-bold text-3xl mt-8">
{{ journal.name }}
</h2>
</h3>
<div class="code" hidden>{{ journal.code }}</div>
<div class="description">
{{ journal.description_for_press|safe }}
Expand Down
184 changes: 104 additions & 80 deletions templates/custom/journals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
alt="Ballet dancer wearing black dress suspended in mid air with arms outstretched">
</aside>
</div>
<div class="relative max-md:pt-64 md:pt-12">
<div class="relative pt-48 pb-16">
<div class="z-40 relative">
<h1
id="h1"
Expand All @@ -42,89 +42,113 @@
</h1>
</div>
</div>
<div class="relative z-40 pt-8 py-8">
{% component_block "filterable_list" list_id="journals" value_names="name description code" placeholder="e.g. history" %}
<div class="list">
<div class="relative max-md:mt-28 md:mt-14">
<section
aria-label="About"
class="
p-8 bg-orange
flex max-md:flex-col md:flex-row gap-x-16 gap-y-6
relative z-40
">
<div class="basis-1/3 prose lg:prose-lg">
<p class="lead">Our diamond open-access journals publish leading
scholarship in the humanities.</p>
</div>
<div class="basis-2/3 prose lg:prose-lg">
<p>OLH journals command the respect of the academic communities
they serve. Each journal that we publish has been evaluated for the
rigour of its content, the international standing of its authors
and editorial board, and the value to its disciplinary field. As
part of our mission to bring journals back into community
ownership, all OLH titles are community-governed.</p>
<p>Journals are arranged alphabetically by title. Journals can also
be filtered by keyword and subject area.</p>
</div>
</section>
<aside
class="
z-0 relative left-0
motion-reduce:-bottom-24 motion-safe:bottom-0 motion-safe:rallax
">
<img class="absolute z-20 w-32 left-20 bottom-0"
src="{% static 'hourglass/media/backgrounds/circles-one-one-half-blue.svg' %}"
alt="">
<img
class="absolute z-10 w-64 -left-32 -bottom-16"
src="{% static 'hourglass/media/backgrounds/circle-quarter-blue-textured.png' %}"
width="434"
alt="">
</aside>
</div>
{% comment %}Active journals{% endcomment %}
{% for journal in journals %}
{% if journal.code != 'wwe' and journal.code != 'franc' and journal.code != 'ee' and journal.code != 'pn' and journal.code != 'dm' and journal.code != 'la' %}
<div class="relative max-lg:mt-16 lg:mt-28">
{% cycle 'left' 'right' as leftright silent %}
{% component_block "page_section" anchor=leftright labelledby=journal.name|slugify prose=False width="full" margin="narrow" %}
{% comment %}
We manually set go_to_link as False for journals whose websites are not yet finalized.
{% endcomment %}
{% if journal.code == 'thr' or journal.code == 'eh' or journal.code == 'ejp' %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=False %}
{% else %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=True %}
{% endif %}
{% endcomponent_block %}
{% if leftright == 'right' %}
{% include "custom/double-arc-halfway.html" %}
{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="relative z-40">
<section
aria-label="About"
class="
p-8 bg-orange
flex max-md:flex-col md:flex-row gap-x-16 gap-y-6
relative z-40
">
<div class="basis-1/3 prose lg:prose-lg">
<p class="lead">Our diamond open-access journals publish leading
scholarship in the humanities.</p>
</div>
<div class="basis-2/3 prose lg:prose-lg">
<p>OLH journals command the respect of the academic communities
they serve. Each journal that we publish has been evaluated for the
rigour of its content, the international standing of its authors
and editorial board, and the value to its disciplinary field. As
part of our mission to bring journals back into community
ownership, all OLH titles are community-governed.</p>
</div>
</section>
</div>
</div>
<div class="container mx-auto max-w-screen-2xl">
<div class="relative max-lg:mt-16 lg:mt-28">
<aside
class="
z-0 relative left-0
motion-reduce:-bottom-24 motion-safe:bottom-0 motion-safe:rallax
">
<img class="absolute z-20 w-32 left-20 bottom-0"
src="{% static 'hourglass/media/backgrounds/circles-one-one-half-blue.svg' %}"
alt="">
<img
class="absolute z-10 w-64 -left-32 -bottom-16"
src="{% static 'hourglass/media/backgrounds/circle-quarter-blue-textured.png' %}"
width="434"
alt="">
</aside>
<ul class="
relative z-40 flex flex-wrap gap-2 justify-center items-center
">
{% comment %}Active journals{% endcomment %}
{% for journal in journals %}
{% if journal.code != 'wwe' and journal.code != 'franc' and journal.code != 'ee' and journal.code != 'pn' and journal.code != 'dm' and journal.code != 'la' %}
{% include "custom/journal-gallery-item.html" with journal=journal %}
{% endif %}
{% endfor %}
{% comment %}Archived journals{% endcomment %}
{% for journal in journals %}
{% if journal.code == 'wwe' or journal.code == 'franc' or journal.code == 'ee' or journal.code == 'pn' or journal.code == 'dm' or journal.code == 'la' %}
{% include "custom/journal-gallery-item.html" with journal=journal %}
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="container mx-auto max-w-screen-xl">
<div class="relative z-40">
{% comment %}Active journals{% endcomment %}
<h2 id="active-journals" class="sr-only">Active journals.</h2>
{% for journal in journals %}
{% if journal.code != 'wwe' and journal.code != 'franc' and journal.code != 'ee' and journal.code != 'pn' and journal.code != 'dm' and journal.code != 'la' %}
<div class="relative max-lg:mt-16 lg:mt-28">
{% component_block "page_section" bg="bg-blue" anchor="right" labelledby="archived-journals" width="full" margin="narrow" %}
<h2 id="archived-journals" class="text-white">Archived journals.</h2>
{% cycle 'left' 'right' as leftright silent %}
{% component_block "page_section" anchor=leftright labelledby=journal.name|slugify prose=False width="full" margin="narrow" %}
{% comment %}
We manually set go_to_link as False for journals whose websites are not yet finalized.
{% endcomment %}
{% if journal.code == 'thr' or journal.code == 'eh' or journal.code == 'ejp' %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=False %}
{% else %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=True %}
{% endif %}
{% endcomponent_block %}
{% if leftright == 'right' %}
{% include "custom/double-arc-halfway.html" %}
{% endif %}
</div>
{% comment %}Archived journals{% endcomment %}
{% for journal in journals %}
{% if journal.code == 'wwe' or journal.code == 'franc' or journal.code == 'ee' or journal.code == 'pn' or journal.code == 'dm' or journal.code == 'la' %}
<div class="relative max-lg:mt-16 lg:mt-28">
{% cycle 'left' 'right' as leftright silent %}
{% component_block "page_section" anchor=leftright labelledby=journal.name|slugify prose=False width="full" margin="narrow" %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=True %}
{% endcomponent_block %}
{% if leftright == 'right' %}
{% include "custom/double-arc-halfway.html" %}
{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="relative max-lg:mt-16 lg:mt-28">
{% component_block "page_section" bg="bg-blue" anchor="right" labelledby="archived-journals" width="full" margin="narrow" %}
<h2 id="archived-journals" class="text-white">Archived journals.</h2>
{% endcomponent_block %}
</div>
{% comment %}Archived journals{% endcomment %}
{% for journal in journals %}
{% if journal.code == 'wwe' or journal.code == 'franc' or journal.code == 'ee' or journal.code == 'pn' or journal.code == 'dm' or journal.code == 'la' %}
<div class="relative max-lg:mt-16 lg:mt-28">
{% cycle 'left' 'right' as leftright silent %}
{% component_block "page_section" anchor=leftright labelledby=journal.name|slugify prose=False width="full" margin="narrow" %}
{% include "custom/journal-list-item.html" with journal=journal go_to_link=True %}
{% endcomponent_block %}
{% if leftright == 'right' %}
{% include "custom/double-arc-halfway.html" %}
{% endif %}
{% endfor %}
</div>
{% endcomponent_block %}
</div>
{% endif %}
{% endfor %}
<div class="sticky z-40 left-full bottom-0 bg-black px-4 py-2 w-max">
<a
class="underline text-white font-poppins-medium text-sm tracking-wide"
href="#h1">
Back to top
</a>
</div>
</div>
{% include 'custom/subscribe.html' %}
</div>