Upload app.py

app.py

@@ -1,20 +1,25 @@
 import streamlit as st
 
-# Custom CSS for a compact design, hiding slider indicators, and other styling.
+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-bottom: 4px;
+        margin-top: 0px;
+        margin-bottom: 2px;
     }
     .subcriteria {
-        margin-bottom: 8px;
-        padding: 5px 0;
+        margin-bottom: 4px;
+        padding: 2px 0;
     }
     .category-header {
         margin-top: 10px;
@@ -29,13 +34,12 @@ css = """
         margin-bottom: 10px;
         font-size: 20px;
     }
-    /* When slider is disabled, change the track and thumb to gray */
-    div[data-baseweb="slider"][aria-disabled="true"] .Track,
-    div[data-baseweb="slider"][aria-disabled="true"] .Thumb {
-        background: #888 !important;
-        border-color: #888 !important;
+    /* Enlarge the slider thumb for touch screens */
+    div[data-baseweb="slider"] .Thumb {
+        width: 24px !important;
+        height: 24px !important;
     }
-    /* Hide slider tick marks, tick bar, and the min/max texts */
+    /* Remove slider tick marks, tick bar, and min/max texts */
     div[data-baseweb="slider"] .Tick,
     div[data-baseweb="slider"] .TickBar,
     div[data-testid="stSliderTickBarMin"],
@@ -43,6 +47,17 @@ css = """
     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;
+        }
+    }
 </style>
 """
 st.markdown(css, unsafe_allow_html=True)
@@ -94,7 +109,6 @@ criteria = {
 }
 
 def calculate_score(ratings):
-    # Filter out None values (criteria excluded via unchecked checkbox)
     valid = [r for r in ratings if r is not None]
     if not valid:
         return "Please rate at least one criterion."
@@ -104,23 +118,22 @@ def calculate_score(ratings):
     return f"Final Scaled Score: {scaled_score:.2f} / 10"
 
 st.markdown("<h1 class='app-header'>Movie Rating System</h1>", unsafe_allow_html=True)
-
 ratings = []
 
-# Loop over each category and its subcriteria
+# 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.
 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):
-        # Create a container for each criterion
         with st.container():
-            # Place the criterion name and a checkbox in one row.
+            # Row for the criterion name with a small checkbox beside it
             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)
-            # Display a float slider (with no min/max indicators)
+            # 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))
-            # If the criterion is unchecked, do not consider its rating
             ratings.append(None if not include else rating)
 
 if st.button("Calculate Score"):