necessário
This commit is contained in:
parent
92b0a902ca
commit
7edb0a17ed
5 changed files with 199 additions and 162 deletions
|
|
@ -10,13 +10,77 @@ hotkeys('/', {keyup: true}, function (event, _){
|
|||
});
|
||||
|
||||
|
||||
let filtered_tags = new Set();
|
||||
|
||||
/**
|
||||
* @param {string} name
|
||||
*/
|
||||
function filter_tags(name) {
|
||||
filtered_tags.add(name);
|
||||
/**
|
||||
* @type {NodeListOf<HTMLElement>}
|
||||
*/
|
||||
let covers = document.querySelectorAll('.cover');
|
||||
for (let cover of covers) {
|
||||
/**
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
let tags = eval(cover.dataset['tags']); // yeehaw!!! eu sou um cowboy yeehaw!!!
|
||||
if (!(tags.includes(name))) {
|
||||
cover.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
const url = new URL(window.location.href);
|
||||
const new_params = new URLSearchParams([
|
||||
['tags', Array.from(filtered_tags).join('&')]
|
||||
// ...Array.from(url.searchParams.entries()),
|
||||
]).toString();
|
||||
window.history.replaceState(null, "", `${url.pathname}?${new_params}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} name
|
||||
*/
|
||||
function filter_artists(name) {
|
||||
filtered_tags.add(name);
|
||||
/**
|
||||
* @type {NodeListOf<HTMLElement>}
|
||||
*/
|
||||
let covers = document.querySelectorAll('.cover');
|
||||
for (let cover of covers) {
|
||||
/**
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
let tags = eval(cover.dataset['tags']); // yeehaw!!! eu sou um cowboy yeehaw!!!
|
||||
if (!(tags.includes(name))) {
|
||||
cover.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
const url = new URL(window.location.href);
|
||||
const new_params = new URLSearchParams([
|
||||
['tags', Array.from(filtered_tags).join('&')]
|
||||
// ...Array.from(url.searchParams.entries()),
|
||||
]).toString();
|
||||
window.history.replaceState(null, "", `${url.pathname}?${new_params}`);
|
||||
}
|
||||
|
||||
|
||||
// filtra tags na url da página
|
||||
const url = new URL(window.location.href);
|
||||
filtered_tags = new Set(url.searchParams.get('tags')?.split('&'));
|
||||
filtered_tags?.forEach(filter_tags);
|
||||
|
||||
function clear_filters() {
|
||||
window.history.replaceState(null, "", url.pathname);
|
||||
document.querySelectorAll('.cover').forEach(x => x.classList.remove('hidden'));
|
||||
filtered_tags = new Set();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event & {target: HTMLElement}} event
|
||||
*/
|
||||
function inspectSetTimeout(event) {
|
||||
let target = event.target;
|
||||
|
||||
let id = setTimeout(
|
||||
() => {
|
||||
let targetId = '#' + target.id;
|
||||
|
|
@ -33,7 +97,7 @@ function inspectSetTimeout(event) {
|
|||
500
|
||||
);
|
||||
|
||||
target.dataset['timeout'] = id
|
||||
target.dataset['timeout'] = id;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -41,6 +105,6 @@ function inspectSetTimeout(event) {
|
|||
*/
|
||||
function inspectClearTimeout(event) {
|
||||
let target = event.target;
|
||||
clearTimeout(target.dataset['timeout'])
|
||||
clearTimeout(target.dataset['timeout']);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,12 @@
|
|||
--main-margin: 62px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
font-size-adjust: ex-height 0.53;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
|
|
@ -20,7 +26,7 @@
|
|||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#pages-container {
|
||||
|
|
@ -94,12 +100,9 @@ body {
|
|||
|
||||
#index nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* margin-bottom: 11px; */
|
||||
/* background-color: var(--haughty-gray); */
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--silver-lining-white);
|
||||
padding: 5px;
|
||||
/* box-shadow: black 1px 1px 1px 1px; */
|
||||
}
|
||||
|
||||
#index #content {
|
||||
|
|
@ -116,14 +119,7 @@ body {
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
#index #center {
|
||||
margin: var(--main-margin) var(--main-margin) auto var(--main-margin);
|
||||
}
|
||||
|
||||
.top {
|
||||
/* width: 100%; */
|
||||
/* display: flex; */
|
||||
/* flex-direction: row; */
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
|
@ -172,7 +168,7 @@ div#search-bar {
|
|||
}
|
||||
}
|
||||
|
||||
#index header {
|
||||
#index > header {
|
||||
width: min-content;
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -233,10 +229,12 @@ footer {
|
|||
|
||||
.tag,
|
||||
.caption {
|
||||
font-family: Noto sans, sans-serif;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
text-decoration-line: none;
|
||||
margin: 2px;
|
||||
border-radius: 3px 3px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -244,6 +242,7 @@ footer {
|
|||
color: var(--almost-white);
|
||||
text-decoration-line: none;
|
||||
padding: 0.13em;
|
||||
background-color: var(--main-shadow);
|
||||
|
||||
&>span:first-child {
|
||||
font-family: monospace;
|
||||
|
|
@ -251,9 +250,6 @@ footer {
|
|||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
&>span:nth-child(2) {
|
||||
background-color: var(--haughty-gray);
|
||||
}
|
||||
|
||||
&>span:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
|
@ -283,6 +279,7 @@ footer {
|
|||
.cover {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.caption {
|
||||
|
|
@ -292,17 +289,21 @@ footer {
|
|||
}
|
||||
|
||||
img {
|
||||
filter: blur(15px);
|
||||
filter: blur(30px);
|
||||
}
|
||||
|
||||
#index img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.cover {
|
||||
width: 148px;
|
||||
/* width: 148px; */
|
||||
height: auto;
|
||||
opacity: 0.93;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
#index #center {
|
||||
& #controls {
|
||||
width: calc(min-content / 2);
|
||||
height: min-content;
|
||||
|
|
@ -325,9 +326,9 @@ img {
|
|||
}
|
||||
|
||||
& #results {
|
||||
display: grid;
|
||||
width: 65%;
|
||||
/* display: grid; */
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
width: 65%;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
|
|
@ -349,9 +350,20 @@ img {
|
|||
Arial,
|
||||
sans-serif;
|
||||
|
||||
& img {
|
||||
|
||||
& #image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 95vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
& #image-wrapper img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-height: 95vh;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
/* width: auto; */
|
||||
/* height: auto; */
|
||||
}
|
||||
|
|
@ -374,7 +386,7 @@ img {
|
|||
font-size: large;
|
||||
}
|
||||
|
||||
& div {
|
||||
& div:last-child {
|
||||
margin-bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue