Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design summary

Browse source
This commit is contained in:
Chneemann 2024-03-23 20:44:50 +01:00
parent eca69a0753
commit bda86233f6
2 changed files with 119 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/app/components/summary/summary.component.html
View file

@ -5,27 +5,72 @@
<div class="metrics-txt">Key Metrics at a Glance</div> <div class="metrics-txt">Key Metrics at a Glance</div>
</div> </div>
<div class="content"> <div class="content">
<div class="left-frame"> <div class="left-container">
<div class="todo-done"> <!-- TOP -->
<div class="circle"> <div class="top-frame">
<img src="./../../../assets/img/summary/pencil.svg" alt="" /> <div class="todo-done">
<div class="circle">
<img src="./../../../assets/img/summary/pencil.svg" alt="" />
</div>
<div class="details">
<span>1</span>
<p>To-do</p>
</div>
</div> </div>
<div class="details"> <div class="todo-done">
<span>1</span> <div class="circle">
<p>To-do</p> <img src="./../../../assets/img/summary/rake.svg" alt="" />
</div>
<div class="details">
<span>1</span>
<p>Done</p>
</div>
</div> </div>
</div> </div>
<div class="todo-done"> <!-- MIDDLE -->
<div class="circle"> <div class="middle-frame">
<img src="./../../../assets/img/summary/rake.svg" alt="" /> <div class="urgent">
<div class="left">
<img src="./../../../assets/img/summary/urgent.svg" alt="" />
<div class="details">
<span>1</span>
<p>Done</p>
</div>
</div>
<div class="line"></div>
<div class="right">
<div class="date">
<div>
<span>October 16, 2022</span>
<p>Upcoming Deadline</p>
</div>
</div>
</div>
</div> </div>
<div class="details"> </div>
<span>1</span> <!-- BOTTOM -->
<p>Done</p> <div class="bottom-frame">
<div class="tasks">
<div class="details">
<span>5</span>
<p>Task in Board</p>
</div>
</div>
<div class="tasks">
<div class="details">
<span>2</span>
<p>Task in Progress</p>
</div>
</div>
<div class="tasks">
<div class="details">
<span>2</span>
<p>Awaiting Feedback</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="right-frame"> <div class="right-container">
<p>Good Morning,</p> <p>Good Morning,</p>
<span id="welcome-user">Guest</span> <span id="welcome-user">Guest</span>
</div> </div>

71
src/app/components/summary/summary.component.scss
View file

@ -25,7 +25,7 @@
padding: 24px; padding: 24px;
} }
.right-frame { .right-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -41,15 +41,23 @@
} }
} }
.left-frame { .left-container {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
width: 560px; width: 560px;
height: 562px; height: 562px;
border: 2px solid #000;
} }
.todo-done { .top-frame,
.bottom-frame {
display: flex;
justify-content: space-between;
}
.todo-done,
.urgent,
.tasks {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -70,24 +78,46 @@
brightness(104%) contrast(101%); brightness(104%) contrast(101%);
} }
} }
.details { p {
p { color: var(--white);
color: var(--white); }
} span {
span { color: var(--white);
color: var(--white);
}
} }
} }
} }
.urgent {
width: 560px;
.right {
width: 40%;
}
.left {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: 40%;
}
img {
height: 69px;
width: 69px;
}
}
.tasks {
width: 168px;
}
.details { .details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
p { p {
padding: 0 24px;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
text-align: center;
} }
span { span {
font-size: 64px; font-size: 64px;
@ -108,3 +138,22 @@
width: 32px; width: 32px;
} }
} }
.date {
display: flex;
justify-content: center;
p {
font-size: 16px;
font-weight: 400;
}
span {
font-size: 21px;
font-weight: 700;
}
}
.line {
height: 100px;
width: 2px;
background-color: var(--gray);
}