forked from ourworld_web/www_template_2023
add team page
This commit is contained in:
samaradel
48
templates/partials/filter_bar.html
Normal file
48
templates/partials/filter_bar.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 4%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<div class="left-0 z-50 mb-5 h-16 bg-gray-200 mt-10 w-full rounded shadow">
|
||||
<header class="flex flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500">
|
||||
<div class="flex justify-between px-4 sm:p-0">
|
||||
<div class="ml-8 inline-flex flex-shrink-0">
|
||||
<span class="flex text-xl p-3 capitalize tracking-tight">
|
||||
Filter:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
|
||||
<ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
|
||||
<li class="flex items-center">
|
||||
<div class="relative">
|
||||
<button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link bg-gray-300">
|
||||
<span class="capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
|
||||
<svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
<div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
|
||||
<div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
|
||||
<a data-v-21fd5df0="" href="/people" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
All
|
||||
</a>
|
||||
{% set taxonomy = get_taxonomy(kind="memberships") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/memberships/" ~ path %}
|
||||
<a href="{{fullpath}}" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
85
templates/partials/memberships.html
Normal file
85
templates/partials/memberships.html
Normal file
@@ -0,0 +1,85 @@
|
||||
{% block content %}
|
||||
|
||||
{% if not paginator %}
|
||||
{% set paginator = section %}
|
||||
{% endif %}
|
||||
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 3%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="-mt-16">
|
||||
{% include "partials/filter_bar.html" %}
|
||||
<div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
|
||||
<div class="my-4 flex flex-col items-start">
|
||||
<h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h1>
|
||||
test
|
||||
<div class="text-xl text-gray-800">
|
||||
{{ paginator.total_pages ~ " People"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
|
||||
{%- for page in paginator.pages %}
|
||||
{% include "partials/person_card.html" %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
26
templates/partials/personCard.html
Normal file
26
templates/partials/personCard.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="flex flex-col px-0 sm:px-4 pb-2">
|
||||
<a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
|
||||
{% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
|
||||
<img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
|
||||
<div>
|
||||
<h2 class="text-2xl">{{page.title}}</h2>
|
||||
<div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
|
||||
{% if page.description %}
|
||||
{{page.description}}
|
||||
{% else %}
|
||||
{{page.content | safe}}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="my-2 flex flex-row items-start flex-wrap">
|
||||
{% if page.taxonomies.memberships %}
|
||||
{% for tag in page.taxonomies.memberships %}
|
||||
<a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
|
||||
{{tag}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
26
templates/partials/person_card.html
Normal file
26
templates/partials/person_card.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="flex flex-col px-0 sm:px-4 pb-2">
|
||||
<a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
|
||||
{% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
|
||||
<img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
|
||||
<div>
|
||||
<h2 class="text-2xl">{{page.title}}</h2>
|
||||
<div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
|
||||
{% if page.description %}
|
||||
{{page.description}}
|
||||
{% else %}
|
||||
{{page.content | safe}}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="my-2 flex flex-row items-start flex-wrap">
|
||||
{% if page.taxonomies.memberships %}
|
||||
{% for tag in page.taxonomies.memberships %}
|
||||
<a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
|
||||
{{tag}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user