Change to use custom html and css grid

src/pages/80_Maximum_Roster_Strategy.py

@@ -1,8 +1,10 @@
 import pandas as pd
 import streamlit as st
+import streamlit.components.v1 as components
+
 
 from config import DEFAULT_ICON
-from shared_page import common_page_config
+from shared_page import common_page_config, get_local_style
 from maximum_roster_strategy import data_loader
 
 
@@ -27,20 +29,36 @@ def load_data():
     return data_loader.get_google_sheet_data()
 
 
-def get_player_container(player_series: pd.Series):
-    with st.expander(label=player_series["Formatted"]):
-        st.write(player_series["Hold Condition"])
-        if isinstance(notes := player_series["Article Notes"], str):
-            st.write(notes)
+def get_player_grid_div(player_series: pd.Series) -> str:
+    player_notes = player_series["Hold Condition"]
+    if isinstance(player_weekly_note := player_series["Article Notes"], str):
+        player_notes += "<br><br>" + player_weekly_note
+    return f"""
+<details class="mrs-grid-player content">
+  <summary>
+    {player_series["Formatted"]}
+  </summary>
+  <p>
+    {player_notes}
+  </p>
+</details>
+"""
+
+
+def get_time_slot_div(time_slot_list: list[str]) -> str:
+    code_str = ""
+    for time_slot_idx, time_slot in enumerate(time_slot_list):
+        code_str += f"""<div class="timeslot{time_slot_idx + 1} timeslot">{time_slot}</div>\n"""
+    return code_str
+
 
+def get_tier_div(tier_str: str | int, tier_num: str | int) -> str:
+    return f"""<div class="tier{tier_num} tier">Tier {tier_str}</div>"""
 
-# https://github.com/alanjones2/alan-jones-article-code/blob/master/stgrid/app/gridapp.py
-def make_grid(cols, rows):
-    grid = [0] * cols
-    for i in range(cols):
-        with st.container():
-            grid[i] = st.columns(rows[i])
-    return grid
+
+def get_player_container(df_players: pd.DataFrame, slot_number: int | str) -> str:
+    player_code_str = "\n".join(df_players.apply(get_player_grid_div, axis=1).tolist())
+    return f"""<div class="playerslot{slot_number} playerslot">{player_code_str}</div>"""
 
 
 def get_position_breakdown(df: pd.DataFrame, position_abbr: str, position_full_str: str):
