Commit 03fefdc6 authored by Mathias Engelbrecht Pilegård's avatar Mathias Engelbrecht Pilegård
Browse files

reimplemented issue assignment selection directory with pure css

parent 50cfc658
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\reportForm\\\\assign\\\\Assign.js\",\n _s = $RefreshSig$();\n\nimport React, { useState } from 'react';\nimport \"./assign.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst Assign = () => {\n _s();\n\n const personalProjects = [{\n id: \"MyApp\",\n type: \"personal\"\n }, {\n id: \"MyOtherApp\",\n type: \"personal\"\n }];\n const sharedProjects = [{\n id: \"ReactApp\",\n type: \"shared\",\n teams: [{\n name: \"Henriks Meme Machine\"\n }]\n }, {\n id: \"Very big ReactApp\",\n type: \"shared\",\n teams: [{\n name: \"Aubergine\"\n }]\n }];\n const [appState, changeState] = useState({\n activeObjects: [],\n newArray: [],\n rootDirectoryObjects: [{\n id: \"Personal projects\"\n }, {\n id: \"Shared projects\"\n }]\n });\n\n const toggleActive = (directory, index) => {\n if (directory[index] === appState.activeObjects[index]) {\n appState.newArray.pop(directory[index]);\n console.log(appState.newArray);\n } else {\n appState.newArray.push(directory[index]);\n console.log(appState.newArray);\n }\n\n changeState({ ...appState,\n activeObjects: appState.newArray\n });\n console.log(appState.activeObjects);\n };\n\n const toggleActiveStyles = (directory, index) => {\n if (directory[index] === appState.activeObjects[index]) {\n return \"active\";\n } else return \"inactive\";\n };\n\n const RootDirectoryItems = parentDirectories => {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n className: \"rootDirectory\",\n children: parentDirectories.map((elements, index) => /*#__PURE__*/_jsxDEV(\"li\", {\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n onClick: () => {\n toggleActive(parentDirectories, index);\n },\n className: toggleActiveStyles(parentDirectories, index),\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"folder\",\n className: \"folder-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"a\", {\n children: [\"\\xA0 \", parentDirectories[index].id, \" \\xA0\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 15\n }, this)]\n }, index, true, {\n fileName: _jsxFileName,\n lineNumber: 47,\n columnNumber: 13\n }, this), parentDirectories[index] === appState.activeObjects ? parentDirectories[index] === 0 ? SubDirectoryItems(personalProjects) : SubDirectoryItems(sharedProjects) : null]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 46,\n columnNumber: 11\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 7\n }, this);\n };\n\n const SubDirectoryItems = directory => {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n className: \"projectListDirectory\",\n children: directory.map((elements, index) => /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n onClick: () => {\n toggleActive(directory, index);\n },\n className: toggleActiveStyles(directory, index),\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"folder\",\n className: \"folder-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"a\", {\n children: [\"\\xA0 \", directory[index].id, \" \\xA0\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 15\n }, this)]\n }, index, true, {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 11\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 65,\n columnNumber: 7\n }, this);\n };\n\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"assignSelectContainer\",\n children: RootDirectoryItems(appState.rootDirectoryObjects)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 5\n }, this);\n};\n\n_s(Assign, \"xWS9QEyxm04K2oIrDmBJxIV5tO0=\");\n\n_c = Assign;\nexport default Assign;\n\nvar _c;\n\n$RefreshReg$(_c, \"Assign\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/reportForm/assign/Assign.js"],"names":["React","useState","FontAwesomeIcon","Assign","personalProjects","id","type","sharedProjects","teams","name","appState","changeState","activeObjects","newArray","rootDirectoryObjects","toggleActive","directory","index","pop","console","log","push","toggleActiveStyles","RootDirectoryItems","parentDirectories","map","elements","SubDirectoryItems"],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\r\nimport \"./assign.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\nconst Assign = () => {\r\n const personalProjects = [\r\n { id: \"MyApp\", type: \"personal\" },\r\n { id: \"MyOtherApp\", type: \"personal\" }\r\n ]\r\n\r\n const sharedProjects = [\r\n { id: \"ReactApp\", type: \"shared\", teams: [{ name: \"Henriks Meme Machine\" }] },\r\n { id: \"Very big ReactApp\", type: \"shared\", teams: [{ name: \"Aubergine\" }] }\r\n ]\r\n\r\n const [appState, changeState] = useState({\r\n activeObjects: [],\r\n newArray: [],\r\n rootDirectoryObjects: [{ id: \"Personal projects\" }, { id: \"Shared projects\" }]\r\n })\r\n\r\n const toggleActive = (directory, index) => {\r\n\r\n if (directory[index] === appState.activeObjects[index]) {\r\n appState.newArray.pop(directory[index])\r\n console.log(appState.newArray)\r\n }\r\n else {\r\n appState.newArray.push(directory[index])\r\n console.log(appState.newArray)\r\n }\r\n changeState({ ...appState, activeObjects: appState.newArray })\r\n console.log(appState.activeObjects)\r\n }\r\n\r\n const toggleActiveStyles = (directory, index) => {\r\n if (directory[index] === appState.activeObjects[index]) {\r\n return \"active\"\r\n } else return \"inactive\"\r\n }\r\n\r\n const RootDirectoryItems = (parentDirectories) => {\r\n return (\r\n < ul className=\"rootDirectory\" >\r\n {parentDirectories.map((elements, index) => (\r\n <li>\r\n <div key={index} onClick={() => { toggleActive(parentDirectories, index) }} className={toggleActiveStyles(parentDirectories, index)} >\r\n <FontAwesomeIcon icon=\"folder\" className=\"folder-icon\"></FontAwesomeIcon>\r\n <a>&nbsp; {parentDirectories[index].id} &nbsp;</a>\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </div>\r\n {\r\n parentDirectories[index] === appState.activeObjects ?\r\n parentDirectories[index] === 0 ? SubDirectoryItems(personalProjects) : SubDirectoryItems(sharedProjects) :\r\n null\r\n }\r\n </li>\r\n ))}\r\n </ul >\r\n )\r\n }\r\n\r\n const SubDirectoryItems = (directory) => {\r\n return (\r\n <ul className=\"projectListDirectory\">\r\n {directory.map((elements, index) => (\r\n <li>\r\n <div key={index} onClick={() => { toggleActive(directory, index) }} className={toggleActiveStyles(directory, index)} >\r\n <FontAwesomeIcon icon=\"folder\" className=\"folder-icon\"></FontAwesomeIcon>\r\n <a>&nbsp; {directory[index].id} &nbsp;</a>\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </div>\r\n </li>\r\n ))}\r\n </ul >\r\n )\r\n }\r\n\r\n return (\r\n <div className=\"assignSelectContainer\">\r\n {RootDirectoryItems(appState.rootDirectoryObjects)}\r\n </div >\r\n )\r\n}\r\n\r\nexport default Assign"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\reportForm\\\\assign\\\\Assign.js\",\n _s = $RefreshSig$();\n\nimport React, { useState, useRef, createRef, useEffect } from 'react';\nimport \"./assign.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst Assign = () => {\n _s();\n\n const [directoryRefs, setDirectoryRefs] = useState([]);\n const arrLength = directoryRefs.length;\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n // add or remove refs\n setDirectoryRefs(directoryRefs => Array(arrLength).fill().map(rootDirectoryObjects => directoryRefs[i] || /*#__PURE__*/createRef()));\n console.log(directoryRefs);\n }, [arrLength]);\n const rootDirectoryObjects = [{\n id: \"Personal projects\"\n }, {\n id: \"Shared projects\"\n }];\n const personalProjects = [{\n id: \"MyApp\",\n type: \"personal\"\n }, {\n id: \"MyOtherApp\",\n type: \"personal\"\n }];\n const sharedProjects = [{\n id: \"ReactApp\",\n type: \"shared\",\n teams: [{\n name: \"Henriks Meme Machine\"\n }]\n }, {\n id: \"Very big ReactApp\",\n type: \"shared\",\n teams: [{\n name: \"Aubergine\"\n }]\n }];\n useEffect(() => {\n const pageClickEvent = e => {\n if (directoryRefs.current !== null && !directoryRefs.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n\n const RootDirectoryItems = directoryObjects => {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n className: \"rootDirectory\",\n children: directoryRefs.map((directoryObjects, index) => /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n ref: directoryRefs,\n className: isActive ? 'active' : 'inactive',\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"folder\",\n className: \"folder-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"a\", {\n children: [\"\\xA0 \", directoryObjects[index].id, \" \\xA0\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 11\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 7\n }, this);\n };\n\n const SubDirectoryItems = directory => {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n className: \"projectListDirectory\",\n children: directory.map((elements, index) => /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n ref: directoryRefs,\n className: isActive ? 'active' : 'inactive',\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"folder\",\n className: \"folder-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 75,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"a\", {\n children: [\"\\xA0 \", directory[index].id, \" \\xA0\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 76,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 77,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 73,\n columnNumber: 11\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 7\n }, this);\n };\n\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"assignSelectContainer\",\n children: RootDirectoryItems(rootDirectoryObjects)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 5\n }, this);\n};\n\n_s(Assign, \"9/IkyAvsbvxLJpsddWVEkSxJjGA=\");\n\n_c = Assign;\nexport default Assign;\n\nvar _c;\n\n$RefreshReg$(_c, \"Assign\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/reportForm/assign/Assign.js"],"names":["React","useState","useRef","createRef","useEffect","FontAwesomeIcon","Assign","directoryRefs","setDirectoryRefs","arrLength","length","isActive","setIsActive","onClick","Array","fill","map","rootDirectoryObjects","i","console","log","id","personalProjects","type","sharedProjects","teams","name","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener","RootDirectoryItems","directoryObjects","index","SubDirectoryItems","directory","elements"],"mappings":"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","sourcesContent":["import React, { useState, useRef, createRef, useEffect } from 'react'\r\nimport \"./assign.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\nconst Assign = () => {\r\n const [directoryRefs, setDirectoryRefs] = useState([]);\r\n const arrLength = directoryRefs.length;\r\n\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n // add or remove refs\r\n setDirectoryRefs(directoryRefs => (\r\n Array(arrLength).fill().map((rootDirectoryObjects) => directoryRefs[i] || createRef())\r\n ));\r\n console.log(directoryRefs)\r\n }, [arrLength]);\r\n\r\n const rootDirectoryObjects = [\r\n { id: \"Personal projects\" },\r\n { id: \"Shared projects\" }\r\n ]\r\n\r\n const personalProjects = [\r\n { id: \"MyApp\", type: \"personal\" },\r\n { id: \"MyOtherApp\", type: \"personal\" }\r\n ]\r\n\r\n const sharedProjects = [\r\n { id: \"ReactApp\", type: \"shared\", teams: [{ name: \"Henriks Meme Machine\" }] },\r\n { id: \"Very big ReactApp\", type: \"shared\", teams: [{ name: \"Aubergine\" }] }\r\n ]\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (directoryRefs.current !== null && !directoryRefs.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n const RootDirectoryItems = (directoryObjects) => {\r\n return (\r\n < ul className=\"rootDirectory\" >\r\n {directoryRefs.map((directoryObjects, index) => (\r\n <li>\r\n <div ref={directoryRefs} className={isActive ? 'active' : 'inactive'} onClick={onClick} >\r\n <FontAwesomeIcon icon=\"folder\" className=\"folder-icon\"></FontAwesomeIcon>\r\n <a>&nbsp; {directoryObjects[index].id} &nbsp;</a>\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </div>\r\n </li>\r\n ))}\r\n </ul >\r\n )\r\n }\r\n\r\n const SubDirectoryItems = (directory) => {\r\n return (\r\n <ul className=\"projectListDirectory\">\r\n {directory.map((elements, index) => (\r\n <li>\r\n <div ref={directoryRefs} className={isActive ? 'active' : 'inactive'} onClick={onClick} >\r\n <FontAwesomeIcon icon=\"folder\" className=\"folder-icon\"></FontAwesomeIcon>\r\n <a>&nbsp; {directory[index].id} &nbsp;</a>\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </div>\r\n </li>\r\n ))}\r\n </ul >\r\n )\r\n }\r\n\r\n return (\r\n <div className=\"assignSelectContainer\">\r\n {RootDirectoryItems(rootDirectoryObjects)}\r\n </div >\r\n )\r\n}\r\n\r\nexport default Assign"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
......@@ -7,8 +7,7 @@ body ul {
list-style: none;
}
body li {
display: inline;
body ul {
margin: 0px
}
......
......@@ -13,66 +13,72 @@ const Assign = () => {
{ id: "Very big ReactApp", type: "shared", teams: [{ name: "Aubergine" }] }
]
const [appState, changeState] = useState({
activeObjects: [],
rootDirectoryObjects: [{ id: "Personal projects" }, { id: "Shared projects" }]
})
const toggleActive = (directory, index) => {
if (directory[index] === appState.activeObjects) {
changeState({ ...appState, activeObjects: null })
}
else {
changeState({ ...appState, activeObjects: (directory[index]) })
}
}
const toggleActiveStyles = (directory, index) => {
if (directory[index] === appState.activeObjects) {
return "active"
} else return "inactive"
}
const rootDirectoryObjects = [
{ id: "Personal projects" },
{ id: "Shared projects" }
]
const RootDirectoryItems = (parentDirectories) => {
const DirectoryItems = () => {
return (
< ul className="rootDirectory" >
{parentDirectories.map((elements, index) => (
<li>
<div key={index} className={toggleActiveStyles(parentDirectories, index)} onClick={() => { toggleActive(parentDirectories, index) }} >
<FontAwesomeIcon icon="folder" className="folder-icon"></FontAwesomeIcon>
<a>&nbsp; {parentDirectories[index].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</div>
{
parentDirectories[index] === appState.activeObjects ?
parentDirectories[index] === 0 ? SubDirectoryItems(personalProjects) : SubDirectoryItems(sharedProjects) :
null
}
</li>
))}
</ul >
)
}
<div className="multi-level">
<div className="item">
<input type="checkbox" id="A" />
<label for="A"><FontAwesomeIcon icon="folder" className="folder-icon"></FontAwesomeIcon>
<a>&nbsp; {rootDirectoryObjects[0].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</label>
<ul>
{personalProjects.map((elements, index) => (
<li>
<FontAwesomeIcon icon="project-diagram" className="project-icon"></FontAwesomeIcon>
<a href="#">&nbsp; {personalProjects[index].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</li>
))}
</ul>
</div>
<div className="item">
<input type="checkbox" id="B" />
<label for="B"><FontAwesomeIcon icon="folder" className="folder-icon"></FontAwesomeIcon>
<a>&nbsp; {rootDirectoryObjects[1].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</label>
<ul>
{sharedProjects.map((elements, index) => (
<li><div className="sub-item">
<input type="checkbox" id={`B-${index}`} />
<label for={`B-${index}`}>
<FontAwesomeIcon icon="folder" className="folder-icon"></FontAwesomeIcon>
<a>&nbsp; {sharedProjects[index].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</label>
<ul>
{sharedProjects[index].teams.map(team => (
<li>
<FontAwesomeIcon icon="users" className="users-icon"></FontAwesomeIcon>
<a href="#">&nbsp; {team.name} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
</div>
</div>
const SubDirectoryItems = (directory) => {
return (
<ul className="projectListDirectory">
{directory.map((elements, index) => (
<li>
<div key={index} className={toggleActiveStyles(directory, index)} onClick={() => { toggleActive(directory, index) }} >
<FontAwesomeIcon icon="folder" className="folder-icon"></FontAwesomeIcon>
<a>&nbsp; {directory[index].id} &nbsp;</a>
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</div>
</li>
))}
</ul >
)
}
return (
<div className="assignSelectContainer">
{RootDirectoryItems(appState.rootDirectoryObjects)}
<DirectoryItems />
</div >
)
}
......
.assignSelectContainer {
font-size: 14px;
/* Dropdown Functionality */
.item ul, .item input[type="checkbox"] {
display: none;
}
.rootDirectory {
list-style: none;
margin: 0;
padding: 0;
user-select: none;
.item input:checked ~ ul {
display: block;
}
.assignSelectContainer li div {
background-color: ghostwhite;
padding-bottom: 3px;
margin-top: 7px;
margin-bottom: 7px;
border-bottom: 1px solid transparent;
/* Styling */
.multi-level {
font-size: 14px;
}
.assignSelectContainer li div:hover {
border-bottom: 1px solid lightgray;
.multi-level label {
cursor: pointer;
}
.assignSelectContainer li div .arrow-right-icon {
font-size: 12px;
margin-top: 3px;
.multi-level ul, .multi-level li, .multi-level label {
margin: 0;
padding: 0;
user-select: none;
}
.multi-level label {
display: block;
background-color: ghostwhite;
}
.assignSelectContainer li div.active {
border-bottom: 1px solid rgb(32, 124, 202);
.multi-level label .arrow-right-icon {
padding-top: 4px;
}
.assignSelectContainer li div.active .folder-icon {
color: rgb(32, 124, 202);
.multi-level li .arrow-right-icon {
padding-top: 4px;
}
.assignSelectContainer li div.active .arrow-right-icon {
color: rgb(32, 124, 202);
transform: rotate(90deg);
.multi-level li a {
text-decoration: none;
color: black;
}
.assignSelectContainer li div.active + .projectListDirectory {
visibility: visible;
.item ul li {
margin: 0 0 0 22px;
background-color: ghostwhite;
}
.projectListDirectory {
visibility: hidden;
padding-left: 23px;
.sub-item ul li {
background-color: ghostwhite;
}
\ No newline at end of file
......@@ -25,9 +25,9 @@
height: 150px;
}
label {
.col-25 label {
padding: 12px 12px 12px 0;
display: inline-block;
display: block;
}
.formSubmitButton {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment