From f3924d4beb376b135dff32d1b9fbd378b26f3334 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Thu, 6 May 2021 12:06:04 +0200 Subject: [PATCH] style: layout changes --- client/src/App.jsx | 3 +- .../src/features/control/PlaybackControl.jsx | 27 ++--- client/src/features/editors/Editor.jsx | 18 ++- client/src/features/editors/Editor.module.css | 21 ++-- .../features/editors/list/Block.module.css | 37 ++++-- .../editors/list/EventListWrapper.jsx | 6 +- .../editors/skeletons/EventListSkeleton.jsx | 112 ++++++++++++++++++ 7 files changed, 172 insertions(+), 52 deletions(-) create mode 100644 client/src/features/editors/skeletons/EventListSkeleton.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 725681327..f69127e74 100644 --- a/client/src/App.jsx +++ b/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() {
- Loading...
}> + }> diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx index 9e331ce99..1817ead75 100644 --- a/client/src/features/control/PlaybackControl.jsx +++ b/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 (
@@ -126,30 +125,30 @@ export default function PlaybackControl() { {finish}
- - + +
- - - Preview Displays - - -
- {/* */} -
- - Display Messages @@ -72,6 +62,14 @@ export default function Editor() { + + + + Info + + +
+ ); diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css index 3cdbd0ada..3e20053c6 100644 --- a/client/src/features/editors/Editor.module.css +++ b/client/src/features/editors/Editor.module.css @@ -7,12 +7,11 @@ padding: 2vh; display: grid; - grid-template-rows: 38vh 1fr 1fr; - grid-template-columns: 1fr 25vw 25vw 5vw; + grid-template-rows: 38vh 1fr; + grid-template-columns: 48em 27vw 25vw 4vw; grid-template-areas: - 'even mess play sett' - 'even prev prev sett' - 'even prev prev sett'; + 'even play info sett' + 'even mess info 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 { - grid-area: prev; +.info { + grid-area: info; } .messages { diff --git a/client/src/features/editors/list/Block.module.css b/client/src/features/editors/list/Block.module.css index 716257a98..3161dad70 100644 --- a/client/src/features/editors/list/Block.module.css +++ b/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; - transition: 0.3s; + opacity: 0.8; } .nextDisabled { - color: rgba(255, 255, 255, 0.07); - transition: 0.3s; + opacity: 0.05; } .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; } diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index 9e2e8ff1d..c75872bc1 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/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' ? ( ) : ( -
- -
+ )} ); diff --git a/client/src/features/editors/skeletons/EventListSkeleton.jsx b/client/src/features/editors/skeletons/EventListSkeleton.jsx new file mode 100644 index 000000000..1c98c54d5 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + + + + + + + + +
+ ); +}