Use more CSS grid on body and content_body.
I learned that grid-template lets you specify row and col sizes all at once.
This commit is contained in:
parent
c927653222
commit
ac79183603
4 changed files with 151 additions and 133 deletions
|
|
@ -1,7 +1,8 @@
|
||||||
/*
|
/*
|
||||||
Organization:
|
Organization:
|
||||||
{
|
{
|
||||||
display and flexing
|
own grid area name
|
||||||
|
display, flexing, gridding
|
||||||
positioning and alignment
|
positioning and alignment
|
||||||
bounding box (width, margin, overflow, ...)
|
bounding box (width, margin, overflow, ...)
|
||||||
borders and shadows
|
borders and shadows
|
||||||
|
|
@ -19,26 +20,32 @@ Organization:
|
||||||
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template:
|
||||||
|
"header" auto
|
||||||
|
"content_body" 1fr
|
||||||
|
/1fr;
|
||||||
|
|
||||||
background-color: var(--color_site_theme);
|
background-color: var(--color_site_theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre
|
|
||||||
{
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header
|
#header
|
||||||
{
|
{
|
||||||
|
grid-area: header;
|
||||||
display: grid;
|
display: grid;
|
||||||
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-bottom: 4px;
|
||||||
|
|
||||||
|
background-color: var(--color_site_transparency);
|
||||||
|
}
|
||||||
|
#content_body
|
||||||
|
{
|
||||||
|
grid-area: content_body;
|
||||||
|
display: grid;
|
||||||
}
|
}
|
||||||
#header button
|
#header button
|
||||||
{
|
{
|
||||||
|
|
@ -50,29 +57,27 @@ pre
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
background-color: var(--color_site_transparency);
|
|
||||||
}
|
}
|
||||||
.header_element:hover
|
.header_element:hover
|
||||||
{
|
{
|
||||||
background-color: var(--color_site_secondary);
|
background-color: var(--color_site_secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre
|
||||||
|
{
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
.editor_input
|
.editor_input
|
||||||
{
|
{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden
|
.hidden
|
||||||
{
|
{
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
#content_body
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gray_button
|
.gray_button
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,15 @@
|
||||||
<script src="/static/js/tag_autocomplete.js"></script>
|
<script src="/static/js/tag_autocomplete.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
body
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
#content_body
|
#content_body
|
||||||
{
|
{
|
||||||
/* Override common.css */
|
/* Override common.css */
|
||||||
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,14 +25,22 @@ form
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
#content_body
|
||||||
|
{
|
||||||
|
grid-template:
|
||||||
|
"error_message_area error_message_area"
|
||||||
|
"left right"
|
||||||
|
/ 300px 1fr;
|
||||||
|
}
|
||||||
#error_message_area
|
#error_message_area
|
||||||
{
|
{
|
||||||
|
grid-area: error_message_area;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.search_warning
|
.error_message
|
||||||
{
|
{
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|
||||||
|
|
@ -44,12 +52,10 @@ form
|
||||||
}
|
}
|
||||||
#left
|
#left
|
||||||
{
|
{
|
||||||
|
grid-area: left;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
max-width: 300px;
|
|
||||||
min-width: 300px;
|
|
||||||
width: 300px;
|
|
||||||
|
|
||||||
background-color: var(--color_site_transparency);
|
background-color: var(--color_site_transparency);
|
||||||
|
|
||||||
|
|
@ -57,18 +63,20 @@ form
|
||||||
}
|
}
|
||||||
#right
|
#right
|
||||||
{
|
{
|
||||||
|
grid-area: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
/* Keep the prev-next buttons from scraping the floor */
|
/* Keep the prev-next buttons from scraping the floor */
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
||||||
width: auto;
|
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
#content_body
|
#content_body
|
||||||
{
|
{
|
||||||
flex-direction: column-reverse;
|
grid-template:
|
||||||
|
"error_message_area"
|
||||||
|
"right"
|
||||||
|
"left";
|
||||||
}
|
}
|
||||||
#left
|
#left
|
||||||
{
|
{
|
||||||
|
|
@ -151,12 +159,12 @@ form
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{{header.make_header(session=session)}}
|
{{header.make_header(session=session)}}
|
||||||
<div id="error_message_area">
|
|
||||||
{% for warning in warnings %}
|
|
||||||
<span class="search_warning">{{warning}}</span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
<div id="content_body">
|
<div id="content_body">
|
||||||
|
<div id="error_message_area">
|
||||||
|
{% for warning in warnings %}
|
||||||
|
<span class="error_message">{{warning}}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
<div id="left">
|
<div id="left">
|
||||||
{% for tagtype in ["musts", "mays", "forbids"] %}
|
{% for tagtype in ["musts", "mays", "forbids"] %}
|
||||||
<div id="search_builder_{{tagtype}}" {% if search_kwargs["tag_expression"]%}style="display:none"{%endif%}>
|
<div id="search_builder_{{tagtype}}" {% if search_kwargs["tag_expression"]%}style="display:none"{%endif%}>
|
||||||
|
|
|
||||||
|
|
@ -15,19 +15,17 @@
|
||||||
<script src="/static/js/editor.js"></script>
|
<script src="/static/js/editor.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
grid-template-columns: 1fr 300px;
|
|
||||||
grid-template-areas:
|
|
||||||
"header header"
|
|
||||||
"left right";
|
|
||||||
}
|
|
||||||
#header
|
#header
|
||||||
{
|
{
|
||||||
grid-area: header;
|
grid-area: header;
|
||||||
}
|
}
|
||||||
|
#content_body
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
grid-template:
|
||||||
|
"left right"
|
||||||
|
/1fr 300px;
|
||||||
|
}
|
||||||
#left
|
#left
|
||||||
{
|
{
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
@ -73,14 +71,11 @@ body
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 800px)
|
@media screen and (max-width: 800px)
|
||||||
{
|
{
|
||||||
body
|
#content_body
|
||||||
{
|
{
|
||||||
grid-template-columns: 1fr;
|
grid-template:
|
||||||
grid-template-rows: auto 1fr 150px;
|
"left" 1fr
|
||||||
grid-template-areas:
|
"right" 150px;
|
||||||
"header"
|
|
||||||
"left"
|
|
||||||
"right";
|
|
||||||
}
|
}
|
||||||
#right
|
#right
|
||||||
{
|
{
|
||||||
|
|
@ -103,101 +98,105 @@ body
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{{header.make_header(session=session)}}
|
{{header.make_header(session=session)}}
|
||||||
<div id="left">
|
<div id="content_body">
|
||||||
{% if specific_tag %}
|
<div id="left">
|
||||||
<div id="tag_metadata">
|
{% if specific_tag %}
|
||||||
<h2>
|
<div id="tag_metadata">
|
||||||
<span
|
<h2>
|
||||||
id="name_text"
|
<span
|
||||||
data-editor-id="name"
|
id="name_text"
|
||||||
data-editor-placeholder="name"
|
data-editor-id="name"
|
||||||
|
data-editor-placeholder="name"
|
||||||
|
>
|
||||||
|
{{-specific_tag.name-}}
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<pre
|
||||||
|
id="description_text"
|
||||||
|
data-editor-id="description"
|
||||||
|
data-editor-placeholder="description"
|
||||||
|
{% if specific_tag.description == "" %}class="hidden"{% endif -%}
|
||||||
>
|
>
|
||||||
{{-specific_tag.name-}}
|
{{-specific_tag.description-}}
|
||||||
</span>
|
</pre>
|
||||||
</h2>
|
</div>
|
||||||
<pre
|
|
||||||
id="description_text"
|
|
||||||
data-editor-id="description"
|
|
||||||
data-editor-placeholder="description"
|
|
||||||
{% if specific_tag.description == "" %}class="hidden"{% endif -%}
|
|
||||||
>
|
|
||||||
{{-specific_tag.description-}}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% set parents = specific_tag.get_parents() %}
|
{% set parents = specific_tag.get_parents() %}
|
||||||
{% if parents %}
|
{% if parents %}
|
||||||
<ul>
|
<ul>
|
||||||
{% for ancestor in specific_tag.get_parents() %}
|
{% for ancestor in specific_tag.get_parents() %}
|
||||||
<li>
|
|
||||||
{{tag_object.tag_object(ancestor, innertext='(?)', link='info')}}
|
|
||||||
{{tag_object.tag_object(ancestor, innertext=ancestor.name, link=none, with_alt_description=True)}}
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
<ul>
|
|
||||||
{% for (qualified_name, tag) in tags %}
|
|
||||||
{% if "." in qualified_name %}
|
|
||||||
<li>
|
<li>
|
||||||
{{tag_object.tag_object(tag, innertext='(?)', link='info')}}
|
{{tag_object.tag_object(ancestor, innertext='(?)', link='info')}}
|
||||||
{{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
|
{{tag_object.tag_object(ancestor, innertext=ancestor.name, link=none, with_alt_description=True)}}
|
||||||
<button
|
|
||||||
class="remove_tag_button red_button button_with_confirm"
|
|
||||||
data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
|
|
||||||
data-prompt="Unlink Tags?"
|
|
||||||
data-confirm="Unlink"
|
|
||||||
data-confirm-class="remove_tag_button_perm red_button"
|
|
||||||
data-cancel-class="remove_tag_button_perm gray_button"
|
|
||||||
>
|
|
||||||
unlink
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{% else %}
|
|
||||||
<li>
|
|
||||||
{{tag_object.tag_object(tag, innertext='(?)', link='info')}}
|
|
||||||
{{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
|
|
||||||
<button
|
|
||||||
class="remove_tag_button red_button button_with_confirm"
|
|
||||||
data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
|
|
||||||
data-prompt="Delete Tag?"
|
|
||||||
data-confirm="Delete"
|
|
||||||
data-confirm-class="remove_tag_button_perm red_button"
|
|
||||||
data-cancel-class="remove_tag_button_perm gray_button"
|
|
||||||
>
|
|
||||||
delete
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include_synonyms %}
|
|
||||||
{% for synonym in tag.get_synonyms() %}
|
|
||||||
<li>
|
|
||||||
{{tag_object.tag_object(tag, innertext='(+)', link=none)}}
|
|
||||||
{{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)-}}
|
|
||||||
<button
|
|
||||||
class="remove_tag_button red_button button_with_confirm"
|
|
||||||
data-onclick="delete_tag_synonym('{{synonym}}', receive_callback);"
|
|
||||||
data-prompt="Remove Synonym?"
|
|
||||||
data-confirm="Remove"
|
|
||||||
data-confirm-class="remove_tag_button_perm red_button"
|
|
||||||
data-cancel-class="remove_tag_button_perm gray_button"
|
|
||||||
>
|
|
||||||
remove
|
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
</ul>
|
||||||
</ul>
|
{% else %}
|
||||||
</div>
|
<h2>Tags</h2>
|
||||||
<div id="right">
|
{% endif %}
|
||||||
<div id="editor_area">
|
<ul>
|
||||||
<input type="text" id="add_tag_textbox" autofocus>
|
{% for (qualified_name, tag) in tags %}
|
||||||
<button class="add_tag_button green_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
|
{% if "." in qualified_name %}
|
||||||
|
<li>
|
||||||
|
{{tag_object.tag_object(tag, innertext='(?)', link='info')}}
|
||||||
|
{{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
|
||||||
|
<button
|
||||||
|
class="remove_tag_button red_button button_with_confirm"
|
||||||
|
data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
|
||||||
|
data-prompt="Unlink Tags?"
|
||||||
|
data-confirm="Unlink"
|
||||||
|
data-confirm-class="remove_tag_button_perm red_button"
|
||||||
|
data-cancel-class="remove_tag_button_perm gray_button"
|
||||||
|
>
|
||||||
|
unlink
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li>
|
||||||
|
{{tag_object.tag_object(tag, innertext='(?)', link='info')}}
|
||||||
|
{{tag_object.tag_object(tag, link='search', innertext=qualified_name, with_alt_description=True)-}}
|
||||||
|
<button
|
||||||
|
class="remove_tag_button red_button button_with_confirm"
|
||||||
|
data-onclick="delete_tag('{{qualified_name}}', receive_callback);"
|
||||||
|
data-prompt="Delete Tag?"
|
||||||
|
data-confirm="Delete"
|
||||||
|
data-confirm-class="remove_tag_button_perm red_button"
|
||||||
|
data-cancel-class="remove_tag_button_perm gray_button"
|
||||||
|
>
|
||||||
|
delete
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if include_synonyms %}
|
||||||
|
{% for synonym in tag.get_synonyms() %}
|
||||||
|
<li>
|
||||||
|
{{tag_object.tag_object(tag, innertext='(+)', link=none)}}
|
||||||
|
{{tag_object.tag_object(tag, link='search', innertext=qualified_name + '+' + synonym)-}}
|
||||||
|
<button
|
||||||
|
class="remove_tag_button red_button button_with_confirm"
|
||||||
|
data-onclick="delete_tag_synonym('{{synonym}}', receive_callback);"
|
||||||
|
data-prompt="Remove Synonym?"
|
||||||
|
data-confirm="Remove"
|
||||||
|
data-confirm-class="remove_tag_button_perm red_button"
|
||||||
|
data-cancel-class="remove_tag_button_perm gray_button"
|
||||||
|
>
|
||||||
|
remove
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="message_area">
|
<div id="right">
|
||||||
|
<div id="editor_area">
|
||||||
|
<input type="text" id="add_tag_textbox" autofocus>
|
||||||
|
<button class="add_tag_button green_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
|
||||||
|
</div>
|
||||||
|
<div id="message_area">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue