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

Redo clipboard.html css to auto grid instead of specifying each.

Browse source
This commit is contained in:
voussoir 2019-08-26 15:15:02 -07:00
parent 5a1e4474a9
commit 14500080c8
1 changed files with 38 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,35 +24,37 @@
} }
#right #right
{ {
grid-row-gap: 8px;
grid-template: grid-template:
"add_tag_area" "toolbox" auto
"remove_tag_area" "message_area" 1fr
"refresh_metadata_area" / 1fr;
"searchhidden_area" }
"download_zip_area" #toolbox
"message_area" 1fr; {
display: grid;
grid-auto-rows: min-content;
grid-row-gap: 8px; grid-row-gap: 8px;
} }
#right > * #toolbox > *
{ {
display: flex; display: flex;
} }
#right input #toolbox input
{ {
margin: 0; margin: 0;
} }
#right .spinner_holder #toolbox .spinner_holder
{ {
display: flex; display: flex;
flex: 1; flex: 1;
} }
#right button #toolbox button
{ {
flex: 1; flex: 1;
} }
#add_tag_area { grid-area: add_tag_area; } #toolbox { grid-area: toolbox; }
#remove_tag_area { grid-area: remove_tag_area; } #message_area { grid-area: message_area; }
#add_tag_area input, #add_tag_area input,
#remove_tag_area input #remove_tag_area input
{ {
@ -64,20 +66,14 @@
flex: initial; flex: initial;
} }
#refresh_metadata_area { grid-area: refresh_metadata_area; }
#searchhidden_area { grid-area: searchhidden_area; }
#download_zip_area { grid-area: download_zip_area; }
#message_area
{
grid-area: message_area;
}
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body #content_body
{ {
grid-template: grid-template:
"left" 1fr "left" 1fr
"right" 200px; "right" 200px
/ 1fr !important;
} }
#right #right
{ {
@ -89,13 +85,8 @@
height: 200px; height: 200px;
grid-template: grid-template:
"add_tag_area message_area" "toolbox message_area" 1fr
"remove_tag_area message_area" /1fr minmax(50px, 200px);
"refresh_metadata_area message_area"
"searchhidden_area message_area"
"download_zip_area message_area"
"extra message_area" 1fr
/1fr minmax(50px, 200px);
} }
} }
</style> </style>
@ -114,27 +105,29 @@
</div> </div>
</div> </div>
<div id="right"> <div id="right">
<div id="add_tag_area"> <div id="toolbox">
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist"> <div id="add_tag_area">
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button> <input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
</div> <button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>
</div>
<div id="remove_tag_area"> <div id="remove_tag_area">
<input type="text" id="remove_tag_textbox" list="tag_autocomplete_datalist"> <input type="text" id="remove_tag_textbox" list="tag_autocomplete_datalist">
<button class="red_button" id="remove_tag_button" onclick="remove_tag_form();">Remove tag</button> <button class="red_button" id="remove_tag_button" onclick="remove_tag_form();">Remove tag</button>
</div> </div>
<div id="refresh_metadata_area"> <div id="refresh_metadata_area">
<button class="green_button button_with_spinner" id="refresh_metadata_button" data-spinner-delay="500" data-onclick="refresh_metadata_form();">Refresh metadata</button> <button class="green_button button_with_spinner" id="refresh_metadata_button" data-spinner-delay="500" data-onclick="refresh_metadata_form();">Refresh metadata</button>
</div> </div>
<div id="searchhidden_area"> <div id="searchhidden_area">
<button class="yellow_button" id="set_searchhidden_button" onclick="set_searchhidden_form()">Searchhide</button> <button class="yellow_button" id="set_searchhidden_button" onclick="set_searchhidden_form()">Searchhide</button>
<button class="yellow_button" id="unset_searchhidden_button" onclick="unset_searchhidden_form()">Unhide</button> <button class="yellow_button" id="unset_searchhidden_button" onclick="unset_searchhidden_form()">Unhide</button>
</div> </div>
<div id="download_zip_area"> <div id="download_zip_area">
<button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button> <button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button>
</div>
</div> </div>
<div id="message_area"> <div id="message_area">