diginaut/digimarks
1
0
Fork 0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 22:05:09 +01:00
Code Issues Releases Wiki Activity

Reworked image cards, added footer layout to digui

Browse Source
This commit is contained in:
Michiel Scholten
2025-05-24 22:38:14 +02:00
parent 343ac01086
commit 3e917efe37
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/digimarks/static/css/digui.css
View File

@@ -126,11 +126,12 @@ body {
height: 125vh; height: 125vh;
font-family: var(--font-family), sans-serif; font-family: var(--font-family), sans-serif;
margin-top: 3rem; margin-top: 3rem;
padding: 30px; /*padding: 30px;*/
} }
main { main {
color: var(--text-color); color: var(--text-color);
padding-top: .5em;
} }
header { header {
@@ -144,7 +145,7 @@ header {
align-items: center; align-items: center;
/*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/ /*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/
/*box-shadow: 0 0 5px 0 #999;*/ /*box-shadow: 0 0 5px 0 #999;*/
box-shadow: var(--shadow-color); box-shadow: 0 0 5px var(--shadow-color);
} }
header * { header * {
@@ -251,7 +252,7 @@ button:focus {
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
/*margin: 1em;*/ /*margin: 1em;*/
padding: 1em; /*padding: 1em;*/
} }
[data-theme='nebula'] .card, [data-theme='nebula'] .card,
@@ -270,6 +271,7 @@ button:focus {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 1rem; gap: 1rem;
padding: 1em;
} }
.card-body > * { .card-body > * {
@@ -277,6 +279,15 @@ button:focus {
} }
.card .card-image { .card .card-image {
width: 100%;
}
.card .card-image img {
width: 100%;
border-radius: var(--border-radius);
}
.card .card-thumb {
width: 72px; width: 72px;
/*min-width: 60px;*/ /*min-width: 60px;*/
/*max-width: 100px;*/ /*max-width: 100px;*/
@@ -284,10 +295,14 @@ button:focus {
/*box-sizing: inherit;*/ /*box-sizing: inherit;*/
} }
.card .card-image img { .card .card-thumb img {
width: 72px; width: 72px;
} }
.card .card-action {
padding: .5em;
}
.card .meta { .card .meta {
filter: brightness(80%); filter: brightness(80%);
color: var(--text-color); color: var(--text-color);
@@ -298,6 +313,8 @@ button:focus {
flex-direction: row-reverse; flex-direction: row-reverse;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
padding: .3em;
} }
/* /*
@@ -307,6 +324,7 @@ button:focus {
} }
*/ */
/** Tags/chips */
.chip { .chip {
font-size: .8rem; font-size: .8rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -321,6 +339,28 @@ button:focus {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
/** Status */
.error { .error {
color: var(--error-color); color: var(--error-color);
} }
footer {
/*background-color: var(--secondary-background-color);*/
margin-top: 1rem;
padding: 2rem 1rem;
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
footer .column {
display: inline-grid;
}
footer h2 {
text-align: left;
margin-bottom: 0;
}

2
src/digimarks/templates/user_index.html
View File

@@ -60,7 +60,7 @@
<template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id"> <template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-image" x-show="bookmark.favicon"><img <div class="card-thumb" x-show="bookmark.favicon"><img
x-bind:src="'/content/favicons/' + bookmark.favicon"></div> x-bind:src="'/content/favicons/' + bookmark.favicon"></div>
<div class="statuses"> <div class="statuses">
<div x-show="bookmark.starred" class="star"><i class="fa-fw fa-solid fa-star"></i> <div x-show="bookmark.starred" class="star"><i class="fa-fw fa-solid fa-star"></i>