ID-39

made it into responsive but still didn't figure out: 1. make the size of container bigger 2. make each box position change based on the device size Next step: 1. Show data of recent device 2. Show data of weekly average scores 3. Link each pages to recent trip
JoeyRoeters · Jan 15, 2024 · c847385 · c847385
1 parent 8fc0c17
commit c847385
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 99 deletions.
diff --git a/app/UserInterface/Domain/Homepage/Resources/sass/_homepage.scss b/app/UserInterface/Domain/Homepage/Resources/sass/_homepage.scss
@@ -1,5 +1,5 @@
 .homepage-under-construction {
-    margin-top: 7.5rem;
+    margin-top: 3rem;
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -21,38 +21,18 @@
         width: 25rem;
     }
 
-    .card_name{
-        color: #000000;
-        position: absolute;
-        top: 4.6875rem;
-        left: 12.5rem;
-        font-size: 1.875rem;
-        font-weight: 600;
-   }
+
     .card{
-        width: 101.25rem;
         height: 7.5rem;
         border-radius: 0.625rem;
         background-color: #ffffff;
-        top: -3.125rem;
-        left: -0.9375rem;
         padding: 0.9375rem;
         color: #000000;
         display: flex;
         cursor: pointer;
     }
 
-    .recent_name{
-        color: #000000;
-        position: absolute;
-        top: 16.825rem;
-        left: 12.5rem;
-        font-size: 1.875rem;
-        font-weight: 600;
-   }
-
    .recent  {
-        width: 50rem;
         height: 5rem;
         border-radius: 0.625rem;
         background-color: #ffffff;
@@ -62,73 +42,13 @@
         cursor: pointer;
    }
 
-   .recent1{
-        position: absolute;
-        top: 20.3125rem;
-        left: 12.1875rem;
-   }
-
-   .recent2{
-        position: absolute;
-        top: 26.5625rem;
-        left: 12.1875rem;
-    }
-
-    .recent3{
-        position: absolute;
-        top: 32.8125rem;
-        left: 12.1875rem;
-   }
-
-   .recent4{
-        position: absolute;
-        top: 39.0625rem;
-        left: 12.1875rem;
-    }
-
-    .review_name{
-        color: #000000;
-        position: absolute;
-        top: 16.875rem;
-        left: 67.1875rem;
-        font-size: 1.875rem;
-        font-weight: 600;
-   }
-
    .review  {
-        width: 22.5rem;
-        height: 11.25rem;
+        height: 11rem;
         border-radius: 0.625rem;
         background-color: #ffffff;
         padding: 0.9375rem;
         color: #000000;
         display: flex;
         cursor: pointer;
    }
-
-   .speed{
-        position: absolute;
-        top: 20.3125rem;
-        left: 66.875rem;
-   }
-
-   .brake{
-        position: absolute;
-        top: 20.3125rem;
-        left: 9.625rem;
-    }
-
-    .gear{
-        position: absolute;
-        top: 32.8125rem;
-        left: 66.875rem;
-   }
-
-   .steering{
-        position: absolute;
-        top: 32.8125rem;
-        left: 90.625rem;
-    }
-
-
 }
diff --git a/app/UserInterface/Domain/Homepage/Resources/views/homepage.blade.php b/app/UserInterface/Domain/Homepage/Resources/views/homepage.blade.php
@@ -6,24 +6,53 @@
 
 @section('content')
     <div class="homepage-under-construction">
-        <div class="card_name">Current Device</div>
-        <div class="card">Device Name</div>   
-
-        <div class="recent_name">Recent Trips</div>
-        <div class="recent recent1">Trip #1</div>
-        <div class="recent recent2">Trip #2</div>
-        <div class="recent recent3">Trip #3</div>
-        <div class="recent recent4">Trip #4</div>
-
-        <div class="review_name">Case Reviews</div>
-        <div class="review speed">Speed</div>
-        <div class="review brake">Brake</div>
-        <div class="review gear">Gear</div>
-        <div class="review steering">Steering</div>
+        <div class="container"> 
+            <div class="row">
+                <div class="col-sm-12">
+                    <h4>Current Device</h4>
+                    <div class="row">
+                    <div class="cols-sm-12">
+                            <div class="card">Device name</div>
+                        </div> 
+                    </div>
+                </div>
+                <div class="col-sm-6 mt-2">
+                    <h4>Weekly Review</h4>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="review">Speed</div>
+                            <div class="review mt-1">Gear</div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="review">Brake</div>
+                            <div class="review mt-1">Steering</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6 mt-2">
+                    <h4>Recent Trips</h4>
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <div class="recent">
+                                <a class="nav-link" href="#">Trip #1</a>
+                            </div>
+                            <div class="recent mt-1">
+                                <a class="nav-link" href="#">Trip #2</a>
+                            </div>
+                            <div class="recent mt-1">
+                                <a class="nav-link" href="#">Trip #3</a>
+                            </div>
+                            <div class="recent mt-1">
+                                <a class="nav-link" href="#">Trip #4</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
+
     </div>
 
 
-
-</div>
 @endsection