Skip to content

Commit

Permalink
ID-39
Browse files Browse the repository at this point in the history
  • Loading branch information
jihye2084 committed Jan 16, 2024
1 parent 6d694a4 commit bc0ae3b
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 26 deletions.
19 changes: 6 additions & 13 deletions app/UserInterface/Domain/Homepage/Resources/sass/_homepage.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.homepage-under-construction {
margin-top: 3rem;
margin-top: 0.25rem;
display: flex;
justify-content: center;
flex-direction: column;
Expand All @@ -22,16 +22,6 @@
}


.card {
height: 7.5rem;
border-radius: 0.625rem;
background-color: #ffffff;
padding: 0.9375rem;
color: #000000;
display: flex;
cursor: pointer;
}

.recent {
height: 5rem;
border-radius: 0.625rem;
Expand All @@ -40,6 +30,8 @@
color: #000000;
display: flex;
cursor: pointer;
margin-bottom: 1rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 2.5px;
}

.review {
Expand All @@ -50,6 +42,7 @@
color: #000000;
display: flex;
cursor: pointer;
margin-bottom: 4%;
margin-bottom: 1rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 2.5px;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
#recent-device-wrapper {
padding: 1rem 2rem;
min-width: 100%;
justify-content: center;
align-items: center;
border-radius: 0.625rem;
background-color: #ffffff;
color: #000000;
cursor: pointer;
margin-bottom: 1rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 2.5px;



#recent-device-header {
width: 100%;

.card {
padding: 2rem 2rem 2rem 2rem;
}

.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-gray-100);
border-radius: 10%;
padding: 1rem;

i {
font-size: 3rem;
padding: 0.5rem 0.5rem;
color: var(--color-tertiary-color);
}
}

.details {
padding: 0 0.9rem;

.name {
margin-top: 1rem;
margin-left: 0.5rem;

h3 {
font-size: 2rem;
font-weight: 600;
margin: 0;
}

p {
font-size: 1rem;
margin: 0;
color: var(--color-gray-500);
}
}

.badges {
margin-top: 0.5rem;

.badge {
border: 1px dashed var(--color-gray-300);
padding: 0.5rem 1rem;
border-radius: .475rem !important;
min-width: 125px;
margin: 0.5rem 0;
color: black;
text-align: left;
font-size: 1rem;

.badge-value {
i {
margin-right: 0.5rem;
}

font-size: 1.25rem;
}

.badge-label {
font-weight: 200;
margin: 0;
margin-top: 0.3rem;
color: var(--color-gray-500);
}
}
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,68 @@

@section('head')
@vite('app/UserInterface/Domain/Homepage/Resources/sass/_homepage.scss')
@vite('app/UserInterface/Domain/Homepage/Resources/sass/_recent_device.scss')
@endsection

@section('content')
<div class="homepage-under-construction">
<div class="container">
<div class="row">
<div class="col-12">
<h4>Current Device</h4>

<div class="card">Device name</div>

<h4>Recent Device</h4>
<div id="recent-device-wrapper" class="container">
<div id="recent-device-header" class="row">
<div class="row">
<div class="col-md-2 col-xs-12 icon">
<i class="fa-solid fa-car"></i>
</div>
<div class="col-10 details">
<div class="row">
<div class="col-xl-3 col-md-12 name">
<h3>Name</h3>
<p>Last view</p>
</div>
<div class="col-xl-8 col-md-12 text-xl-end text-md-start badges">
<div class="badge">
<div class="badge-value fs-4">
<i class="fa-regular fa-car"></i>
<span>Label</span>
</div>
<div class="badge-label fs-6">
<span>Device type</span>
</div>
</div>
<div class="badge">
<div class="badge-value fs-4">
<i class="fa-regular fa-road"></i>
<span>Trips</span>
</div>
<div class="badge-label fs-6">
<span>Total trips</span>
</div>
</div>
<div class="badge">
<div class="badge-value fs-4">
<i class="fa-regular fa-gauge-simple-high"></i>
<span>Kilometers</span>
</div>
<div class="badge-label fs-6">
<span>Total KM's</span>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
</div>

</div>
</div>


<div class="row mt-1">
<div class="col-6">
<div class="row">
<div class="col-xl-6 col-md-12">
<h4>Weekly Review</h4>
<div class="row">
<div class="col-xl-6 col-md-12">
Expand All @@ -28,7 +73,7 @@
<div class="review">Gear</div>
</div>
</div>
<br>

<div class="row">
<div class="col-xl-6 col-md-12">
<div class="review">Brake</div>
Expand All @@ -38,20 +83,20 @@
</div>
</div>
</div>
<div class="col-6">
<div class="col-xl-6 col-md-12">
<h4>Recent Trips</h4>
<div class="row">
<div class="col-12">
<div class="recent">
<a class="nav-link" href="#">Trip #1</a>
</div>
<div class="recent mt-1">
<div class="recent">
<a class="nav-link" href="#">Trip #2</a>
</div>
<div class="recent mt-1">
<div class="recent">
<a class="nav-link" href="#">Trip #3</a>
</div>
<div class="recent mt-1">
<div class="recent">
<a class="nav-link" href="#">Trip #4</a>
</div>
</div>
Expand Down

0 comments on commit bc0ae3b

Please sign in to comment.