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

Variety of html, css, jinja tweaks.

Browse source 
- common.css, removed html and body margins so that using
  full height #content_body will not create a scrollbar.
  Simplifies the "fill remaining space" construct I use a lot.
  Added more css variables, I'm thinking about future theming.
- photo_card.css, slightly heightened to improve name clipping.
- clipboard.html, added a small screen mode.
- login.html, centered the boxes and fixed message area being
  too small due to a previous change.
- search.html, simplified some conditional texts.
This commit is contained in:
voussoir 2018-10-21 18:46:27 -07:00
parent b6890bfd2c
commit 588bf59b88
8 changed files with 184 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,10 +17,34 @@ Organization:
--color_site_secondary: #ffffd4; --color_site_secondary: #ffffd4;
--color_site_transparency: rgba(0, 0, 0, 0.1); --color_site_transparency: rgba(0, 0, 0, 0.1);
--color_site_dropshadow: rgba(0, 0, 0, 0.25); --color_site_dropshadow: rgba(0, 0, 0, 0.25);
--color_text_normal: black;
--color_text_link: blue;
--color_text_placeholder: gray;
--color_3d_shadow: rgba(0, 0, 0, 0.5); --color_3d_shadow: rgba(0, 0, 0, 0.5);
--color_3d_highlight: rgba(255, 255, 255, 0.5); --color_3d_highlight: rgba(255, 255, 255, 0.5);
} }
html
{
height: 100vh;
}
body
{
height: 100%;
margin: 0;
}
* { color: var(--color_text_normal); }
a { color: var(--color_text_link); }
input::placeholder
{
color: var(--color_text_placeholder);
opacity: 1;
}
body body
{ {
display: grid; display: grid;
@ -31,6 +55,7 @@ body
background-color: var(--color_site_theme); background-color: var(--color_site_theme);
} }
#header #header
{ {
grid-area: header; grid-area: header;
@ -38,7 +63,7 @@ body
grid-template-columns: 1fr 1fr 1fr 1fr auto; grid-template-columns: 1fr 1fr 1fr 1fr auto;
grid-template-rows: auto; grid-template-rows: auto;
margin-bottom: 4px; margin: 8px;
background-color: var(--color_site_transparency); background-color: var(--color_site_transparency);
} }
@ -46,11 +71,16 @@ body
{ {
grid-area: content_body; grid-area: content_body;
display: grid; display: grid;
grid-auto-rows: min-content;
margin: 8px;
margin-top: 0;
} }
#header button #header button
{ {
border: 0; border: 0;
cursor: pointer; cursor: pointer;
background-color: transparent;
} }
.header_element .header_element
{ {
@ -79,6 +109,11 @@ pre
display: none !important; display: none !important;
} }
button,
button *
{
color: black;
}
.gray_button .gray_button
{ {
background-color: #cccccc; background-color: #cccccc;
@ -143,9 +178,12 @@ is hovered over.
.tag_object .tag_object
{ {
border-radius: 2px; border-radius: 2px;
padding-left: 1px;
padding-right: 1px;
background-color: #fff; background-color: #fff;
color: blue;
font-size: 0.9em; font-size: 0.9em;
text-decoration: none; text-decoration: none;
font-family: monospace; font-family: monospace;

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

@ -27,15 +27,14 @@
position: relative; position: relative;
display: inline-grid; display: inline-grid;
vertical-align: top; vertical-align: top;
grid-template-columns: auto auto; grid-template:
grid-template-rows: auto 1fr auto; "thumbnail thumbnail" auto
grid-template-areas: "filename filename" 1fr
"thumbnail thumbnail" "tags metadata" auto
"filename filename" /auto auto;
"tags metadata";
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
height: 200px; height: 210px;
padding: 8px; padding: 8px;
margin: 8px; margin: 8px;
@ -75,7 +74,6 @@
justify-self: start; justify-self: start;
grid-area: filename; grid-area: filename;
z-index: 1;
overflow: hidden; overflow: hidden;
min-width: 100%; min-width: 100%;
@ -98,6 +96,7 @@
{ {
overflow: visible; overflow: visible;
max-height: none; max-height: none;
z-index: 1;
} }
.photo_card_tags .photo_card_tags
{ {

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

@ -94,6 +94,13 @@ li:hover .remove_child_button
{ {
display: initial; display: initial;
} }
#photo_list
{
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
</style> </style>
</head> </head>
@ -188,11 +195,11 @@ li:hover .remove_child_button
{% else %} {% else %}
<a href="?view=grid">Grid view</a> <a href="?view=grid">Grid view</a>
{% endif %} {% endif %}
<ul> <div id="photo_list">
{% for photo in photos %} {% for photo in photos %}
{{photo_card.create_photo_card(photo, view=view)}} {{photo_card.create_photo_card(photo, view=view)}}
{% endfor %} {% endfor %}
</ul> </div>
{% endif %} {% endif %}
<!-- Download links --> <!-- Download links -->

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

@ -16,14 +16,12 @@
<script src="/static/js/tag_autocomplete.js"></script> <script src="/static/js/tag_autocomplete.js"></script>
<style> <style>
body #content_body
{ {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template:
grid-template-columns: 1fr 300px; "left right" 1fr
grid-template-areas: /1fr 300px;
"header header"
"left right";
} }
#header #header
{ {
@ -39,58 +37,100 @@ body
position: fixed; position: fixed;
right: 8px; right: 8px;
bottom: 8px; bottom: 8px;
top: 30px; top: 34px;
width: 300px; width: 300px;
grid-area: right; grid-area: right;
display: grid; display: grid;
grid-template-rows: 75px 75px 75px 75px 75px auto;
grid-template-areas: grid-template:
"add_tag_area" "add_tag_area"
"remove_tag_area" "remove_tag_area"
"refresh_metadata_area" "refresh_metadata_area"
"searchhidden_area" "searchhidden_area"
"download_zip_area" "download_zip_area"
"message_area"; "message_area" 1fr;
background-color: var(--color_site_transparency); background-color: var(--color_site_transparency);
} }
#right > *
{
display: flex;
padding: 8px;
}
#right button
{
flex: 1;
}
#add_tag_area #add_tag_area
{ {
grid-area: add_tag_area; grid-area: add_tag_area;
margin: auto;
} }
#remove_tag_area #remove_tag_area
{ {
grid-area: remove_tag_area; grid-area: remove_tag_area;
margin: auto; }
#add_tag_area input,
#remove_tag_area input
{
flex: 1;
}
#add_tag_area button,
#remove_tag_area button
{
flex: initial;
} }
#refresh_metadata_area #refresh_metadata_area
{ {
grid-area: refresh_metadata_area; grid-area: refresh_metadata_area;
margin: auto;
} }
#searchhidden_area #searchhidden_area
{ {
grid-area: searchhidden_area; grid-area: searchhidden_area;
margin: auto;
} }
#download_zip_area #download_zip_area
{ {
grid-area: download_zip_area; grid-area: download_zip_area;
margin: auto;
} }
#message_area #message_area
{ {
grid-area: message_area; grid-area: message_area;
margin: 8px; margin: 8px;
} }
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 200px;
}
#right
{
top: unset;
width: unset;
left: 8px;
right: 8px;
bottom: 8px;
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);
}
}
</style> </style>
</head> </head>
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body">
<div id="left"> <div id="left">
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span> <span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
<button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button> <button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
@ -113,10 +153,8 @@ body
</div> </div>
<div id="searchhidden_area"> <div id="searchhidden_area">
<span>
<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>
</span>
</div> </div>
<div id="download_zip_area"> <div id="download_zip_area">
@ -126,6 +164,7 @@ body
<div id="message_area"> <div id="message_area">
</div> </div>
</div> </div>
</div>
</body> </body>

11
frontends/etiquette_flask/templates/login.html
View file

@ -21,15 +21,8 @@ button
#content_body #content_body
{ {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 900px; max-width: 900px;
margin-left: auto; margin: auto;
margin-right: auto;
} }
#login_register_box #login_register_box
@ -60,7 +53,7 @@ button
#message_area #message_area
{ {
width: 100%; width: 100%;
max-height: 300px; height: 150px;
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {

59
frontends/etiquette_flask/templates/photo.html
View file

@ -27,49 +27,43 @@ body
flex-direction: row; flex-direction: row;
} }
#left #left
{
display: flex;
flex-direction: column;
}
#right
{
display: flex;
flex: 1;
}
#editor_holder
{ {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: min-content;
max-width: 300px; max-width: 300px;
/*padding: 8px;*/ /*padding: 8px;*/
background-color: var(--color_site_transparency);
}
#right
{
flex: 1;
display: flex;
} }
#editor_area #editor_area
{ {
flex: 3;
padding: 8px; padding: 8px;
background-color: var(--color_site_transparency);
word-wrap: break-word; word-wrap: break-word;
} }
#message_area_bg #refresh_metadata_button
{ {
display: flex; font-size: 11px;
flex: 0 1 100%; }
#before_after_links
height: 100%; {
min-height: 30px; width: max-content;
padding: 8px; margin: auto;
background-color: var(--color_site_transparency);
} }
#message_area #message_area
{ {
flex: auto; display: flex;
min-height: 30px;
max-height: none; max-height: none;
margin: 8px;
} }
.photo_viewer .photo_viewer
{ {
@ -112,10 +106,6 @@ body
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
#refresh_metadata_button
{
font-size: 11px;
}
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body #content_body
@ -141,13 +131,9 @@ body
#right #right
{ {
flex: none; flex: none;
height: calc(100% - 20px);
}
#editor_holder
{
display: flex;
flex-direction: row; flex-direction: row;
max-width: none; max-width: none;
height: calc(100% - 20px);
} }
#message_area #message_area
{ {
@ -164,7 +150,6 @@ body
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body"> <div id="content_body">
<div id="left"> <div id="left">
<div id="editor_holder">
<div id="editor_area"> <div id="editor_area">
<!-- TAG INFO --> <!-- TAG INFO -->
<h4>Tags</h4> <h4>Tags</h4>
@ -224,17 +209,13 @@ body
</ul> </ul>
{% endif %} {% endif %}
<div> <div id="before_after_links">
<a href="/search?created=-{{photo.created}}">&larr;Before</a> <a href="/search?created=-{{photo.created}}">&larr;Before</a>
<span> | </span> <span> | </span>
<a href="/search?created={{photo.created}}-&orderby=created-asc">After&rarr;</a> <a href="/search?created={{photo.created}}-&orderby=created-asc">After&rarr;</a>
</div> </div>
</div> </div>
<div id="message_area_bg"> <div id="message_area"></div>
<div id="message_area">
</div>
</div>
</div>
</div> </div>
<div id="right"> <div id="right">

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

@ -29,8 +29,8 @@ form
#content_body #content_body
{ {
grid-template: grid-template:
"error_message_area error_message_area" "error_message_area error_message_area" auto
"left right" "left right" 1fr
/ 300px 1fr; / 300px 1fr;
} }
#error_message_area #error_message_area
@ -138,19 +138,19 @@ form
{% macro create_orderby_li(selected_column, selected_sorter) %} {% macro create_orderby_li(selected_column, selected_sorter) %}
<li class="search_builder_orderby_li"> <li class="search_builder_orderby_li">
<select> <select>
<option value="created" {%if selected_column=="created"%}selected{%endif%} >Creation date</option> <option value="created" {{"selected" if selected_column=="created" else ""}} >Creation date</option>
<option value="area" {%if selected_column=="area"%}selected{%endif%} >Area</option> <option value="area" {{"selected" if selected_column=="area" else ""}} >Area</option>
<option value="width" {%if selected_column=="width"%}selected{%endif%} >Width</option> <option value="width" {{"selected" if selected_column=="width" else ""}} >Width</option>
<option value="height" {%if selected_column=="height"%}selected{%endif%} >Height</option> <option value="height" {{"selected" if selected_column=="height" else ""}} >Height</option>
<option value="ratio" {%if selected_column=="ratio"%}selected{%endif%} >Aspect Ratio</option> <option value="ratio" {{"selected" if selected_column=="ratio" else ""}} >Aspect Ratio</option>
<option value="bytes" {%if selected_column=="bytes"%}selected{%endif%} >File size</option> <option value="bytes" {{"selected" if selected_column=="bytes" else ""}} >File size</option>
<option value="duration" {%if selected_column=="duration"%}selected{%endif%} >Duration</option> <option value="duration" {{"selected" if selected_column=="duration" else ""}} >Duration</option>
<option value="tagged_at" {%if selected_column=="tagged_at"%}selected{%endif%}>Recently tagged</option> <option value="tagged_at" {{"selected" if selected_column=="tagged_at" else ""}} >Recently tagged</option>
<option value="random" {%if selected_column=="random"%}selected{%endif%} >Random</option> <option value="random" {{"selected" if selected_column=="random" else ""}} >Random</option>
</select> </select>
<select> <select>
<option value="desc" {%if selected_sorter=="desc"%}selected{%endif%} >Descending</option> <option value="desc" {{"selected" if selected_sorter=="desc" else ""}} >Descending</option>
<option value="asc" {%if selected_sorter=="asc"%}selected{%endif%} >Ascending</option> <option value="asc" {{"selected" if selected_sorter=="asc" else ""}} >Ascending</option>
</select> </select>
<button class="remove_tag_button_perm red_button" onclick="orderby_remove_hook(this);"></button> <button class="remove_tag_button_perm red_button" onclick="orderby_remove_hook(this);"></button>
</li> </li>
@ -212,84 +212,81 @@ form
<span>Min-max values</span> <span>Min-max values</span>
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['area']%}{{search_kwargs['area']}}{%endif%}" {%if search_kwargs['area']%} value="{{search_kwargs['area']}}" {%endif%}
name="area" placeholder="Area: 1m-2m"> name="area" placeholder="Area: 1m-2m">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['width']%}{{search_kwargs['width']}}{%endif%}" {%if search_kwargs['width']%} value="{{search_kwargs['width']}}" {%endif%}
name="width" placeholder="Width: 1k-2k"> name="width" placeholder="Width: 1k-2k">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['height']%}{{search_kwargs['height']}}{%endif%}" {%if search_kwargs['height']%} value="{{search_kwargs['height']}}" {%endif%}
name="height" placeholder="Height: 1k-2k"> name="height" placeholder="Height: 1k-2k">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['ratio']%}{{search_kwargs['ratio']}}{%endif%}" {%if search_kwargs['ratio']%} value="{{search_kwargs['ratio']}}" {%endif%}
name="ratio" placeholder="Aspect Ratio: 1.7-2"> name="ratio" placeholder="Aspect Ratio: 1.7-2">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['bytes']%}{{search_kwargs['bytes']}}{%endif%}" {%if search_kwargs['bytes']%} value="{{search_kwargs['bytes']}}" {%endif%}
name="bytes" placeholder="File Size: 1mb-2mb"> name="bytes" placeholder="File Size: 1mb-2mb">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['duration']%}{{search_kwargs['duration']}}{%endif%}" {%if search_kwargs['duration']%} value="{{search_kwargs['duration']}}" {%endif%}
name="duration" placeholder="Duration: 10:00-20:00"> name="duration" placeholder="Duration: 10:00-20:00">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['created']%}{{search_kwargs['created']}}{%endif%}" {%if search_kwargs['created']%} value="{{search_kwargs['created']}}" {%endif%}
name="created" placeholder="Created: 1483228800-1514764800"> name="created" placeholder="Created: 1483228800-1514764800">
<br> <br>
<span>Other filters</span> <span>Other filters</span>
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['filename']%}{{search_kwargs['filename']}}{%endif%}" {%if search_kwargs['filename']%} value="{{search_kwargs['filename']}}" {%endif%}
name="filename" placeholder="Filename"> name="filename" placeholder="Filename">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['mimetype']%}{{search_kwargs['mimetype']}}{%endif%}" {%if search_kwargs['mimetype']%} value="{{search_kwargs['mimetype']}}" {%endif%}
name="mimetype" placeholder="Mimetype(s)"> name="mimetype" placeholder="Mimetype(s)">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['extension']%}{{search_kwargs['extension']}}{%endif%}" {%if search_kwargs['extension']%} value="{{search_kwargs['extension']}}" {%endif%}
name="extension" placeholder="Extension(s)"> name="extension" placeholder="Extension(s)">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['extension_not']%}{{search_kwargs['extension_not']}}{%endif%}" {%if search_kwargs['extension_not']%} value="{{search_kwargs['extension_not']}}" {%endif%}
name="extension_not" placeholder="Forbid extension(s)"> name="extension_not" placeholder="Forbid extension(s)">
<input type="text" class="basic_param" <input type="text" class="basic_param"
value="{%if search_kwargs['author']%}{{search_kwargs['author']}}{%endif%}" {%if search_kwargs['author']%} value="{{search_kwargs['author']}}" {%endif%}
name="author" placeholder="Author"> name="author" placeholder="Author">
<select name="limit" class="basic_param"> <select name="limit" class="basic_param">
{% set limit_options = [20, 50, 100] %} {% set limit_options = [20, 50, 100, 250] %}
{% if search_kwargs['limit'] not in limit_options %} {% if search_kwargs['limit'] not in limit_options %}
{% do limit_options.append(search_kwargs['limit']) %} {% do limit_options.append(search_kwargs['limit']) %}
{% do limit_options.sort() %} {% do limit_options.sort() %}
{% endif %} {% endif %}
{% for limit_option in limit_options %} {% for limit_option in limit_options %}
<option{{-' '-}} <option value="{{limit_option}}" {{"selected" if search_kwargs['limit'] == limit_option else ""}}>
value="{{limit_option}}"{{-''-}} {{- limit_option }} items{{''-}}
{{-" selected" if search_kwargs['limit'] == limit_option else ""-}}
>
{{- limit_option }} items{{-''-}}
</option> </option>
{% endfor %} {% endfor %}
</select> </select>
<select name="has_tags" class="basic_param"> <select name="has_tags" class="basic_param">
<option value="" {%if search_kwargs['has_tags'] == None %}selected{%endif%}>Tagged and untagged</option> <option value="" {{"selected" if search_kwargs['has_tags']==None else ""}}>Tagged and untagged</option>
<option value="yes"{%if search_kwargs['has_tags'] == True %}selected{%endif%}>Tagged only</option> <option value="yes" {{"selected" if search_kwargs['has_tags']==True else ""}}>Tagged only</option>
<option value="no" {%if search_kwargs['has_tags'] == False %}selected{%endif%}>Untagged only</option> <option value="no" {{"selected" if search_kwargs['has_tags']==False else ""}}>Untagged only</option>
</select> </select>
<select name="has_thumbnail" class="basic_param"> <select name="has_thumbnail" class="basic_param">
<option value="" {%if search_kwargs['has_thumbnail'] == None %}selected{%endif%}>Thumbnail doesn't matter</option> <option value="" {{"selected" if search_kwargs['has_thumbnail']==None else ""}}>Thumbnail doesn't matter</option>
<option value="yes"{%if search_kwargs['has_thumbnail'] == True %}selected{%endif%}>Has thumbnail</option> <option value="yes" {{"selected" if search_kwargs['has_thumbnail']==True else ""}}>Has thumbnail</option>
<option value="no" {%if search_kwargs['has_thumbnail'] == False %}selected{%endif%}>No thumbnail</option> <option value="no" {{"selected" if search_kwargs['has_thumbnail']==False else ""}}>No thumbnail</option>
</select> </select>
<select name="view" class="basic_param"> <select name="view" class="basic_param">
<option value="grid" {%if search_kwargs['view'] == "grid" %}selected{%endif%}>Grid</option> <option value="grid" {{"selected" if search_kwargs['view']=="grid" else ""}}>Grid</option>
<option value="list" {%if search_kwargs['view'] == "list" %}selected{%endif%}>List</option> <option value="list" {{"selected" if search_kwargs['view']=="list" else ""}}>List</option>
</select> </select>
<button type="submit" id="search_go_button" class="green_button" value="">Search</button> <button type="submit" id="search_go_button" class="green_button" value="">Search</button>
</form> </form>
@ -297,12 +294,12 @@ form
<span>Tags on this page (click to join query):</span> <span>Tags on this page (click to join query):</span>
<ul> <ul>
{% for tag in total_tags %} {% for tag in total_tags %}
<li>{{-tag_object.tag_object( <li>{{tag_object.tag_object(
tag, tag,
extra_classes="tags_on_this_page", extra_classes="tags_on_this_page",
link='void', link='void',
with_alt_description=True, with_alt_description=True,
)-}}</li> )}}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}

