diff --git a/dashboard.php b/dashboard.php index b5e630e8ca0cde2c37fd76baec07eb7c9ad4f276..e6d23f7af83702f9ce026d6113401971e6a5e653 100644 --- a/dashboard.php +++ b/dashboard.php @@ -11,23 +11,33 @@ if (!$_SESSION['auth']) { exit; } -$doc_title = get_display_name($user['id']) . "'s Dashboard" ; +?> -$output = $output . - "<link rel='stylesheet' href='/styles/settings.css' /> +<link rel='stylesheet' href='/styles/settings.css' /> -<div id=\"settings_split\"> - <div id=\"mini_profile\" class=\"left\"> - <div class=\"image_container\" data-backgroundcolour=\"white\"> - <img src='" . get_avatar_url($user['id']) . "' /> +<div id="settings_split"> + <div id="mini_profile" class="left"> + <div class="image_container" data-backgroundcolour="white"> + <img src='<?= get_avatar_url($user['id']) ?>' /> </div> - <div class=\"texts\"> - <span class=\"displayname\">" . htmlspecialchars(get_display_name($user['id'], false)) . "</span> - <span class=\"id bcid\">" . format_bcid($user['id']) . "</span> + <div class="texts"> + <span class="displayname"><?= htmlspecialchars(get_display_name($user['id'], false)) ?></span> + <span class="id bcid"><?= format_bcid($user['id']) ?></span> </div> </div> - <div class='right'> - <h1>". htmlspecialchars(get_display_name($user['id'], false)) ."'s Dashboard</h1> + <div class='right tiles'> + <a href="/settings" class="tile double-height"> + <div class="wrapper"> <!-- SUPERIMPORTANTBECAUSE IM BAD AT CSS --> + <span class="fa-solid fa-cog icon"></span> + <span class="text">Settings</span> + </div> + + </a> + <a href="/profile" class="tile"> + <div class="wrapper"> <!-- SUPERIMPORTANTBECAUSE IM BAD AT CSS --> + <span class="fa-solid fa-id-card-clip icon"></span> + <span class="text">Profile</span> + </div> + </a> </div> </div> -"; diff --git a/index.php b/index.php index dee8e314d5dd8accfca77f4224dc4d259dfa1d18..90a06e14bf0887e6e14aa400381bd29c7f5fc75e 100755 --- a/index.php +++ b/index.php @@ -124,7 +124,7 @@ $paths = array( "/admin/purge" => ["admin_purge.php"], // Settings - "/dashboard" => ["dashboard.php", "Dashboard", true], + "/dashboard" => ["dashboard.php", "Dashboard"], "/settings" => ["settings.php", "Settings"], "/account" => ["account.php", "Your account"], diff --git a/styles/colours.css b/styles/colours.css index aac47e346a643bfd4955109cbf95ac5a2b6a86b8..fe71ae5a13b30fee92d8ede563313ee590f3ca3d 100644 --- a/styles/colours.css +++ b/styles/colours.css @@ -30,6 +30,8 @@ --foreground: black; --foreground-dark: white; + --chip-background: var(--grey-0); + color-scheme: light dark; } @@ -114,6 +116,8 @@ input[data-com-onepassword-filled="dark"] { --background: #121212; --foreground: white; + --chip-background: var(--grey-9); + color-scheme: light dark; } diff --git a/styles/settings.css b/styles/settings.css index 86ad52faeae7a180b3586e977d062a75bd60efa7..95d424e1166be3196b471eced33e74057161a009 100644 --- a/styles/settings.css +++ b/styles/settings.css @@ -1,8 +1,12 @@ +main { + display: flex; +} + #settings_split { display: grid; - - grid-template-columns: 1fr 4fr; + grid-template-columns: 1fr 3fr; + gap: 1rem; } #mini_profile { @@ -11,17 +15,20 @@ border-radius: 1.5rem; overflow: clip; + + padding-bottom: 1.5rem; + + background: var(--background); } #mini_profile .image_container { display: flex; - background: linear-gradient(to bottom, white, var(--background) 90%); + background: linear-gradient(to bottom, white, var(--background) 95%); } #mini_profile .image_container img { width: 50%; - margin: 0.5rem auto auto; - padding-top: 0.5rem; + margin: 0.5rem auto 0.5rem; border-radius: 1rem; } @@ -29,8 +36,6 @@ text-align: center; display: flex; flex-direction: column; - - padding-top: 1rem; } #mini_profile .texts .displayname { @@ -67,3 +72,69 @@ #settings_list li > a:hover { color: var(--flax) } + +.tiles { + display: grid; + gap: 1rem; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 150px; + grid-auto-flow: dense; +} + +.tiles .tile { + background: #343a40; + text-align: center; + display: flex; + text-decoration: none; + + font-size: 1.2rem; + font-weight: 500; + + border-radius: 1.5rem; + + transition: scale 0.2s ease-in-out; +} + +.tiles .tile:hover { + scale: 1.05; +} + +.tiles .tile div { + margin: auto; +} + +.tiles .tile span { + display: block; +} + +.tile.double-height { + grid-row: span 2; +} + +@media screen and (max-width: 960px) { + #settings_split { + grid-template-columns: none; + } + + #mini_profile { + flex-direction: row; + padding-bottom: 0; + } + + #mini_profile .image_container { + width: 40%; + background: linear-gradient(to right, white, var(--chip-background) 95%); + } + + #mini_profile .image_container img { + margin: 1rem; + border-radius: 1rem; + } + + #mini_profile .texts { + flex: 1; + margin: auto auto auto 0; + text-align: left; + } +} + diff --git a/styles/types.css b/styles/types.css index 2fec09e2ed1f1d31193bdfee003865764403ee44..26b27af293ef842fbca03b77d757d0653e1b337a 100644 --- a/styles/types.css +++ b/styles/types.css @@ -1,6 +1,6 @@ /* This file deals with font types and font families. */ -@import url(https://fonts.bunny.net/css?family=montserrat:400,400i,600,600i,700,700i,900,900i); +@import url(https://fonts.bunny.net/css?family=montserrat:400,400i,500,600,600i,700,700i,900,900i); @import url(https://fonts.bunny.net/css2?family=Space+Mono:wght@400;700&display=swap); /* for BCIDs */ @import url(/fontawesome/css/all.css);