diff --git a/public/styles/shared.css b/public/styles/shared.css index b772b01..af759b9 100644 --- a/public/styles/shared.css +++ b/public/styles/shared.css @@ -94,6 +94,7 @@ footer { padding-bottom: .5rem; } +/* components */ .page { flex: 1 1 auto; display: flex; @@ -108,6 +109,44 @@ footer { justify-content: flex-start; } +/* right-aligned panels */ +.panel.right { + align-items: center; +} + +.panel.right form { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-end; + align-self: stretch; +} + +.panel.right form button { + align-self: stretch; + margin-top: .2em; + margin-bottom: .2em; +} + +@media screen and (max-width: 480px) { + .panel.right h1 { + font-size: 16px; + } +} + +/* constrained panels */ +.constrained { + align-self: center; + max-width: 320px; +} + +@media screen and (max-width: 480px) { + .constrained { + align-self: stretch; + max-width: none; + } +} + /* warning message */ .warning { flex: 0 1 auto; @@ -121,6 +160,10 @@ footer { background: #ff6666; } +.panel.right .warning { + align-self: stretch; +} + /* custom styling */ /* SidePanelPage structure */ @@ -155,46 +198,6 @@ footer { } } -.panel.right { - align-items: center; -} - -.panel.right .warning { - align-self: stretch; -} - -.panel.right form { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-end; - align-self: stretch; -} - -.panel.right form button { - align-self: stretch; - margin-top: .2em; - margin-bottom: .2em; -} - -@media screen and (max-width: 480px) { - .panel.right h1 { - font-size: 16px; - } -} - -.constrained { - align-self: center; - max-width: 320px; -} - -@media screen and (max-width: 480px) { - .constrained { - align-self: stretch; - max-width: none; - } -} - /* main panel */ .mainPanel { margin-left: 30px; diff --git a/src/components/app.jsx b/src/components/app.jsx index 133a941..fe6781b 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -9,7 +9,7 @@ import Footer from './panels/footer.jsx'; const LazyRoute = (props) => { const component = Loadable({ loader: props.component, - loading: () =>
Loading...
, + loading: () =>

Loading...

, }); return ;