WP6
/
expub_compendium
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

Mostly mobile changes 

Live search
joel
Joel Galvez 1 vuosi sitten
vanhempi
08fcdb830c
commit
449dcdce61
8 muutettua tiedostoa jossa 683 lisäystä ja 596 poistoa
Jaettu näkymä Näytä diff tilastot
  1. +23
    -8
      web/app/static/src/main.css
  2. +175
    -61
      web/app/static/styles/main.css
  3. +2
    -2
      web/app/templates/about.html
  4. +222
    -245
      web/app/templates/base.html
  5. +108
    -108
      web/app/templates/book.html
  6. +2
    -2
      web/app/templates/index.html
  7. +72
    -72
      web/app/templates/resource.html
  8. +79
    -98
      web/app/templates/resources.html

+ 23
- 8
web/app/static/src/main.css Näytä tiedosto

@@ -79,9 +79,15 @@ select {
}

.cell {
@apply min-w-[14rem];
@apply max-h-[30vh] lg:max-h-none relative;
@apply overflow-hidden;
}
/*
.cell::after {
content:'';
@apply absolute w-full h-[3rem] left-0 bottom-0;
background-color: red;
} */
.cell.size-1 {
@apply min-w-[30rem];
}
@@ -111,9 +117,18 @@ select {
}

.cell {
@apply cell-margin relative;
@apply cell-margin ;
}

.cell .lead-inner-link {
@apply relative;
}

