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

filtering as form

joel
Joel Galvez 1 year ago
parent
dd9ed360d1
commit
2454decd10
6 changed files with 225 additions and 118 deletions
Split View Show Diff Stats
  1. +14
    -0
      web/app/static/src/main.css
  2. +70
    -16
      web/app/static/styles/main.css
  3. +1
    -1
      web/app/static/tailwind.config.js
  4. +70
    -41
      web/app/templates/base.html
  5. +4
    -1
      web/app/templates/index.html
  6. +66
    -59
      web/app/templates/resources.html

+ 14
- 0
web/app/static/src/main.css View File

@@ -172,6 +172,9 @@ select {
a:hover {
@apply opacity-90;
}
a.link:hover {
@apply opacity-100;
}


h2,h3 {
@@ -284,6 +287,17 @@ p + p {
/* background-image: linear-gradient(to top, purple, transparent) ; */
}

.link:hover path,
.active path {
stroke: white;
}

.link:hover rect,
.active rect {
fill: white;
}


.link:hover {
@apply bg-expurple text-white;
}

+ 70
- 16
web/app/static/styles/main.css View File

@@ -635,6 +635,9 @@ video {
.h-40 {
height: 10rem;
}
.h-5 {
height: 1.25rem;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
@@ -645,6 +648,9 @@ video {
.h-screen {
height: 100vh;
}
.min-h-\[2rem\] {
min-height: 2rem;
}
.w-10 {
width: 2.5rem;
}
@@ -657,6 +663,9 @@ video {
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
.w-\[25rem\] {
width: 25rem;
}
@@ -669,6 +678,9 @@ video {
.w-\[35rem\] {
width: 35rem;
}
.w-\[4rem\] {
width: 4rem;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
@@ -685,6 +697,9 @@ video {
.max-w-\[65ch\] {
max-width: 65ch;
}
.shrink-0 {
flex-shrink: 0;
}
.-rotate-12 {
--tw-rotate: -12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -702,6 +717,9 @@ video {
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.flex-wrap {
flex-wrap: wrap;
}
.content-start {
align-content: flex-start;
}
@@ -717,6 +735,12 @@ video {
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-8 {
gap: 2rem;
}
@@ -760,21 +784,28 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@@ -791,6 +822,10 @@ video {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@@ -811,9 +846,6 @@ video {
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-base {
font-size: 1.1rem;
line-height: 1.22;
@@ -1061,6 +1093,9 @@ select {
a:hover {
opacity: 0.9;
}
a.link:hover {
opacity: 1;
}


h2,h3 {
@@ -1211,14 +1246,25 @@ p + p {
}

.active {
background-color: rgba(103, 48, 255,0.8);
background-color: rgba(103, 48, 255,0.5);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
/* background-image: linear-gradient(to top, purple, transparent) ; */
}

.link:hover path,
.active path {
stroke: white;
}

.link:hover rect,
.active rect {
fill: white;
}


.link:hover {
background-color: rgba(103, 48, 255,0.8);
background-color: rgba(103, 48, 255,0.5);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@@ -1274,8 +1320,20 @@ details[open]::details-content {
padding-bottom: 0.5rem;
}

a.menuitem:hover {
opacity: 1;
}

.menuitem:hover path {
stroke: white;
}

.menuitem:hover rect {
fill: white;
}

.menuitem:hover {
background-color: rgba(103, 48, 255,0.8);
background-color: rgba(103, 48, 255,0.5);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@@ -1370,8 +1428,8 @@ details[open]::details-content {
display: none;
}

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

.lg\:w-\[32rem\] {
@@ -1418,8 +1476,4 @@ details[open]::details-content {
.lg\:pr-8 {
padding-right: 2rem;
}

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

+ 1
- 1
web/app/static/tailwind.config.js View File

@@ -22,7 +22,7 @@ module.exports = {
},
colors: {
'expurple': {
DEFAULT: 'rgba(103, 48, 255,0.8)'
DEFAULT: 'rgba(103, 48, 255,0.5)'
}
// 'ggreen': {
// light: '#67e8f9',

+ 70
- 41
web/app/templates/base.html View File

@@ -14,14 +14,40 @@

{% 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 %}">
Expanded view
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 %}">
LIST VIEW
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 %}

@@ -47,30 +73,30 @@
</a>

<!-- <div class="ml-auto mr-2">
{% if current_user.is_authenticated %}
<a href="{{ url_for('create.create_resource') }}" class="block link">
Add resource
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="block link">
Profile
</a>
{% endif %}
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="block link">
Login
</a>
<a href="{{ url_for('auth.signup') }}" class="block link">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="block link">
Logout
</a>
{% endif %}
</div> -->
{% if current_user.is_authenticated %}
<a href="{{ url_for('create.create_resource') }}" class="block link">
Add resource
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="block link">
Profile
</a>
{% endif %}
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="block link">
Login
</a>
<a href="{{ url_for('auth.signup') }}" class="block link">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="block link">
Logout
</a>
{% endif %}
</div> -->

<form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
<input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1"
@@ -125,27 +151,29 @@

{% macro resource_list(resource, loop, show_number=true) %}
<div class="border-b-2 border-black">
<a class="block h-full py-1 px-4 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
<a class="flex gap-4 h-full py-1 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()">

<span class="{% if show_number %} hidden {% endif %} lg:w-[10.5rem] lg:text-center ">
<div class="w-[4rem] shrink-0 lg:w-[12rem] text-center ">
{% if show_number %}
{{loop.index}} / {{count}}
{% else %}
<span class="capitalize inline-block min-w-[5rem] px-4 text-right">{{ resource['type'] }}</span>
<div class="capitalize inline-block min-w-[5rem] px-4 ">{{ resource['type'] }}</div>
{% endif %}
</span>
</div>


<span class="{{ resource.type }}">
{{ resource.name }}
</span>
{% if resource['year'] %}
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
{% endif %}
<div>
<span class="{{ resource.type }}">
{{ resource.name }}
</span>
{% if resource['year'] %}
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
{% endif %}
</div>
</a>
</div>
{% endmacro %}
@@ -154,7 +182,7 @@
<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=" related hidden lg:block ">
<div class="w-[4rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
{% if show_number %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
@@ -275,7 +303,7 @@


<!DOCTYPE html>
<html lang="en-gb">
<html lang="en">

<head>
{{ moment.include_moment() }}
@@ -292,6 +320,7 @@
// console.log(e)
// })
// htmx.logAll()

function base() {
return {
menuOpen: false,
@@ -337,8 +366,8 @@
<body
class="text-base overflow-y-scroll"
x-data="base()"
hx-boost="true"
hx-boost="true"
hx-select="#all"
hx-target="#all"
hx-swap="outerHTML"

+ 4
- 1
web/app/templates/index.html View File

@@ -9,7 +9,10 @@
</div>
</div>

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


{% if view == 'list' %}
{% for resource in resources %}

+ 66
- 59
web/app/templates/resources.html View File

@@ -18,13 +18,15 @@
</div>
</div> -->


{% macro filter_dropdown(id, filter, plural='') %}
<select name="{{ id }}" hx-trigger="change">
<select
name="{{ id }}"
>
<option
value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}
hx-get="{{ request.base_url }}?{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
hx-push-url="true"

value=""
{% if request.args.get(id, '' )=='' %} selected {% endif %}
>
{% if plural != '' %}
{{ plural }}
@@ -34,9 +36,8 @@
</option>
{% for thing in filter %}
<option
value="{{ thing[0] }}" {% if request.args.get(id)==thing[0]|string %} selected {% endif %}
hx-get="{{ request.base_url }}?{{ id }}={{ thing[0] }}{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
hx-push-url="true"
value="{{ thing[0] }}"
{% if request.args.get(id)==thing[0]|string %} selected {% endif %}
>
{{ thing[1] }}
</option>
@@ -45,10 +46,12 @@
{% endmacro%}

{% macro filter_dropdown_nokey(id, filter, plural='') %}
<select name="{{ id }}" hx-trigger="changed">
<option value="" {% if request.args.get(id, '' ) == '' %} selected {% endif %}
hx-get="{{ request.base_url }}?{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
hx-push-url="true"
<select
name="{{ id }}"
>
<option
value=""
{% if request.args.get(id, '' ) == '' %} selected {% endif %}
>
{% if plural != '' %}
{{ plural }}
@@ -57,9 +60,9 @@
{% endif%}
</option>
{% for thing in filter %}
<option value="{{ thing }}" {% if request.args.get(id)==thing|string %} selected {% endif %}
hx-get="{{ request.base_url }}?{{ id }}={{ thing }}{% for key in request.args %}{% if key != id %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
hx-push-url="true"
<option
value="{{ thing }}"
{% if request.args.get(id)==thing|string %} selected {% endif %}
>
{{ thing }}
</option>
@@ -67,7 +70,7 @@
</select>
{% 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]">
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,
@@ -75,51 +78,55 @@
</div>
</div>

<div class="" >
<div
id="resources"
hx-boost="false"
>

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

<div class="flex gap-8">
{% 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 %}
</div>
hx-trigger="change"
hx-push-url="true"

<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>
>
<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>

</form>

{% endblock %}

Write Preview
Loading…
Cancel
Save