rm _ from tags

This commit is contained in:
samaradel
2021-07-25 07:44:25 +00:00
parent d7b9130a93
commit 23e367179f
2 changed files with 99 additions and 12 deletions

View File

@@ -49,7 +49,7 @@
@click="setActive(0)" @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("_", " ") }}</span> <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
<svg <svg
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@@ -89,7 +89,7 @@
open = false; 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("_", " ") }}</a >{{ topic.replace(/_/g, " ") }}</a
> >
</div> </div>
</div> </div>

View File

@@ -1,7 +1,17 @@
<template> <template>
<div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow"> <div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
<header <header
class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500" class="
flex
items-center
flex-wrap
container
mx-auto
pt-1
pb-0
sm:px-0
transition-all transition-500
"
> >
<div class="flex items-center justify-between px-4 sm:p-0"> <div class="flex items-center justify-between px-4 sm:p-0">
<div class="inline-flex items-center flex-shrink-0"> <div class="inline-flex items-center flex-shrink-0">
@@ -18,19 +28,45 @@
<nav <nav
:class="isOpen ? 'block' : 'hidden'" :class="isOpen ? 'block' : 'hidden'"
class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent" class="
inline-flex
md:order-2
px-2
pt-2
pb-4
sm:flex
sm:p-0
bg-transparent
"
> >
<ul <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
"
> >
<!-- Tags --> <!-- Tags -->
<li class="pt-2 mx-5"> <li class="pt-2 mx-5">
<div class="relative" x-data="{ open: false }"> <div class="relative" x-data="{ open: false }">
<button <button
@click="setActive(0)" @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">{{ selected.replace("_", " ") }}</span> <span class="capitalize">{{
selected.replace(/_/g, " ")
}}</span>
<svg <svg
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@@ -38,7 +74,17 @@
'rotate-180': active == 0, 'rotate-180': active == 0,
'rotate-0': 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 <path
fill-rule="evenodd" fill-rule="evenodd"
@@ -56,19 +102,60 @@
x-transition:leave="transition ease-in duration-75" x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95" 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 <div
v-if="open" 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
max-h-10
px-2
py-2
bg-white
rounded-md
shadow
dark:bg-gray-700
"
> >
<a <a
v-for="tag in tags" v-for="tag in tags"
:key="tag.path" :key="tag.path"
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
"
:href="$url(tag.path)" :href="$url(tag.path)"
@click="open = false" @click="open = false"
>{{ tag.title.replace("_", " ") }}</a >{{ tag.title.replace(/_/g, " ") }}</a
> >
</div> </div>
</div> </div>