.cell .lead-inner-link::after {
content: '';
@apply absolute bottom-0 left-0 w-full h-[3rem] ;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.cell::before {
content: '';
@@ -166,7 +181,7 @@ select {
}

.facts > * {
@apply max-w-[65ch];
@apply lg:max-w-[65ch];
}

a:hover {
@@ -186,19 +201,19 @@ h3 {
}

.huge-title {
@apply text-4xl lg:text-5xl;
@apply text-2xl lg:text-5xl;
}
.big-title {
@apply text-3xl lg:text-4xl;
@apply text-lg lg:text-4xl;
}
.medium-title {
@apply text-2xl lg:text-3xl;
@apply text-xl lg:text-3xl;
}
.small-title {
@apply text-xl lg:text-2xl;
@apply text-lg lg:text-2xl;
}
.big-text {
@apply text-xl ;
@apply text-base lg:text-xl ;
}
.small-text {
@apply text-base;

+ 175
- 61
web/app/static/styles/main.css Näytä tiedosto

@@ -552,29 +552,34 @@ video {
.z-\[60\] {
z-index: 60;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.row-start-1 {
grid-row-start: 1;
}
.float-right {
float: right;
}
.m-16 {
margin: 4rem;
.-m-4 {
margin: -1rem;
}
.m-4 {
margin: 1rem;
.m-1 {
margin: 0.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@@ -599,9 +604,6 @@ video {
.mr-2 {
margin-right: 0.5rem;
}
.mr-auto {
margin-right: auto;
}
.mt-16 {
margin-top: 4rem;
}
@@ -632,12 +634,6 @@ video {
.h-14 {
height: 3.5rem;
}
.h-20 {
height: 5rem;
}
.h-40 {
height: 10rem;
}
.h-5 {
height: 1.25rem;
}
@@ -657,11 +653,8 @@ video {
.w-10 {
width: 2.5rem;
}
.w-20 {
width: 5rem;
}
.w-40 {
width: 10rem;
.w-14 {
width: 3.5rem;
}
.w-48 {
width: 12rem;
@@ -669,17 +662,11 @@ video {
.w-5 {
width: 1.25rem;
}
.w-\[20rem\] {
width: 20rem;
}
.w-\[25rem\] {
width: 25rem;
}
.w-\[35rem\] {
width: 35rem;
.w-\[12rem\] {
width: 12rem;
}
.w-\[4rem\] {
width: 4rem;
.w-\[4\.5rem\] {
width: 4.5rem;
}
.w-\[calc\(100\%-2rem\)\] {
width: calc(100% - 2rem);
@@ -691,9 +678,6 @@ video {
.w-full {
width: 100%;
}
.w-\[20\] {
width: 20;
}
.min-w-\[5rem\] {
min-width: 5rem;
}
@@ -723,12 +707,15 @@ video {
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.flex-wrap {
flex-wrap: wrap;
.flex-col {
flex-direction: column;
}
.content-start {
align-content: flex-start;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
@@ -747,9 +734,15 @@ video {
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
@@ -779,9 +772,6 @@ video {
.border-l-2 {
border-left-width: 2px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -790,6 +780,9 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-purple-700\/50 {
background-color: rgb(126 34 206 / 0.5);
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -808,9 +801,6 @@ video {
.p-4 {
padding: 1rem;
}
.p-8 {
padding: 2rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -823,9 +813,9 @@ video {
padding-left: 2rem;
padding-right: 2rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
@@ -846,6 +836,9 @@ video {
.pl-1 {
padding-left: 0.25rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-40 {
padding-right: 10rem;
}
@@ -859,6 +852,10 @@ video {
font-size: 1.1rem;
line-height: 1.22;
}
.text-lg {
font-size: 1.24rem;
line-height: 1.1;
}
.text-sm {
font-size: 0.95rem;
line-height: 1.35;
@@ -881,6 +878,9 @@ video {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-40 {
opacity: 0.4;
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -970,9 +970,26 @@ select {
}

.cell {
min-width: 14rem;
position: relative;
max-height: 30vh;
}

@media (min-width: 1024px) {

.cell {
max-height: none;
}
}

.cell {
overflow: hidden;
}
/*
.cell::after {
content:'';
@apply absolute w-full h-[3rem] left-0 bottom-0;
background-color: red;
} */
.cell.size-1 {
min-width: 30rem;
}
@@ -1032,10 +1049,22 @@ select {
}

.cell {
position: relative;
padding: 1rem;
}

.cell .lead-inner-link {
position: relative;
}

.cell .lead-inner-link::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
height: 3rem;
width: 100%;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.cell::before {
content: '';
@@ -1095,8 +1124,11 @@ select {
.facts h3 {
}

.facts > * {
max-width: 65ch;
@media (min-width: 1024px) {

.facts > * {
max-width: 65ch;
}
}

a:hover {
@@ -1117,7 +1149,7 @@ h3 {
}

.huge-title {
font-size: 3rem;
font-size: 1.85rem;
line-height: 1;
}

@@ -1129,8 +1161,8 @@ h3 {
}
}
.big-title {
font-size: 2rem;
line-height: 1;
font-size: 1.24rem;
line-height: 1.1;
}
@media (min-width: 1024px) {

@@ -1140,8 +1172,8 @@ h3 {
}
}
.medium-title {
font-size: 1.85rem;
line-height: 1;
font-size: 1.5rem;
line-height: 1.1;
}
@media (min-width: 1024px) {

@@ -1151,7 +1183,7 @@ h3 {
}
}
.small-title {
font-size: 1.5rem;
font-size: 1.24rem;
line-height: 1.1;
}
@media (min-width: 1024px) {
@@ -1162,8 +1194,15 @@ h3 {
}
}
.big-text {
font-size: 1.5rem;
line-height: 1.1;
font-size: 1.1rem;
line-height: 1.22;
}
@media (min-width: 1024px) {

.big-text {
font-size: 1.5rem;
line-height: 1.1;
}
}
.small-text {
font-size: 1.1rem;
@@ -1413,10 +1452,39 @@ a.menuitem:hover {

@media (min-width: 1024px) {

.lg\:static {
position: static;
}

.lg\:col-span-2 {
grid-column: span 2 / span 2;
}

.lg\:row-span-3 {
grid-row: span 3 / span 3;
}

.lg\:float-right {
float: right;
}

.lg\:m-0 {
margin: 0px;
}

.lg\:m-16 {
margin: 4rem;
}

.lg\:m-4 {
margin: 1rem;
}

.lg\:my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}

.lg\:ml-\[13rem\] {
margin-left: 13rem;
}
@@ -1437,10 +1505,30 @@ a.menuitem:hover {
display: none;
}

.lg\:h-20 {
height: 5rem;
}

.lg\:h-40 {
height: 10rem;
}

.lg\:w-20 {
width: 5rem;
}

.lg\:w-40 {
width: 10rem;
}

.lg\:w-\[12rem\] {
width: 12rem;
}

.lg\:w-\[25rem\] {
width: 25rem;
}

.lg\:w-\[30rem\] {
width: 30rem;
}
@@ -1453,10 +1541,6 @@ a.menuitem:hover {
width: 35rem;
}

.lg\:w-\[25rem\] {
width: 25rem;
}

.lg\:max-w-\[30rem\] {
max-width: 30rem;
}
@@ -1481,6 +1565,22 @@ a.menuitem:hover {
grid-template-rows: auto auto auto;
}

.lg\:flex-row {
flex-direction: row;
}

.lg\:flex-wrap {
flex-wrap: wrap;
}

.lg\:items-center {
align-items: center;
}

.lg\:gap-4 {
gap: 1rem;
}

.lg\:border-r-2 {
border-right-width: 2px;
}
@@ -1494,7 +1594,21 @@ a.menuitem:hover {
padding: 0px;
}

.lg\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}

.lg\:pr-8 {
padding-right: 2rem;
}

.lg\:text-xl {
font-size: 1.5rem;
line-height: 1.1;
}

.lg\:opacity-100 {
opacity: 1;
}
}

+ 2
- 2
web/app/templates/about.html Näytä tiedosto

@@ -2,8 +2,8 @@

{% block content %}

<div class="cell-margin text max-w-[65ch]">
<div class="cell-margin text max-w-[65ch] lg:m-16 text-lg lg:text-xl">
{{ text|safe }}
</div>

{% endblock %}
{% endblock %}

+ 222
- 245
web/app/templates/base.html Näytä tiedosto

@@ -14,84 +14,75 @@

{% macro view_switch() %}

<div class="flex">
<a
href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
class="block link flex p-3 gap-2 {% if view != 'list' %} active {% endif %}"
>
<div class="w-5 h-5 inline-block">
<svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="21" height="36" fill="black" />
<rect x="27" width="19" height="14" fill="black" />
<rect x="27" y="21" width="19" height="15" fill="black" />
</svg>
</div>
Expanded
</a>
<a
href="{{ request.base_url }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
class="block link flex p-3 gap-2 {% if view == 'list' %} active {% endif %}"
>
<div class="w-5 h-5 inline-block ">
<svg width="100%" height="100%" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2H38" stroke="black" stroke-width="2.5" />
<path d="M0 13H38" stroke="black" stroke-width="2.5" />
<path d="M0 24H38" stroke="black" stroke-width="2.5" />
<path d="M0 35H38" stroke="black" stroke-width="2.5" />
</svg>
</div>
List
</a>
</div>
<div class="flex">
<a href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
class="block link flex p-3 gap-2 {% if view != 'list' %} active {% endif %}">

<div class="w-5 h-5 inline-block">
<svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="21" height="36" fill="black" />
<rect x="27" width="19" height="14" fill="black" />
<rect x="27" y="21" width="19" height="15" fill="black" />
</svg>

{% endmacro %}
</div>

{% macro menu(type) %}
<a
class="block menuitem w-48 "
href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"
@click="menuOpen = false"
><span>Experimental Publishing Compendium <span class="ml-3 inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span>
Expanded
</a>
<a href="{{ request.base_url }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
class="block link flex p-3 gap-2 {% if view == 'list' %} active {% endif %}">
<div class="w-5 h-5 inline-block ">
<svg width="100%" height="100%" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2H38" stroke="black" stroke-width="2.5" />
<path d="M0 13H38" stroke="black" stroke-width="2.5" />
<path d="M0 24H38" stroke="black" stroke-width="2.5" />
<path d="M0 35H38" stroke="black" stroke-width="2.5" />
</svg>

<a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false"
>
Tools
</a>
</div>

<a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false"
>
Practices
List
</a>
</div>

<a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book block {% if type=='top' %} hidden lg:block {% else %} block {% endif %} "
@click="menuOpen = false"
>
Books
</a>
{% endmacro %}

<a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false"
>
About / <br> Contact
</a>
{% macro menu(type) %}
<a class="block menuitem w-48 " href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"
@click="menuOpen = false"><span>Experimental Publishing Compendium <span
class="ml-3 inline-block -rotate-12 italic text-[#f52d2d]"
style="text-shadow: 0 0 0.4rem white">beta</span></span>
</a>

<a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false">
Tools

</a>

<a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false">
Practices

</a>

<a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book block {% if type=='top' %} hidden lg:block {% else %} block {% endif %} "
@click="menuOpen = false">
Books

<!-- <div class="ml-auto mr-2">
</a>

<a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
class="ml-auto {{ 'active' if request.path == url_for('main.about') }} menuitem {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
@click="menuOpen = false">
About / <br> Contact

</a>

<!-- <div class="ml-auto mr-2">
{% if current_user.is_authenticated %}
<a href="{{ url_for('create.create_resource') }}" class="block link">
Add resource
@@ -117,66 +108,68 @@
{% endif %}
</div> -->

<form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
<input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1"
placeholder="Search">
<input class="hidden" type="submit" hidden />
</form>
<form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
<input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1"
placeholder="Search" hx-get="{{ url_for('search.basic_search') }}"
hx-trigger="keyup changed delay:500ms, search" hx-target="main" hx-select="main">
<input class="hidden" type="submit" hidden />
</form>

{% endmacro %}

{% macro relationships_links(resource) %}

{% if resource.tools %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Tools
</div>
{% for tool in resource.tools %}
<div class="cell">
{{ resource_lead(tool,size=2) }}
</div>
{% endfor %}
{% if resource.tools %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Tools
</div>
{% endif %}
{% if resource.books %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Books
</div>
{% for book in resource.books %}
<div class="cell">
{{ resource_lead(book,size=2) }}
</div>
{% endfor %}
{% for tool in resource.tools %}
<div class="cell">
{{ resource_lead(tool,size=2) }}
</div>
{% endif %}
{% if resource.practices %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Practices
</div>
{% for practice in resource.practices %}
<div class="cell">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
{% endfor %}

</div>
{% endif %}
{% if resource.books %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Books
</div>
{% endif %}

{% for book in resource.books %}
<div class="cell">
{{ resource_lead(book,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
{% if resource.practices %}
<div class="">
<div class="px-4 mt-16 lg:mt-0">
Practices
</div>

{% for practice in resource.practices %}
<div class="cell">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}

{% endmacro %}

{% macro resource_list(resource, loop, show_number=true) %}
<div class="border-b-2 border-black">
<a class="flex gap-4 h-full py-1 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
<a class="flex gap-6 h-full py-2 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
%} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {%
endif %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">

<div class="w-[4rem] shrink-0 lg:w-[12rem] text-center ">
<div class="w-[4.5rem] shrink-0 lg:w-[12rem] text-center ">
{% if show_number %}
{{loop.index}} / {{count}}
{% else %}
@@ -185,12 +178,14 @@
</div>


<div>
<span class="{{ resource.type }}">
<div class="">
<span class="{{ resource.type }} lg:text-xl pr-4">
{{ resource.name }}
</span>
{% if resource['year'] %}
<div class="">
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
{% endif %}
</div>
</a>
@@ -198,126 +193,113 @@
{% endmacro %}

{% macro resource_with_related(resource, loop, show_number=true) %}
<div class="w-full border-b-2 border-black fade-right">
<div class="content w-full py-8 overflow-x-auto">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 " >
<div class="w-[4rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
{% if show_number %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
<p class="capitalize">{{ resource['type'] }}</p>
{% endif %}
<div class="w-full border-b-2 border-black fade-right">
<div class="content w-full py-8 overflow-x-auto">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 ">
<div class="w-[4.5rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
{% if show_number %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
<p class="capitalize">{{ resource['type'] }}</p>
{% endif %}
</div>
<div class="cell w-[12rem] lg:w-[32rem] row-start-1 lg:row-span-3">
{{ resource_lead(resource) }}
</div>

{% if resource.tools %}
<div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit ">
<div class="related">
Related<br>Tools
</div>
<div class="cell w-[20rem] lg:w-[32rem] row-start-1 lg:row-span-3">
{{ resource_lead(resource) }}
{% for tool in resource.tools %}
<div class="cell w-[12rem] lg:w-[30rem]">
{{ resource_lead(tool,size=2) }}
</div>
{% if resource.tools %}
<div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Tools
</div>
{% for tool in resource.tools %}
<div class="cell w-[20rem] lg:w-[30rem]">
{{ resource_lead(tool,size=2) }}
</div>
{% endfor %}
{% endfor %}
</div>
{% endif %}

{% if resource.books %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Books
</div>
{% endif %}
{% if resource.books %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Books
</div>
{% for book in resource.books %}
<div class="cell w-[20] lg:w-[35rem]">
{{ resource_lead(book,size=2) }}
</div>
{% endfor %}
{% for book in resource.books %}
<div class="cell w-[12rem] lg:w-[35rem]">
{{ resource_lead(book,size=2) }}
</div>
{% endif %}
{% if resource.practices %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Practices
</div>
{% for practice in resource.practices %}
<div class="cell w-[20rem] lg:w-[25rem]">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
{% endfor %}
</div>
{% endif %}

{% if resource.practices %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Practices
</div>
{% endif %}
{% for practice in resource.practices %}
<div class="cell w-[12rem] lg:w-[25rem]">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}

</div>
</div>
</div>
{% endmacro %}

{% macro popup_link(title,url) %}
<a href="{{ url }}" class="nav-link">
{{ title }}
</a>
<a href="{{ url }}" class="nav-link">
{{ title }}
</a>
{% endmacro %}

{% macro resource_lead(resource,size=1) %}
<a
class="block h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"

{% if resource['type'] == 'book' %}
href="{{ url_for('book.show_book', book_id=resource['id']) }}"
{% endif %}
{% if resource['type'] == 'tool' %}
href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}"
{% endif %}
{% if resource['type'] == 'practice' %}
href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}"
{% endif %}
hx-target="#modal-content"
hx-select="main"
hx-swap="innerHTML"
<a class="block lead-inner-link overflow-hidden h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"
{% if resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
%} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">

{% if (resource.type == 'book') and (resource.references) %}
<img class="w-14 h-14 lg:w-20 lg:h-20 object-contain lg:float-right absolute opacity-40 lg:opacity-100 lg:static top-0 right-0 m-1 lg:m-4 grayscale rotate-[15deg]"
src="{{resource.references}}" alt="cover for {{ resource.name }}">
{% endif %}

@click="openModal()"
>
<h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{
resource['name'] }}</h2>

{% if (resource.type == 'book') and (resource.references) %}
<img class="w-20 h-20 object-contain float-right m-4 grayscale rotate-[15deg]" src="{{resource.references}}" alt="cover for {{ resource.name }}">
{% endif %}
<h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{ resource['name'] }}</h2>
{% if resource['year'] %}
<div class="text-sm">
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
{% endif %}
{% if resource['year'] %}
<div class="text-sm">
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
{% endif %}

<div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
{{ resource['description'] | truncate(150) }}
</div>
<div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
{{ resource['description'] | truncate(150) }}
</div>

</a>
{% if current_user.is_authenticated %}
<div class="">
{% if resource['type'] == 'tool' %}
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% elif resource['type'] == 'practice' %}
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% elif resource['type'] == 'book' %}
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% endif %}
</div>
{% endif %}
</a>
{% if current_user.is_authenticated %}
<div class="">
{% if resource['type'] == 'tool' %}
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% elif resource['type'] == 'practice' %}
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% elif resource['type'] == 'book' %}
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="absolute top-0 left-0 text-xs">Edit</span>
</a>
{% endif %}
</div>
{% endif %}
{% endmacro %}


@@ -329,7 +311,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Experimental Publishing Compendium</title>
<script src="{{ url_for('static',filename='js/alpine.min.js') }}" defer></script>
<script src="{{ url_for('static',filename='js/htmx.min.js') }}"></script>
@@ -382,16 +364,8 @@
</head>


<body
class="text-base overflow-y-scroll"
x-data="base()"
hx-boost="true"
hx-select="#all"
hx-target="#all"
hx-swap="outerHTML"
hx-indicator="body"
>
<body class="text-base overflow-y-scroll" x-data="base()" hx-boost="true" hx-select="#all" hx-target="#all"
hx-swap="outerHTML" hx-indicator="body">
<div id="loading" class="loading pointer-events-none ">
<!-- <div class="bg-white fixed top-0 left-0 w-full h-screen z-20"></div> -->
<div class="bg fixed top-0 left-0 w-full h-screen z-30"></div>
@@ -405,9 +379,9 @@
<div id="all">
<header class="sticky top-0 z-10 bg-white border-b-[2px] border-black flex justify-between w-full">
<nav class=" lg:flex justify-center items-stretch w-full ">
{{ menu('top') }}
</nav>
<div class="burger h-14 cursor-pointer block lg:hidden p-4" @click="menuOpen = true">
<svg width="100%" height="100%" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -419,24 +393,24 @@
</div>
</header>

<menu
class="fixed top-0 right-0 z-20 p-8 bg-white w-[calc(100%-2rem)] max-w-[30rem] h-screen"
x-show="menuOpen"
style="box-shadow: 0 0 2rem rgb(0,0,0,0.2);"
@click.outside = "menuOpen = false"
>
<div x-transition.opacity x-show="menuOpen" class="fixed z-20 top-0 left-0 w-full h-screen bg-purple-700/50">
</div>
<menu x-transition.opacity class="fixed top-0 right-0 z-20 bg-white w-[calc(100%-2rem)] max-w-[30rem] h-screen"
x-show="menuOpen" style="box-shadow: 0 0 2rem rgb(0,0,0,0.2);" @click.outside="menuOpen = false">
{{ menu('side') }}
</menu>


<!-- Begin page content -->
<main>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="alert alert-danger">
{{ messages[0] }}
</div>
<div class="alert alert-danger">
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% block content %}
@@ -444,13 +418,14 @@
</main>
</div>

<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-50 p-4 bg overscroll-none">
<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-50 p-4 bg overscroll-none">
<div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()">
<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>
</svg>
</div>
<div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-auto h-full bg-white " >
<div id="modal-content" @click.outside="hideOverlay()" x-ref="modal"
class="content w-full overflow-y-auto h-full bg-white ">

</div>
</div>
@@ -458,7 +433,9 @@
<!-- Sticky footer-->
<footer class="std-margin mt-20 text-sm">
<div class="container">
<span class="">© 2022–{{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License (CC BY 4.0)</a>.</span>
<span class="">© 2022–{{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed
under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0
International License (CC BY 4.0)</a>.</span>
</div>
</footer>
<!-- JavaScript -->
@@ -466,4 +443,4 @@
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
</body>

</html>
</html>

+ 108
- 108
web/app/templates/book.html Näytä tiedosto

@@ -2,135 +2,135 @@

{% block content %}

<div class="cell-margin grid mt-16 lg:grid-cols-2">
<div class="left">
<div class="mb-2">Book</div>
<div class="border-r-2 border-black pr-8">
{% if resource.references %}
<div class="float-right">
<img class="w-40 h-40 object-contain m-16 rotate-[15deg]" src={{ resource.references }} alt="cover for {{ resource['Title'] }}">
<div class="cell-margin grid mt-16 lg:grid-cols-2">

<div class="left">
<div class="mb-2">Book</div>
<div class="lg:border-r-2 border-black pr-8">
{% if resource.references %}
<div class="float-right">
<img class="w-14 h-14 lg:w-40 lg:h-40 object-contain lg:m-16 rotate-[15deg]" src={{ resource.references
}} alt="cover for {{ resource['Title'] }}">
</div>
{% endif %}

<h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource.name }} {% endblock %}</h2>

{% if resource['Year'] %}
{{ resource['Year'] }}
{% endif %}
{% if resource['Authors'] %}
<div class="">
{% if resource['Authors']|length > 1 %}
<div class="">
{% for author in resource['Authors'] %}
{{ author }}</br>
{% endfor %}
</div>
{% else %}
<div>
{% for author in resource['Authors'] %}
{{ author }}
{% endfor %}
</div>
{% endif %}
<h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource.name }} {% endblock %}</h2>
{% if resource['Year'] %}
{{ resource['Year'] }}
{% endif %}
{% if resource['Authors'] %}
</div>
{% endif %}
<div class="">
{% if current_user.is_authenticated %}
<div class="">
{% if resource['Authors']|length > 1 %}
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
</div>
{% endif %}

<div class="facts ">

{% if resource['typology'] %}
<div class="">
{% for author in resource['Authors'] %}
{{ author }}</br>
{% endfor %}
</div>
{% else %}
<div>
{% for author in resource['Authors'] %}
{{ author }}
{% endfor %}
<h3>Typology category</h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
</div>
{% endif %}
</div>
{% endif %}
<div class="">
{% if current_user.is_authenticated %}
{% if resource['bookUrl'] %}
<div class="">
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
<h3>URL</h3>
<a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</div>
{% endif %}
<div class="facts ">
{% if resource['typology'] %}
<div class="">
<h3>Typology category</h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
</div>
{% endif %}
{% if resource['bookUrl'] %}
<div class="">
<h3>URL</h3>
<a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</div>
{% endif %}
<!-- fields for books from isbntools -->
{% if resource['ISBN-13'] %}
<div class="">
<h3>
ISBN-13
</h3>
<div>
{{ resource['ISBN-13'] }}
</div>
<!-- fields for books from isbntools -->
{% if resource['ISBN-13'] %}
<div class="">
<h3>
ISBN-13
</h3>
<div>
{{ resource['ISBN-13'] }}
</div>
{% endif %}
{% if resource['Publisher'] %}
<div class="">
<h3>
Publisher
</h3>
<div>
{{ resource['Publisher'] }}
</div>
</div>
{% endif %}
{% if resource['Publisher'] %}
<div class="">
<h3>
Publisher
</h3>
<div>
{{ resource['Publisher'] }}
</div>
{% endif %}
<!-- fields for books from database -->
{% if resource['name'] %}
<!-- <div class="">
</div>
{% endif %}
<!-- fields for books from database -->
{% if resource['name'] %}
<!-- <div class="">
<h3>Title</h3>
<div class="">{{ resource['name'] }}</div>
</div> -->
{% endif %}
{% if resource['author'] %}
<div class="">
<h3>Author</h3>
<div class="">{{ resource['author'] }}</div>
</div>
{% endif %}
{% if resource['year'] %}
<div class="">
<h3>Publication year</h3>
<div>
{{ resource['year'] }}
</div>
</div>
{% endif %}
{% if resource['desc'] %}
<div class="col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ resource['desc'] }}</div>
{% endif %}
{% if resource['author'] %}
<div class="">
<h3>Author</h3>
<div class="">{{ resource['author'] }}</div>
</div>
{% endif %}
{% if resource['year'] %}
<div class="">
<h3>Publication year</h3>
<div>
{{ resource['year'] }}
</div>
{% endif %}
{% if resource['description'] %}
<div class="col-span-2">
<h3>
Experimental aspects:
</h3>
<div>
{{ resource['description'] }}
</div>
</div>
{% endif %}
{% if resource['desc'] %}
<div class="lg:col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ resource['desc'] }}</div>
</div>
{% endif %}

{% if resource['description'] %}
<div class="lg:col-span-2">
<h3>
Experimental aspects:
</h3>
<div>
{{ resource['description'] }}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="right p-4 pr-8 lg:p-0">
<div class="grid lg:grid-cols-2">
{{ relationships_links(resource) }}
</div>
</div>
<div class="right p-4 pr-8 lg:p-0">
<div class="grid lg:grid-cols-2">
{{ relationships_links(resource) }}
</div>
</div>

{% endblock %}
</div>

{% endblock %}

+ 2
- 2
web/app/templates/index.html Näytä tiedosto

@@ -4,12 +4,12 @@
<div class="">

<div class="border-b-2 border-black grid gap-8 lg:grid-cols-[52rem,30rem] content-start">
<div class="mx-2 lg:ml-[13rem] text my-8 meta max-w-[30rem]">
<div class="mx-4 lg:ml-[13rem] text my-4 lg:my-8 meta max-w-[30rem]">
{{ text|safe }}
</div>
</div>

<div class="flex gap-4 items-center min-h-[2rem] mb-8 mb-8 border-b-2 border-black ">
<div class="flex gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black ">
{{ view_switch() }}
</div>


+ 72
- 72
web/app/templates/resource.html Näytä tiedosto

@@ -9,27 +9,27 @@
<div class="mb-4 capitalize">{{ resource['type'] }}</div>
<div class="lg:border-r-2 lg:border-black lg:pr-8">
<h2 class="block-margin huge-title {{ resource['type'] }}">
{% block title %}
{% block title %}
{% autoescape false %}
{{ resource['name'] | replace(" ","<br>") }}
{{ resource['name'] | replace(" ","<br>") }}
{% endautoescape %}
{% endblock %}
</h2>
{% if current_user.is_authenticated %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% endif %}
<div class="facts">
{% if resource['description'] %}
@@ -40,96 +40,96 @@
{% endif %}
<!-- fields for tools -->
{% if resource['developer'] %}
<div class="">
<h3>Developer</h3>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</div>
<div class="">
<h3>Developer</h3>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</div>
{% endif %}
{% if resource['license'] %}
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
{% endif %}
{% if resource['scriptingLanguage'] %}
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
{% endif %}
{% if resource['projectUrl'] %}
<div class="">
<h3>Project page</h3>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</div>
<div class="">
<h3>Project page</h3>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</div>
{% endif %}
{% if resource['repositoryUrl'] %}
<div class="">
<h3>Code repository</h3>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
</div>
<div class="">
<h3>Code repository</h3>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
</div>
{% endif %}
{% if resource['ingestFormats'] %}
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
{% endif %}
{% if resource['outputFormats'] %}
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
{% endif %}
{% if resource['status'] %}
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
{% endif %}
<!-- fields for practices -->
{% if resource['longDescription'] %}
<div class="col-span-2">
<h3>Full description</h3>
{{ resource['longDescription']|safe }}
</div>
<div class="lg:col-span-2">
<h3>Full description</h3>
{{ resource['longDescription']|safe }}
</div>
{% endif %}
{% if resource['experimental'] %}
<div class="col-span-2">
<h3>Experimental uses</h3>
{{ resource['experimental']|safe }}
</div>
<div class="lg:col-span-2">
<h3>Experimental uses</h3>
{{ resource['experimental']|safe }}
</div>
{% endif %}
{% if resource['considerations'] %}
<div class="col-span-2">
<h3>Considerations</h3>
<p>{{ resource['considerations']|safe }}</p>
</div>
<div class="lg:col-span-2">
<h3>Considerations</h3>
<p>{{ resource['considerations']|safe }}</p>
</div>
{% endif %}
{% if resource['references'] %}
<div class="col-span-2">
<h3> References </h3>
<p>{{ resource['references']|safe }}</p>
</div>
<div class="lg:col-span-2">
<h3> References </h3>
<p>{{ resource['references']|safe }}</p>
</div>
{% endif %}
<div class="">
<h3>Created</h3>
{{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
</div>
</div>
</div>
</div>
<div class="right p-4 pr-8 lg:p-0 ">
<div class="grid lg:grid-cols-2">
{{ relationships_links(resource) }}
</div>
</div>
</div>
{% endblock %}
{% endblock %}

+ 79
- 98
web/app/templates/resources.html Näytä tiedosto

@@ -20,113 +20,94 @@


{% macro filter_dropdown(id, filter, plural='') %}
<select
name="{{ id }}"
>
<option
value=""
{% if request.args.get(id, '' )=='' %} selected {% endif %}
>
{% if plural != '' %}
{{ plural }}
{% else %}
<span class="capitalize bg-red-400">{{ id }}s</span>
{% endif%}
</option>
{% for thing in filter %}
<option
value="{{ thing[0] }}"
{% if request.args.get(id)==thing[0]|string %} selected {% endif %}
>
{{ thing[1] }}
</option>
{% endfor %}
</select>
<select name="{{ id }}">
<option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
{% if plural != '' %}
{{ plural }}
{% else %}
<span class="capitalize bg-red-400">{{ id }}s</span>
{% endif%}
</option>
{% for thing in filter %}
<option value="{{ thing[0] }}" {% if request.args.get(id)==thing[0]|string %} selected {% endif %}>
{{ thing[1] }}
</option>
{% endfor %}
</select>
{% endmacro%}

{% macro filter_dropdown_nokey(id, filter, plural='') %}
<select
name="{{ id }}"
>
<option
value=""
{% if request.args.get(id, '' ) == '' %} selected {% endif %}
>
{% if plural != '' %}
{{ plural }}
{% else %}
<span class="capitalize">{{ id }}s</span>
{% endif%}
</option>
{% for thing in filter %}
<option
value="{{ thing }}"
{% if request.args.get(id)==thing|string %} selected {% endif %}
>
{{ thing }}
</option>
{% endfor %}
</select>
<select name="{{ id }}">
<option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
{% if plural != '' %}
{{ plural }}
{% else %}
<span class="capitalize">{{ id }}s</span>
{% endif%}
</option>
{% for thing in filter %}
<option value="{{ thing }}" {% if request.args.get(id)==thing|string %} selected {% endif %}>
{{ thing }}
</option>
{% endfor %}
</select>
{% endmacro%}

<div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
<div class="mx-2 lg:ml-[13rem] text my-8 meta lg:max-w-[30rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
</div>
<div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
<div class="mx-4 lg:ml-[13rem] text my-4 lg:my-8 meta lg:max-w-[30rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut
bibendum
nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien
odio,
commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
</div>
</div>

<form action="{{request.base_url}}" method="GET" hx-trigger="change" hx-push-url="true">
<input type="hidden" name="view" value="{{ view }}">
<div
class="flex p-4 lg:p-0 flex-col items-start lg:items-center lg:flex-row lg:flex-wrap gap-2 lg:gap-4 min-h-[2rem] mb-8 border-b-2 border-black ">

<div class="-m-4 mb-4 lg:m-0">
{{ view_switch() }}
</div>

<form
action="{{request.base_url}}"
method="GET"

hx-trigger="change"
hx-push-url="true"
{% if practices_filter%}
{{ filter_dropdown('practice', practices_filter, 'Practices') }}
{% endif %}
{% if year_filter %}
{{ filter_dropdown_nokey('year', year_filter, 'Year') }}
{% endif %}
{% if typology_filter %}
{{ filter_dropdown_nokey('typology', typology_filter, 'Typologies') }}
{% endif %}
{% if languages_filter %}
{{ filter_dropdown_nokey('scriptingLanguage', languages_filter, 'Scripting languages') }}
{% endif %}
{% if licenses_filter %}
{{ filter_dropdown_nokey('license', licenses_filter, 'Licenses') }}
{% endif %}
{% if status_filter %}
{{ filter_dropdown_nokey('status', status_filter, 'Maintenance status') }}
{% endif %}

<a href="{{ request.base_url }}?view={{ view }}" class="block py-4 lg:py-0">Reset</a>

>
<input type="hidden" name="view" value="{{ view }}">
<div class="flex flex-wrap gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black ">
{{ view_switch() }}
{% if practices_filter%}
{{ filter_dropdown('practice', practices_filter, 'Practices') }}
{% endif %}
{% if year_filter %}
{{ filter_dropdown_nokey('year', year_filter, 'Year') }}
{% endif %}
{% if typology_filter %}
{{ filter_dropdown_nokey('typology', typology_filter, 'Typologies') }}
{% endif %}
{% if languages_filter %}
{{ filter_dropdown_nokey('scriptingLanguage', languages_filter, 'Scripting languages') }}
{% endif %}
{% if licenses_filter %}
{{ filter_dropdown_nokey('license', licenses_filter, 'Licenses') }}
{% endif %}
{% if status_filter %}
{{ filter_dropdown_nokey('status', status_filter, 'Maintenance status') }}
{% endif %}
<a href="{{ request.base_url }}?view={{ view }}">Reset</a>
</div>
<div>
{% if view == 'list' %}
{% for resource in resources %}
{{ resource_list(resource, loop) }}
{% endfor %}
{% else %}
{% for resource in resources %}
{{ resource_with_related(resource, loop) }}
{% endfor %}
{% endif %}
</div>
</div>

<div>
{% if view == 'list' %}
{% for resource in resources %}
{{ resource_list(resource, loop) }}
{% endfor %}
{% else %}
{% for resource in resources %}
{{ resource_with_related(resource, loop) }}
{% endfor %}
{% endif %}
</div>

</form>
</form>

{% endblock %}

Write Preview
Loading…
Peruuta
Tallenna