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

Redesign album grid cards to look more like photo cards. 

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.
master
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);