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>
<div class="content">
<div class="left-frame">
<div class="todo-done">
<div class="circle">
<img src="./../../../assets/img/summary/pencil.svg" alt="" />
<div class="left-container">
<!-- TOP -->
<div class="top-frame">
<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 class="details">
<span>1</span>
<p>To-do</p>
<div class="todo-done">
<div class="circle">
<img src="./../../../assets/img/summary/rake.svg" alt="" />
</div>
<div class="details">
<span>1</span>
<p>Done</p>
</div>
</div>
</div>
<div class="todo-done">
<div class="circle">
<img src="./../../../assets/img/summary/rake.svg" alt="" />
<!-- MIDDLE -->
<div class="middle-frame">
<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 class="details">
<span>1</span>
<p>Done</p>
</div>
<!-- BOTTOM -->
<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 class="right-frame">
<div class="right-container">
<p>Good Morning,</p>
<span id="welcome-user">Guest</span>
</div>

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

@ -25,7 +25,7 @@
padding: 24px;
}
.right-frame {
.right-container {
display: flex;
flex-direction: column;
justify-content: center;
@ -41,15 +41,23 @@
}
}
.left-frame {
.left-container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 560px;
height: 562px;
border: 2px solid #000;
}
.todo-done {
.top-frame,
.bottom-frame {
display: flex;
justify-content: space-between;
}
.todo-done,
.urgent,
.tasks {
display: flex;
align-items: center;
justify-content: center;
@ -70,24 +78,46 @@
brightness(104%) contrast(101%);
}
}
.details {
p {
color: var(--white);
}
span {
color: var(--white);
}
p {
color: var(--white);
}
span {
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 {
display: flex;
flex-direction: column;
align-items: center;
p {
padding: 0 24px;
font-size: 20px;
font-weight: 400;
text-align: center;
}
span {
font-size: 64px;
@ -108,3 +138,22 @@
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);
}