lesson css try

phase/Student_view/lesson.py

@@ -420,13 +420,16 @@ def _render_lesson():
     """Render the lesson interface"""
     level = st.session_state.get("level", "beginner")
     module_id = st.session_state.get("module_id")
-    
+
     if module_id is None:
         st.session_state.mode = "catalog"
         st.rerun()
 
     mod = next(m for m in MODULES_META[level] if m["id"] == module_id)
 
+    # -------------------------
+    # Styles
+    # -------------------------
     st.markdown("""
     <style>
     .lesson-header {
@@ -506,7 +509,7 @@ def _render_lesson():
         padding: 1.5rem;
         margin-bottom: 1rem;
     }
-    .progress-section h4 {
+    .sidebar-card h4 {
         font-size: 1.1rem;
         font-weight: 600;
         color: #1f2937;
@@ -568,52 +571,48 @@ def _render_lesson():
     
     with col_main:
         t_title, t_text = topics[topic_idx]
+        takeaways_html = ""
+
+        if t_text:
+            takeaways = _extract_takeaways(t_text)
+            if takeaways:
+                takeaways_html = f"""
+                <div class="takeaways-section">
+                    <div class="takeaways-header">
+                        <span style="color: #10b981;">●</span>
+                        <span>Key Takeaways</span>
+                    </div>
+                    {''.join([
+                        f'<div class="takeaway-item"><span class="takeaway-check">✓</span><span>{tk}</span></div>'
+                        for tk in takeaways
+                    ])}
+                </div>
+                """
 
         st.markdown(f"""
-    <div class="lesson-card">
-        <div class="unit-header">
-            <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
-            <div class="read-time">
-                <span>🕐</span>
-                <span>5-8 min read</span>
-            </div>
-        </div>
-        <div class="lesson-content">
-            {t_text.strip() if t_text else "<p>Content coming soon.</p>"}
-        </div>
-    """, unsafe_allow_html=True)
-
-    # Conditionally render takeaways inside the card
-    if t_text:
-        takeaways = _extract_takeaways(t_text)
-        if takeaways:
-            st.markdown(f"""
-            <div class="takeaways-section">
-                <div class="takeaways-header">
-                    <span style="color: #10b981;">●</span>
-                    <span>Key Takeaways</span>
+        <div class="lesson-card">
+            <div class="unit-header">
+                <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
+                <div class="read-time">
+                    <span>🕐</span>
+                    <span>5-8 min read</span>
                 </div>
-                {''.join([
-                    f'<div class="takeaway-item"><span class="takeaway-check">✓</span><span>{tk}</span></div>'
-                    for tk in takeaways
-                ])}
             </div>
-            </div> <!-- Closing lesson-card -->
-            """, unsafe_allow_html=True)
-        else:
-            st.markdown("</div>", unsafe_allow_html=True)  # Close .lesson-card
-    else:
-        st.markdown("</div>", unsafe_allow_html=True)  # Close .lesson-card if no takeaways
-
+            <div class="lesson-content">
+                {t_text.strip() if t_text else "<p>Content coming soon.</p>"}
+            </div>
+            {takeaways_html}
+        </div>
+        """, unsafe_allow_html=True)
 
+        # Navigation Buttons OUTSIDE lesson card
         st.markdown('<div class="nav-buttons">', unsafe_allow_html=True)
-        
         col1, col2, col3 = st.columns([1, 1, 1])
         with col1:
             if st.button("← Previous", disabled=topic_idx == 0, key="prev_btn"):
                 st.session_state.topic_idx -= 1
                 st.rerun()
-        
+
         with col3:
             is_last = topic_idx >= len(topics) - 1
             if is_last:
@@ -627,40 +626,37 @@ def _render_lesson():
                 if st.button("Next Unit →", key="next_btn"):
                     st.session_state.topic_idx += 1
                     st.rerun()
-        
         st.markdown('</div>', unsafe_allow_html=True)
 
+    # -----------------------------
+    # Sidebar with Progress & Units
+    # -----------------------------
     with col_sidebar:
-        # Module Progress Card
+        # Progress Card
         st.markdown("""
-        <div class="sidebar-card" style="min-height: 120px;">
+        <div class="sidebar-card">
             <h4>Module Progress</h4>
         """, unsafe_allow_html=True)
-        
         progress = (topic_idx + 1) / max(1, len(topics))
         st.progress(progress)
         st.markdown(f"<p style='color: #6b7280; font-size: 0.875rem; margin-top: 0.5rem;'>Unit {topic_idx + 1} of {len(topics)}</p>", unsafe_allow_html=True)
-        
         st.markdown("</div>", unsafe_allow_html=True)
 
-        # Module Units Card
+        # Units Card
         st.markdown("""
-        <div class="sidebar-card" style="min-height: 300px;">
+        <div class="sidebar-card">
             <h4>Module Units</h4>
         """, unsafe_allow_html=True)
-        
+
         for i, (tt, _) in enumerate(topics):
-            is_current = i == topic_idx
-            is_completed = i < topic_idx
-            
-            if is_current:
+            if i == topic_idx:
                 st.markdown(f"""
                 <div class="unit-item">
                     <span style="background: #10b981; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">●</span>
                     <span class="unit-active">{tt}</span>
                 </div>
                 """, unsafe_allow_html=True)
-            elif is_completed:
+            elif i < topic_idx:
                 st.markdown(f"""
                 <div class="unit-item">
                     <span style="color: #10b981; font-size: 1.1rem;">✓</span>
@@ -674,10 +670,10 @@ def _render_lesson():
                     <span class="unit-inactive">{tt}</span>
                 </div>
                 """, unsafe_allow_html=True)
-        
+
         st.markdown("</div>", unsafe_allow_html=True)
 
-        # Back to modules button
+        # Back Button
         if st.button("← Back to Modules", key="back_modules"):
             st.session_state.mode = "catalog"
             st.session_state.module_id = None
@@ -685,6 +681,7 @@ def _render_lesson():
             st.rerun()
 
 
+
 def _render_results():
     result = st.session_state.quiz_result or {}
     score = result.get("score", {})