19
frontends/etiquette_flask/templates/tags.html
View file

@ -22,7 +22,6 @@
} }
#content_body #content_body
{ {
display: grid;
grid-template: grid-template:
"left right" "left right"
/1fr 300px; /1fr 300px;
@ -41,15 +40,14 @@
position: fixed; position: fixed;
right: 8px; right: 8px;
bottom: 8px; bottom: 8px;
top: 30px; top: 34px;
width: 300px; width: 300px;
grid-area: right; grid-area: right;
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template:
grid-template-areas: "editor_area" 1fr
"editor_area" "message_area" 1fr;
"message_area";
background-color: var(--color_site_transparency); background-color: var(--color_site_transparency);
} }
@ -87,10 +85,9 @@
bottom: 8px; bottom: 8px;
height: 150px; height: 150px;
grid-template-areas: grid-template:
"editor_area message_area"; "editor_area message_area" 1fr
grid-template-rows: 1fr; /1fr minmax(50px, 200px);
grid-template-columns: 1fr 1fr;
} }
} }
</style> </style>
@ -194,7 +191,7 @@
<div id="right"> <div id="right">
<div id="editor_area"> <div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus> <input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button green_button" id="add_tag_button" onclick="easybake_form();">add</button> <button class="add_tag_button green_button" id="add_tag_button" onclick="easybake_form();">bake</button>
</div> </div>
<div id="message_area"> <div id="message_area">
</div> </div>