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

Rewrite tags.html with more Grid.

Browse source
This commit is contained in:
voussoir 2018-02-21 22:13:46 -08:00
parent a9248d8cab
commit 2adadf9871
2 changed files with 81 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,14 +21,8 @@ body
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 8px;
background-color: var(--color_site_theme); background-color: var(--color_site_theme);
} }
li
{
position:relative;
}
#header #header
{ {
display: grid; display: grid;
@ -256,9 +250,6 @@ is hovered over.
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-height: 300px;
width: 100%;
height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);

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

@ -16,88 +16,74 @@
<style> <style>
body body
{ {
display:flex; display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"left right";
} }
#content_body #header
{ {
flex: 1; grid-area: header;
word-break: break-word;
} }
#left #left
{ {
flex: 1; word-break: break-word;
height: auto; grid-area: left;
padding: 8px;
}
#description_text
{
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
font-family: initial;
} }
#right #right
{ {
width: 316px;
}
#right_inner
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
position: fixed; position: fixed;
top: 30px;
right: 8px; right: 8px;
bottom: 8px; bottom: 8px;
top: 30px;
width: 300px; width: 300px;
grid-area: right;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"editor_area"
"message_area";
padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
#editor_area #editor_area
{ {
display: flex; grid-area: editor_area;
flex-direction: row; margin: auto;
justify-content center;
align-items: center;
flex: 1;
} }
#message_area #message_area
{ {
display: flex; grid-area: message_area;
flex-direction: column; margin: 8px;
justify-content center;
align-items: center;
flex: 2;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body body
{ {
flex-direction: column; grid-template-columns: 1fr;
grid-template-rows: auto 1fr 150px;
grid-template-areas:
"header"
"left"
"right";
} }
#right #right
{ {
width: initial; top: unset;
height: 216px; width: unset;
} left: 8px;
#right_inner right: 8px;
{ bottom: 8px;
flex-direction: row; height: 150px;
position: initial; grid-template-areas:
left: initial; "editor_area message_area";
right: initial; grid-template-rows: 1fr;
bottom: initial; grid-template-columns: 1fr 1fr;
top: initial;
width: initial;
height: 200px;
} }
} }
</style> </style>
@ -106,8 +92,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 is not none %} {% if specific_tag is not none %}
<h2> <h2>
<span <span
@ -146,17 +131,14 @@ body
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<div id="right"> <div id="right">
<div id="right_inner">
<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="submit_tag(receive_callback);">add</button> <button class="add_tag_button green_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
</div> </div>
<div id="message_area"> <div id="message_area">
</div> </div>
</div>
</div>
</div> </div>
</body> </body>