style v2 tweaks (#415)

* 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
@@ -1,16 +1,16 @@
@use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *;
$block-gap: 4px;
$block-element-spacing: 4px;
$block-binder-width: 32px;
$block-clearance: 8px;
$block-border-radius: 8px;
$block-gap: 0.25rem;
$block-element-spacing: 0.25rem;
$block-binder-width: 2rem;
$block-clearance: 0.5rem;
$block-border-radius: 0.5rem;
$block-text-color: $gray-50;
$block-bg: $gray-1200;
$block-bg2: $gray-1050; // for delay and blocks
$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;
@mixin block-styling() {
@@ -18,13 +18,13 @@ $block-cursor-color: $blue-400;
border: 1px solid $white-10;
font-family: $ontime-font-family;
border-radius: $block-border-radius;
margin: 4px 2px;
margin: 0.25rem 0.125rem;
position: relative;
color: $block-text-color;
}
@mixin block-spacing() {
padding-right: 8px;
padding-right: 0.5rem;
gap: 2px;
}
@@ -2,7 +2,7 @@
.titleEditor {
display: block;
font-size: 18px;
font-size: calc(1rem + 2px);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
@@ -17,7 +17,7 @@ $skip-opacity: 0.1;
"binder ... ... ...";
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;
padding-right: $block-clearance;
gap: 2px;
@@ -83,12 +83,12 @@ $skip-opacity: 0.1;
background-color: $gray-1050; // to override inline
color: $section-white;
font-size: 17px;
font-size: 1rem;
.drag {
@include drag-style;
position: absolute;
margin-top: 4px;
margin-top: 0.25rem;
}
}
@@ -96,8 +96,8 @@ $skip-opacity: 0.1;
grid-area: pb-actions;
display: flex;
flex-direction: column;
margin: 0 8px;
gap: 6px;
margin: 0 0.5rem;
gap: 0.5rem;
}
.eventTimers {
@@ -108,8 +108,8 @@ $skip-opacity: 0.1;
height: 100%;
.delayNote {
font-size: 12px;
line-height: 14px;
font-size: 0.75rem;
line-height: 0.8rem;
color: $ontime-delay-text;
}
}
@@ -125,10 +125,6 @@ $skip-opacity: 0.1;
justify-content: flex-end;
}
.eventOptions {
margin: $element-spacing 16px $element-spacing 0;
}
.progressBg {
grid-area: progb;
border-radius: 2px;
@@ -152,7 +148,7 @@ $skip-opacity: 0.1;
"notes status"
"progb progb";
gap: 2px;
grid-template-rows: auto 4px;
grid-template-rows: auto 0.25rem;
align-items: center;
height: 100%;
padding: 2px 0;
@@ -161,15 +157,15 @@ $skip-opacity: 0.1;
.eventNote {
grid-area: notes;
display: block;
font-size: 13px;
font-size: calc(1rem - 3px);
color: $block-text-color;
line-height: 13px;
line-height: calc(1rem - 3px);
}
.nextTag {
grid-area: next;
font-size: 1em;
font-size: 1rem;
color: $orange-500;
letter-spacing: 0.03px;
font-weight: 600;
@@ -181,13 +177,13 @@ $skip-opacity: 0.1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
gap: 0.5rem;
color: var(--status-color-override, $gray-500);
.statusIcon {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
}
.statusIcon.active {