style: layout changes

client/src/App.jsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import SocketProvider from './app/context/socketContext';
 import withSocket from './features/viewers/ViewWrapper';
 import { ReactQueryDevtools } from 'react-query/devtools';
+import Empty from './common/state/Empty';
 
 const Editor = lazy(() => import('./features/editors/Editor'));
 const PresenterView = lazy(() =>
@@ -41,7 +42,7 @@ function App() {
     <SocketProvider>
       <QueryClientProvider client={queryClient}>
         <div className='App'>
-          <Suspense fallback={<div>Loading...</div>}>
+          <Suspense fallback={<Empty text='Loading' />}>
             <Switch>
               <Route exact path='/' component={SSpeaker} />
               <Route exact path='/sm' component={SStageManager} />

client/src/features/control/PlaybackControl.jsx

@@ -41,7 +41,7 @@ export default function PlaybackControl() {
 
     // Handle timer
     socket.on('timer', (data) => {
-      setTimer({ ...data });
+      setTimer(data);
     });
 
     // Handle selected event
@@ -103,7 +103,6 @@ export default function PlaybackControl() {
     _focus: { boxShadow: 'none' },
   };
 
-  console.log('debug timer', timer.running);
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
@@ -126,30 +125,30 @@ export default function PlaybackControl() {
           <span className={style.time}>{finish}</span>
         </div>
         <div className={style.btn}>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', 1)}
-          >
-            +1
-          </Button>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', 5)}
-          >
-            +5
-          </Button>
           <Button
             {...incrementProps}
             onClick={() => socket.emit('increment-timer', -1)}
           >
             -1
           </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 1)}
+          >
+            +1
+          </Button>
           <Button
             {...incrementProps}
             onClick={() => socket.emit('increment-timer', -5)}
           >
             -5
           </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 5)}
+          >
+            +5
+          </Button>
         </div>
       </div>
       <PlaybackButtons

client/src/features/editors/Editor.jsx

@@ -34,16 +34,6 @@ export default function Editor() {
           </div>
         </Box>
 
-        <Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Preview Displays
-          </Heading>
-          <NumberedText number={4} text={'Realtime screen preview'} />
-          <div className={styles.content}>
-            {/* <PreviewContainer /> */}
-          </div>
-        </Box>
-
         <Box className={styles.messages}>
           <Heading size='lg' paddingBottom={'0.25em'}>
             Display Messages
@@ -72,6 +62,14 @@ export default function Editor() {
             <SettingsIconBtn size='md' clickhandler={onOpen} />
           </div>
         </Box>
+
+        <Box className={styles.info} borderRadius='0.5em' overflowX='auto'>
+          <Heading size='lg' paddingBottom={'0.25em'}>
+            Info
+          </Heading>
+          <NumberedText number={4} text={'Running Info'} />
+          <div className={styles.content}></div>
+        </Box>
       </div>
     </>
   );

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

@@ -7,12 +7,11 @@
   padding: 2vh;
 
   display: grid;
-  grid-template-rows: 38vh 1fr 1fr;
+  grid-template-rows: 38vh 1fr;
-  grid-template-columns: 1fr 25vw 25vw 5vw;
+  grid-template-columns: 48em 27vw 25vw 4vw;
   grid-template-areas:
-    'even mess play sett'
+    'even play info sett'
-    'even prev prev sett'
+    'even mess info sett';
-    'even prev prev sett';
   gap: 2vh;
 }
 
@@ -20,13 +19,13 @@
 @media (max-width: 1250px) and (min-height: 700px) {
   .mainContainer {
     grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 48em 1fr 1fr;
     grid-template-areas:
       'even play sett'
       'even mess sett';
   }
 
-  .preview {
+  .info {
     visibility: hidden;
   }
 }
@@ -42,7 +41,7 @@
   }
 
   .editor,
-  .preview,
+  .info,
   .settings {
     visibility: hidden;
   }
@@ -58,7 +57,7 @@
 
   .editor,
   .messages,
-  .preview,
+  .info,
   .settings {
     visibility: hidden;
   }
@@ -78,8 +77,8 @@
   grid-area: even;
 }
 
