cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 14:39:06 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style v2 tweaks (#415)

Browse Source 
* fix: reset rundown on upload

* style: facilitate reaching event id

* fix: show rundown on half screens

* style: prevent tab overflow

* style: remove redundant information

* style: improve editor in small screens

* style: small tweaks to editor sizes
This commit is contained in:
Carlos Valente
2023-05-26 13:18:44 +02:00
committed by GitHub
parent 563b13405b
commit 82ac8f1ba5
17 changed files with 98 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/timer-display/TimerDisplay.scss
+1 -1
View File
@@ -7,7 +7,7 @@
text-align: center; text-align: center;
letter-spacing: 0.1em; letter-spacing: 0.1em;
font-weight: 600; font-weight: 600;
font-size: 3.75em; font-size: 3.5rem;
&--finished { &--finished {
color: $timer-finished-color; color: $timer-finished-color;
apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.module.scss
+2 -2
View File
@@ -7,13 +7,13 @@
"go playback" "go playback"
"go transport" "go transport"
"extra extra"; "extra extra";
grid-template-rows: repeat(3, 32px); grid-template-rows: repeat(3, 2rem);
gap: $element-spacing; gap: $element-spacing;
} }
.go { .go {
grid-area: go; grid-area: go;
font-size: 5em; font-size: 5rem;
} }
@mixin spaced-flex { @mixin spaced-flex {
apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss
+4 -4
View File
@@ -7,7 +7,7 @@
'ind clk clk btn' 'ind clk clk btn'
'... sta fin btn'; '... sta fin btn';
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
grid-template-columns: 1.5em 1fr 1fr 5em; grid-template-columns: 1.25rem 1fr 1fr 5rem;
gap: $element-inner-spacing; gap: $element-inner-spacing;
justify-items: start; justify-items: start;
} }
@@ -15,7 +15,7 @@
.timer { .timer {
grid-area: clk; grid-area: clk;
white-space: nowrap; white-space: nowrap;
max-width: 300px; max-width: 18.75rem;
} }
.indicators { .indicators {
@@ -51,7 +51,7 @@
.indNegativeActive { .indNegativeActive {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
height: 4px; height: 0.25rem;
} }
.indNegativeActive { .indNegativeActive {
@@ -80,7 +80,7 @@
.start, .start,
.finish, .finish,
.roll { .roll {
height: 24px; height: 1.5rem;
} }
.start { .start {
apps/client/src/features/control/playback/tap-button/TapButton.module.scss
+3 -7
View File
@@ -6,7 +6,7 @@ $button-color-white: $gray-50;
@mixin tap-factory($theme-color) { @mixin tap-factory($theme-color) {
font-family: $ontime-font-family; font-family: $ontime-font-family;
font-size: 18px; font-size: calc(1rem + 2px);
border-radius: $component-border-radius-md; border-radius: $component-border-radius-md;
width: 100%; width: 100%;
transition-property: color, background-color; transition-property: color, background-color;
@@ -77,17 +77,13 @@ $button-color-white: $gray-50;
@include tap-factory($ontime-stop); @include tap-factory($ontime-stop);
} }
.tapButton.normal {
aspect-ratio: 3/1;
}
.tapButton.square { .tapButton.square {
aspect-ratio: 1; aspect-ratio: 1;
font-size: 14px; font-size: calc(1rem - 2px);
} }
.tapButton.fill { .tapButton.fill {
aspect-ratio: unset; aspect-ratio: unset;
height: 100%; height: 100%;
font-size: 1.5em; font-size: 1.5rem;
} }
apps/client/src/features/editors/Editor.module.scss
+21 -16
View File
@@ -1,9 +1,9 @@
@use '../../theme/ontimeColours' as *; @use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *; @use '../../theme/v2Styles' as *;
$menu-width: 48px; $menu-width: 2.75rem;
$rundown-width: 46em; $rundown-width: 44.5rem;
$playback-width: 450px; $playback-width: 26rem;
@mixin absolute-top-right($distance) { @mixin absolute-top-right($distance) {
position: absolute; position: absolute;
@@ -20,7 +20,7 @@ $playback-width: 450px;
.corner { .corner {
display: none; display: none;
@include absolute-top-right(8px); @include absolute-top-right(0.5rem);
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -30,7 +30,7 @@ $playback-width: 450px;
height: 100%; height: 100%;
margin: auto; margin: auto;
color: $ui-white; color: $ui-white;
padding: 16px 8px; padding: 1rem 0.5rem;
font-family: $ontime-font-family; font-family: $ontime-font-family;
display: grid; display: grid;
@@ -39,7 +39,7 @@ $playback-width: 450px;
grid-template-areas: grid-template-areas:
'sett rundown play info' 'sett rundown play info'
'sett rundown mess info'; 'sett rundown mess info';
gap: 8px; gap: 0.5rem;
.rundown, .rundown,
.playback, .playback,
@@ -59,7 +59,8 @@ $playback-width: 450px;
.mainContainer { .mainContainer {
height: 100%; height: 100%;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: $menu-width $rundown-width auto; grid-template-columns: $menu-width 1fr $playback-width;
background-color: pink;
.info { .info {
visibility: hidden; visibility: hidden;
@@ -74,7 +75,7 @@ $playback-width: 450px;
grid-template-rows: 100%; grid-template-rows: 100%;
grid-template-columns: $menu-width $rundown-width; grid-template-columns: $menu-width $rundown-width;
grid-template-areas: grid-template-areas:
'sett even'; 'sett rundown';
.info, .info,
.messages, .messages,
@@ -135,7 +136,7 @@ $playback-width: 450px;
border-radius: 8px; border-radius: 8px;
height: 100%; height: 100%;
background-color: $bg-container-l2; background-color: $bg-container-l2;
padding: 0.8em 1.5em; padding: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -165,7 +166,7 @@ $playback-width: 450px;
.header { .header {
background-color: $gray-1200; background-color: $gray-1200;
padding: 8px; padding: 0.5rem;
border-left: 1px solid $white-10; border-left: 1px solid $white-10;
border-radius: 0 8px 0 0; border-radius: 0 8px 0 0;
} }
@@ -176,14 +177,14 @@ $playback-width: 450px;
height: 100%; height: 100%;
.content { .content {
height: calc(100% - 24px); height: calc(100% - 1.5rem);
overflow: hidden; overflow: hidden;
} }
} }
.info { .info {
grid-area: info; grid-area: info;
min-width: 17em; min-width: 17rem;
max-width: 800px; max-width: 800px;
.content { .content {
@@ -199,16 +200,14 @@ $playback-width: 450px;
.playback { .playback {
grid-area: play; grid-area: play;
min-height: 250px;
max-height: 380px; max-height: 380px;
min-width: 450px;
} }
.mainContainer > .settings { .mainContainer > .settings {
grid-area: sett; grid-area: sett;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
padding: 0 8px 0 0; padding: 0 0.5rem 0 0;
width: fit-content; width: fit-content;
display: flex; display: flex;
@@ -216,5 +215,11 @@ $playback-width: 450px;
} }
.content { .content {
padding-top: 24px; padding-top: 1.5rem;
}
.rundown {
.content {
padding-top: 0.5rem;
}
} }
apps/client/src/features/event-editor/EventEditor.module.scss
+18 -16
View File
@@ -1,9 +1,9 @@
@use '../../theme/v2Styles' as *; @use '../../theme/v2Styles' as *;
.eventEditor { .eventEditor {
padding: 16px 32px 32px 32px; padding: 1rem 2rem 2rem 2rem;
width: 100%; width: 100%;
gap: max(16px, 2vh); gap: max(1rem, 2vh);
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@@ -15,15 +15,17 @@
.timeSettings { .timeSettings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 0.5rem;
} }
} }
.eventInfo { .eventInfo {
grid-area: eventInfo; grid-area: eventInfo;
.eventId { display: flex;
margin-left: $element-inner-spacing; align-items: center;
user-select: text;
.eventId {
margin-left:$element-spacing;
} }
} }
@@ -35,7 +37,7 @@
.timeOptions { .timeOptions {
grid-area: timeOptions; grid-area: timeOptions;
display: flex; display: flex;
gap: 24px; gap: 1.5rem;
} }
.titles { .titles {
@@ -53,19 +55,19 @@
.left { .left {
grid-area: left; grid-area: left;
padding: 0 16px; padding: 0 1rem;
border-left: 1px solid $border-color-ondark; border-left: 1px solid $border-color-ondark;
} }
.right { .right {
padding-left: 16px; padding-left: 1rem;
grid-area: right; grid-area: right;
border-left: 1px solid $border-color-ondark; border-left: 1px solid $border-color-ondark;
} }
} }
@mixin input-label() { @mixin input-label() {
font-size: 13px; font-size: calc(1rem - 3px);
color: $label-gray; color: $label-gray;
} }
@@ -84,32 +86,32 @@
} }
&.publicToggle { &.publicToggle {
height: 32px; height: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
gap: 8px; gap: 0.5rem;
} }
} }
.spacer { .spacer {
height: 20px; height: 1.25rem;
} }
.inline { .inline {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 1rem;
} }
.column { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 0.5rem;
} }
.padTop { .padTop {
margin-top: 8px; margin-top: 0.5rem;
} }
.fullHeight { .fullHeight {
apps/client/src/features/event-editor/EventEditor.tsx
+3 -1
View File
@@ -42,7 +42,9 @@ export default function EventEditor() {
<div className={style.eventEditor}> <div className={style.eventEditor}>
<div className={style.eventInfo}> <div className={style.eventInfo}>
Event ID Event ID
<span className={style.eventId}>{event.id}</span> <span className={style.eventId}>
<CopyTag label={event.id}>{event.id}</CopyTag>
</span>
</div> </div>
<div className={style.eventActions}> <div className={style.eventActions}>
<CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag> <CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag>
apps/client/src/features/info/Info.module.scss
+1 -1
View File
@@ -6,7 +6,7 @@
font-family: $ontime-font-family; font-family: $ontime-font-family;
color: $label-gray; color: $label-gray;
display: flex; display: flex;
justify-content: space-between; justify-content: end;
} }
.labels { .labels {
apps/client/src/features/info/Info.tsx
-1
View File
@@ -33,7 +33,6 @@ export default function Info() {
return ( return (
<> <>
<div className={style.panelHeader}> <div className={style.panelHeader}>
<span>Ontime running on port 4001</span>
<span>{selected}</span> <span>{selected}</span>
</div> </div>
<CollapsableInfo title='Network Info'> <CollapsableInfo title='Network Info'>
apps/client/src/features/menu/MenuBar.tsx
+8 -1
View File
@@ -102,7 +102,7 @@ const MenuBar = (props: MenuBarProps) => {
return ( return (
<VStack> <VStack>
<QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} /> <QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} size='md' />
<div className={style.gap} /> <div className={style.gap} />
<TooltipActionBtn <TooltipActionBtn
@@ -120,6 +120,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={onUploadOpen} clickHandler={onUploadOpen}
tooltip='Import project file' tooltip='Import project file'
aria-label='Import project file' aria-label='Import project file'
size='sm'
/> />
<TooltipActionBtn <TooltipActionBtn
{...buttonStyle} {...buttonStyle}
@@ -127,6 +128,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={downloadRundown} clickHandler={downloadRundown}
tooltip='Export project file' tooltip='Export project file'
aria-label='Export project file' aria-label='Export project file'
size='sm'
/> />
<div className={style.gap} /> <div className={style.gap} />
@@ -137,6 +139,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={setRunMode} clickHandler={setRunMode}
tooltip='Run mode' tooltip='Run mode'
aria-label='Run mode' aria-label='Run mode'
size='sm'
/> />
<TooltipActionBtn <TooltipActionBtn
{...buttonStyle} {...buttonStyle}
@@ -145,6 +148,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={setEditMode} clickHandler={setEditMode}
tooltip='Edit mode' tooltip='Edit mode'
aria-label='Edit mode' aria-label='Edit mode'
size='sm'
/> />
<div className={style.gap} /> <div className={style.gap} />
@@ -155,6 +159,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={onIntegrationOpen} clickHandler={onIntegrationOpen}
tooltip='Integrations' tooltip='Integrations'
aria-label='Integrations' aria-label='Integrations'
size='sm'
/> />
<TooltipActionBtn <TooltipActionBtn
{...buttonStyle} {...buttonStyle}
@@ -163,6 +168,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={onSettingsOpen} clickHandler={onSettingsOpen}
tooltip='Settings' tooltip='Settings'
aria-label='Settings' aria-label='Settings'
size='sm'
/> />
<div className={style.gap} /> <div className={style.gap} />
<TooltipActionBtn <TooltipActionBtn
@@ -172,6 +178,7 @@ const MenuBar = (props: MenuBarProps) => {
clickHandler={onAboutOpen} clickHandler={onAboutOpen}
tooltip='About' tooltip='About'
aria-label='About' aria-label='About'
size='sm'
/> />
</VStack> </VStack>
); );
apps/client/src/features/modals/settings-modal/SettingsModal.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function SettingsModal(props: ModalManagerProps) {
<ModalBody> <ModalBody>
<Tabs variant='ontime' size='sm' isLazy> <Tabs variant='ontime' size='sm' isLazy>
<TabList> <TabList>
<Tab>App Settings</Tab> <Tab>App</Tab>
<Tab>Event Data</Tab> <Tab>Event Data</Tab>
<Tab>Editor</Tab> <Tab>Editor</Tab>
<Tab>Cuesheet</Tab> <Tab>Cuesheet</Tab>
apps/client/src/features/rundown/_blockMixins.scss
+8 -8
View File
@@ -1,16 +1,16 @@
@use '../../theme/ontimeColours' as *; @use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *; @use '../../theme/v2Styles' as *;
$block-gap: 4px; $block-gap: 0.25rem;
$block-element-spacing: 4px; $block-element-spacing: 0.25rem;
$block-binder-width: 32px; $block-binder-width: 2rem;
$block-clearance: 8px; $block-clearance: 0.5rem;
$block-border-radius: 8px; $block-border-radius: 0.5rem;
$block-text-color: $gray-50; $block-text-color: $gray-50;
$block-bg: $gray-1200; $block-bg: $gray-1200;
$block-bg2: $gray-1050; // for delay and blocks $block-bg2: $gray-1050; // for delay and blocks
$block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px; $block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
$secondary-block-height: 40px; $secondary-block-height: 2.5rem;
$block-cursor-color: $blue-400; $block-cursor-color: $blue-400;
@mixin block-styling() { @mixin block-styling() {
@@ -18,13 +18,13 @@ $block-cursor-color: $blue-400;
border: 1px solid $white-10; border: 1px solid $white-10;
font-family: $ontime-font-family; font-family: $ontime-font-family;
border-radius: $block-border-radius; border-radius: $block-border-radius;
margin: 4px 2px; margin: 0.25rem 0.125rem;
position: relative; position: relative;
color: $block-text-color; color: $block-text-color;
} }
@mixin block-spacing() { @mixin block-spacing() {
padding-right: 8px; padding-right: 0.5rem;
gap: 2px; gap: 2px;
} }
apps/client/src/features/rundown/common/TitleEditor.module.scss
+1 -1
View File
@@ -2,7 +2,7 @@
.titleEditor { .titleEditor {
display: block; display: block;
font-size: 18px; font-size: calc(1rem + 2px);
max-width: 100%; max-width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
apps/client/src/features/rundown/event-block/EventBlock.module.scss
+14 -18
View File
@@ -17,7 +17,7 @@ $skip-opacity: 0.1;
"binder ... ... ..."; "binder ... ... ...";
grid-template-columns: $block-binder-width auto 1fr auto; grid-template-columns: $block-binder-width auto 1fr auto;
grid-template-rows: 4px 36px 36px 36px 4px; grid-template-rows: 0.25rem 2.25rem 2.25rem 2.25rem 0.25rem;
align-items: center; align-items: center;
padding-right: $block-clearance; padding-right: $block-clearance;
gap: 2px; gap: 2px;
@@ -83,12 +83,12 @@ $skip-opacity: 0.1;
background-color: $gray-1050; // to override inline background-color: $gray-1050; // to override inline
color: $section-white; color: $section-white;
font-size: 17px; font-size: 1rem;
.drag { .drag {
@include drag-style; @include drag-style;
position: absolute; position: absolute;
margin-top: 4px; margin-top: 0.25rem;
} }
} }
@@ -96,8 +96,8 @@ $skip-opacity: 0.1;
grid-area: pb-actions; grid-area: pb-actions;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 8px; margin: 0 0.5rem;
gap: 6px; gap: 0.5rem;
} }
.eventTimers { .eventTimers {
@@ -108,8 +108,8 @@ $skip-opacity: 0.1;
height: 100%; height: 100%;
.delayNote { .delayNote {
font-size: 12px; font-size: 0.75rem;
line-height: 14px; line-height: 0.8rem;
color: $ontime-delay-text; color: $ontime-delay-text;
} }
} }
@@ -125,10 +125,6 @@ $skip-opacity: 0.1;
justify-content: flex-end; justify-content: flex-end;
} }
.eventOptions {
margin: $element-spacing 16px $element-spacing 0;
}
.progressBg { .progressBg {
grid-area: progb; grid-area: progb;
border-radius: 2px; border-radius: 2px;
@@ -152,7 +148,7 @@ $skip-opacity: 0.1;
"notes status" "notes status"
"progb progb"; "progb progb";
gap: 2px; gap: 2px;
grid-template-rows: auto 4px; grid-template-rows: auto 0.25rem;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding: 2px 0; padding: 2px 0;
@@ -161,15 +157,15 @@ $skip-opacity: 0.1;
.eventNote { .eventNote {
grid-area: notes; grid-area: notes;
display: block; display: block;
font-size: 13px; font-size: calc(1rem - 3px);
color: $block-text-color; color: $block-text-color;
line-height: 13px; line-height: calc(1rem - 3px);
} }
.nextTag { .nextTag {
grid-area: next; grid-area: next;
font-size: 1em; font-size: 1rem;
color: $orange-500; color: $orange-500;
letter-spacing: 0.03px; letter-spacing: 0.03px;
font-weight: 600; font-weight: 600;
@@ -181,13 +177,13 @@ $skip-opacity: 0.1;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 8px; gap: 0.5rem;
color: var(--status-color-override, $gray-500); color: var(--status-color-override, $gray-500);
.statusIcon { .statusIcon {
width: 16px; width: 1rem;
height: 16px; height: 1rem;
} }
.statusIcon.active { .statusIcon.active {
apps/client/src/index.scss
+9
View File
@@ -17,6 +17,7 @@
body, body,
html, html,
.App { .App {
font-size: 16px;
font-family: $ontime-font-family; font-family: $ontime-font-family;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
@@ -28,6 +29,14 @@ html,
background-color: $bg-container-l1; background-color: $bg-container-l1;
} }
@media (min-width: 1450px) and (max-width: 1666px) {
body,
html,
.App {
font-size: 15px;
}
}
// workaround for chakra // workaround for chakra
// // https://github.com/chakra-ui/chakra-ui/issues/417 // // https://github.com/chakra-ui/chakra-ui/issues/417
option { option {
apps/client/src/theme/_mixins.scss
-1
View File
@@ -24,7 +24,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
font-size: 16px;
transition-property: color; transition-property: color;
transition-duration: $transition-time-action; transition-duration: $transition-time-action;
apps/client/src/theme/_v2Styles.scss
+4 -4
View File
@@ -39,10 +39,10 @@ $modal-note-color: $gray-700;
// interface elements // interface elements
$border-color-ondark: $white-10; $border-color-ondark: $white-10;
$element-inner-spacing: 4px; $element-inner-spacing: 0.25rem;
$element-spacing: 8px; $element-spacing: 0.5rem;
$section-spacing: 16px; $section-spacing: 1rem;
$main-spacing: 32px; $main-spacing: 2rem;
// interface text // interface text
$ontime-font-family: "Open Sans", "Segoe UI", sans-serif; $ontime-font-family: "Open Sans", "Segoe UI", sans-serif;