chore: fix css

Real-Dev-Squad · Jan 28, 2025 · 797f1e5 · 797f1e5
1 parent ce9946c
commit 797f1e5
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 24 deletions.
diff --git a/feed/index.html b/feed/index.html
@@ -26,28 +26,26 @@ <h1 id="pageTitle">Activity Feed</h1>
           <input type="text" id="assignee-search" placeholder="Username" />
           <span id="clear-username" class="clear-icon">×</span>
         </div>
-      </div>
-      <div class="filter-row">
-        <div class="filter-start-date">
-          <label for="start-date">Start Date</label>
-          <input type="date" id="start-date" />
-        </div>
-        <div class="filter-end-date">
-          <label for="end-date">End Date</label>
-          <input type="date" id="end-date" />
+        <div class="date-filters">
+          <div class="filter-start-date">
+            <label for="start-date">Start Date:</label>
+            <input type="date" id="start-date" />
+          </div>
+          <div class="filter-end-date">
+            <label for="end-date">End Date:</label>
+            <input type="date" id="end-date" />
+          </div>
         </div>
       </div>
     </div>
-
-    <ul id="ACITIVITY_FEED_CONTAINER"></ul>
-    <nav class="tabs-container">
+    <section class="tabs-container">
       <ul class="tabs"></ul>
       <div class="container">
         <div id="activity_feed_container">
           <ul class="activity-list"></ul>
         </div>
         <div class="virtual"></div>
       </div>
-    </nav>
+    </section>
   </body>
 </html>
diff --git a/feed/script.js b/feed/script.js
@@ -305,16 +305,11 @@ function addEmptyPageMessage(container) {
 }
 
 async function populateActivityFeed(query = {}, newLink) {
-  console.log('Populating logs with filters:', activeFilters);
-
   activityFeedPage++;
   const currentVersion = activityFeedPage;
 
-  // Combine active filters with the provided query
   const combinedQuery = { ...query, ...activeFilters };
 
-  console.log({ combinedQuery });
-
   try {
     isDataLoading = true;
     addLoader(container);
@@ -402,7 +397,6 @@ function handleTabClick(tab) {
   tabs.forEach((t) => t.classList.remove('active'));
   tab.classList.add('active');
   currentCategory = tab.dataset.type;
-  console.log('Updated currentCategory:', currentCategory);
   changeFilter();
   populateActivityFeed({ category: currentCategory });
 }
@@ -438,14 +432,12 @@ function applyFilter() {
     : null;
   activeFilters.endDate = endDate ? new Date(endDate).toISOString() : null;
 
-  console.log('Active filters:', activeFilters);
   populateActivityFeed({ category: currentCategory, ...activeFilters });
 }
 
 function clearUsernameFilter() {
   document.getElementById('assignee-search').value = '';
   activeFilters.username = null;
-  console.log('Username filter cleared. Active filters:', activeFilters);
   populateActivityFeed();
 }
 

diff --git a/feed/style.css b/feed/style.css
@@ -150,16 +150,23 @@ body {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  max-width: 50rem;
+  align-items: center;
 }
 
 .filter-row {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
-  justify-content: space-between;
+  flex-direction: column;
+  max-width: 800px;
+  margin-left: 17rem;
+  align-items: flex-end;
+}
+.date-filters {
+  display: flex;
+  gap: 1rem;
+  font-weight: 600;
 }
-
 .input-wrapper {
   position: relative;
   width: 100%;
@@ -200,3 +207,74 @@ body {
   background: var(--light-gray-color);
   max-width: 15rem;
 }
+
+@media (max-width: 768px) {
+  body {
+    padding: 0 10px;
+  }
+
+  #activity_feed_container {
+    padding: 5px 0;
+    margin: 0 auto;
+  }
+
+  .filters {
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+
+  .filter-row {
+    flex-direction: column;
+    gap: 10px;
+    margin: 0 auto;
+    align-items: stretch;
+  }
+
+  .input-wrapper,
+  .filters input[type='date'] {
+    max-width: 100%;
+  }
+
+  .tabs-container {
+    padding: 10px 0;
+  }
+
+  .tabs {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .tabs li {
+    padding: 10px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--tab-border-color);
+  }
+
+  .tabs li.active {
+    border-bottom: none;
+    border-left: 4px solid var(--pink-color);
+  }
+
+  .activity-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+  }
+
+  .title {
+    flex-direction: column;
+    gap: 5px;
+    align-items: flex-start;
+  }
+
+  .date-filters {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .page-message,
+  .loader-text {
+    font-size: 1.2rem;
+  }
+}