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:
|
||||
{
|
||||
display and flexing
|
||||
own grid area name
|
||||
display, flexing, gridding
|
||||
positioning and alignment
|
||||
bounding box (width, margin, overflow, ...)
|
||||
borders and shadows
|
||||
|
|
@ -19,26 +20,32 @@ Organization:
|
|||
--color_3d_shadow: rgba(0, 0, 0, 0.5);
|
||||
--color_3d_highlight: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template:
|
||||
"header" auto
|
||||
"content_body" 1fr
|
||||
/1fr;
|
||||
|
||||
background-color: var(--color_site_theme);
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
#header
|
||||
{
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr auto;
|
||||
grid-template-rows: auto;
|
||||
|
||||
margin-bottom: 4px;
|
||||
|
||||
background-color: var(--color_site_transparency);
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
grid-area: content_body;
|
||||
display: grid;
|
||||
}
|
||||
#header button
|
||||
{
|
||||
|
|
@ -50,29 +57,27 @@ pre
|
|||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--color_site_transparency);
|
||||
}
|
||||
.header_element:hover
|
||||
{
|
||||
background-color: var(--color_site_secondary);
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.editor_input
|
||||
{
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hidden
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gray_button
|
||||
{
|
||||
|
|
|
|||
|
|
@ -13,9 +13,15 @@
|
|||
<script src="/static/js/tag_autocomplete.js"></script>
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
/* Override common.css */
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,14 +25,22 @@ form
|
|||
|
||||
width: 100%;
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
grid-template:
|
||||
"error_message_area error_message_area"
|
||||
"left right"
|
||||
/ 300px 1fr;
|
||||
}
|
||||
#error_message_area
|
||||
{
|
||||
grid-area: error_message_area;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search_warning
|
||||
.error_message
|
||||
{
|
||||
align-self: center;
|
||||
|
||||
|
|
@ -44,12 +52,10 @@ form
|
|||
}
|
||||
#left
|
||||
{
|
||||
grid-area: left;
|
||||
flex: 1;
|
||||
|
||||
padding: 8px;
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
|
||||
background-color: var(--color_site_transparency);
|
||||
|
||||
|
|
@ -57,18 +63,20 @@ form
|
|||
}
|
||||
#right
|
||||
{
|
||||
grid-area: right;
|
||||
flex: 1;
|
||||
|
||||
padding: 8px;
|
||||
/* Keep the prev-next buttons from scraping the floor */
|
||||
padding-bottom: 30px;
|
||||
|
||||
width: auto;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
#content_body
|
||||
{
|
||||
flex-direction: column-reverse;
|
||||
grid-template:
|
||||
"error_message_area"
|
||||
"right"
|
||||
"left";
|
||||
}
|
||||
#left
|
||||
{
|
||||
|
|
@ -151,12 +159,12 @@ form
|
|||
|
||||
<body>
|
||||
{{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="error_message_area">
|
||||
{% for warning in warnings %}
|
||||
<span class="error_message">{{warning}}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="left">
|
||||
{% for tagtype in ["musts", "mays", "forbids"] %}
|
||||
<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>
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 300px;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"left right";
|
||||
}
|
||||
#header
|
||||
{
|
||||
grid-area: header;
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
display: grid;
|
||||
grid-template:
|
||||
"left right"
|
||||
/1fr 300px;
|
||||
}
|
||||
#left
|
||||
{
|
||||
word-break: break-word;
|
||||
|
|
@ -73,14 +71,11 @@ body
|
|||
}
|
||||
@media screen and (max-width: 800px)
|
||||
{
|
||||
body
|
||||
#content_body
|
||||
{
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr 150px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"left"
|
||||
"right";
|
||||
grid-template:
|
||||
"left" 1fr
|
||||
"right" 150px;
|
||||
}
|
||||
#right
|
||||
{
|
||||
|
|
@ -103,101 +98,105 @@ body
|
|||
|
||||
<body>
|
||||
{{header.make_header(session=session)}}
|
||||
<div id="left">
|
||||
{% if specific_tag %}
|
||||
<div id="tag_metadata">
|
||||
<h2>
|
||||
<span
|
||||
id="name_text"
|
||||
data-editor-id="name"
|
||||
data-editor-placeholder="name"
|
||||
<div id="content_body">
|
||||
<div id="left">
|
||||
{% if specific_tag %}
|
||||
<div id="tag_metadata">
|
||||
<h2>
|
||||
<span
|
||||
id="name_text"
|
||||
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-}}
|
||||
</span>
|
||||
</h2>
|
||||
<pre
|
||||
id="description_text"
|
||||
data-editor-id="description"
|
||||
data-editor-placeholder="description"
|
||||
{% if specific_tag.description == "" %}class="hidden"{% endif -%}
|
||||
>
|
||||
{{-specific_tag.description-}}
|
||||
</pre>
|
||||
</div>
|
||||
{{-specific_tag.description-}}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{% set parents = specific_tag.get_parents() %}
|
||||
{% if parents %}
|
||||
<ul>
|
||||
{% 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 %}
|
||||
{% set parents = specific_tag.get_parents() %}
|
||||
{% if parents %}
|
||||
<ul>
|
||||
{% for ancestor in specific_tag.get_parents() %}
|
||||
<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>
|
||||
{{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 %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</ul>
|
||||
{% else %}
|
||||
<h2>Tags</h2>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for (qualified_name, tag) in tags %}
|
||||
{% 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 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>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue