sbsmapper / app.py
georad's picture
Update app.py
9b54e61 verified
raw
history blame
4.45 kB
import streamlit as st
# At the top of your existing file with your imports
def add_sticky_header_css():
st.markdown("""
<style>
/* Make Streamlit's toolbar sticky */
[data-testid="stToolbar"] {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
width: 100%;
background-color: white;
}
/* Make Streamlit's status widget sticky */
[data-testid="stStatusWidget"] {
position: fixed;
bottom: 0;
right: 0;
z-index: 1000;
background-color: white;
padding: 5px;
border-top: 1px solid #f0f0f0;
width: 100%;
}
/* Add padding to main content to prevent overlap with fixed header */
.main .block-container {
padding-top: 5rem;
padding-bottom: 3rem;
}
</style>
""", unsafe_allow_html=True)
# Then at the start of your main function or execution flow
add_sticky_header_css()
# Rest of your existing app continues...
# Inspect the header element, go to the "Computed" tab in styles, and find its height.
#HEADER_HEIGHT = "60px" # EXAMPLE: Adjust this (e.g., "56px", "4rem")
#HEADER_SELECTOR = 'header[data-testid="stHeader"]'
# ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
# Target the first direct div child of the stAppViewContainer which often holds the main scrollable content
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMainBlockContainer"]'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"]'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] > div:nth-child(1)'
# Alternative if the above doesn't work or if your content is further nested:
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .main-content-wrapper-class'
# Or, very commonly, Streamlit wraps main content in a div with class "block-container":
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
#MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container
'''
custom_css = f"""
<style>
/* Making the Streamlit header sticky */
{HEADER_SELECTOR} {{
position: -webkit-sticky !important; /* For Safari */
position: sticky !important;
top: 0 !important;
z-index: 9999 !important; /* Very high z-index */
background-color: #90EE90 !important; /* Or your app's header background color */
/* Add a subtle shadow to make it feel more distinct when content scrolls under */
/* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); */
/*.reportview-container .main .block-container{{ */
/* padding-top: 0rem; */
/* }} */
}}
/* Adding padding to the main content area to prevent overlap with the sticky header */
{MAIN_CONTENT_SELECTOR} {{
padding-top: 10px !important; /* {HEADER_HEIGHT} !important; */
/* background-color: yellow !important; */
/* border-style: solid !important; */
/* border-color: red !important; */
}}
/* Optional: If your app is set to wide mode and the header isn't spanning full width */
/* This might be needed if the sticky positioning affects its width calculation. */
/*
#{HEADER_SELECTOR} {{
# width: 100% !important;
#}}
#*/
</style>
"""
'''
# Inject CSS as early as possible in your app
st.markdown(custom_css, unsafe_allow_html=True)
# --- PAGE SETUP ---
type_text_page = st.Page(
page="pages/type_text.py",
title="DEMO (work in progress)",
icon=":material/keyboard:",
default=True,)
# --- Your Streamlit App ---
#st.logo(image="images/menu_book_60dp_75FBFD.png")
st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
st.subheader("Select specific Chapter for quicker results")
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")
# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
##pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run()