diff --git a/README.md b/README.md index b64b5d525..3808ef87d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) +[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://cpvalente.gitbook.io/ontime/) + Download the latest releases here - [Windows](https://gitreleases.dev/gh/cpvalente/ontime/latest/ontime-win64.exe) diff --git a/client/src/features/control/PlaybackControl.module.css b/client/src/features/control/PlaybackControl.module.css index 65838edd6..f1f66cf3d 100644 --- a/client/src/features/control/PlaybackControl.module.css +++ b/client/src/features/control/PlaybackControl.module.css @@ -20,13 +20,15 @@ 'ind clk clk btn' '... sta fin btn'; grid-template-rows: 1fr auto; - grid-template-columns: 1.5em 2fr 2fr 22%; + grid-template-columns: 1.5em 2fr 2fr 6em; gap: 5px; justify-items: start; } .timer { grid-area: clk; + white-space: nowrap; + max-width: 300px; } .indicators { diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css index e06288396..ec991e8ed 100644 --- a/client/src/features/editors/Editor.module.css +++ b/client/src/features/editors/Editor.module.css @@ -8,7 +8,7 @@ display: grid; grid-template-rows: auto 1fr; - grid-template-columns: 40px 48em auto 1fr; + grid-template-columns: 40px 48em auto auto; grid-template-areas: 'sett even play info' 'sett even mess info'; @@ -31,6 +31,24 @@ } } +/* 1/2 window, event list only */ +@media (max-width: 1100px) { + .mainContainer { + height: 100%; + grid-template-rows: 1fr auto; + grid-template-columns: 40px 48em; + /* grid-template-areas: + 'sett even ' + 'sett play '; */ + } + + .info, + .messages, + .playback { + visibility: hidden; + } +} + /* 1/3 window, show control only */ @media (max-width: 850px) and (min-height: 500px) { .mainContainer { @@ -42,6 +60,11 @@ 'mess'; } + .playback, + .messages { + visibility: visible; + } + .editor, .info, .settings { @@ -50,12 +73,15 @@ } /* 1/3 corner window, playback only */ -@media (max-width: 900px) and (max-height: 500px) { +@media (max-width: 850px) and (max-height: 500px) { .mainContainer { grid-template-rows: 100%; grid-template-columns: 100%; grid-template-areas: 'play'; - max-height: 325px; + } + + .playback { + visibility: visible; } .editor, @@ -88,6 +114,8 @@ h1 { .info { grid-area: info; + min-width: 17em; + max-width: 32em; } .messages { @@ -96,6 +124,8 @@ h1 { .playback { grid-area: play; + min-height: 320px; + max-height: 320px; } .messages, diff --git a/client/src/features/editors/list/EventBlock.module.css b/client/src/features/editors/list/EventBlock.module.css index 80fcfdefd..8507b923d 100644 --- a/client/src/features/editors/list/EventBlock.module.css +++ b/client/src/features/editors/list/EventBlock.module.css @@ -30,6 +30,7 @@ grid-template-columns: 2em 2em auto auto 1fr auto 3.7em; grid-template-areas: 'drag indi time time text more btns'; justify-content: center; + align-items: center; } .expanded { @@ -59,6 +60,7 @@ align-self: flex-start; font-size: 0.75em; overflow: hidden; + min-height: 3em; min-width: 0; justify-content: center; } @@ -95,6 +97,7 @@ .time { grid-area: time; + align-self: center; } .start { @@ -136,7 +139,6 @@ .titleContainer { grid-area: text; - height: 100%; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); @@ -148,6 +150,13 @@ overflow: hidden; } +.collapsed .titleContasiner { + height: fit-content; +} +.expanded .titleContainer { + height: 100%; +} + .oscLabel { color: #4bffabcc; font-size: 0.8em; @@ -165,6 +174,7 @@ color: #fff; grid-area: more; margin-top: 0.2em; + align-self: baseline; } .moreExpanded { diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css index ae918ff7e..bc22bd3f4 100644 --- a/client/src/features/info/Info.module.css +++ b/client/src/features/info/Info.module.css @@ -33,6 +33,15 @@ color: #2b6cb0; } +.collapsedTitle { + font-size: inherit; + + padding-left: 1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .labelContainer { white-space: nowrap; overflow: hidden; diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx index 3d44893b0..5ba9aee71 100644 --- a/client/src/features/info/InfoTitle.jsx +++ b/client/src/features/info/InfoTitle.jsx @@ -17,6 +17,9 @@ export default function InfoTitle(props) {
{title} + {collapsed && ( + {data.title} + )} div { @@ -111,6 +110,8 @@ display: grid; grid-template-rows: 5vh 1fr 3vh; height: 100%; + overflow: hidden; + max-width: 100%; } /* =================== MAIN ===================*/ diff --git a/server/assets/background.png b/server/assets/background.png index 8ee4545c3..287299091 100644 Binary files a/server/assets/background.png and b/server/assets/background.png differ diff --git a/server/assets/background@2x.png b/server/assets/background@2x.png index b059bdb61..658e7246c 100644 Binary files a/server/assets/background@2x.png and b/server/assets/background@2x.png differ diff --git a/server/assets/ontime-uninstall.bmp b/server/assets/ontime-uninstall.bmp index 670c0bdc7..7d5f4fb7c 100644 Binary files a/server/assets/ontime-uninstall.bmp and b/server/assets/ontime-uninstall.bmp differ diff --git a/server/main.js b/server/main.js index 1dd42fa0d..80149efbf 100644 --- a/server/main.js +++ b/server/main.js @@ -93,7 +93,7 @@ function createWindow() { width: 1920, height: 1000, minWidth: 575, - minHeight: 385, + minHeight: 405, maxWidth: 1920, maxHeight: 1440, backgroundColor: '#202020', diff --git a/server/src/classes/EventTimer.js b/server/src/classes/EventTimer.js index a4ceb69df..b87c81023 100644 --- a/server/src/classes/EventTimer.js +++ b/server/src/classes/EventTimer.js @@ -608,7 +608,10 @@ export class EventTimer extends Timer { if (this.state === 'roll') { this.rollLoad(); } - } else if ('title' in e || 'subtitle' in e || 'presenter') { + } + + // load titles + if ('title' in e || 'subtitle' in e || 'presenter' in e) { // TODO: should be more selective on the need to load titles this._loadTitlesNext(); this._loadTitlesNow();