diff options
| author | MikunoNaka <bokuwakanojogahoshii@yahoo.com> | 2021-06-25 20:36:09 +0530 |
|---|---|---|
| committer | MikunoNaka <bokuwakanojogahoshii@yahoo.com> | 2021-06-25 20:36:09 +0530 |
| commit | c29507c2e32d5a3fe25c6fe3dbfba9700f93316e (patch) | |
| tree | de6d19871365dff1ddd50cee086eb06a581f6325 | |
| parent | 0d90508977837bec25f038fe5380e6fb3bc82745 (diff) | |
Adapted the UI for mobile (table incomplete)
| -rw-r--r-- | public/index.html | 4 | ||||
| -rw-r--r-- | src/components/Display/Display.scss | 11 | ||||
| -rw-r--r-- | src/components/Form/Form.scss | 49 | ||||
| -rw-r--r-- | src/styles/global.scss | 29 |
4 files changed, 69 insertions, 24 deletions
diff --git a/public/index.html b/public/index.html index aa069f2..af3da65 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,9 @@ <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="theme-color" content="#000000" /> <meta name="description" diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss index bef03dc..592f4ec 100644 --- a/src/components/Display/Display.scss +++ b/src/components/Display/Display.scss @@ -8,9 +8,9 @@ @import "../../styles/theme"; -.ItemsDisplay, -.ItemsDisplay table { +.ItemsDisplay { width: 100%; + box-sizing: border-box; } .ItemsDisplay { @@ -73,3 +73,10 @@ font-size: 2rem; color: $foreground2; } + +@media only screen and (max-device-width: 480px) { + .SummaryDisplay { + width: auto; + min-height: 16rem; + } +} diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 1ba5b85..393a2d3 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -103,10 +103,6 @@ input { width: 27rem; } -.threePaneForm .smallPane { - width: 15rem; -} - .twoPaneForm label { @include formWideLabel(); } @@ -135,10 +131,49 @@ input { font-size: $fontSize2; } - -/* */ .MetaInfoForm { width: 60%; } - +@media only screen and (max-device-width: 480px) { + .threePaneForm { + flex-direction: column; + height: 45rem; + margin: 3rem auto; + } + + .threePaneForm .widePane, + .threePaneForm .smallPane { + width: 100%; + } + + .threePaneForm label { + flex-wrap: wrap; + } + + .twoPaneForm { + flex-direction: column; + height: 28rem; + } + + .twoPaneForm .widePane { + width: 100%; + } + + .twoPaneForm label { + flex-wrap: wrap; + } + + .wideInputBox, .selectInputBox { + width: 100%; + } + + .smallInputBox { + width: 5.5rem; + } + + .MetaInfoForm { + width: 100%; + height: 15rem; + } +} diff --git a/src/styles/global.scss b/src/styles/global.scss index 54cbddc..a1b84ef 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -21,11 +21,6 @@ scrollbar-width: 1vw; /* Firefox */ } -html, body { - height: 100%; - width: 100%; -} - body { background-color: $background1; color: $foreground1; @@ -33,20 +28,21 @@ body { } * { - font-family: $defFont + font-family: $defFont; } .root-content { width: 95%; margin: auto; margin-bottom: 3rem; + max-width: 1920px; } .BillingPageFlex { display: flex; flex-direction: row; justify-content: space-between; - height: 70vh; + height: 27rem; } .BillingPageFlex div { @@ -66,12 +62,13 @@ body { position: absolute; width: 95%; - height: 70vh; + max-width: 1920px; + height: 32rem; box-sizing: border-box; + top: 0; bottom: 0; left: 0; right: 0; - margin: 0 auto; - top: 15vh; + margin: auto; background-color: $background3; box-shadow: $floatingShadow; @@ -81,11 +78,15 @@ body { } -/* -idk if im going that way @media only screen and (max-device-width: 480px) { - .root-content { + .floatingMenu { width: 95%; + height: 80vh; + + padding: 0.5rem; + } + .BillingPageFlex { + flex-direction: column; + height: 35rem; } } -*/ |