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

Fix CSS so #left and #right don't overlap.

Browse source 
So that the elements in left don't go underneath right.
This commit is contained in:
voussoir 2017-07-16 18:20:30 -07:00
parent 2c5617207a
commit 6986d56b71
1 changed files with 25 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,55 +17,59 @@ body
{ {
display:flex; display:flex;
} }
#left #content_body
{ {
height:100%; flex: 1;
} }
#left #left
{ {
flex: 1; flex: 1;
height: auto; height: auto;
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; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: 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;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
}
#description_text
{
font-family: initial;
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
#editor_area #editor_area
{ {
display: flex; display: flex;
flex: 1;
flex-direction: row; flex-direction: row;
justify-content center; justify-content center;
align-items: center; align-items: center;
flex: 1;
} }
#message_area #message_area
{ {
display: flex; display: flex;
flex: 2;
flex-direction: column; flex-direction: column;
justify-content center; justify-content center;
align-items: center; align-items: center;
flex: 2;
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);
@ -116,11 +120,13 @@ body
</ul> </ul>
</div> </div>
<div id="right"> <div id="right">
<div id="editor_area"> <div id="right_inner">
<input type="text" id="add_tag_textbox" autofocus> <div id="editor_area">
<button class="add_tag_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button> <input type="text" id="add_tag_textbox" autofocus>
</div> <button class="add_tag_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
<div id="message_area"> </div>
<div id="message_area">
</div>
</div> </div>
</div> </div>
</div> </div>