From 75adf4a0cf36889fc7b868d130bfcf83277d5f35 Mon Sep 17 00:00:00 2001 From: D3visionNL Date: Wed, 23 Nov 2022 18:08:20 +0100 Subject: [PATCH] Made it look like an actual dashboard --- src/App.js | 2 +- src/components/Sidebar copy.js | 29 -------------- src/components/Sidebar.js | 3 ++ src/components/UserControls.js | 14 +++++-- src/css/App.css | 50 ++++++++++++------------ src/css/components/Sidebar.css | 13 ++++++- src/css/components/UserControls.css | 35 +++++++++++++++++ src/css/index.css | 59 ++++++++++++++++++++++++++--- src/css/pages/Admin.css | 0 src/css/pages/Empty.css | 0 src/css/pages/Users.css | 57 ++++++++++++++++++++++++---- src/pages/Admin.js | 8 ++-- src/pages/Empty.js | 13 +++++++ src/pages/Home.js | 7 ++-- src/pages/Users.js | 18 +++++---- 15 files changed, 220 insertions(+), 88 deletions(-) delete mode 100644 src/components/Sidebar copy.js create mode 100644 src/css/pages/Admin.css create mode 100644 src/css/pages/Empty.css create mode 100644 src/pages/Empty.js diff --git a/src/App.js b/src/App.js index 03e0d61..6ac0548 100644 --- a/src/App.js +++ b/src/App.js @@ -32,7 +32,7 @@ function App() { return (
-
+
diff --git a/src/components/Sidebar copy.js b/src/components/Sidebar copy.js deleted file mode 100644 index b08e231..0000000 --- a/src/components/Sidebar copy.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import '../css/components/Sidebar.css'; -import NavLink from '../structures/NavLink'; - -const Sidebar = ({children}) => { - - return
- {children} -
; - -}; - -// Nav menu -const SidebarMenu = ({menuItems, children}) => { - - let key = 0; - return
- {menuItems.map(link => { - const { label, ...rest } = link; - return { label}; - })} - - {children} -
; - -}; - -export {SidebarMenu, Sidebar}; -export default Sidebar; \ No newline at end of file diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 9456c98..7325c42 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,6 +1,7 @@ import React from 'react'; import '../css/components/Sidebar.css'; import NavLink from '../structures/NavLink'; +import logoImg from '../img/logo.png'; const Sidebar = ({children}) => { @@ -15,6 +16,8 @@ const SidebarMenu = ({menuItems, children}) => { let key = 0; return
+ +
{menuItems.map(link => { const { label, ...rest } = link; return { label}; diff --git a/src/components/UserControls.js b/src/components/UserControls.js index 22a8741..9c4f9eb 100644 --- a/src/components/UserControls.js +++ b/src/components/UserControls.js @@ -8,11 +8,17 @@ const UserControls = () => { if (!user) return; - return
-
+ return
+ Hello {user.displayName} -
-
; + + +
+

Profile

+
+

Logout

+
+ ; }; diff --git a/src/css/App.css b/src/css/App.css index 618874b..546d460 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -1,26 +1,26 @@ .app { - background-color: var(--background-primary); - } - - header { - position: absolute; - right: 0; - display: flex; - flex-direction: row; - text-align: center; - height: 50px; - background-color: var(--background-tertiary); - } - - .background { - display: flex; - height: 100%; - width: 100%; - } - - .main-content { - width: 100%; - height: 100%; - padding-right: 30px; - background-color: var(--background-secondary); - } \ No newline at end of file + background-color: var(--background-primary); +} + +header { + position: absolute; + right: 15px; + display: flex; + flex-direction: row; + text-align: center; + height: 50px; + border-radius: 0px 0px 4px 4px !important; +} + +.background { + display: flex; + height: 100%; + width: 100%; +} + +.main-content { + width: 100%; + height: 100%; + padding: 0 15px; + background-color: var(--background-secondary); +} \ No newline at end of file diff --git a/src/css/components/Sidebar.css b/src/css/components/Sidebar.css index 4c4ffcc..fc06313 100644 --- a/src/css/components/Sidebar.css +++ b/src/css/components/Sidebar.css @@ -1,7 +1,6 @@ .sidebar { min-width: 200px; height: 100%; - margin-right: 10px; } .sidebar-menu { @@ -9,6 +8,11 @@ flex-direction: column; } +.sidebar-logo{ + margin: 1rem; + max-width: 170px; +} + .sidebar-menu-item { margin: 5px; margin-right: 10px; @@ -19,7 +23,12 @@ text-decoration: none; font-weight: bold; } - +.sidebar-menu-item.active { + opacity: .75; + border-right: solid 3px var(--color-primary); + width: calc(100% + 15px); + border-radius: 0; +} .active { background-color: var(--light-blue); } \ No newline at end of file diff --git a/src/css/components/UserControls.css b/src/css/components/UserControls.css index 66634c5..5a62f80 100644 --- a/src/css/components/UserControls.css +++ b/src/css/components/UserControls.css @@ -1,3 +1,38 @@ .user-controls { display: flex; + cursor: pointer; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +.user-controls summary::marker{ + display: none; + font-size: 0px; +} + +.user-controls .profile-picture { + height: 30px; + width: 30px; + margin-left: 10px; + border-radius: 50%; +} + +.user-controls.dropdown>:last-child { + right: 0; + margin-top: 15px; + box-shadow: unset; + filter: drop-shadow(0px 0px 4px #00000085); + transition: .25s transform ease; +} + +.user-controls.dropdown>:last-child:before { + content: ' '; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 15px solid #343434; + position: absolute; + display: block; + right: 5px; + top: -10px; } \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index 6841e31..1450bc4 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -3,6 +3,7 @@ :root { --bg-color: #232323; --bg-secondary-color: #343434; + --bg-tertiary-color: #45454545; --color-primary: #2760aa; --color-lightGrey: #d2d6dd; --color-grey: #ccc; @@ -17,6 +18,59 @@ --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; } +details[open] summary ~ * { + animation: sweep .15s ease-in-out; +} + +@keyframes sweep { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.main-content .card{ + padding: 1rem 2rem 2rem 2rem; +} + +table.hover tbody tr{ + cursor: pointer; +} + +table.striped tr:nth-of-type(2n) { + background-color: var(--bg-tertiary-color); +} + +.button, [type=button], [type=reset], [type=submit], button { + padding: 1rem; +} + +.page-controls button{ + min-width: 120px; +} + +.page-controls p{ + margin: 0; +} + +.page-controls{ + margin-top: 2rem; +} + +td, th { + padding: 1.2rem; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0.35em 0 0.35em; +} + +body{ + line-height: 1.95; +} + +.pageTitle{ + margin: 0.7em 0 0.7em; +} + .flex { display: flex; gap: 10px; @@ -28,7 +82,6 @@ html { ul { list-style-type: none; - /* padding: 0; */ } tbody tr:hover { @@ -66,10 +119,6 @@ tbody tr:hover { flex-direction: row; } -button{ - margin: 0.35em 0 0.7em; -} - .flex-wrap{ flex-wrap: wrap; } diff --git a/src/css/pages/Admin.css b/src/css/pages/Admin.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/pages/Empty.css b/src/css/pages/Empty.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/pages/Users.css b/src/css/pages/Users.css index 2b2684b..1527ef2 100644 --- a/src/css/pages/Users.css +++ b/src/css/pages/Users.css @@ -1,11 +1,52 @@ -.user-page { - height: 100%; -} - -.user-list { - height: 95%; -} - li input { margin: 0; +} +.tree li { + list-style-type: none; + margin: 2px 0 2px 2px; + position: relative; +} +.tree span *:hover{ + cursor: pointer +} +.tree li:before { + content: ""; + position: absolute; + top: 4px; + left: -20px; + border-left: 1px solid #ddd; + border-bottom: 1px solid #ddd; + width: 18px; + height: 15px; +} +.tree ul li:before{ + top: -8px; + left: -20px; + width: 17px; + height: 28px; +} +.tree ul li:after{ + top: 19px; + left: -20px; + width: 18px; + height: 100%; +} +.tree .groupName{ + padding-top: 3px; +} +.tree li:after { + position: absolute; + content: ""; + top: 18px; + left: -20px; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + width: 18px; + height: 100%; +} +.tree li:last-child:after { + display: none; +} +.tree > li:first-child:before { + display: none; } \ No newline at end of file diff --git a/src/pages/Admin.js b/src/pages/Admin.js index fe95ee7..b0e3ee1 100644 --- a/src/pages/Admin.js +++ b/src/pages/Admin.js @@ -1,11 +1,13 @@ import React from "react"; +import '../css/pages/Admin.css'; const Admin = () => { - return
- ADMIN + return
+

Admin

+
+
; - }; export default Admin; \ No newline at end of file diff --git a/src/pages/Empty.js b/src/pages/Empty.js new file mode 100644 index 0000000..074bf9a --- /dev/null +++ b/src/pages/Empty.js @@ -0,0 +1,13 @@ +import React from "react"; +import '../css/pages/Empty.css'; + +const Empty = () => { + + return
+

Empty

+
+
+
; +}; + +export default Empty; \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js index 46499fc..4b8ab9b 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -3,10 +3,11 @@ import '../css/pages/Home.css'; const Home = () => { - return
- HOME + return
+

Home

+
+
; - }; export default Home; \ No newline at end of file diff --git a/src/pages/Users.js b/src/pages/Users.js index 29a8138..d5ef99e 100644 --- a/src/pages/Users.js +++ b/src/pages/Users.js @@ -20,7 +20,9 @@ const PermissionGroup = ({ name, value }) => { else elements.push(); } return
  • - Group: {name} +
    + Group: {name} +
      {elements}
    @@ -53,7 +55,7 @@ const Permissions = ({ perms }) => { return

    Permissions

    -
      +
        {elements}
    ; @@ -86,7 +88,7 @@ const User = ({ user }) => {
    -
    +
    @@ -131,7 +133,7 @@ const UserListEntry = ({ user }) => { navigate(`/users/${user._id}`); }; - return + return {user.username} {user._id} ; @@ -141,7 +143,7 @@ const UserListEntry = ({ user }) => { // TODO: Make table list generic component const UserList = ({ users }) => { - return + return
    @@ -182,9 +184,9 @@ const Users = () => { return
    - +

    Page: {page}

    -
    @@ -192,7 +194,7 @@ const Users = () => { }; return
    -

    USERS

    +

    Users

    {error &&

    {error}

    }
    Username