trotFunky/FabulaVotes
1
0
Fork 0
Code Releases Packages Activity

tag: Introduce tag system

Browse source 
Create a new table representing tags, composed of a name and color.
They can be used to tag truths and filter them later.
Tags display under the truths they correspond to and can be clicked
to access all truths matching this tag.

Introduce a new element in the top bar to allow navigating to the
tag list, which can be used to create and edit tags for the admin
and used to select a list of tags to filter against for everyone.

Update the database records of the truths to include the tag vector.
As the database query result is a multi-row result, it cannot be
parsed automatically so it needs to be skipped and retrieved
manually.
This commit is contained in:
trotFunky 2024-08-01 21:18:30 +01:00
parent d79375365d
commit b401aa7f5d
11 changed files with 549 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

85
static_files/style.css
View file

@ -74,14 +74,18 @@
}
.week_change:link, .week_change:visited,
.individual_truth > a, .individual_truth > a:link, .individual_truth > a:visited {
.individual_truth > a, .individual_truth > a:link, .individual_truth > a:visited,
nav > a, nav > a:link, nav > a:visited,
h1 > a, h1 > a:link, h1 > a:visited {
color: black;
text-decoration: none;
transition: all .2s ease-in-out;
}
.week_change:hover, .week_change:focus,
.individual_truth > a:hover, .individual_truth > a:focus {
.individual_truth > a:hover, .individual_truth > a:focus,
nav > a:hover, nav > a:focus,
h1 > a:hover, h1 > a:focus {
color: mediumpurple;
text-shadow: 0 2px 2px slategray;
}
@ -101,6 +105,76 @@
}
}
.tag_list {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
max-height: 40vh;
margin-bottom: 1em;
}
@media (orientation: portrait) {
.tag_list {
max-height: none;
}
}
.new_tag {
display: flex;
flex-direction: column;
border: black dashed 1px;
padding: 0.5em;
margin-top: 0.5em;
width: fit-content;
}
.new_tag > button {
margin-top: 1em;
}
.tag {
display: flex;
justify-content: center;
margin: 0.25em;
width: fit-content;
text-decoration: none;
text-shadow:
-1px 0 3px black,
1px 0 3px black,
0 -1px 3px black,
0 1px 3px black;
color: white;
padding: 0.25em 0.75em 0.25em 0.25em;
border-bottom-left-radius: 0.4em;
border-top-left-radius: 0.4em;
border-bottom-right-radius: 1.5em 0.8em;
border-top-right-radius: 1.5em 0.8em;
transition: all .2s ease-in-out;
}
.tag:hover, .tag:focus {
color: mediumpurple;
}
.truth_tags {
display: flex;
flex-flow: wrap;
}
.truth_tags > .tag { /* We want smaller tags, the shadows must follow as well */
font-size: smaller;
text-shadow:
-1px 0 2px black,
1px 0 2px black,
0 -1px 2px black,
0 1px 2px black;
}
.truth_tags > form {
display: contents;
}
.login {
display: flex;
flex-direction: column;
@ -147,3 +221,10 @@ body {
body > h2 {
padding-left: 0.25eM;
}
nav {
height: fit-content;
margin: 0 0.25em;
border-left: 0.15em solid slategray;
border-right: 0.15em solid slategray;
}