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

Create css folder. Move photo_card rules to own file.

Browse source
This commit is contained in:
voussoir 2018-02-24 00:58:43 -08:00
parent 840185072b
commit aabcb61a9c
5 changed files with 116 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
frontends/etiquette_flask/static/common.css
View file

@ -118,120 +118,6 @@ is hovered over.
display:inline;
}
.photo_card
{
background-color: #ffffd4;
}
.photo_card_list
{
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
grid-template-areas:
"checkbox filename metadata";
max-width: 800px;
margin: 8px;
padding: 4px;
}
.photo_card_list:hover
{
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.photo_card_list .photo_card_selector_checkbox
{
grid-area: checkbox;
}
.photo_card_grid
{
position: relative;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"thumbnail thumbnail"
"filename filename"
"tags metadata";
min-width: 150px;
max-width: 300px;
height: 200px;
padding: 8px;
margin: 8px;
border-radius: 8px;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.photo_card_grid .photo_card_selector_checkbox
{
position:absolute;
left:5px;
top:5px;
}
.photo_card_thumbnail
{
grid-area: thumbnail;
align-self: start;
justify-self: center;
}
.photo_card_thumbnail img
{
max-width: 100%;
}
.photo_card_filename
{
/*
The width of photo cards should be based on the aspect ratio of the
thumbnail image. Previously, I had problems where the card would be wider
than necessary because the file had a long name.
The min-width:100% + width:0 prevent the info div from controlling
card size, so we can prioritize the thumbnail instead.
*/
justify-self: start;
grid-area: filename;
z-index: 1;
overflow: hidden;
min-width: 100%;
width: 0;
max-height: 30px;
background-color: inherit;
word-break: break-word;
font-size: 12.8px;
}
.photo_card_grid .photo_card_filename
{
align-self: start;
}
.photo_card_list .photo_card_filename
{
align-self: center;
}
.photo_card_filename:hover
{
overflow: visible;
max-height: none;
}
.photo_card_tags
{
grid-area: tags;
align-self: end;
justify-self: start;
font-family: monospace;
font-size: 11px;
}
.photo_card_metadata
{
grid-area: metadata;
align-self: end;
justify-self: end;
font-family: monospace;
font-size: 11px;
}
.tag_object
{
border-radius: 2px;

113
frontends/etiquette_flask/static/css/photo_card.css Normal file
View file

@ -0,0 +1,113 @@
.photo_card
{
background-color: #ffffd4;
}
.photo_card_list
{
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
grid-template-areas:
"checkbox filename metadata";
max-width: 800px;
margin: 8px;
padding: 4px;
}
.photo_card_list:hover
{
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.photo_card_list .photo_card_selector_checkbox
{
grid-area: checkbox;
}
.photo_card_grid
{
position: relative;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"thumbnail thumbnail"
"filename filename"
"tags metadata";
min-width: 150px;
max-width: 300px;
height: 200px;
padding: 8px;
margin: 8px;
border-radius: 8px;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.photo_card_grid .photo_card_selector_checkbox
{
position:absolute;
left:5px;
top:5px;
}
.photo_card_thumbnail
{
grid-area: thumbnail;
align-self: start;
justify-self: center;
}
.photo_card_thumbnail img
{
max-width: 100%;
}
.photo_card_filename
{
/*
The width of photo cards should be based on the aspect ratio of the
thumbnail image. Previously, I had problems where the card would be wider
than necessary because the file had a long name.
The min-width:100% + width:0 prevent the info div from controlling
card size, so we can prioritize the thumbnail instead.
*/
justify-self: start;
grid-area: filename;
z-index: 1;
overflow: hidden;
min-width: 100%;
width: 0;
max-height: 30px;
background-color: inherit;
word-break: break-word;
font-size: 12.8px;
}
.photo_card_grid .photo_card_filename
{
align-self: start;
}
.photo_card_list .photo_card_filename
{
align-self: center;
}
.photo_card_filename:hover
{
overflow: visible;
max-height: none;
}
.photo_card_tags
{
grid-area: tags;
align-self: end;
justify-self: start;
font-family: monospace;
font-size: 11px;
}
.photo_card_metadata
{
grid-area: metadata;
align-self: end;
justify-self: end;
font-family: monospace;
font-size: 11px;
}

1
frontends/etiquette_flask/templates/album.html
View file

@ -8,6 +8,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/css/photo_card.css">
<script src="/static/common.js"></script>
<script src="/static/js/editor.js"></script>
<script src="/static/js/photoclipboard.js"></script>

1
frontends/etiquette_flask/templates/clipboard.html
View file

@ -7,6 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/css/photo_card.css">
<script src="/static/common.js"></script>
<script src="/static/js/photoclipboard.js"></script>

1
frontends/etiquette_flask/templates/search.html
View file

@ -9,6 +9,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/css/photo_card.css">
<script src="/static/common.js"></script>
<script src="/static/js/photoclipboard.js"></script>