use css vars; misc style changes
This commit is contained in:
np.w
+24
-11
@@ -12,7 +12,7 @@ function App() {
|
||||
const [boxID, setBoxID] = useState(undefined);
|
||||
const [boxName, setBoxName] = useState('');
|
||||
const [boxDescription, setBoxDescription] = useState('');
|
||||
|
||||
|
||||
const [showModalBox, setShowModalBox] = useState(false);
|
||||
const [showModalItem, setShowModalItem] = useState(false);
|
||||
|
||||
@@ -43,8 +43,8 @@ function App() {
|
||||
box.name.toLowerCase().includes(finalFilter) ||
|
||||
box.description.toLowerCase().includes(finalFilter) ||
|
||||
box.item.some(item =>
|
||||
(item.name && item.name.toLowerCase().includes(finalFilter)) ||
|
||||
(item.description && item.description.toLowerCase().includes(finalFilter))
|
||||
(item.name && item.name.toLowerCase().includes(finalFilter)) ||
|
||||
(item.description && item.description.toLowerCase().includes(finalFilter))
|
||||
)
|
||||
)
|
||||
setFilteredData(filtered);
|
||||
@@ -94,7 +94,7 @@ function App() {
|
||||
|
||||
const sortBox = async (target, source) => {
|
||||
try {
|
||||
const response = await axios.put(`${api.baseApiUrl}/${source._id}/sort`,target);
|
||||
const response = await axios.put(`${api.baseApiUrl}/${source._id}/sort`, target);
|
||||
setData(response.data);
|
||||
}
|
||||
catch (error) {
|
||||
@@ -167,10 +167,10 @@ function App() {
|
||||
const elements = [...event.currentTarget.parentElement.children];
|
||||
const targetIndex = elements.indexOf(targetElement);
|
||||
const sourceIndex = elements.indexOf(sourceElement);
|
||||
if(dragTarget._id !== dragSource._id) {
|
||||
if (dragTarget._id !== dragSource._id) {
|
||||
|
||||
const target = Object.assign(dragTarget, {sort: targetIndex});
|
||||
const source = Object.assign(dragSource, {sort: sourceIndex});
|
||||
const target = Object.assign(dragTarget, { sort: targetIndex });
|
||||
const source = Object.assign(dragSource, { sort: sourceIndex });
|
||||
await sortBox(target, source);
|
||||
}
|
||||
return false;
|
||||
@@ -295,7 +295,9 @@ function App() {
|
||||
const filterText = event.target.value;
|
||||
setFilter(filterText);
|
||||
}
|
||||
|
||||
const handleClearFilter = () => {
|
||||
setFilter('');
|
||||
}
|
||||
const boxForm =
|
||||
<form onSubmit={boxHandler.handleSubmit}>
|
||||
<input id="id" name="id" value={boxID} readOnly hidden></input>
|
||||
@@ -328,8 +330,18 @@ function App() {
|
||||
<>
|
||||
{<Modal show={showModalItem} edit={editItemBool} content={itemForm} handleClose={handleModalCloseItem} />}
|
||||
{<Modal show={showModalBox} edit={editBoxBool} content={boxForm} handleClose={handleModalCloseBox} />}
|
||||
<label htmlFor="box-filter">filter:</label>
|
||||
<input type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
|
||||
|
||||
|
||||
<div className='header-container'>
|
||||
<span className='filter-container'>
|
||||
<span className='material-icons icon'>search</span>
|
||||
<input spellCheck='false' className='filter' type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
|
||||
<span className='material-icons icon clear' onClick={handleClearFilter}>clear</span>
|
||||
</span>
|
||||
{<button className='button' onClick={handleAddBox}>new box</button>}
|
||||
|
||||
</div>
|
||||
<div className='body-container'>
|
||||
<ul className="list-box">
|
||||
{filteredData.map((box, index) => {
|
||||
return (
|
||||
@@ -342,7 +354,8 @@ function App() {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
{<button onClick={handleAddBox}>add box</button>}
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,9 +12,6 @@ const Modal = ({show, content, handleClose}) => {
|
||||
<div className='modal-content'>
|
||||
{content}
|
||||
</div>
|
||||
<div className='modal-actions'>
|
||||
<button type='button' onClick={handleClose}>close</button>
|
||||
</div>
|
||||
</div>
|
||||
: null;
|
||||
}
|
||||
|
||||
+84
-28
@@ -1,15 +1,22 @@
|
||||
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
|
||||
:root {
|
||||
--black_light: #9aa0a6;
|
||||
--black_dark: #212121;
|
||||
--white_light:#fafafa;
|
||||
--white_darker: #e0e0e0;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #FAFAFA;
|
||||
color: #212121;
|
||||
background-color: var(--white_light);
|
||||
color: var(--black_dark)
|
||||
}
|
||||
.body-container {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
form > fieldset > label {
|
||||
display: flex;
|
||||
}
|
||||
@@ -23,8 +30,42 @@ h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.filter-container {
|
||||
margin: 1rem 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 344px;
|
||||
height: 44px;
|
||||
background-color: white;
|
||||
font-size: 1rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #dfe1e5;
|
||||
}
|
||||
.filter-container > span.icon {
|
||||
font-size: 1rem;
|
||||
margin: 0 0.75rem 0 1rem;
|
||||
color: var(--black_light);
|
||||
}
|
||||
.filter-container > span.icon.clear {
|
||||
margin-left: auto;
|
||||
}
|
||||
.filter-container > span.icon.clear:hover {
|
||||
cursor: pointer;
|
||||
color: var(--black_dark);
|
||||
}
|
||||
.filter {
|
||||
width: 100%;
|
||||
font-weight: lighter;
|
||||
border: none;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.filter:focus {
|
||||
outline: none;
|
||||
}
|
||||
.filter::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -32,16 +73,13 @@ button:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.box-title-container {
|
||||
|
||||
}
|
||||
.box-menu-container {
|
||||
margin-right: 1em;
|
||||
margin-left: auto;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.box-subtitle {
|
||||
@@ -53,7 +91,7 @@ button:hover {
|
||||
ul.list-box {
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin: 0;
|
||||
gap: 1em;
|
||||
}
|
||||
@@ -61,13 +99,13 @@ ul.list-box {
|
||||
li.box {
|
||||
position: relative;
|
||||
height: min-content;
|
||||
width: 344px;
|
||||
width: auto;
|
||||
padding: 16px 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -91,7 +129,7 @@ li.box {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -105,16 +143,11 @@ li.box {
|
||||
|
||||
.item-menu-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #F2F2F2;
|
||||
background-color: var(--white_light);
|
||||
}
|
||||
.item-menu-action > .icon {
|
||||
margin: 1rem 1rem;
|
||||
}
|
||||
.item-menu-action > .label {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.list-box-item {
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
@@ -136,17 +169,17 @@ li.item {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
|
||||
padding: 0.5rem 0.75rem 0.5rem 1.25rem;
|
||||
list-style: none;
|
||||
}
|
||||
li.item:hover {
|
||||
background-color:#F2F2F2;
|
||||
background-color: var(--white_light)
|
||||
}
|
||||
.head-divider {
|
||||
margin: 16px;
|
||||
width: auto;
|
||||
height: 1px;
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more-container {
|
||||
z-index: 1;
|
||||
@@ -158,7 +191,7 @@ li.item:hover {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.add {
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--white_light);
|
||||
padding: 0.75rem;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
@@ -167,7 +200,7 @@ li.item:hover {
|
||||
}
|
||||
.add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more {
|
||||
display: flex;
|
||||
@@ -179,7 +212,7 @@ li.item:hover {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.menu-more:hover {
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more.box {
|
||||
font-size: 1.25rem;
|
||||
@@ -198,7 +231,7 @@ li.item:hover {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -224,8 +257,31 @@ li.item:hover {
|
||||
}
|
||||
.menu-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #F2F2F2;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-action > .icon {
|
||||
margin: 1rem 1rem;
|
||||
}
|
||||
button.button {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
font-size: .875rem;
|
||||
text-transform: uppercase;
|
||||
padding: 0.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 64px;
|
||||
background-color: var(--white_light);
|
||||
border: 1px solid var(--black_light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button.button:hover {
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -8,10 +8,15 @@
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
background-color: rgba(0, 0, 0, 0.32)
|
||||
}
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 11px 15px -7px
|
||||
rgba(0,0,0,.2),
|
||||
0 24px 38px 3px rgba(0,0,0,.14),
|
||||
0 9px 46px 8px rgba(0,0,0,.12);
|
||||
background: #fff;
|
||||
}
|
||||
Reference in New Issue
Block a user