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

Don't clip editor_area bg when scrollbar appears.

Browse source 
Instead of applying the background-color to the holder, apply it to the editor
area and message area separately. Then they can flex differently so that
the editor always maintains full height, and the message area shrinks to
a minimum of 30px.
This commit is contained in:
voussoir 2017-06-13 21:35:13 -07:00
parent bc5df9f1c2
commit aa30d5903d
1 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,18 +32,34 @@
flex-direction: column; flex-direction: column;
max-width: 300px; max-width: 300px;
padding: 8px; /*padding: 8px;*/
background-color: rgba(0, 0, 0, 0.1);
} }
#editor_area #editor_area
{ {
flex: 3; flex: 3;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
word-wrap: break-word; word-wrap: break-word;
} }
#message_area_bg
{
display: flex;
flex: 0 1 100%;
height: 100%;
min-height: 30px;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
}
#message_area #message_area
{ {
flex: auto; flex: auto;
max-height: none;
} }
.photo_viewer .photo_viewer
{ {
@ -200,10 +216,12 @@
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
<div id="message_area_bg">
<div id="message_area"> <div id="message_area">
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="right"> <div id="right">
<!-- THE PHOTO ITSELF --> <!-- THE PHOTO ITSELF -->