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="content_body">
|
||||
<div id="error_message_area">
|
||||
{% for warning in warnings %}
|
||||
<span class="search_warning">{{warning}}</span>
|
||||
<span class="error_message">{{warning}}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="content_body">
|
||||
<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,6 +98,7 @@ body
|
|||
|
||||
<body>
|
||||
{{header.make_header(session=session)}}
|
||||
<div id="content_body">
|
||||
<div id="left">
|
||||
{% if specific_tag %}
|
||||
<div id="tag_metadata">
|
||||
|
|
@ -136,6 +132,8 @@ body
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<h2>Tags</h2>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for (qualified_name, tag) in tags %}
|
||||
|
|
@ -200,6 +198,7 @@ body
|
|||
<div id="message_area">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue