tod
/
odin-admin-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added README, modified icon spacing in sidebar, changed user pic

This commit is contained in:
NetMan 2024-01-26 21:29:15 +01:00
parent 8041578af2
commit 204a5c2832
5 changed files with 109 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md Normal file
View File

@ -0,0 +1,8 @@
# odin-admin-dashboard
A generic dashboard made using grid and flex
This project uses [CSS Nesting](https://caniuse.com/?search=nesting)
# Outcome
![Outcome](image.png)

BIN
image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

58
index.html
View File

@ -11,21 +11,51 @@
<body> <body>
<div id="container"> <div id="container">
<div id="sidebar"> <div id="sidebar">
<span id="title"> <div id="title" class="split">
<i class="fa-solid fa-house"></i> <i class="fa-solid fa-house"></i>
<h1>Home</h1> <h1>Home</h1>
</span> </div>
<ul> <ul>
<li><i class="fa-solid fa-message"></i> Messages</li> <li>
<li><i class="fa-solid fa-list-check"></i> Tasks</li> <div class="split">
<li><i class="fa-solid fa-person"></i> Profile</li> <i class="fa-solid fa-message"></i>
<li><i class="fa-solid fa-timeline"></i> History</li> <span class="text">Messages</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-list-check"></i>
<span class="text">Tasks</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-user"></i>
<span class="text">Profile</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-timeline"></i>
<span class="text">History</span>
</div>
</li>
</ul> </ul>
<ul> <ul>
<li><i class="fa-solid fa-gear"></i> Settings</li> <li>
<li><i class="fa-solid fa-circle-info"></i> Help</li> <div class="split">
<i class="fa-solid fa-gear"></i>
<span class="text">Settings</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-circle-info"></i>
<span class="text">Help</span>
</div>
</li>
</ul> </ul>
</div> </div>
<div id="header"> <div id="header">
@ -35,11 +65,11 @@
</div> </div>
<div id="profile"> <div id="profile">
<i class="fa-regular fa-bell"></i> <i class="fa-regular fa-bell"></i>
<img src="desired-result.png" alt=""> <img src="user.svg" alt="">
<span id="name">Tony Kowalski</span> <span id="name">Tony Kowalski</span>
</div> </div>
<div id="welcome"> <div id="welcome">
<img src="desired-result.png" alt=""> <img src="user.svg" alt="">
<div id="text"> <div id="text">
<span id="hi">Hi there,</span> <span id="hi">Hi there,</span>
<span id="person">Tony Kowalski (@tkowal)</span> <span id="person">Tony Kowalski (@tkowal)</span>
@ -124,28 +154,28 @@
</div> </div>
<div id="trending"> <div id="trending">
<div class="trend"> <div class="trend">
<img src="" alt=""> <img src="user.svg" alt="">
<div id="text"> <div id="text">
<h4>@account</h4> <h4>@account</h4>
<span id="description">Very cool account page</span> <span id="description">Very cool account page</span>
</div> </div>
</div> </div>
<div class="trend"> <div class="trend">
<img src="" alt=""> <img src="user.svg" alt="">
<div id="text"> <div id="text">
<h4>@account</h4> <h4>@account</h4>
<span id="description">Very cool account page</span> <span id="description">Very cool account page</span>
</div> </div>
</div> </div>
<div class="trend"> <div class="trend">
<img src="" alt=""> <img src="user.svg" alt="">
<div id="text"> <div id="text">
<h4>@account</h4> <h4>@account</h4>
<span id="description">Very cool account page</span> <span id="description">Very cool account page</span>
</div> </div>
</div> </div>
<div class="trend"> <div class="trend">
<img src="" alt=""> <img src="user.svg" alt="">
<div id="text"> <div id="text">
<h4>@account</h4> <h4>@account</h4>
<span id="description">Very cool account page</span> <span id="description">Very cool account page</span>

73
style.css
View File

@ -21,11 +21,16 @@
#title { #title {
font-size: 2.2rem; font-size: 2.2rem;
margin: 20px 0 0 20px; margin: 20px 0 0 20px;
display: inline-block;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
h1 { &.split {
display: inline-block; display: flex;
gap: 10px;
i {
flex: 0 0 50px;
text-align: center;
display: block;
}
} }
} }
ul { ul {
@ -34,14 +39,23 @@
font-weight: bold; font-weight: bold;
i { i {
position: relative; position: relative;
bottom: -1px; /* bottom: -1px; */
display: inline-block; display: inline-block;
margin-right: 10px; /* margin-right: 10px; */
}
li {
margin: 25px 0;
cursor: pointer;
.split {
display: flex;
gap: 10px;
i {
flex: 0 0 50px;
text-align: center;
display: block;
}
}
} }
}
ul li {
margin: 25px 0;
cursor: pointer;
} }
} }
#header { #header {
@ -50,7 +64,8 @@
z-index: 2; z-index: 2;
display: grid; display: grid;
grid-template: 2fr 3fr / 3fr 2fr; grid-template: 2fr 3fr / 3fr 2fr;
padding: 0 40px; padding: 10px 40px;
gap: 10px;
& > *:nth-child(2n) { & > *:nth-child(2n) {
justify-self: end; justify-self: end;
} }
@ -77,6 +92,7 @@
#profile { #profile {
display: flex; display: flex;
/* align-items: center; */ /* align-items: center; */
width: 100%;
gap: 28px; gap: 28px;
position: relative; position: relative;
align-items: center; align-items: center;
@ -89,6 +105,8 @@
border-radius: 50%; border-radius: 50%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
max-width: 50px; max-width: 50px;
border: 1px solid #454545;
filter: invert(0.5);
} }
#name { #name {
font-weight: bold; font-weight: bold;
@ -98,11 +116,15 @@
display: flex; display: flex;
gap: 12px; gap: 12px;
img { img {
max-height: 80px; /* max-height: 100%; */
max-width: 68px;
align-self: stretch;
aspect-ratio: 1/1; aspect-ratio: 1/1;
display: block; display: block;
max-width: 80px; /* max-width: 70px; */
border-radius: 50%; border-radius: 50%;
border: 1px solid #454545;
filter: invert(0.5);
} }
#text { #text {
display: flex; display: flex;
@ -142,15 +164,17 @@
} }
#main { #main {
display: grid; display: grid;
grid-template: 1fr 1fr / 5fr 2fr; grid-template: 1fr 1fr / 6fr 2fr;
grid-template-areas: "projects announcements" grid-template-areas: "projects announcements"
"projects trending"; "projects trending";
background-color: #E2E7F1; background-color: #E2E7F1;
grid-area: main; grid-area: main;
gap: 20px;
padding: 30px 18px;
#projects { #projects {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px; grid-auto-rows: calc(auto-fill);
gap: 18px; gap: 18px;
grid-area: projects; grid-area: projects;
.project { .project {
@ -189,12 +213,13 @@
border-radius: 12px; border-radius: 12px;
background-color: #fff; background-color: #fff;
box-shadow: 3px 3px 6px -5px #000; box-shadow: 3px 3px 6px -5px #000;
padding: 20px 15px 15px 18px; padding: 15px 25px;
flex-direction: column; flex-direction: column;
height:100%; height:100%;
box-sizing: border-box; box-sizing: border-box;
justify-content: center;
.announcement { .announcement {
padding: 10px; padding: 20px 10px;
h3 { h3 {
font-weight: bold; font-weight: bold;
} }
@ -213,12 +238,26 @@
border-radius: 12px; border-radius: 12px;
background-color: #fff; background-color: #fff;
box-shadow: 3px 3px 6px -5px #000; box-shadow: 3px 3px 6px -5px #000;
padding: 20px 15px 15px 18px; padding: 8px;
flex-direction: column; flex-direction: column;
height:100%; height:100%;
box-sizing: border-box; box-sizing: border-box;
justify-content: center;
.trend { .trend {
padding: 10px; padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
img {
max-height: 50px;
aspect-ratio: 1/1;
display: block;
max-width: 50px;
border-radius: 50%;
border: 1px solid #454545;
filter: invert(0.5);
}
#description { #description {
color: #545454; color: #545454;
} }

1
user.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B