diff --git a/client/package.json b/client/package.json index f0b0e1e802..acefc50f46 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "ontime-ui", - "version": "1.7.1", + "version": "1.7.2", "private": true, "dependencies": { "@chakra-ui/react": "^2.3.2", diff --git a/client/src/features/control/playback/PlaybackControl.module.scss b/client/src/features/control/playback/PlaybackControl.module.scss index 9807d7aa0d..d0310bc9fe 100644 --- a/client/src/features/control/playback/PlaybackControl.module.scss +++ b/client/src/features/control/playback/PlaybackControl.module.scss @@ -5,7 +5,7 @@ width: 100%; display: grid; margin: 0 auto; - gap: 5px; + gap: 4px; } .timeContainer, @@ -20,8 +20,8 @@ 'ind clk clk btn' '... sta fin btn'; grid-template-rows: 1fr auto; - grid-template-columns: 1.5em 2fr 2fr 6em; - gap: 5px; + grid-template-columns: 1.5em 1fr 1fr 5em; + gap: 4px; justify-items: start; } diff --git a/client/src/features/control/playback/PlaybackTimer.jsx b/client/src/features/control/playback/PlaybackTimer.jsx index 4b7437e450..6fe19c5c11 100644 --- a/client/src/features/control/playback/PlaybackTimer.jsx +++ b/client/src/features/control/playback/PlaybackTimer.jsx @@ -20,9 +20,10 @@ const areEqual = (prevProps, nextProps) => { const incrementProps = { size: 'sm', - width: '2.9em', + width: '2em', colorScheme: 'white', variant: 'outline', + fontSize: '12px', }; const PlaybackTimer = (props) => { diff --git a/client/src/features/editors/Editor.module.scss b/client/src/features/editors/Editor.module.scss index a20d7731ed..51aaa186d6 100644 --- a/client/src/features/editors/Editor.module.scss +++ b/client/src/features/editors/Editor.module.scss @@ -1,18 +1,16 @@ @use '../../theme/main' as *; -.corner { - display: none; +@mixin absolute-top-right($distance) { position: absolute; - top: 8px; - right: 8px; + top: $distance; + right: $distance; cursor: pointer; color: $ontime-pink; } -h1 { - font-size: max(1.5em, 16px); - color: $bg-gray-100; - padding-bottom: 0.25em; +.corner { + display: none; + @include absolute-top-right(8px); } .mainContainer { @@ -21,15 +19,15 @@ h1 { height: 100%; margin: auto; color: $title-white; - padding: max(16px, 2vh); + padding: max(16px, 2vh) max(8px, 1vh); display: grid; grid-template-rows: auto 1fr; - grid-template-columns: 40px 48em 31em auto; + grid-template-columns: 48px 46em 30em auto; grid-template-areas: 'sett even play info' 'sett even mess info'; - gap: max(16px, 2vh); + gap: 8px; .editor, .playback, @@ -44,76 +42,12 @@ h1 { } } -.mainContainer > div { - border-radius: 0.5em; - height: 100%; - background-color: $bg-gray-1000; - padding: 0.8em 1.5em; - - display: flex; - flex-direction: column; -} - -.editor { - grid-area: even; - height: calc(100% - 3em); - - .content { - height: calc(100% - 3em); - overflow: hidden; - } -} - -.info { - grid-area: info; - min-width: 17em; - - .content { - display: flex; - flex-direction: column; - height: calc(100% - 3em); - overflow: hidden; - } -} - -.messages { - grid-area: mess; -} - -.playback { - grid-area: play; - min-height: 320px; - max-height: 320px; -} - -.messages, -.playback { - min-width: 31em; -} - -.mainContainer > .settings { - grid-area: sett; - background-color: transparent; - padding: 0; - margin: 0; - width: fit-content; - - display: flex; - flex-direction: column; - gap: 1em; -} - -.content { - padding-top: 0.5em; -} - - /* 2/3 window, hide info */ -@media (max-width: 1450px) and (min-width: 1101px) { +@media (max-width: 1450px) and (min-height: 700px) { .mainContainer { height: 100%; grid-template-rows: auto 1fr; - grid-template-columns: 40px 48em auto; + grid-template-columns: 48px 48em auto; .info { visibility: hidden; @@ -122,11 +56,13 @@ h1 { } /* 1/2 window, event list only */ -@media (max-width: 1100px) and (min-width: 851px){ +@media (max-width: 1100px) { .mainContainer { height: 100%; - grid-template-rows: 1fr auto; - grid-template-columns: 40px 48em; + grid-template-rows: 100%; + grid-template-columns: 48px 48em; + grid-template-areas: + 'sett even'; .info, .messages, @@ -141,7 +77,6 @@ h1 { .mainContainer { grid-template-rows: auto 1fr; grid-template-columns: 100%; - column-gap: 0; grid-template-areas: 'play' 'mess'; @@ -178,3 +113,92 @@ h1 { } } } + +h1 { + font-size: max(1.5em, 16px); + color: $bg-gray-100; + padding-bottom: 0.25em; +} + +.mainContainer { + .settings, + .editor, + .messages, + .playback, + .info { + border-radius: 8px; + height: 100%; + background-color: $bg-gray-1000; + padding: 0.8em 1.5em; + + display: flex; + flex-direction: column; + } +} + +.eventEditor { + border-radius: 3px 3px 0 0; + background-color: $bg-gray-950; + border-top: 1px solid $bg-gray-900; + padding: 0.8em 1.5em; + position: absolute; + bottom: 0; + width: 100vw; + max-height: 40vh; + left: 0; + z-index: 10; + color: white; + + .header { + display: flex; + justify-content: space-between; + } +} + +.editor { + grid-area: even; + height: calc(100% - 3em); + + .content { + height: calc(100% - 3em); + overflow: hidden; + } +} + +.info { + grid-area: info; + min-width: 17em; + + .content { + display: flex; + flex-direction: column; + height: calc(100% - 3em); + overflow: hidden; + } +} + +.messages { + grid-area: mess; +} + +.playback { + grid-area: play; + min-height: 320px; + max-height: 320px; + min-width: 480px; +} + +.mainContainer > .settings { + grid-area: sett; + background-color: transparent; + margin: 0; + padding: 0 8px 0 0; + width: fit-content; + + display: flex; + flex-direction: column; +} + +.content { + padding-top: 0.5em; +} diff --git a/client/src/features/editors/EntryBlock/EntryBlock.module.scss b/client/src/features/editors/EntryBlock/EntryBlock.module.scss index 903950bcb1..1f09c99e31 100644 --- a/client/src/features/editors/EntryBlock/EntryBlock.module.scss +++ b/client/src/features/editors/EntryBlock/EntryBlock.module.scss @@ -7,34 +7,18 @@ align-items: center; justify-content: center; gap: 5%; - transition: height 0.15s ease; margin: 2px 0; - - * { - display: flex; - } } .create { - padding: 0 0.5em; + background-color: rgba($bg-gray-1100, 0.85); box-sizing: border-box; width: 100%; - border-radius: 8px; font-size: 12px; position: relative; - height: 20px; - margin: -8px 0; - transition: height 0.1s ease; - - * { - display: none; - } - - &:hover { - @include when-visible; - } + display: none; .createEvent, .createDelay, @@ -46,7 +30,7 @@ vertical-align: center; font-weight: 600; line-height: 21px; - border-radius: 4px; + border-radius: 2px; opacity: 0.6; cursor: pointer; @@ -91,8 +75,18 @@ } .options { + display: flex; flex-direction: column; - opacity: 0.65; + + label { + opacity: 0.65; + transition: opacity 0.15s; + + &:hover { + opacity: 1; + } + } + } .disabled { @@ -104,4 +98,4 @@ .create.visible { @include when-visible; -} +} \ No newline at end of file diff --git a/client/src/features/modals/Modals.module.scss b/client/src/features/modals/Modals.module.scss index db09cb37f5..5db5ea5ad3 100644 --- a/client/src/features/modals/Modals.module.scss +++ b/client/src/features/modals/Modals.module.scss @@ -53,13 +53,13 @@ /* Track */ ::-webkit-scrollbar-track { background: rgba($light-bg, 0.15); - border-radius: 4px; + border-radius: 3px; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgba($light-bg, 0.35); - border-radius: 4px; + border-radius: 3px; } /* Handle on hover */ diff --git a/client/src/index.scss b/client/src/index.scss index a854960ef2..f44154719f 100644 --- a/client/src/index.scss +++ b/client/src/index.scss @@ -32,16 +32,16 @@ option { /* Track */ ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.01); - border-radius: 4px; + border-radius: 2px; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); - border-radius: 4px; + border-radius: 2px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.23); } diff --git a/client/src/theme/_main.scss b/client/src/theme/_main.scss index 8e3903a0c9..683ca67783 100644 --- a/client/src/theme/_main.scss +++ b/client/src/theme/_main.scss @@ -24,7 +24,7 @@ $ontime-pink-variant: #ff6969; $ontime-roll: #2b6cb0; $ontime-delay: #dd6b20; $action-blue: #3182ce; - +$opacity-disabled: 0.4; //rgba(255, 255, 255, 0.39); - $bg-gray-700 //rgba(255, 255, 255, 0.13); - $bg-gray-900 diff --git a/client/src/theme/theme.js b/client/src/theme/theme.js index 3bf45e935a..df1bd92ec9 100644 --- a/client/src/theme/theme.js +++ b/client/src/theme/theme.js @@ -4,7 +4,44 @@ const theme = extendTheme({ components: { Button: { baseStyle: { - borderRadius: '4px', + borderRadius: '3px', + }, + }, + Input: { + baseStyle: { + field: { + borderRadius: 3, + }, + }, + sizes: {}, + variants: { + filled: { + field: { + backgroundColor: 'rgba(255, 255, 255, 0.03)', + _hover: { + backgroundColor: 'rgba(255, 255, 255, 0.13)', + }, + }, + }, + }, + defaultProps: { + variant: null, // null here + }, + }, + Textarea: { + baseStyle: { + borderRadius: 4, + }, + variants: { + filled: { + backgroundColor: 'rgba(255, 255, 255, 0.03)', + _hover: { + backgroundColor: 'rgba(255, 255, 255, 0.13)', + }, + }, + }, + defaultProps: { + variant: null, // null here }, }, }, diff --git a/server/main.js b/server/main.js index 6977b78d69..438d985dfa 100644 --- a/server/main.js +++ b/server/main.js @@ -91,7 +91,7 @@ function createWindow() { win = new BrowserWindow({ width: 1920, height: 1000, - minWidth: 575, + minWidth: 525, minHeight: 405, maxWidth: 1920, maxHeight: 1440, diff --git a/server/package.json b/server/package.json index ead1c1365c..7a5807471f 100644 --- a/server/package.json +++ b/server/package.json @@ -1,6 +1,6 @@ { "name": "ontime", - "version": "1.7.1", + "version": "1.7.2", "author": "Carlos Valente", "description": "Time keeping for live events", "repository": "https://github.com/cpvalente/ontime",