Merge pull request #9 from nyuoss/Front-end-Bowen

refine appearance
nyuoss · Apr 30, 2024 · 9c7ba6b · 9c7ba6b
2 parents 8c5617f + 67c4f64
commit 9c7ba6b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 45 deletions.
diff --git a/src/open_source_python_template/static/style.css b/src/open_source_python_template/static/style.css
@@ -1,7 +1,6 @@
 body {
   margin: 0;
   font-family: 'Arial', sans-serif;
-  box-sizing: border-box;
   background-color: #eceff1;
   color: #333;
 }
@@ -12,7 +11,7 @@ body {
 }
 
 .sidenav {
-  width: 500px;
+  width: 300px;
   background-color: #488dcb;
   color: #fff;
   padding: 20px;
@@ -22,7 +21,6 @@ body {
 .sidenav h1 {
   margin-top: 0;
   font-size: 24px;
-  color: white;
 }
 
 .username-placeholder {
@@ -53,6 +51,7 @@ body {
   padding: 10px 15px;
   cursor: pointer;
   border-radius: 5px;
+  margin-bottom: 10px; /* Spacing between menu items */
 }
 
 .category.active, .category:hover {
@@ -68,61 +67,72 @@ body {
 
 .taskcolumn h2 {
   margin-top: 0;
+  color: #333;
+  font-size: 1.5rem;
 }
 
 .task-item {
   background-color: #fff;
-  padding: 20px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
   border-radius: 5px;
   display: flex;
-  align-items: center;
-}
-
-.task-item label {
-  flex-grow: 1;
-  margin-left: 10px;
-}
-
-.task-meta {
-  text-align: right;
+  flex-direction: column;
+  align-items: flex-start;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  padding: 10px;
 }
 
-.task-meta .task-description {
-  display: block;
-  color: #757575;
-  font-size: 14px;
+.task-info {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.due-date {
-  background-color: #c8e6c9;
-  border-radius: 5px;
-  padding: 5px 10px;
-  display: inline-block;
-  font-size: 12px;
-  margin-top: 5px;
+.task-info input[type="checkbox"] {
+  margin-right: 10px;
 }
 
-/* Dropdown toggle button */
 .dropdown-toggle {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0 10px;
-  font-size: 14px;
+  font-size: 1rem;
+  padding: 5px;
+  outline: none;
+  margin-left: auto;
 }
 
-/* Task details dropdown */
 .task-detail {
   display: none;
   background-color: #f6f8fa;
   padding: 10px;
   border-radius: 5px;
+  width: 100%;
+  box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
 
-/* Display task detail when it's set to show */
 .task-detail.show {
   display: block;
 }
+
+.task-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.task-description {
+  color: #757575;
+  font-size: 0.875rem;
+}
+
+.due-date {
+  background-color: #c8e6c9;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 0.75rem;
+}
diff --git a/src/open_source_python_template/templates/index.html b/src/open_source_python_template/templates/index.html
@@ -25,32 +25,39 @@ <h1>Hi, <span class="username-placeholder">username</span>!</h1>
         <div class="taskcolumn">
             <h2>Starred</h2>
 
+            <!-- Task Item 1 -->
             <div class="task-item">
-                <input type="checkbox" id="task1">
-                <label for="task1">Task Item 1</label>
+                <div class="task-info">
+                    <input type="checkbox" id="task1">
+                    <label for="task1">Task Item 1</label>
+                    <div class="task-meta">
+                        <span class="task-description">This is the task description.</span>
+                        <span class="due-date">Today</span>
+                    </div>
+                </div>
                 <button class="dropdown-toggle" onclick="toggleDropdown('task-detail-1')">▼</button>
                 <div class="task-detail" id="task-detail-1">
-                    <p>More details about Task Item 1. Here you can place any additional information needed, such as descriptions, comments, or attachments.</p>
+                    <p>More details about Task Item 1...</p>
                 </div>
             </div>
 
+            <!-- Task Item 2 -->
             <div class="task-item">
-                <input type="checkbox" id="task1">
-                <label for="task1">Task Item 2</label>
+                <div class="task-info">
+                    <input type="checkbox" id="task2">
+                    <label for="task1">Task Item 2</label>
+                    <div class="task-meta">
+                        <span class="task-description">This is the task description.</span>
+                        <span class="due-date">Today</span>
+                    </div>
+                </div>
                 <button class="dropdown-toggle" onclick="toggleDropdown('task-detail-2')">▼</button>
                 <div class="task-detail" id="task-detail-2">
-                    <p>More details about Task Item 2. Here you can place any additional information needed, such as descriptions, comments, or attachments.</p>
+                    <p>More details about Task Item 2...</p>
                 </div>
             </div>
 
-            <div class="task-item">
-                <input type="checkbox" id="task1">
-                <label for="task1">Task Item 3</label>
-                <button class="dropdown-toggle" onclick="toggleDropdown('task-detail-3')">▼</button>
-                <div class="task-detail" id="task-detail-3">
-                    <p>More details about Task Item 3. Here you can place any additional information needed, such as descriptions, comments, or attachments.</p>
-                </div>
-            </div>
+
             <!-- Repeat for more tasks -->
         </div>
     </div>