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

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

@ -16,88 +16,74 @@
<style>
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;
word-break: break-word;
grid-area: header;
}
#left
{
flex: 1;
height: auto;
padding: 8px;
}
#description_text
{
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
font-family: initial;
word-break: break-word;
grid-area: left;
}
#right
{
width: 316px;
}
#right_inner
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
position: fixed;
top: 30px;
right: 8px;
bottom: 8px;
top: 30px;
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);
}
#editor_area
{
display: flex;
flex-direction: row;
justify-content center;
align-items: center;
flex: 1;
grid-area: editor_area;
margin: auto;
}
#message_area
{
display: flex;
flex-direction: column;
justify-content center;
align-items: center;
flex: 2;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
grid-area: message_area;
margin: 8px;
}
@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
{
width: initial;
height: 216px;
}
#right_inner
{
flex-direction: row;
top: unset;
width: unset;
left: 8px;
right: 8px;
bottom: 8px;
height: 150px;
position: initial;
left: initial;
right: initial;
bottom: initial;
top: initial;
width: initial;
height: 200px;
grid-template-areas:
"editor_area message_area";
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
}
</style>
@ -106,7 +92,6 @@ body
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="left">
{% if specific_tag is not none %}
<h2>
@ -148,7 +133,6 @@ body
</ul>
</div>
<div id="right">
<div id="right_inner">
<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>
@ -156,8 +140,6 @@ body
<div id="message_area">
</div>
</div>
</div>
</div>
</body>