WP6
/
expub_compendium
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Mostly mobile changes 

Live search
joel
Joel Galvez 2 years ago
parent
08fcdb830c
commit
449dcdce61
8 changed files with 683 additions and 596 deletions
Unified View Show Diff Stats
  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 View File

} }


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


.cell { .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 { .cell::before {
content: ''; content: '';
} }


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


a:hover { a:hover {
} }


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

+ 175
- 61
web/app/static/styles/main.css View File

.z-\[60\] { .z-\[60\] {
z-index: 60; z-index: 60;
} }
.col-span-2 {
grid-column: span 2 / span 2;
}
.row-start-1 { .row-start-1 {
grid-row-start: 1; grid-row-start: 1;
} }
.float-right { .float-right {
float: right; float: right;
} }
.m-16 { .-m-4 {
margin: 4rem; margin: -1rem;
} }
.m-4 { .m-1 {
margin: 1rem; margin: 0.25rem;
} }
.mx-2 { .mx-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.my-8 { .my-8 {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-2 { .mb-2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.mr-2 { .mr-2 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.mr-auto {
margin-right: auto;
}
.mt-16 { .mt-16 {
margin-top: 4rem; margin-top: 4rem;
} }
.h-14 { .h-14 {
height: 3.5rem; height: 3.5rem;
} }
.h-20 {
height: 5rem;
}
.h-40 {
height: 10rem;
}
.h-5 { .h-5 {
height: 1.25rem; height: 1.25rem;
} }
.w-10 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }
.w-20 { .w-14 {
width: 5rem; width: 3.5rem;
}
.w-40 {
width: 10rem;
} }
.w-48 { .w-48 {
width: 12rem; width: 12rem;
.w-5 { .w-5 {
width: 1.25rem; width: 1.25rem;
} }
.w-\[20rem\] { .w-\[12rem\] {
width: 20rem; width: 12rem;
}
.w-\[25rem\] {
width: 25rem;
}
.w-\[35rem\] {
width: 35rem;
} }
.w-\[4rem\] { .w-\[4\.5rem\] {
width: 4rem; width: 4.5rem;
} }
.w-\[calc\(100\%-2rem\)\] { .w-\[calc\(100\%-2rem\)\] {
width: calc(100% - 2rem); width: calc(100% - 2rem);
.w-full { .w-full {
width: 100%; width: 100%;
} }
.w-\[20\] {
width: 20;
}
.min-w-\[5rem\] { .min-w-\[5rem\] {
min-width: 5rem; min-width: 5rem;
} }
.grid-rows-1 { .grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr));
} }
.flex-wrap { .flex-col {
flex-wrap: wrap; flex-direction: column;
} }
.content-start { .content-start {
align-content: flex-start; align-content: flex-start;
} }
.items-start {
align-items: flex-start;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
.gap-4 { .gap-4 {
gap: 1rem; gap: 1rem;
} }
.gap-6 {
gap: 1.5rem;
}
.gap-8 { .gap-8 {
gap: 2rem; gap: 2rem;
} }
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto { .overflow-x-auto {
overflow-x: auto; overflow-x: auto;
} }
.border-l-2 { .border-l-2 {
border-left-width: 2px; border-left-width: 2px;
} }
.border-r-2 {
border-right-width: 2px;
}
.border-black { .border-black {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity)); border-color: rgb(0 0 0 / var(--tw-border-opacity));
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity)); 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 { .bg-red-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity)); background-color: rgb(248 113 113 / var(--tw-bg-opacity));
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
.p-8 {
padding: 2rem;
}
.px-2 { .px-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
} }
.py-1 { .py-2 {
padding-top: 0.25rem; padding-top: 0.5rem;
padding-bottom: 0.25rem; padding-bottom: 0.5rem;
} }
.py-3 { .py-3 {
padding-top: 0.75rem; padding-top: 0.75rem;
.pl-1 { .pl-1 {
padding-left: 0.25rem; padding-left: 0.25rem;
} }
.pr-4 {
padding-right: 1rem;
}
.pr-40 { .pr-40 {
padding-right: 10rem; padding-right: 10rem;
} }
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.22; line-height: 1.22;
} }
.text-lg {
font-size: 1.24rem;
line-height: 1.1;
}
.text-sm { .text-sm {
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.35; line-height: 1.35;
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.opacity-40 {
opacity: 0.4;
}
.grayscale { .grayscale {
--tw-grayscale: grayscale(100%); --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); 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);
} }


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

@media (min-width: 1024px) {

.cell {
max-height: none;
}
}

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


.cell { .cell {
position: relative;
padding: 1rem; 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 { .cell::before {
content: ''; content: '';
.facts h3 { .facts h3 {
} }


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


a:hover { a:hover {
} }


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


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


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


} }
} }
.small-title { .small-title {
font-size: 1.5rem; font-size: 1.24rem;
line-height: 1.1; line-height: 1.1;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
} }
} }
.big-text { .big-text {
font-size: 1.5rem; font-size: 1.1rem;
line-height: 1.1; line-height: 1.22;
}
@media (min-width: 1024px) {

.big-text {
font-size: 1.5rem;
line-height: 1.1;
}
} }
.small-text { .small-text {
font-size: 1.1rem; font-size: 1.1rem;


@media (min-width: 1024px) { @media (min-width: 1024px) {


.lg\:static {
position: static;
}

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

.lg\:row-span-3 { .lg\:row-span-3 {
grid-row: span 3 / 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\] { .lg\:ml-\[13rem\] {
margin-left: 13rem; margin-left: 13rem;
} }
display: none; 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\] { .lg\:w-\[12rem\] {
width: 12rem; width: 12rem;
} }


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

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


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

.lg\:max-w-\[30rem\] { .lg\:max-w-\[30rem\] {
max-width: 30rem; max-width: 30rem;
} }
grid-template-rows: auto auto auto; 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 { .lg\:border-r-2 {
border-right-width: 2px; border-right-width: 2px;
} }
padding: 0px; padding: 0px;
} }


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

.lg\:pr-8 { .lg\:pr-8 {
padding-right: 2rem; 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 View File



{% block content %} {% 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 }} {{ text|safe }}
</div> </div>


{% endblock %} {% endblock %}

+ 222
- 245
web/app/templates/base.html View File



{% macro view_switch() %} {% macro view_switch() %}


<div class="flex"> <div class="flex">
<a <a href="{{ request.base_url }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
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 %}">
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" />
<div class="w-5 h-5 inline-block"> <rect x="27" width="19" height="14" fill="black" />
<svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="27" y="21" width="19" height="15" fill="black" />
<rect width="21" height="36" fill="black" /> </svg>
<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>


{% endmacro %} </div>


{% macro menu(type) %} Expanded
<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>
<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 %}" </div>
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 %}" List
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>
</div>


<a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}" {% endmacro %}
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>


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


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

