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

Split sticky_side functionality into _side, _bottom.

Browse source 
This makes the role of each css definition more clear, and could allow
for cases where the side is sticky in wide mode but not sticky in
narrow mode.
This commit is contained in:
voussoir 2020-09-18 19:58:22 -07:00
parent 854f210a4f
commit 9a29048ccf
5 changed files with 84 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontends/etiquette_flask/static/css/etiquette.css
View file

@ -7,6 +7,7 @@
--color_tag_object_fg: blue; --color_tag_object_fg: blue;
--size_sticky_side: 300px; --size_sticky_side: 300px;
--size_sticky_bottom: 150px;
} }
input, select, textarea input, select, textarea
@ -34,51 +35,73 @@ input, select, textarea
grid-area: right; grid-area: right;
} }
#content_body.sticky_side_left @media screen and (min-width: 800px)
{ {
grid-template: #content_body.sticky_side_left
"left right" {
/var(--size_sticky_side) 1fr; grid-template:
} "left right"
#content_body.sticky_side_right /var(--size_sticky_side) 1fr;
{ }
grid-template: #content_body.sticky_side_right
"left right" {
/1fr var(--size_sticky_side); grid-template:
} "left right"
/1fr var(--size_sticky_side);
}
#content_body.sticky_side_left #left, #content_body.sticky_side_left #left,
#content_body.sticky_side_right #right #content_body.sticky_side_right #right
{ {
display: grid; z-index: 1;
grid-auto-rows: min-content; position: fixed;
bottom: 8px;
z-index: 1; top: 34px;
position: fixed; width: var(--size_sticky_side);
bottom: 8px; overflow-y: auto;
top: 34px; }
padding: 8px; #content_body.sticky_side_left #left
width: var(--size_sticky_side); {
overflow-y: auto; left: 8px;
background-color: var(--color_transparency); }
} #content_body.sticky_side_right #right
#content_body.sticky_side_left #left {
{ right: 8px;
left: 8px; }
}
#content_body.sticky_side_right #right
{
right: 8px;
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body.sticky_side_right #right #content_body.sticky_bottom_left
{ {
outline: 8px solid var(--color_primary); grid-template:
background-color: var(--color_primary) !important; "right" 1fr
"left" var(--size_sticky_bottom)
/ 1fr;
} }
#content_body.sticky_side_right #right:before #content_body.sticky_bottom_right
{
grid-template:
"left" 1fr
"right" var(--size_sticky_bottom)
/ 1fr;
}
#content_body.sticky_bottom_left #left,
#content_body.sticky_bottom_right #right
{
z-index: 1;
position: fixed;
background-color: var(--color_primary);
outline: 8px solid var(--color_primary);
top: unset;
width: unset;
left: 8px;
right: 8px;
bottom: 8px;
height: var(--size_sticky_bottom);
}
#content_body.sticky_bottom_left #left:before,
#content_body.sticky_bottom_right #right:before
{ {
content: ""; content: "";
position: absolute; position: absolute;

32
frontends/etiquette_flask/templates/album.html
View file

@ -26,7 +26,11 @@ h2, h3
} }
#right #right
{ {
display: grid;
grid-row-gap: 8px; grid-row-gap: 8px;
grid-auto-rows: min-content;
padding: 8px;
background-color: var(--color_transparency);
} }
#right > * #right > *
@ -65,30 +69,6 @@ h2, h3
{ {
display: initial; display: initial;
} }
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 150px
/ 1fr !important;
}
#left
{
margin-right: unset;
}
#right
{
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 150px;
}
}
</style> </style>
{% endmacro %} {% endmacro %}
@ -113,7 +93,7 @@ h2, h3
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body" class="sticky_side_right"> <div id="content_body" class="sticky_side_right sticky_bottom_right">
<div id="left"> <div id="left">
<div id="album_list" class="panel"> <div id="album_list" class="panel">
<h2>Albums</h2> <h2>Albums</h2>
@ -174,7 +154,7 @@ const ALBUM_ID = undefined;
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body" class="sticky_side_right"> <div id="content_body" class="sticky_side_right sticky_bottom_right">
<div id="right"> <div id="right">
{% if view != "list" %} {% if view != "list" %}
<a href="?view=list">List view</a> <a href="?view=list">List view</a>

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

