WP6
/
expub_compendium
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

filtering as form

joel
Joel Galvez 2 роки тому
джерело
dd9ed360d1
коміт
2454decd10
6 змінених файлів з 225 додано та 118 видалено
Розділений перегляд Показати статистику Diff
  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 Переглянути файл

@@ -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 Переглянути файл

@@ -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 Переглянути файл

@@ -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 Переглянути файл

@@ -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 Переглянути файл

@@ -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 Переглянути файл

@@ -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 %}

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти