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

Add explicit @media queries for wide mode, not just default to override.

Browse source 
Any properties that are different in wide/narrow mode should be defined
in the correct media query. I got tired of having wide mode be the
default and then narrow mode having to unset/initial all the attributes
that aren't relevant to narrow.
This commit is contained in:
voussoir 2020-09-18 21:12:28 -07:00
parent 83d22d2736
commit 3fb198f994
6 changed files with 67 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,6 +120,9 @@ pre
grid-auto-rows: min-content;
grid-gap: 8px;
/*
8px all around except the top, where the header already has a margin.
*/
margin: 8px;
margin-top: 0;
}

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

@ -19,18 +19,10 @@
<script src="/static/js/tag_autocomplete.js"></script>
<style>
#left
{
word-break: break-word;
}
#right
{
display: grid;
grid-row-gap: 8px;
grid-template:
"toolbox" auto
"message_area" 1fr
/ 1fr;
padding: 8px;
background-color: var(--color_transparency);
}
@ -70,6 +62,17 @@
flex: initial;
}
@media screen and (min-width: 800px)
{
#right
{
grid-template:
"toolbox" auto
"message_area" 1fr
/ 1fr;
}
}
@media screen and (max-width: 800px)
{
#right

15
frontends/etiquette_flask/templates/login.html
View file

@ -24,10 +24,6 @@ button
#content_body
{
margin: auto;
grid-template:
"login_form register_form" auto
"message_area message_area" 150px
/ 1fr 1fr;
}
form
@ -48,6 +44,17 @@ form h2
grid-area: message_area;
}
@media screen and (min-width: 800px)
{
#content_body
{
grid-template:
"login_form register_form" auto
"message_area message_area" 150px
/ 1fr 1fr;
}
}
@media screen and (max-width: 800px)
{
#content_body

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

@ -20,9 +20,6 @@
#content_body
{
flex: 1;
grid-template:
"left right" 1fr
/ 310px 1fr;
}
#left
{
@ -57,7 +54,6 @@
{
grid-area: message_area;
min-height: 30px;
max-height: none;
margin: 8px;
}
#photo_viewer
@ -110,6 +106,16 @@
align-items: flex-end;
}
@media screen and (min-width: 800px)
{
#content_body
{
grid-template:
"left right" 1fr
/ 310px 1fr;
}
}
@media screen and (max-width: 800px)
{
#content_body
@ -119,17 +125,6 @@
"left" max-content
/ 1fr;
}
#left
{
width: initial;
max-width: none;
}
#message_area
{
flex: 2;
height: initial;
max-height: none;
}
}
</style>
</head>

39
frontends/etiquette_flask/templates/search.html
View file

@ -28,14 +28,6 @@
justify-content: center;
}
#content_body
{
grid-template:
"left error_message_area" auto
"left happy_message_area" auto
"left right" 1fr
/ 310px 1fr;
}
#error_message_area
{
grid-area: error_message_area;
@ -85,21 +77,32 @@
/* Keep the prev-next buttons from scraping the floor */
padding-bottom: 30px;
}
@media screen and (max-width: 800px) {
@media screen and (min-width: 800px)
{
#content_body
{
grid-template:
"error_message_area"
"happy_message_area"
"right"
"left";
}
#left
{
max-width: none;
width: initial;
"left error_message_area" auto
"left happy_message_area" auto
"left right" 1fr
/ 310px 1fr;
}
}
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"error_message_area" auto
"happy_message_area" auto
"right" auto
"left" auto
/ auto;
}
}
.prev_next_holder
{
display: flex;

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

@ -53,9 +53,6 @@ h2, h3
#right
{
display: grid;
grid-template:
"editor_area" 1fr
"message_area" 1fr;
padding: 8px;
background-color: var(--color_transparency);
}
@ -68,6 +65,17 @@ h2, h3
{
grid-area: message_area;
}
@media screen and (min-width: 800px)
{
#right
{
grid-template:
"editor_area" 1fr
"message_area" 1fr;
}
}
@media screen and (max-width: 800px)
{
#right