diff --git a/app/components/App.tsx b/app/components/App.tsx index cb5c20b..8217dea 100644 --- a/app/components/App.tsx +++ b/app/components/App.tsx @@ -10,7 +10,7 @@ import * as rp from "@app/routePaths"; // tslint:disable:ordered-imports import "font-awesome/css/font-awesome.css"; import "semantic-ui-css/semantic.css"; -import "@app/styles/app.scss"; +import "@app/styles/app"; function NavContainer() { return ( diff --git a/app/components/DeviceView.scss b/app/components/DeviceView.scss deleted file mode 100644 index 3df3230..0000000 --- a/app/components/DeviceView.scss +++ /dev/null @@ -1,76 +0,0 @@ -.device { - .header { - display: flex !important; - flex-direction: column; - @media only screen and (min-width: 768px) { - flex-direction: row; - } - } - .ui.grid { - margin-top: 0; - } - .connectionState { - @media only screen and (min-width: 768px) { - margin-left: .75em; - } - font-size: .75em; - font-weight: lighter; - - &.connected { - color: #13D213; - } - - &.disconnected { - color: #D20000; - } - } -} - -.sectionRunner .queue { - max-height: 14em; - height: 14em; - overflow-y: scroll; -} - -.ui.modal.programEditor > .header > .header.item .inline.fields { - margin-bottom: 0; -} - -.programSequence.editing .item .content { - width: 20em; -} - -.sectionChooser { - .ui.selection.dropdown { - min-width: 12em; - } -} - -.durationInputs { - display: flex; - flex-wrap: wrap; - margin: -0.5em; -} - -$durationInput-labelWidth: 2.5em; - -.ui.form .field .ui.input.durationInput { - margin: 0.5em; - - &.minutes { - //margin-right: 1em; - } - &.seconds { - - } - - > input { - flex: 1 0 6em; - width: 100%; - } - - > .label { - flex: 0 0 $durationInput-labelWidth; - text-align: center; - } -} diff --git a/app/components/DeviceView.tsx b/app/components/DeviceView.tsx index e484c89..bc50de1 100644 --- a/app/components/DeviceView.tsx +++ b/app/components/DeviceView.tsx @@ -9,7 +9,8 @@ import { AppState, injectState } from "@app/state"; import { ConnectionState as ConState } from "@common/sprinklersRpc"; import { Route, RouteComponentProps, withRouter } from "react-router"; import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from "."; -import "./DeviceView.scss"; + +import "@app/styles/DeviceView"; const ConnectionState = observer(({ connectionState, className }: { connectionState: ConState, className?: string }) => { diff --git a/app/components/DurationView.tsx b/app/components/DurationView.tsx index 6da305d..1f52bdc 100644 --- a/app/components/DurationView.tsx +++ b/app/components/DurationView.tsx @@ -4,6 +4,8 @@ import { Form, Input, InputProps } from "semantic-ui-react"; import { Duration } from "@common/Duration"; +import "@app/styles/DurationView"; + export default class DurationView extends React.Component<{ label?: string, inline?: boolean, @@ -12,14 +14,14 @@ export default class DurationView extends React.Component<{ className?: string, }> { render() { - const { duration, label, inline, onDurationChange } = this.props; - const className = classNames("durationInput", this.props.className); + const { duration, label, inline, onDurationChange, className } = this.props; + const inputsClassName = classNames("durationInputs", { inline }); if (onDurationChange) { return ( - + {label && } -
+
void, diff --git a/app/components/SectionChooser.tsx b/app/components/SectionChooser.tsx index cdabb2f..2237745 100644 --- a/app/components/SectionChooser.tsx +++ b/app/components/SectionChooser.tsx @@ -5,6 +5,8 @@ import { DropdownItemProps, DropdownProps, Form } from "semantic-ui-react"; import { Section } from "@common/sprinklersRpc"; +import "@app/styles/SectionChooser"; + @observer export default class SectionChooser extends React.Component<{ label?: string, diff --git a/app/components/SectionRunnerView.tsx b/app/components/SectionRunnerView.tsx index 3865189..e2a5d82 100644 --- a/app/components/SectionRunnerView.tsx +++ b/app/components/SectionRunnerView.tsx @@ -7,6 +7,8 @@ import { Duration } from "@common/Duration"; import log from "@common/logger"; import { Section, SectionRun, SectionRunner } from "@common/sprinklersRpc"; +import "@app/styles/SectionRunnerView"; + interface PausedStateProps { paused: boolean; togglePaused: () => void; diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx index 1ecdc7e..26aee8b 100644 --- a/app/pages/LoginPage.tsx +++ b/app/pages/LoginPage.tsx @@ -6,6 +6,8 @@ import { Container, Dimmer, Form, Header, InputOnChangeData, Loader, Message, Se import { AppState, injectState } from "@app/state"; import log from "@common/logger"; +import "@app/styles/LoginPage"; + class LoginPageState { @observable username = ""; @observable password = ""; diff --git a/app/styles/DeviceView.scss b/app/styles/DeviceView.scss new file mode 100644 index 0000000..a04286c --- /dev/null +++ b/app/styles/DeviceView.scss @@ -0,0 +1,51 @@ +.device { + .header { + display: flex !important; + flex-direction: column; + @media only screen and (min-width: 768px) { + flex-direction: row; + } + } + .ui.grid { + margin-top: 0; + } + .connectionState { + @media only screen and (min-width: 768px) { + margin-left: .75em; + } + font-size: .75em; + font-weight: lighter; + + &.connected { + color: #13D213; + } + + &.disconnected { + color: #D20000; + } + } +} + +.section--number, +.program--number { + width: 2em +} + +.section--name /*, +.program--name*/ +{ + width: 10em; + white-space: nowrap; +} + +.section--state { + +} + +.section-state.running { + color: green; +} + +.ui.modal.programEditor > .header > .header.item .inline.fields { + margin-bottom: 0; +} diff --git a/app/styles/DurationView.scss b/app/styles/DurationView.scss new file mode 100644 index 0000000..3abd627 --- /dev/null +++ b/app/styles/DurationView.scss @@ -0,0 +1,30 @@ +.durationInputs { + display: flex; + flex-wrap: wrap; + margin: -0.5em; + + &.inline { + min-width: 30em; + } +} + +$durationInput-inputWidth: 5em; +$durationInput-labelWidth: 2.5em; + +.ui.form .field .ui.input.durationInput { + margin: 0.5em; + + flex: 1 0 ($durationInput-inputWidth + $durationInput-labelWidth); + + > input { + flex: 1 0 $durationInput-inputWidth; + min-width: $durationInput-inputWidth; + width: 100%; + } + + > .label { + width: $durationInput-labelWidth; + flex: 0 0 $durationInput-labelWidth; + text-align: center; + } +} diff --git a/app/styles/LoginPage.scss b/app/styles/LoginPage.scss new file mode 100644 index 0000000..c5f123c --- /dev/null +++ b/app/styles/LoginPage.scss @@ -0,0 +1,29 @@ +.ui.container.loginPage { + margin-top: 1em; + + .ui.header { + text-align: center; + } + + /* Mobile */ + @media only screen and (max-width: 767px) { + width: auto !important; + margin-left: 1em !important; + margin-right: 1em !important; + } + + /* Tablet */ + @media only screen and (min-width: 768px) and (max-width: 991px) { + width: 600px; + } + + /* Small Monitor */ + @media only screen and (min-width: 992px) and (max-width: 1199px) { + width: 600px; + } + + /* Large Monitor */ + @media only screen and (min-width: 1200px) { + width: 800px; + } +} diff --git a/app/styles/MessagesView.scss b/app/styles/MessagesView.scss new file mode 100644 index 0000000..3390dbd --- /dev/null +++ b/app/styles/MessagesView.scss @@ -0,0 +1,10 @@ +.messages { + position: fixed; + bottom: 1em; + left: 1em; + right: 1em; + padding-left: 0; + z-index: 1000; + display: flex; + flex-direction: column; +} diff --git a/app/styles/ProgramSequenceView.scss b/app/styles/ProgramSequenceView.scss new file mode 100644 index 0000000..62d19aa --- /dev/null +++ b/app/styles/ProgramSequenceView.scss @@ -0,0 +1,3 @@ +.programSequence.editing .item .content { + width: 20em; +} diff --git a/app/styles/SectionChooser.scss b/app/styles/SectionChooser.scss new file mode 100644 index 0000000..3bf3788 --- /dev/null +++ b/app/styles/SectionChooser.scss @@ -0,0 +1,5 @@ +.sectionChooser { + .ui.selection.dropdown { + min-width: 12em; + } +} diff --git a/app/styles/SectionRunnerView.scss b/app/styles/SectionRunnerView.scss new file mode 100644 index 0000000..8b9bd4d --- /dev/null +++ b/app/styles/SectionRunnerView.scss @@ -0,0 +1,29 @@ +.sectionRunner .queue { + max-height: 14em; + height: 14em; + overflow-y: scroll; +} + +.sectionRunner--pausedState { + padding-left: .75em; + font-size: .75em; + font-weight: lighter; +} + +.sectionRunner--pausedState > .fa { + padding-right: .2em; +} + +.sectionRunner--pausedState-unpaused { +} + +.sectionRun { + .ui.progress { + margin: 1em 0 0 !important; + + .bar { + transition: none; + min-width: 0 !important; + } + } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index f5678d5..03744b6 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -2,100 +2,16 @@ padding-top: 1em; } -.sectionRunner--pausedState { - padding-left: .75em; - font-size: .75em; - font-weight: lighter; -} - -.sectionRunner--pausedState > .fa { - padding-right: .2em; -} - -.sectionRunner--pausedState-unpaused { -} - .flex-horizontal-space-between { display: flex; align-items: baseline; justify-content: space-between; } -.sectionRun .progress { - margin: 1em 0 0 !important; -} - -.sectionRun .ui.progress .bar { - -webkit-transition: none; - transition: none; - min-width: 0 !important; -} - -.section--number, -.program--number { - width: 2em -} - -.section--name /*, -.program--name*/ -{ - width: 10em; - white-space: nowrap; -} - -.section--state { - -} - .flex { display: flex !important; } -.section-state.running { - color: green; -} - -.messages { - position: fixed; - bottom: 1em; - left: 1em; - right: 1em; - padding-left: 0; - z-index: 1000; - display: flex; - flex-direction: column; -} - .flex-spacer { flex: 1; } - -.ui.container.loginPage { - margin-top: 1em; - - .ui.header { - text-align: center; - } - - /* Mobile */ - @media only screen and (max-width: 767px) { - width: auto !important; - margin-left: 1em !important; - margin-right: 1em !important; - } - - /* Tablet */ - @media only screen and (min-width: 768px) and (max-width: 991px) { - width: 600px; - } - - /* Small Monitor */ - @media only screen and (min-width: 992px) and (max-width: 1199px) { - width: 600px; - } - - /* Large Monitor */ - @media only screen and (min-width: 1200px) { - width: 800px; - } -} \ No newline at end of file diff --git a/app/webpack.config.js b/app/webpack.config.js index e48e99d..c404593 100644 --- a/app/webpack.config.js +++ b/app/webpack.config.js @@ -168,7 +168,6 @@ const getConfig = module.exports = (env) => { // Otherwise React will be compiled in the very slow development mode. new webpack.DefinePlugin(environ.stringified), new CaseSensitivePathsPlugin(), - // TODO: doesn't work with typescript target: es6 isProd && new UglifyJsPlugin({ sourceMap: shouldUseSourceMap, }), @@ -230,7 +229,7 @@ const getConfig = module.exports = (env) => { "webpack://" + path.resolve(info.absoluteResourcePath).replace(/\\/g, "/") : undefined, }, resolve: { - extensions: [".ts", ".tsx", ".js", ".json"], + extensions: [".ts", ".tsx", ".js", ".json", ".scss"], alias: { "@app": paths.appDir, "@common": paths.commonDir, @@ -249,7 +248,7 @@ const getConfig = module.exports = (env) => { host: "0.0.0.0", port: 8081, proxy: [{ - context: ["/api"], // TODO: update when there is actually an api + context: ["/api"], target: paths.publicUrl, }], },