diff --git a/README.md b/README.md index b64b5d525..3808ef87d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -[](https://www.gnu.org/licenses/gpl-3.0) +[](https://www.gnu.org/licenses/gpl-3.0) [](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) {