Mirrors/go-inbucket
1
0
Fork 0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-17 17:47:03 +00:00
Code Issues Releases Wiki Activity

ui: convert mailbox.css to mobile-first

Browse Source
This commit is contained in:
James Hillyerd
2019-02-09 10:22:15 -08:00
parent 99df27ee34
commit 645feeaf85
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/mailbox.css
View File

@@ -2,11 +2,11 @@
.mailbox { .mailbox {
display: grid; display: grid;
grid-gap: 1px 20px;
grid: grid:
"ctrl mesg" auto "ctrl" auto
"list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px); "list" auto
height: 100%; "mesg" auto / 1fr;
justify-self: center;
} }
.message-list-controls { .message-list-controls {
@@ -21,21 +21,27 @@
.message-list { .message-list {
grid-area: list; grid-area: list;
overflow-y: scroll;
} }
@media (max-width: 999px) { .message {
grid-area: mesg;
}
@media screen and (min-width: 1000px) {
.mailbox { .mailbox {
grid-gap: 1px 20px;
grid: grid:
"ctrl" auto "ctrl mesg" auto
"list" auto "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
"mesg" auto / 1fr; height: 100%;
justify-self: center;
width: 100%;
} }
.message-list { .message-list {
overflow-y: visible; overflow-y: scroll;
}
.message {
overflow: auto;
} }
} }
@@ -69,14 +75,6 @@
font-size: 85%; font-size: 85%;
} }
/** MESSAGE */
.message {
grid-area: mesg;
overflow: auto;
}
.message-header { .message-header {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
@@ -95,7 +93,7 @@
padding-left: 10px; padding-left: 10px;
} }
@media (min-width: 1000px) { @media screen and (min-width: 1000px) {
.message-header { .message-header {
display: grid; display: grid;
grid-template: auto / 5em 1fr; grid-template: auto / 5em 1fr;
@@ -124,7 +122,6 @@
font-weight: 700; font-weight: 700;
} }
nav.tab-bar { nav.tab-bar {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;