Upload app.py

app.py

@@ -2,67 +2,75 @@ import streamlit as st
 
 st.set_page_config(layout="wide")
 
-# Custom CSS to improve compactness and mobile usability
 css = """
 <style>
-    /* Criteria header and description compact styling */
-    .criteria-name {
-        font-size: 14px;
-        font-weight: bold;
-        margin-bottom: 0px;
-    }
-    .criteria-description {
-        font-size: 12px;
-        color: #555;
-        margin-top: 0px;
-        margin-bottom: 2px;
-    }
-    .subcriteria {
-        margin-bottom: 4px;
-        padding: 2px 0;
-    }
-    .category-header {
-        margin-top: 10px;
-        margin-bottom: 4px;
-        font-size: 16px;
-        font-weight: bold;
-        border-bottom: 1px solid #ccc;
-        padding-bottom: 2px;
-    }
-    .app-header {
-        text-align: center;
-        margin-bottom: 10px;
-        font-size: 20px;
-    }
-    /* Enlarge the slider thumb for touch screens */
-    div[data-baseweb="slider"] .Thumb {
-        width: 24px !important;
-        height: 24px !important;
-    }
-    /* Remove slider tick marks, tick bar, and min/max texts */
-    div[data-baseweb="slider"] .Tick,
-    div[data-baseweb="slider"] .TickBar,
-    div[data-testid="stSliderTickBarMin"],
-    div[data-testid="stSliderTickBarMax"],
-    div[data-testid="stSliderThumbValue"] {
-        display: none !important;
-    }
-    /* Remove extra margin above the slider widget */
-    .stSlider {
-        margin-top: 0px !important;
-    }
-    /* Make the include checkbox smaller on mobile */
-    @media (max-width: 600px) {
-        .stCheckbox {
-            transform: scale(0.8);
-            transform-origin: left center;
-        }
-    }
+  /* Compact spacing for headings and descriptions */
+  .criteria-name {
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 0px;
+  }
+  .criteria-description {
+      font-size: 12px;
+      color: #555;
+      margin-top: 0px;
+      margin-bottom: 2px;
+  }
+  .subcriteria {
+      margin-bottom: 2px;
+      padding: 1px 0;
+  }
+  .category-header {
+      margin-top: 6px;
+      margin-bottom: 4px;
+      font-size: 16px;
+      font-weight: bold;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 2px;
+  }
+  .app-header {
+      text-align: center;
+      margin-bottom: 6px;
+      font-size: 20px;
+  }
+  /* Enlarge slider thumb for easier touch */
+  div[data-baseweb="slider"] .Thumb {
+      width: 24px !important;
+      height: 24px !important;
+  }
+  /* Hide slider tick marks, tick bar, and min/max texts */
+  div[data-baseweb="slider"] .Tick,
+  div[data-baseweb="slider"] .TickBar,
+  div[data-testid="stSliderTickBarMin"],
+  div[data-testid="stSliderTickBarMax"],
+  div[data-testid="stSliderThumbValue"] {
+      display: none !important;
+  }
+  /* Remove extra margin above slider */
+  .stSlider {
+      margin-top: 0px !important;
+  }
+  /* Prevent header columns from stacking on mobile */
+  @media (max-width: 600px) {
+      .stHorizontalBlock {
+          flex-wrap: nowrap !important;
+      }
+      .stColumn {
+          padding-left: 2px !important;
+          padding-right: 2px !important;
+          min-width: 0;
+      }
+      /* Reduce checkbox size further on mobile */
+      .stCheckbox {
+          transform: scale(0.8);
+          transform-origin: left center;
+      }
+  }
 </style>
 """
 st.markdown(css, unsafe_allow_html=True)
 
-# Define criteria grouped by category with names and descriptions
+# Define criteria with names and descriptions.
 criteria = {
     "Writing": [
         {"name": "Dialogue", "description": "Word choice, realism, subtext, and implications."},
@@ -113,26 +121,23 @@ def calculate_score(ratings):
     if not valid:
         return "Please rate at least one criterion."
     avg = sum(valid) / len(valid)
-    # Quadratic scaling: f(x) = (1/18)*x^2 + (19/18)*x - (1/9)
     scaled_score = (1/18) * (avg ** 2) + (19/18) * avg - (1/9)
     return f"Final Scaled Score: {scaled_score:.2f} / 10"
 
 st.markdown("<h1 class='app-header'>Movie Rating System</h1>", unsafe_allow_html=True)
 ratings = []
 
-# For each category and criterion, display the header with a small checkbox (checked by default)
-# and the description immediately below; then the slider without extra padding.
+# Loop through criteria; for each, display a header row with the criterion name and a small include checkbox,
+# then the description and the slider (with minimal spacing).
 for group, subcriteria in criteria.items():
     st.markdown(f"<div class='category-header'>{group}</div>", unsafe_allow_html=True)
     for idx, crit in enumerate(subcriteria):
         with st.container():
-            # Row for the criterion name with a small checkbox beside it
+            # Header row: name on the left and include checkbox on the right.
             header_cols = st.columns([4, 0.5])
             header_cols[0].markdown(f"<span class='criteria-name'>{crit['name']}</span>", unsafe_allow_html=True)
             include = header_cols[1].checkbox("", value=True, key=f"include_{group}_{idx}")
-            # Description immediately below
             st.markdown(f"<div class='criteria-description'>{crit['description']}</div>", unsafe_allow_html=True)
-            # Float slider without extra padding; disabled if not included.
             rating = st.slider("", 1.0, 7.0, 4.0, step=0.1, key=f"slider_{group}_{idx}", disabled=(not include))
             ratings.append(None if not include else rating)