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

Use more CSS grid on body and content_body.

Browse source 
I learned that grid-template lets you specify row and col
sizes all at once.
This commit is contained in:
voussoir 2018-09-23 15:08:39 -07:00
parent c927653222
commit ac79183603
4 changed files with 151 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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
{ {

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

@ -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;
} }

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

@ -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="content_body">
<div id="error_message_area"> <div id="error_message_area">
{% for warning in warnings %} {% for warning in warnings %}
<span class="search_warning">{{warning}}</span> <span class="error_message">{{warning}}</span>
{% endfor %} {% endfor %}
</div> </div>
<div id="content_body">
<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%}>

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

@ -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,6 +98,7 @@ body
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body">
<div id="left"> <div id="left">
{% if specific_tag %} {% if specific_tag %}
<div id="tag_metadata"> <div id="tag_metadata">
@ -136,6 +132,8 @@ body
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</ul> </ul>
{% else %}
<h2>Tags</h2>
{% endif %} {% endif %}
<ul> <ul>
{% for (qualified_name, tag) in tags %} {% for (qualified_name, tag) in tags %}
@ -200,6 +198,7 @@ body
<div id="message_area"> <div id="message_area">
</div> </div>
</div> </div>
</div>
</body> </body>