-.preview {
+.info {
-  grid-area: prev;
+  grid-area: info;
 }
 
 .messages {

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

@@ -49,10 +49,8 @@
 
 .eventRow,
 .eventRowActive {
-  padding-left: 1em;
-
   display: grid;
-  grid-template-columns: auto 2em auto auto 1fr auto;
+  grid-template-columns: 2em 2em auto auto 1fr auto;
 
   justify-content: center;
   align-content: center;
@@ -78,7 +76,6 @@
 .drag {
   color: rgba(255, 255, 255, 0.37);
   align-self: center;
-  /* cursor: grab; Later */
 }
 
 .indicators {
@@ -95,16 +92,16 @@
 .nextDisabled {
   width: max-content;
   padding: 0 0.2em;
+  color: #4bffab;
+  transition: 0.3s;
 }
 
 .next {
-  color: #4bffabcc;
+  opacity: 0.8;
-  transition: 0.3s;
 }
 
 .nextDisabled {
-  color: rgba(255, 255, 255, 0.07);
+  opacity: 0.05;
-  transition: 0.3s;
 }
 
 .delayValue {
@@ -130,6 +127,7 @@
 .rowDetailed {
   display: inline-flex;
   position: relative;
+  align-self: flex-start;
 }
 
 .titleContainer,
@@ -147,7 +145,6 @@
 /* ============= BLOCK BLOCK ============= */
 .block {
   background-color: #805ad5;
-  /* background: linear-gradient(0deg, #6b46c1 20%, #805ad5 21%); */
   background: linear-gradient(
     0deg,
     rgba(107, 70, 193, 0.4) 0%,
@@ -155,13 +152,24 @@
     rgba(107, 70, 193, 0.15) 21%
   );
 
-  flex-direction: row-reverse;
+  display: grid;
+  grid-template-columns: 2em auto;
+  align-content: center;
+  align-items: baseline;
+  gap: 0.5em;
+}
+
+.block > .drag {
+  justify-self: start;
+}
+
+.block > .actionOverlay {
+  justify-self: end;
 }
 
 /* ============= DELAY BLOCK ============= */
 .delay {
   background-color: #ecc94b;
-  /* background: linear-gradient(180deg, #d69e2e 20%, #ecc94b 21%); */
   background: linear-gradient(
     180deg,
     rgba(214, 158, 46, 0.4) 0%,
@@ -169,5 +177,10 @@
     rgba(214, 158, 46, 0.07) 21%
   );
 
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 2em 1fr auto;
+  justify-content: center;
+  align-content: center;
+  align-items: baseline;
+  gap: 0.5em;
 }

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

@@ -12,8 +12,8 @@ import {
 import EventList from './EventList';
 import EventListMenu from '../../menu/EventListMenu.jsx';
 import { showErrorToast } from '../../../common/helpers/toastManager';
-import { Skeleton } from '@chakra-ui/skeleton';
 import { useFetch } from '../../../app/hooks/useFetch.js';
+import EventListSkeleton from '../skeletons/EventListSkeleton.jsx';
 
 export default function EventListWrapper() {
   const queryClient = useQueryClient();
@@ -254,9 +254,7 @@ export default function EventListWrapper() {
       {status === 'success' ? (
         <EventList events={data} eventsHandler={eventsHandler} />
       ) : (
-        <div className={style.eventContainer}>
+        <EventListSkeleton />
-          <Skeleton height='50vh' />
-        </div>
       )}
     </>
   );

client/src/features/editors/skeletons/EventListSkeleton.jsx

@@ -0,0 +1,112 @@
+import { Skeleton } from '@chakra-ui/skeleton';
+
+import style from '../list/List.module.css';
+
+export default function EventListSkeleton() {
+  return (
+    <div className={style.eventContainer}>
+      <Skeleton
+        height='4vh'
+        speed='1.2'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='1.6'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.0'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.4'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.8'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='3.2'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='3.6'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='4.0'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='4.4'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='4.0'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='3.6'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='3.2'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.8'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.4'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='2.0'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='1.6'
+        startColor='#333333'
+        endColor='#202020'
+      />
+      <Skeleton
+        height='4vh'
+        speed='1.2'
+        startColor='#333333'
+        endColor='#202020'
+      />
+    </div>
+  );
+}