@ -25,11 +25,14 @@
} }
#right #right
{ {
display: grid;
grid-row-gap: 8px; grid-row-gap: 8px;
grid-template: grid-template:
"toolbox" auto "toolbox" auto
"message_area" 1fr "message_area" 1fr
/ 1fr; / 1fr;
padding: 8px;
background-color: var(--color_transparency);
} }
#toolbox #toolbox
{ {
@ -69,22 +72,8 @@
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body
{
grid-template:
"left" 1fr
"right" 200px
/ 1fr !important;
}
#right #right
{ {
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 200px;
grid-template: grid-template:
"toolbox message_area" 1fr "toolbox message_area" 1fr
/1fr minmax(50px, 200px); /1fr minmax(50px, 200px);
@ -96,7 +85,7 @@
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body" class="sticky_side_right"> <div id="content_body" class="sticky_side_right sticky_bottom_right">
<div id="left"> <div id="left">
<div class="panel">The clipboard contains <span class="clipboard_count">0</span> items. <div class="panel">The clipboard contains <span class="clipboard_count">0</span> items.
<button id="clear_clipboard_button" class="red_button" onclick="return photo_clipboard.clear_clipboard();">Clear it.</button> <button id="clear_clipboard_button" class="red_button" onclick="return photo_clipboard.clear_clipboard();">Clear it.</button>

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

@ -29,8 +29,11 @@
{ {
grid-area: left; grid-area: left;
display: flex; display: grid;
flex-direction: column; grid-template:
"editor_area" auto
"message_area" 1fr
/1fr;
min-height: min-content; min-height: min-content;
@ -46,6 +49,7 @@
} }
#editor_area #editor_area
{ {
grid-area: editor_area;
padding: 8px; padding: 8px;
word-wrap: break-word; word-wrap: break-word;
} }
@ -56,6 +60,7 @@
} }
#message_area #message_area
{ {
grid-area: message_area;
min-height: 30px; min-height: 30px;
max-height: none; max-height: none;
margin: 8px; margin: 8px;
@ -108,8 +113,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
/*background-color: var(--color_primary);*/
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
@ -118,18 +121,15 @@
{ {
--narrow: 1; --narrow: 1;
grid-template: grid-template:
"right" 1fr "right" 100%
"left" 1fr; "left" max-content
/ 1fr;
} }
#left #left
{ {
width: initial; width: initial;
max-width: none; max-width: none;
} }
#right
{
height: calc(100vh - 40px);
}
#message_area #message_area
{ {
flex: 2; flex: 2;

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

@ -52,9 +52,12 @@ h2, h3
} }
#right #right
{ {
display: grid;
grid-template: grid-template:
"editor_area" 1fr "editor_area" 1fr
"message_area" 1fr; "message_area" 1fr;
padding: 8px;
background-color: var(--color_transparency);
} }
#editor_area #editor_area
{ {
@ -67,22 +70,8 @@ h2, h3
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body
{
grid-template:
"left" 1fr
"right" 150px
/ 1fr !important;
}
#right #right
{ {
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 150px;
grid-template: grid-template:
"editor_area message_area" 1fr "editor_area message_area" 1fr
/1fr minmax(50px, 200px); /1fr minmax(50px, 200px);
@ -94,7 +83,7 @@ h2, h3
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body" class="sticky_side_right"> <div id="content_body" class="sticky_side_right sticky_bottom_right">
<div id="right"> <div id="right">
<div id="editor_area"> <div id="editor_area">
<input type="text" id="add_tag_textbox" class="entry_with_history entry_with_tagname_replacements" autofocus> <input type="text" id="add_tag_textbox" class="entry_with_history entry_with_tagname_replacements" autofocus>