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
{
grid-row-gap: 8px;
grid-template:
"add_tag_area"
"remove_tag_area"
"refresh_metadata_area"
"searchhidden_area"
"download_zip_area"
"message_area" 1fr;
"toolbox" auto
"message_area" 1fr
/ 1fr;
}
#toolbox
{
display: grid;
grid-auto-rows: min-content;
grid-row-gap: 8px;
}
#right > *
#toolbox > *
{
display: flex;
}
#right input
#toolbox input
{
margin: 0;
}
#right .spinner_holder
#toolbox .spinner_holder
{
display: flex;
flex: 1;
}
#right button
#toolbox button
{
flex: 1;
}
#add_tag_area { grid-area: add_tag_area; }
#remove_tag_area { grid-area: remove_tag_area; }
#toolbox { grid-area: toolbox; }
#message_area { grid-area: message_area; }
#add_tag_area input,
#remove_tag_area input
{
@ -64,20 +66,14 @@
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)
{
#content_body
{
grid-template:
"left" 1fr
"right" 200px;
"right" 200px
/ 1fr !important;
}
#right
{
@ -89,13 +85,8 @@
height: 200px;
grid-template:
"add_tag_area message_area"
"remove_tag_area message_area"
"refresh_metadata_area message_area"
"searchhidden_area message_area"
"download_zip_area message_area"
"extra message_area" 1fr
/1fr minmax(50px, 200px);
"toolbox message_area" 1fr
/1fr minmax(50px, 200px);
}
}
</style>
@ -114,27 +105,29 @@
</div>
</div>
<div id="right">
<div id="add_tag_area">
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>
</div>
<div id="toolbox">
<div id="add_tag_area">
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>
</div>
<div id="remove_tag_area">
<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>
</div>
<div id="remove_tag_area">
<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>
</div>
<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>
</div>
<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>
</div>
<div id="searchhidden_area">
<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>
</div>
<div id="searchhidden_area">
<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>
</div>
<div id="download_zip_area">
<button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button>
<div id="download_zip_area">
<button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button>
</div>
</div>
<div id="message_area">