ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update tailwind config

Browse Source
This commit is contained in:
samaradel
2021-08-30 14:34:32 +02:00
parent 07d577c9f5
commit 317fc1ce66
5 changed files with 409 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
src/components/custom/NewsFilterHeader.vue
View File

@@ -1,7 +1,18 @@
<template>
<div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
<header
class="flex items-center justify-between flex-wrap container mx-auto px-4 py-1 sm:px-0 transition-all transition-500"
class="
flex
items-center
justify-between
flex-wrap
container
mx-auto
px-4
py-1
sm:px-0
transition-all transition-500
"
>
<div class="flex items-center justify-between px-4 py-2 sm:p-0">
<div class="sm:hidden ml-auto">
@@ -40,14 +51,29 @@
class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0"
>
<ul
class="list-none sm:flex justify-left capitalize transition-all transition-500"
class="
list-none
sm:flex
justify-left
capitalize
transition-all transition-500
"
>
<!-- Topics -->
<li class="py-1 mx-5">
<div class="relative" x-data="{ open: false }">
<button
@click="setActive(0)"
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
class="
flex flex-row
items-center
w-full
md:w-auto
md:inline
md:mt-0
md:ml-4
animated-link
"
>
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
<svg
@@ -57,7 +83,17 @@
'rotate-180': active == 0,
'rotate-0': !active == 0,
}"
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
class="
inline
w-4
h-4
mt-1
ml-1
transition-transform
duration-200
transform
md:-mt-1
"
>
<path
fill-rule="evenodd"
@@ -75,11 +111,28 @@
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="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
class="
absolute
w-full
mt-2
origin-top-right
rounded-md
shadow-lg
md:w-48
z-30
"
>
<div
v-if="open"
class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
class="
w-64
px-2
py-2
bg-white
rounded-md
shadow
dark:bg-gray-700
"
>
<a
v-for="topic in topics"
@@ -88,7 +141,30 @@
setTopic(topic);
open = false;
"
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"
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
"
>{{ topic.replace(/_/g, " ") }}</a
>
</div>
@@ -101,7 +177,16 @@
<div class="relative" x-data="{ open: false }">
<button
@click="setActive(1)"
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
class="
flex flex-row
items-center
w-full
md:w-auto
md:inline
md:mt-0
md:ml-4
animated-link
"
>
<span class="capitalize">{{ year }}</span>
<svg
@@ -111,7 +196,17 @@
'rotate-180': active == 1,
'rotate-0': !active == 1,
}"
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
class="
inline
w-4
h-4
mt-1
ml-1
transition-transform
duration-200
transform
md:-mt-1
"
>
<path
fill-rule="evenodd"
@@ -129,16 +224,56 @@
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="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
class="
absolute
w-full
mt-2
origin-top-right
rounded-md
shadow-lg
md:w-48
z-30
"
>
<div
v-if="open"
class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
class="
w-64
px-2
py-2
bg-white
rounded-md
shadow
dark:bg-gray-700
"
>
<a
v-for="year in years"
:key="year"
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"
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
"
@click.self="
setYear(year);
open = false;
@@ -155,7 +290,16 @@
<div class="relative" x-data="{ open: false }">
<button
@click="setActive(2)"
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
class="
flex flex-row
items-center
w-full
md:w-auto
md:inline
md:mt-0
md:ml-4
animated-link
"
>
<span class="capitalize">{{ month }}</span>
<svg
@@ -165,7 +309,17 @@
'rotate-180': active == 2,
'rotate-0': !active == 2,
}"
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
class="
inline
w-4
h-4
mt-1
ml-1
transition-transform
duration-200
transform
md:-mt-1
"
>
<path
fill-rule="evenodd"
@@ -183,16 +337,58 @@
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="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
class="
absolute
w-full
mt-2
origin-top-right
rounded-md
shadow-lg
md:w-48
z-30
"
>
<div
v-if="open"
class="w-64 overflow-y-auto h-40 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
class="
w-64
overflow-y-auto
h-40
px-2
py-2
bg-white
rounded-md
shadow
dark:bg-gray-700
"
>
<a
v-for="month in months"
:key="month"
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"
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
"
@click.self="
setMonth(month);
open = false;

1
src/components/custom/TagFilterHeader.vue
View File

@@ -117,7 +117,6 @@
v-if="open"
class="
w-64
max-h-10
px-2
py-2
bg-white