From 4271b276868768ef46633d90f97c61d4a76ae91a Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Sat, 10 Apr 2021 22:45:35 +0200 Subject: [PATCH] cleanup unused css --- .../features/editors/list/Block.module.css | 116 +++++++++++ .../src/features/editors/list/BlockBlock.jsx | 30 ++- .../src/features/editors/list/DelayBlock.jsx | 4 + .../src/features/editors/list/EventBlock.jsx | 3 +- .../src/features/editors/list/List.module.css | 184 ------------------ 5 files changed, 135 insertions(+), 202 deletions(-) create mode 100644 client/src/features/editors/list/Block.module.css diff --git a/client/src/features/editors/list/Block.module.css b/client/src/features/editors/list/Block.module.css new file mode 100644 index 000000000..cc0019bf8 --- /dev/null +++ b/client/src/features/editors/list/Block.module.css @@ -0,0 +1,116 @@ +/* ============= COMMON ============= */ + +.eventRow, +.eventRowActive, +.block, +.delay { + position: relative; + top: 1em; + margin: 0.2em 0; + width: 100%; + border-radius: 8px; + font-size: 15px; +} + +.block, +.delay { + padding: 0.2em 1em; + color: white; + box-sizing: border-box; + display: flex; + margin: auto; + gap: 1em; +} + +.actionOverlay { + display: flex; + flex-direction: row; + gap: 0.5em; + align-content: center; + align-self: center; + + opacity: 0.6; + transition: linear 0.1s; +} + +.actionOverlay:hover { + opacity: 1; +} + +/* ============= EVENT ITEM ============= */ + +.eventRow, +.eventRowActive { + padding: 0.2em 0.5em; + padding-left: 1em; + + display: grid; + grid-template-columns: auto auto 3em 1fr auto; + justify-content: center; + align-content: center; + align-items: baseline; + gap: 0.5em; +} + +.eventRow { + background-color: #0001; + border-top: 2px solid #0001; + border-bottom: 2px solid #0001; +} + +.eventRowActive { + background-color: #b2f5eaaa; + border-top: 2px solid #b2f5ea; + border-bottom: 2px solid #b2f5ea; +} + +.titleContainer, +.detailedContainer { + background-color: #fff8; + border: 1px solid #0001; + border-radius: 4px; +} + +.rowDetailed { + display: inline-flex; + position: relative; +} + +.titleContainer, +.detailedContainer { + width: 90%; + display: block; +} + +.more { + position: absolute; + right: 0.25em; + top: 0.5em; +} + +/* ============= BLOCK BLOCK ============= */ +.block { + background-color: #805ad5aa; + height: 3em; + border: 1px solid #0001; + border-bottom: 8px solid #805ad5; + + flex-direction: row-reverse; +} + +/* ============= DELAY BLOCK ============= */ +.delay { + background-color: #ecc94baa; + border: 1px solid #0001; + border-top: 4px solid #ecc94b; +} + +.delayValue { + color: #000; + background-color: #fff5; + border-radius: 4px; + padding: 0.2em; + text-align: center; + width: 6em; + border: 1px solid #0001; +} diff --git a/client/src/features/editors/list/BlockBlock.jsx b/client/src/features/editors/list/BlockBlock.jsx index d0ec6f070..21502a1f3 100644 --- a/client/src/features/editors/list/BlockBlock.jsx +++ b/client/src/features/editors/list/BlockBlock.jsx @@ -1,26 +1,24 @@ import { IconButton } from '@chakra-ui/button'; import { AddIcon, MinusIcon } from '@chakra-ui/icons'; -import style from './List.module.css'; +import AddIconBtn from '../../../common/components/buttons/AddIconBtn'; +import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; +import style from './Block.module.css'; export default function BlockBlock(props) { const { eventsHandler, index, data } = props; + + const addHandler = () => { + eventsHandler('add', { type: 'block', order: index + 1 }); + }; + const deleteHandler = () => { + eventsHandler('delete', data.id); + }; + return ( -
+
- } - colorScheme='red' - onClick={() => eventsHandler('delete', data.id)} - /> - } - colorScheme='blue' - onClick={() => - eventsHandler('add', { type: 'event', order: index + 1 }) - } - /> + +
); diff --git a/client/src/features/editors/list/DelayBlock.jsx b/client/src/features/editors/list/DelayBlock.jsx index f4d7c7412..fc1b712c3 100644 --- a/client/src/features/editors/list/DelayBlock.jsx +++ b/client/src/features/editors/list/DelayBlock.jsx @@ -9,6 +9,9 @@ import { } from '@chakra-ui/slider'; import { useEffect, useState } from 'react'; import style from './List.module.css'; +import AddIconBtn from '../../../common/components/buttons/AddIconBtn'; +import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; +import style from './Block.module.css'; export default function DelayBlock(props) { const [delay, setDelay] = useState(0); @@ -39,6 +42,7 @@ export default function DelayBlock(props) { return (
+
{`${delay} min`}
div, -.titleContainer > div { - display: inline; -} - -.detailedTitle, -.detailedTitleUnderlined { - padding-left: 1em; - font-size: 0.8em; - color: #888; - display: inline-block; - width: 6em; - cursor: default; -} - -.detailedTitleUnderlined { - border-bottom: 1px solid #0001; -} - -.more { - position: absolute; - right: 0.25em; - top: 0em; -} - -.actionOverlay { - display: flex; - flex-direction: row; - gap: 0.5em; - align-content: center; - align-self: center; - - opacity: 0.6; - transition: linear 0.1s; -} - -.eventRow:hover > .actionOverlay { - opacity: 0.9; - transition: linear 0.1s; -} - -.actionOverlay:hover { - opacity: 1; -} - -/* ============= DELAY BLOCK ============= */ -.delayContainer { - position: relative; - top: 1em; - margin: 0.2em 0; - padding: 0.2em 1em; - background-color: #ecc94baa; - border-radius: 8px; - color: white; - border: 1px solid #0001; - border-top: 4px solid #ecc94b; - box-sizing: border-box; - - width: 100%; - display: flex; - margin: auto; - gap: 1em; -} - -.delayValue { - color: #000; - background-color: #fff5; - border-radius: 4px; - padding: 0.2em; - text-align: center; - width: 6em; - border: 1px solid #0001; -} - -.delayedEditable { - background-color: #ecc94b55; -} - -/* ============= BLOCK BLOCK ============= */ -.blockContainer { - position: relative; - top: 1em; - margin: 0.2em 0; - padding: 0.2em 1em; - width: 100%; - background-color: #805ad5aa; - border-radius: 8px; - color: white; - height: 3em; - border: 1px solid #0001; - border-bottom: 8px solid #805ad5; - box-sizing: border-box; - - width: 100%; - display: flex; - flex-direction: row-reverse; - margin: auto; - gap: 1em; -}