style improvements

- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles

client/src/features/editors/Editor.jsx

@@ -1,6 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiSettings } from 'react-icons/fi';
-import { Grid, GridItem, Heading } from '@chakra-ui/layout';
+import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
@@ -10,6 +8,7 @@ import styles from './Editor.module.css';
 import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
+import SettingsIconBtn from '../../common/components/buttons/SettingsIconBtn';
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -18,132 +17,112 @@ export default function Editor() {
     <>
       <SettingsModal isOpen={isOpen} onClose={onClose} />
 
-      <Grid
-        templateRows='1fr 1fr 1fr'
-        templateColumns='1fr 25vw 25vw 5vw'
-        gap={5}
-        className={styles.mainContainer}
-      >
-        <GridItem rowSpan={3}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Event List
-            </Heading>
-            <NumberedText number={1} text={'Manage and select event to run'} />
-            <div className={styles.content}>
-              <EventListWrapper />
-            </div>
-          </Box>
-        </GridItem>
+      <div className={styles.mainContainer}>
+        <Box className={styles.editor}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Event List
+          </Heading>
+          <NumberedText number={1} text={'Manage and select event to run'} />
+          <div className={styles.content}>
+            <EventListWrapper />
+          </div>
+        </Box>
 
-        <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
-          <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Preview Displays
-            </Heading>
-            <NumberedText number={4} text={'Realtime screen preview'} />
-            <div className={styles.content}>
-              <PreviewContainer />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Preview Displays
+          </Heading>
+          <NumberedText number={4} text={'Realtime screen preview'} />
+          <div className={styles.content}>
+            <PreviewContainer />
+          </div>
+        </Box>
 
-        <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Display Messages
-            </Heading>
-            <NumberedText
-              number={2}
-              text={'Show realtime messages on separate screen types'}
-            />
-            <div className={styles.content}>
-              <MessageControl />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.messages}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Display Messages
+          </Heading>
+          <NumberedText
+            number={2}
+            text={'Show realtime messages on separate screen types'}
+          />
+          <div className={styles.content}>
+            <MessageControl />
+          </div>
+        </Box>
 
-        <GridItem colStart={3} rowStart={1}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Time Control
-            </Heading>
-            <NumberedText number={3} text={'Control Timer'} />
-            <div className={styles.content}>
-              <PlaybackControl />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.playback}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Time Control
+          </Heading>
+          <NumberedText number={3} text={'Control Timer'} />
+          <div className={styles.content}>
+            <PlaybackControl />
+          </div>
+        </Box>
 
-        <GridItem colStart={4} rowSpan={3}>
-          <Box className={styles.editor} borderRadius='0.5em'>
+        <Box className={styles.settings}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '2em',
+              paddingTop: '3em',
+            }}
+          >
+            <SettingsIconBtn size='md' clickHandler={onOpen} />
             <div
               style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '2em',
-                paddingTop: '3em',
+                width: 35,
+                height: 35,
+                backgroundColor: '#3b8cd8',
+                borderRadius: '50%',
               }}
-            >
-              <IconButton
-                icon={<FiSettings />}
-                isRound
-                variant='outline'
-                onClick={onOpen}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#3b8cd8',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#3182ce',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#2778c4',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#1d6eba',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#1364b0',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#095aa6',
-                  borderRadius: '50%',
-                }}
-              />
-            </div>
-          </Box>
-        </GridItem>
-      </Grid>
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#3182ce',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#2778c4',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1d6eba',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1364b0',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#095aa6',
+                borderRadius: '50%',
+              }}
+            />
+          </div>
+        </Box>
+      </div>
     </>
   );
 }

client/src/features/editors/Editor.module.css

@@ -1,12 +1,71 @@
 .mainContainer {
   background: linear-gradient(90deg, #202020 0%, #121212 100%);
   width: 100%;
+  height: 100%;
   margin: auto;
-  height: 95vh;
   color: #fffd;
+  padding: 2vh;
+
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 25vw 25vw 5vw;
+  grid-template-areas:
+    'even mess play sett'
+    'even prev prev sett'
+    'even prev prev sett';
+  gap: 2vh;
 }
 
-.editor {
+/* 2/3 window, hide previews */
+@media (max-width: 1250px) and (min-height: 700px) {
+  .mainContainer {
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas:
+      'even play sett'
+      'even mess sett';
+  }
+
+  .preview {
+    visibility: hidden;
+  }
+}
+
+/* 1/3 window, show control only */
+@media (max-width: 750px) and (min-height: 500px) {
+  .mainContainer {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      'mess'
+      'play';
+  }
+
+  .editor,
+  .preview,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+/* 1/3 corner window, playback only */
+@media (max-width: 900px) and (max-height: 500px) {
+  .mainContainer {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas: 'play';
+  }
+
+  .editor,
+  .messages,
+  .preview,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+.mainContainer > div {
+  border-radius: 0.5em;
   height: 100%;
   margin-top: 1.5vh;
   background-color: rgba(255, 255, 255, 0.13);
@@ -16,6 +75,26 @@
   flex-direction: column;
 }
 
+.editor {
+  grid-area: even;
+}
+
+.preview {
+  grid-area: prev;
+}
+
+.messages {
+  grid-area: mess;
+}
+
+.playback {
+  grid-area: play;
+}
+
+.settings {
+  grid-area: sett;
+}
+
 .content {
   padding-top: 1.5em;
 }
@@ -32,3 +111,25 @@
   display: flex;
   justify-content: flex-end;
 }
+
+/* width */
+::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.01);
+  border-radius: 4px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}

client/src/features/editors/list/Block.module.css

@@ -17,7 +17,6 @@
   padding: 0.2em 1em;
   box-sizing: border-box;
   display: flex;
-  margin: auto;
   gap: 1em;
 }
 
@@ -68,10 +67,8 @@
   background-color: rgba(255, 255, 255, 0.36);
   background: linear-gradient(
     180deg,
-    #4bffabcc 0%,
-    #227c52aa 09%,
-    #4bffab11 10%,
-    #4bffab11 89%,
+    #00000000 10%,
+    #4bffab10 89%,
     #227c52aa 90%,
     #4bffabcc 100%
   );

client/src/features/editors/list/EventList.jsx

@@ -4,6 +4,8 @@ import BlockBlock from './BlockBlock';
 import EventBlock from './EventBlock';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../../app/context/socketContext';
+import Empty from '../../../common/state/Empty';
+
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -28,6 +30,12 @@ export default function EventList(props) {
     };
   }, [socket]);
 
+  if (events.length < 1) {
+    return (
+        <Empty text='No Events' />
+    );
+  }
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
   let eventCount = -1;

client/src/features/editors/list/List.module.css

@@ -7,4 +7,11 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   padding: 8px;
+  overflow-y: scroll;
+  height: 71vh;
+}
+
+.empty {
+  opacity: 0.3;
+  align-self: center;
 }