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 1 year 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 {
margin: 4rem;
.-m-4 {
margin: -1rem;
} }
.m-4 {
margin: 1rem;
.m-1 {
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 {
width: 5rem;
}
.w-40 {
width: 10rem;
.w-14 {
width: 3.5rem;
} }
.w-48 { .w-48 {
width: 12rem; width: 12rem;
.w-5 { .w-5 {
width: 1.25rem; 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\)\] { .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-wrap: wrap;
.flex-col {
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 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.py-2 {
padding-top: 0.5rem;
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 > * {
max-width: 65ch;
@media (min-width: 1024px) {

.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;
line-height: 1;
font-size: 1.24rem;
line-height: 1.1;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {


} }
} }
.medium-title { .medium-title {
font-size: 1.85rem;
line-height: 1;
font-size: 1.5rem;
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;
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 { .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">
<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>
<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> </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 %} {% 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">
<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 %} {% endmacro %}


{% macro relationships_links(resource) %} {% 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> </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> </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> </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
%} 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 %} {% if show_number %}
{{loop.index}} / {{count}} {{loop.index}} / {{count}}
{% else %} {% else %}
</div> </div>




<div>
<span class="{{ resource.type }}">
<div class="">
<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="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>
<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> </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> </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> </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> </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">
{{ title }}
</a>
<a href="{{ url }}" class="nav-link">
{{ title }}
</a>
{% endmacro %} {% endmacro %}


{% macro resource_lead(resource,size=1) %} {% 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 %} {% 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
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 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
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('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">
{{ messages[0] }}
</div>
<div class="alert alert-danger">
{{ messages[0] }}
</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="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> </div>
{% endif %} {% 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=""> <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'] %}
{{ 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> </div>
{% endif %} {% endif %}
</div>
{% endif %}
<div class="">
{% if current_user.is_authenticated %}
{% if resource['bookUrl'] %}
<div class=""> <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> </div>
{% endif %} {% 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> </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> </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> <h3>Title</h3>
<div class="">{{ resource['name'] }}</div> <div class="">{{ resource['name'] }}</div>
</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> </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> </div>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</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 class="right p-4 pr-8 lg:p-0">
<div class="grid lg:grid-cols-2">
{{ 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' %}
<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 %} {% 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="">
<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 %} {% endif %}
{% if resource['license'] %} {% if resource['license'] %}
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
{% endif %} {% endif %}
{% if resource['scriptingLanguage'] %} {% if resource['scriptingLanguage'] %}
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
{% endif %} {% endif %}
{% if resource['projectUrl'] %} {% 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 %} {% endif %}
{% if resource['repositoryUrl'] %} {% 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 %} {% endif %}
{% if resource['ingestFormats'] %} {% if resource['ingestFormats'] %}
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
{% endif %} {% endif %}
{% if resource['outputFormats'] %} {% if resource['outputFormats'] %}
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
{% endif %} {% endif %}
{% if resource['status'] %} {% if resource['status'] %}
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
{% endif %} {% endif %}
<!-- fields for practices --> <!-- fields for practices -->
{% if resource['longDescription'] %} {% 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 %} {% endif %}
{% if resource['experimental'] %} {% 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 %} {% endif %}
{% if resource['considerations'] %} {% 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 %} {% endif %}
{% if resource['references'] %} {% 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 %} {% 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
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%} {% endmacro%}


{% macro filter_dropdown_nokey(id, filter, plural='') %} {% 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%} {% 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> </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 %} {% endblock %}

Write Preview
Loading…
Cancel
Save