@@ -48,21 +66,29 @@ def get_position_breakdown(df: pd.DataFrame, position_abbr: str, position_full_s
         st.header(position_full_str)
         df_pos = df[df["Position"] == position_abbr]
         time_slots = df.sort_values("WeekTimeSlotIndex")["TimeSlotName"].unique().tolist()
+
+        grid_code_str = ""
+        grid_code_str += get_time_slot_div(time_slots)
+
         tier_list = list(range(MIN_TIER, MAX_TIER + 1))
-        num_time_slots = len(time_slots)
-        column_len_list = [num_time_slots] + [1, num_time_slots] * len(tier_list)
-        tier_time_grid = make_grid(len(tier_list) * 2 + 1, column_len_list)
-
-        for time_idx, time_slot in enumerate(time_slots):
-            with tier_time_grid[0][time_idx]:
-                st.markdown(f"<h3 style='text-align: center;'>{time_slot}</h3>", unsafe_allow_html=True)
-            for tier_idx, tier in enumerate(tier_list):
-                if time_idx == 0:
-                    with tier_time_grid[(tier_idx + 1) * 2 - 1][0]:
-                        st.markdown(f"<h4 style='text-align: center;'>Tier {tier}</h4>", unsafe_allow_html=True)
+        slot_number = 0
+        for tier_idx, tier in enumerate(tier_list):
+            grid_code_str += get_tier_div(tier, tier_idx + 1)
+            for time_slot in time_slots:
                 df_tier_slot = df_pos[(df_pos["TimeSlotName"] == time_slot) & (df_pos["Tier"] == tier)]
-                with tier_time_grid[(tier_idx + 1) * 2][time_idx]:
-                    df_tier_slot.apply(get_player_container, axis=1)
+                slot_number += 1
+                grid_code_str += get_player_container(df_tier_slot, slot_number)
+
+        components.html(
+            f"""
+{get_local_style()}
+<div class="grid-container-{len(time_slots)}">
+    {grid_code_str}
+</div>
+""",
+            height=1000,
+            scrolling=True,
+        )
 
 
 def get_page():

src/shared_page.py

@@ -5,12 +5,18 @@ from page_selector import remove_seasonal_pages
 from login_component import get_authorization_button
 
 
-def local_css(file_name):
-    with open(file_name) as f:
-        st.markdown("<style>{}</style>".format(f.read()), unsafe_allow_html=True)
+def get_local_style():
+    code_str = ""
+    with open(os.path.join(os.path.dirname(__file__), "style.css")) as f:
+        code_str = "<style>{}</style>".format(f.read())
+    return code_str
+
+
+def local_css():
+    return st.markdown(get_local_style(), unsafe_allow_html=True)
 
 
 def common_page_config():
+    local_css()
     get_authorization_button()
     remove_seasonal_pages()
-    local_css(os.path.join(os.path.dirname(__file__), "style.css"))

src/style.css

@@ -11,4 +11,90 @@ div[data-testid="stHorizontalBlock"] {
 
 div[data-testid="stVerticalBlock"] {
   gap: 0;
-}
+}
+
+
+.mrs-grid-player {
+  font-size: x-small;
+  margin-bottom: 5px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.tier {
+  text-align: center;
+}
+
+.timeslot {
+  text-align: center;
+}
+
+.tier1 {
+  border: 2px solid blue;
+}
+.tier2 {
+  border: 2px solid gold;
+}
+
+.tier3 {
+  border: 2px solid silver;
+}
+
+.tier4 {
+  border: 2px solid brown;
+}
+
+
+.playerslot {
+  border-left: 1px solid white;
+  border-right: 1px solid white;
+}
+
+.grid-container-7 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(9, auto);
+  grid-column-gap: 0px;
+  grid-row-gap: 10px;
+  color: white;
+  }
+  
+  .timeslot1 { grid-area: 1 / 1 / 2 / 2; }
+  .timeslot2 { grid-area: 1 / 2 / 2 / 3; }
+  .timeslot3 { grid-area: 1 / 3 / 2 / 4; }
+  .timeslot4 { grid-area: 1 / 4 / 2 / 5; }
+  .timeslot5 { grid-area: 1 / 5 / 2 / 6; }
+  .timeslot6 { grid-area: 1 / 6 / 2 / 7; }
+  .timeslot7 { grid-area: 1 / 7 / 2 / 8; }
+  .tier1 { grid-area: 2 / 1 / 3 / 8; }
+  .playerslot1 { grid-area: 3 / 1 / 4 / 2; }
+  .playerslot2 { grid-area: 3 / 2 / 4 / 3; }
+  .playerslot3 { grid-area: 3 / 3 / 4 / 4; }
+  .playerslot4 { grid-area: 3 / 4 / 4 / 5; }
+  .playerslot5 { grid-area: 3 / 5 / 4 / 6; }
+  .playerslot6 { grid-area: 3 / 6 / 4 / 7; }
+  .playerslot7 { grid-area: 3 / 7 / 4 / 8; }
+  .tier2 { grid-area: 4 / 1 / 5 / 8; }
+  .playerslot8 { grid-area: 5 / 1 / 6 / 2; }
+  .playerslot9 { grid-area: 5 / 2 / 6 / 3; }
+  .playerslot10 { grid-area: 5 / 3 / 6 / 4; }
+  .playerslot11 { grid-area: 5 / 4 / 6 / 5; }
+  .playerslot12 { grid-area: 5 / 5 / 6 / 6; }
+  .playerslot13 { grid-area: 5 / 6 / 6 / 7; }
+  .playerslot14 { grid-area: 5 / 7 / 6 / 8; }
+  .tier3 { grid-area: 6 / 1 / 7 / 8; }
+  .playerslot15 { grid-area: 7 / 1 / 8 / 2; }
+  .playerslot16 { grid-area: 7 / 2 / 8 / 3; }
+  .playerslot17 { grid-area: 7 / 3 / 8 / 4; }
+  .playerslot18 { grid-area: 7 / 4 / 8 / 5; }
+  .playerslot19 { grid-area: 7 / 5 / 8 / 6; }
+  .playerslot20 { grid-area: 7 / 6 / 8 / 7; }
+  .playerslot21 { grid-area: 7 / 7 / 8 / 8; }
+  .tier4 { grid-area: 8 / 1 / 9 / 8; }
+  .playerslot22 { grid-area: 9 / 1 / 10 / 2; }
+  .playerslot23 { grid-area: 9 / 2 / 10 / 3; }
+  .playerslot24 { grid-area: 9 / 3 / 10 / 4; }
+  .playerslot25 { grid-area: 9 / 4 / 10 / 5; }
+  .playerslot26 { grid-area: 9 / 5 / 10 / 6; }
+  .playerslot27 { grid-area: 9 / 6 / 10 / 7; }
+  .playerslot28 { grid-area: 9 / 7 / 10 / 8; }