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

Let #right be fixed.

Browse source 
Previously, then the tags list was very long and dominated the scroll
height of the page, the #right and thus the photo would be floating
halfway down the page. By making it sticky, the photo always occupies
the correct position in the viewport no matter how long #left gets.
This commit is contained in:
voussoir 2020-09-29 17:13:03 -07:00
parent ea60190e7d
commit 1d6464b79b
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,6 @@
#right #right
{ {
display: grid; display: grid;
position: relative;
grid-template: "viewer" 1fr / 1fr; grid-template: "viewer" 1fr / 1fr;
} }
#editor_area #editor_area
@ -98,8 +97,8 @@
#hovering_tools #hovering_tools
{ {
position: absolute; position: absolute;
right: 8px; right: 0px;
top: 8px; top: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -114,6 +113,16 @@
"left right" 1fr "left right" 1fr
/ 310px 1fr; / 310px 1fr;
} }
#right
{
position: fixed;
/* header=18 + 8px body top margin + 8px header/body gap = 34 */
top: 34px;
bottom: 8px;
right: 8px;
/* left=310px + 8px body left margin + 8px left/right gap = 326 */
left: 326px;
}
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
@ -125,6 +134,10 @@
"left" max-content "left" max-content
/ 1fr; / 1fr;
} }
#right
{
position: relative;
}
} }
</style> </style>
</head> </head>