WP6
/
expub_compendium
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

filtering as form

joel
Joel Galvez 1 年之前
父節點
dd9ed360d1
當前提交
2454decd10
共有 6 個文件被更改，包括 225 次插入 和 118 次删除
分割檢視 顯示文件統計
  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 %}

Write Preview
Loading…
取消
儲存