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

Add --narrow, --wide to common.css, is_wide_mode to common.js.

Browse source
This commit is contained in:
voussoir 2020-09-18 20:53:10 -07:00
parent 9a29048ccf
commit 8da18ba502
3 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontends/etiquette_flask/static/css/common.css
View file

@ -12,6 +12,22 @@
--color_highlight: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 800px)
{
:root
{
--wide: 1;
}
}
@media screen and (max-width: 800px)
{
:root
{
--narrow: 1;
}
}
.hidden
{
display: none !important;

12
frontends/etiquette_flask/static/js/common.js
View file

@ -453,6 +453,18 @@ function init_all_tabbed_container()
}
}
common.is_narrow_mode =
function is_narrow_mode()
{
return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1";
}
common.is_wide_mode =
function is_wide_mode()
{
return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1";
}
common.tabbed_container_switcher =
function tabbed_container_switcher(event)
{

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

@ -19,7 +19,6 @@
<style>
#content_body
{
--narrow: 0;
flex: 1;
grid-template:
"left right" 1fr
@ -119,7 +118,6 @@
{
#content_body
{
--narrow: 1;
grid-template:
"right" 100%
"left" max-content
@ -486,8 +484,7 @@ function toggle_hoverzoom(event)
{
enable_hoverzoom(event);
}
const content_body = document.getElementById('content_body');
if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
if (common.is_wide_mode())
{
add_tag_box.focus();
}
@ -566,8 +563,7 @@ function autofocus_add_tag_box()
which is annoying. So, this function focuses the box manually as long as
we're not narrow.
*/
const content_body = document.getElementById("content_body");
if (getComputedStyle(content_body).getPropertyValue("--narrow") == 0)
if (common.is_wide_mode())
{
add_tag_box.focus();
}