cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-11 02:13:48 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Refactor/styles (#202)

Browse Source 
* style: general micro improvements in editor
* version bump
This commit is contained in:
Carlos Valente
2022-09-14 21:50:14 +02:00
committed by GitHub
parent b7e758bf24
commit 94b03312a6
11 changed files with 172 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime-ui",
"version": "1.7.1",
"version": "1.7.2",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.3.2",
client/src/features/control/playback/PlaybackControl.module.scss
+3 -3
View File
@@ -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;
}
client/src/features/control/playback/PlaybackTimer.jsx
+2 -1
View File
@@ -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) => {
client/src/features/editors/Editor.module.scss
+105 -81
View File
@@ -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;
}
client/src/features/editors/EntryBlock/EntryBlock.module.scss
+15 -21
View File
@@ -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;
}
}
client/src/features/modals/Modals.module.scss
+2 -2
View File
@@ -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 */
client/src/index.scss
+3 -3
View File
@@ -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);
}
client/src/theme/_main.scss
+1 -1
View File
@@ -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
client/src/theme/theme.js
+38 -1
View File
@@ -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
},
},
},
server/main.js
+1 -1
View File
@@ -91,7 +91,7 @@ function createWindow() {
win = new BrowserWindow({
width: 1920,
height: 1000,
minWidth: 575,
minWidth: 525,
minHeight: 405,
maxWidth: 1920,
maxHeight: 1440,
server/package.json
+1 -1
View File
@@ -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",