Update app.py

app.py

@@ -18,54 +18,50 @@ st.set_page_config(
     layout="wide"
 )
 
-# Apply custom CSS for a backlog-style board
+# Apply custom CSS for a horizontal board layout
 st.markdown("""
 <style>
     /* Main theme colors */
     :root {
         --primary-color: #0A2647;
         --secondary-color: #144272;
+        --highlight-color: #2C74B3;
+        --header-bg: #0f2942;
+        --card-bg: #ffffff;
+        --border-color: #e0e0e0;
         --text-color: #333;
         --todo-color: #03A9F4;
         --progress-color: #FF5722;
         --done-color: #4CAF50;
-        --border-color: #e0e0e0;
         --backlog-color: #8BC34A;
-        --card-bg: #ffffff;
     }
     
     /* Header styling */
     .main-header {
-        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+        background-color: var(--header-bg);
         color: white;
-        padding: 1rem 2rem;
-        border-radius: 5px;
-        margin-bottom: 1.5rem;
+        padding: 1rem;
         text-align: center;
+        border-radius: 3px;
+        margin-bottom: 20px;
     }
     
     .main-header h1 {
         margin: 0;
-        font-size: 2.2rem;
+        font-size: 1.8rem;
     }
     
-    .company-name {
-        font-weight: 300;
-        font-size: 1.2rem;
-        opacity: 0.9;
-        letter-spacing: 1px;
-    }
-    
-    /* Task Cards */
-    .task-grid {
+    /* Task Grid Layout */
+    .task-container {
         display: flex;
         flex-wrap: wrap;
-        gap: 15px;
-        padding-bottom: 20px;
+        gap: 16px;
+        align-items: flex-start;
     }
     
     .task-card {
-        flex: 0 0 180px;
+        width: 180px;
+        height: 150px;
         border: 1px solid var(--border-color);
         border-radius: 4px;
         overflow: hidden;
@@ -73,13 +69,6 @@ st.markdown("""
         display: flex;
         flex-direction: column;
         background-color: var(--card-bg);
-        height: 150px;
-        transition: transform 0.2s, box-shadow 0.2s;
-    }
-    
-    .task-card:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     }
     
     .card-header {
@@ -131,6 +120,28 @@ st.markdown("""
         margin-bottom: 10px;
     }
     
+    /* Status update section */
+    .status-update-section {
+        margin-top: 30px;
+        border-top: 1px solid #eee;
+        padding-top: 20px;
+    }
+    
+    .status-update-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+    
+    .status-label {
+        width: 200px;
+        font-weight: 500;
+    }
+    
+    .status-select {
+        flex-grow: 1;
+    }
+    
     /* Form styling */
     .sidebar .block-container {
         padding-top: 2rem;
@@ -156,18 +167,17 @@ st.markdown("""
         background-color: var(--primary-color);
     }
     
-    /* Hide storage path message */
-    .storage-message {
-        display: none;
+    /* Sidebar styling */
+    .sidebar-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+        color: var(--primary-color);
     }
     
-    /* Status selector */
-    .status-select {
-        width: 100%;
-        padding: 5px;
-        border-radius: 5px;
-        border: 1px solid #ddd;
-        margin-top: 5px;
+    /* Hide duplicated elements */
+    .status-hidden {
+        display: none;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -304,7 +314,7 @@ def generate_task_id():
     
     # Extract existing IDs and find the maximum
     try:
-        existing_ids = [int(task_id.replace('#', '')) for task_id in st.session_state.tasks['ID'].tolist() if task_id.startswith('#')]
+        existing_ids = [int(task_id.replace('#', '')) for task_id in st.session_state.tasks['ID'].tolist() if isinstance(task_id, str) and task_id.startswith('#')]
         if existing_ids:
             return f"#{max(existing_ids) + 1}"
         else:
@@ -320,17 +330,12 @@ if 'tasks' not in st.session_state:
 # Load assignees directly from the file
 assignee_list = load_assignees()
 
-# Custom header
-st.markdown("""
-<div class="main-header">
-    <span class="company-name">BROADCAST SOLUTIONS</span>
-    <h1>Task Board</h1>
-</div>
-""", unsafe_allow_html=True)
+# Main header
+st.markdown('<div class="main-header"><h1>Task Board</h1></div>', unsafe_allow_html=True)
 
 # Sidebar for new tasks
 with st.sidebar:
-    st.header("➕ Add New Task")
+    st.markdown('<div class="sidebar-title">➕ Add New Task</div>', unsafe_allow_html=True)
     title = st.text_input("Task Title")
     description = st.text_area("Description")
     assignee = st.selectbox("Assignee", assignee_list)
@@ -358,14 +363,14 @@ with st.sidebar:
         else:
             st.warning("Please enter a task title")
 
-# Display tasks in a backlog-style grid
+# Display tasks in a horizontal grid layout
 if st.session_state.tasks.empty:
     st.info("No tasks yet. Add your first task using the sidebar.")
 else:
-    # Start the grid container
-    st.markdown('<div class="task-grid">', unsafe_allow_html=True)
+    # Start the flex container for task cards
+    st.markdown('<div class="task-container">', unsafe_allow_html=True)
     
-    # Render each task as a backlog item card
+    # Render each task as a card
     for idx, task in st.session_state.tasks.iterrows():
         status_class = STATUS_COLORS.get(task['Status'], "backlog")
         task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
@@ -384,28 +389,35 @@ else:
         
         # Render the card
         st.markdown(card_html, unsafe_allow_html=True)
+    
+    # Close the container
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Add status update section
+    st.markdown('<div class="status-update-section"><h3>Update Task Status</h3></div>', unsafe_allow_html=True)
+    
+    # Create two columns for the status update controls
+    status_cols = st.columns(2)
+    
+    # Display status update controls in two columns
+    col_index = 0
+    for idx, task in st.session_state.tasks.iterrows():
+        task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
         
-        # Add a hidden status update below each card
-        # Create an invisible element for status updates
-        with st.container():
-            st.markdown(f"""
-            <div style="display: none;">
-                <p>Update {task_id}</p>
-            </div>
-            """, unsafe_allow_html=True)
-            
+        with status_cols[col_index % 2]:
+            st.markdown(f"<div class='status-label'>{task_id}: {task['Title'][:20]}...</div>", unsafe_allow_html=True)
             new_status = st.selectbox(
-                f"Update {task_id}",
+                f"Status for {task_id}",
                 ["Backlog", "To Do", "In Progress", "Done"],
                 index=["Backlog", "To Do", "In Progress", "Done"].index(task['Status']) if task['Status'] in ["Backlog", "To Do", "In Progress", "Done"] else 0,
                 key=f"status_{idx}",
-                label_visibility="hidden"
+                label_visibility="collapsed"
             )
             
             if new_status != task['Status']:
                 st.session_state.tasks.at[idx, 'Status'] = new_status
                 save_tasks()  # Save after updating
                 st.rerun()
-    
-    # Close the grid container
-    st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Switch to next column
+        col_index += 1