voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign album grid cards to look more like photo cards.

Browse source 
Unfortunately these cards are taller rather than wider so the
already-neglected unlink buttom becomes even more horizontally crammed.
That's going to need a big fixup anyway.
This commit is contained in:
voussoir 2020-04-02 22:28:36 -07:00
parent 5a394c4376
commit 83c2ed7882
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontends/etiquette_flask/static/css/photo_card.css
View file

@ -22,12 +22,14 @@
display: inline-grid; display: inline-grid;
vertical-align: top; vertical-align: top;
grid-template: grid-template:
"thumbnail title" 1fr "thumbnail" auto
"thumbnail metadata" auto "title" auto
/auto 1fr; "metadata" auto
/1fr;
max-width: 325px; min-width: 150px;
width: 100%; max-width: 300px;
height: 225px;
margin: 8px; margin: 8px;
padding: 8px; padding: 8px;
} }
@ -35,9 +37,9 @@
{ {
grid-area: thumbnail; grid-area: thumbnail;
background-color: var(--color_site_transparency); background-color: var(--color_site_transparency);
width: 64px; display: flex;
height: 64px; width: 100%;
margin-right: 8px; height: 150px;
} }
.album_card_thumbnail img .album_card_thumbnail img
{ {
@ -69,6 +71,10 @@
display: none; display: none;
} }
/* ########################################################################## */
/* ########################################################################## */
/* ########################################################################## */
.photo_card .photo_card
{ {
background-color: var(--color_theme_secondary); background-color: var(--color_theme_secondary);