Format Files + Improve UI of filter system

smarr · Jul 23, 2024 · bca7d49 · bca7d49
1 parent 8b9cd2d
commit bca7d49
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 5 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -33,15 +33,73 @@ body.compare, body.timeline {
 
 
 .links_card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+
   padding: 15px;
   margin-bottom: 15px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
   background-color: #f9f9f9;
 
   margin-top: 1em;
 }
 
+.links_card .filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.links_card .filter-header input {
+  width: 70%;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.links_card .filter-options {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.links_card .filter-option {
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.links_card .filter-option.selected-text {
+  border-color: #007bff;
+  background-color: #007bff;
+  color: white;
+}
+
+.branch-cards-container {
+  padding: 10px;
+}
+
+.branch-cards-container .list-group-item {
+  cursor: pointer;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  background-color: #fff;
+}
+
+.branch-cards-container .list-group-item:hover {
+  background-color: #f1f1f1;
+}
+
+.branch-cards-container .list-group-item.active {
+  background-color: #007bff;
+  color: white;
+}
+
 .filter-header {
   display: flex;
   align-items: center;

diff --git a/src/backend/project/project.html b/src/backend/project/project.html
@@ -31,7 +31,7 @@ <h2 class="display-5">{%= it.description%}</h2>
           <a href="#" class="filter-option">Alphabetical</a>
           <a href="#" class="filter-option">Most recent</a>
         </div>
-        <div class="list-group">
+        <div class="branch-cards-container list-group">
         </div>
       </div>
       <div class="card">
@@ -69,12 +69,11 @@ <h5>Changes</h5>
             <a href="#" class="filter-option">Alphabetical</a>
             <a href="#" class="filter-option">Most recent</a>
           </div>
-          <div class="list-group">
+          <div class="branch-cards-container list-group">
           </div>
         </div>
       </div>
     </div>
-
 </body>
 
 </html>