{% endmacro %} {% endmacro %}


{% macro relationships_links(resource) %} {% macro relationships_links(resource) %}


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


{% macro resource_list(resource, loop, show_number=true) %} {% macro resource_list(resource, loop, show_number=true) %}
<div class="border-b-2 border-black"> <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']=='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']=='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 resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {%
%} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()"> 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 %} {% if show_number %}
{{loop.index}} / {{count}} {{loop.index}} / {{count}}
{% else %} {% else %}
</div> </div>




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


{% macro resource_with_related(resource, loop, show_number=true) %} {% macro resource_with_related(resource, loop, show_number=true) %}
<div class="w-full border-b-2 border-black fade-right"> <div class="w-full border-b-2 border-black fade-right">
<div class="content w-full py-8 overflow-x-auto"> <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="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 "> <div class="w-[4.5rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
{% if show_number %} {% if show_number %}
<p>{{loop.index}} / {{count}}</p> <p>{{loop.index}} / {{count}}</p>
{% else %} {% else %}
<p class="capitalize">{{ resource['type'] }}</p> <p class="capitalize">{{ resource['type'] }}</p>
{% endif %} {% 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>
<div class="cell w-[20rem] lg:w-[32rem] row-start-1 lg:row-span-3"> {% for tool in resource.tools %}
{{ resource_lead(resource) }} <div class="cell w-[12rem] lg:w-[30rem]">
{{ resource_lead(tool,size=2) }}
</div> </div>
{% endfor %}
{% if resource.tools %} </div>
<div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit"> {% endif %}
<div class="related"> {% if resource.books %}
Related<br>Tools <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
</div> <div class="related">
{% for tool in resource.tools %} Related<br>Books
<div class="cell w-[20rem] lg:w-[30rem]">
{{ resource_lead(tool,size=2) }}
</div>
{% endfor %}
</div> </div>
{% endif %} {% for book in resource.books %}
<div class="cell w-[12rem] lg:w-[35rem]">
{% if resource.books %} {{ resource_lead(book,size=2) }}
<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 %}
</div> </div>
{% endif %} {% endfor %}
</div>
{% if resource.practices %} {% endif %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit"> {% if resource.practices %}
<div class="related"> <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
Related<br>Practices <div class="related">
</div> Related<br>Practices
{% for practice in resource.practices %}
<div class="cell w-[20rem] lg:w-[25rem]">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div> </div>
{% endif %} {% for practice in resource.practices %}
<div class="cell w-[12rem] lg:w-[25rem]">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div> </div>
{% endif %}

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


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


{% macro resource_lead(resource,size=1) %} {% macro resource_lead(resource,size=1) %}
<a <a class="block lead-inner-link overflow-hidden h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"
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
{% if resource['type'] == 'book' %} resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
href="{{ url_for('book.show_book', book_id=resource['id']) }}" %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
{% endif %} {% if (resource.type == 'book') and (resource.references) %}
{% if resource['type'] == 'tool' %} <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]"
href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" src="{{resource.references}}" alt="cover for {{ resource.name }}">
{% endif %} {% 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()" <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) %} {% if resource['year'] %}
<img class="w-20 h-20 object-contain float-right m-4 grayscale rotate-[15deg]" src="{{resource.references}}" alt="cover for {{ resource.name }}"> <div class="text-sm">
{% endif %} {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
<h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{ resource['name'] }}</h2> {% 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]"> <div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
{{ resource['description'] | truncate(150) }} {{ resource['description'] | truncate(150) }}
</div> </div>


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




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




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


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




<!-- Begin page content --> <!-- Begin page content -->
<main> <main>
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
<div class="alert alert-danger"> <div class="alert alert-danger">
{{ messages[0] }} {{ messages[0] }}
</div> </div>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
{% block content %} {% block content %}
</main> </main>
</div> </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()"> <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"> <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> <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>
</svg> </svg>
</div> </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>
</div> </div>
<!-- Sticky footer--> <!-- Sticky footer-->
<footer class="std-margin mt-20 text-sm"> <footer class="std-margin mt-20 text-sm">
<div class="container"> <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> </div>
</footer> </footer>
<!-- JavaScript --> <!-- JavaScript -->
<script src="{{ url_for('static',filename='js/main.js') }}"></script> <script src="{{ url_for('static',filename='js/main.js') }}"></script>
</body> </body>


</html> </html>

+ 108
- 108
web/app/templates/book.html View File



{% block content %} {% block content %}


<div class="cell-margin grid mt-16 lg:grid-cols-2"> <div class="cell-margin grid mt-16 lg:grid-cols-2">
<div class="left">
<div class="left"> <div class="mb-2">Book</div>
<div class="mb-2">Book</div> <div class="lg:border-r-2 border-black pr-8">
<div class="border-r-2 border-black pr-8"> {% if resource.references %}
{% if resource.references %} <div class="float-right">
<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
<img class="w-40 h-40 object-contain m-16 rotate-[15deg]" src={{ resource.references }} alt="cover for {{ resource['Title'] }}"> }} 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> </div>
{% endif %} {% endif %}
</div>
<h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource.name }} {% endblock %}</h2> {% endif %}
<div class="">
{% if resource['Year'] %} {% if current_user.is_authenticated %}
{{ resource['Year'] }}
{% endif %}
{% if resource['Authors'] %}
<div class=""> <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=""> <div class="">
{% for author in resource['Authors'] %} <h3>Typology category</h3>
{{ author }}</br> <a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
{% endfor %}
</div>
{% else %}
<div>
{% for author in resource['Authors'] %}
{{ author }}
{% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if resource['bookUrl'] %}
</div>
{% endif %}
<div class="">
{% if current_user.is_authenticated %}
<div class=""> <div class="">
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}"> <h3>URL</h3>
<span class="badge bg-dark">Edit</span> <a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</a>
</div> </div>
{% endif %} {% endif %}
<!-- fields for books from isbntools -->
<div class="facts "> {% if resource['ISBN-13'] %}
<div class="">
{% if resource['typology'] %} <h3>
<div class=""> ISBN-13
<h3>Typology category</h3> </h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a> <div>
</div> {{ resource['ISBN-13'] }}
{% 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>
</div> </div>
{% endif %} </div>
{% if resource['Publisher'] %} {% endif %}
<div class=""> {% if resource['Publisher'] %}
<h3> <div class="">
Publisher <h3>
</h3> Publisher
<div> </h3>
{{ resource['Publisher'] }} <div>
</div> {{ resource['Publisher'] }}
</div> </div>
{% endif %} </div>
<!-- fields for books from database --> {% endif %}
{% if resource['name'] %} <!-- fields for books from database -->
<!-- <div class=""> {% if resource['name'] %}
<!-- <div class="">
<h3>Title</h3> <h3>Title</h3>
<div class="">{{ resource['name'] }}</div> <div class="">{{ resource['name'] }}</div>
</div> --> </div> -->
{% endif %} {% endif %}
{% if resource['author'] %} {% if resource['author'] %}
<div class=""> <div class="">
<h3>Author</h3> <h3>Author</h3>
<div class="">{{ resource['author'] }}</div> <div class="">{{ resource['author'] }}</div>
</div> </div>
{% endif %} {% endif %}
{% if resource['year'] %} {% if resource['year'] %}
<div class=""> <div class="">
<h3>Publication year</h3> <h3>Publication year</h3>
<div> <div>
{{ resource['year'] }} {{ resource['year'] }}
</div>
</div>
{% endif %}
{% if resource['desc'] %}
<div class="col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ resource['desc'] }}</div>
</div> </div>
{% endif %} </div>
{% endif %}
{% if resource['description'] %} {% if resource['desc'] %}
<div class="col-span-2"> <div class="lg:col-span-2">
<h3> <h3>Publisher's description</h3>
Experimental aspects: <div class="">{{ resource['desc'] }}</div>
</h3> </div>
<div> {% endif %}
{{ resource['description'] }} {% if resource['description'] %}
</div> <div class="lg:col-span-2">
<h3>
Experimental aspects:
</h3>
<div>
{{ resource['description'] }}
</div> </div>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
<div class="right p-4 pr-8 lg:p-0"> </div>
<div class="grid lg:grid-cols-2"> <div class="right p-4 pr-8 lg:p-0">
{{ relationships_links(resource) }} <div class="grid lg:grid-cols-2">
</div> {{ relationships_links(resource) }}
</div> </div>
</div> </div>


{% endblock %} </div>


{% endblock %}

+ 2
- 2
web/app/templates/index.html View File

<div class=""> <div class="">


<div class="border-b-2 border-black grid gap-8 lg:grid-cols-[52rem,30rem] content-start"> <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 }} {{ text|safe }}
</div> </div>
</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() }} {{ view_switch() }}
</div> </div>



+ 72
- 72
web/app/templates/resource.html View File

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

+ 79
- 98
web/app/templates/resources.html View File





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


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


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


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


hx-trigger="change" {% if practices_filter%}
hx-push-url="true" {{ 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>


> </div>
<input type="hidden" name="view" value="{{ view }}"> <div>
<div class="flex flex-wrap gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black "> {% if view == 'list' %}
{% for resource in resources %}
{{ view_switch() }} {{ resource_list(resource, loop) }}
{% endfor %}
{% if practices_filter%} {% else %}
{{ filter_dropdown('practice', practices_filter, 'Practices') }} {% for resource in resources %}
{% endif %} {{ resource_with_related(resource, loop) }}
{% if year_filter %} {% endfor %}
{{ filter_dropdown_nokey('year', year_filter, 'Year') }} {% endif %}
{% endif %} </div>
{% 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>


</form> </form>


{% endblock %} {% endblock %}

Write Preview
Loading…
Cancel
Save