Spaces:
Sleeping
Sleeping
File size: 2,473 Bytes
e78b10d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
# utils/mobile_responsive.py
"""Utilities for mobile responsiveness."""
import streamlit as st
def responsive_columns(sizes: list, mobile_sizes: list = None):
"""
Creates responsive columns for Streamlit.
On desktop, uses 'sizes'. On mobile, stacks columns or uses 'mobile_sizes'.
"""
if mobile_sizes is None:
mobile_sizes = [1] * len(sizes) # Default to stacking if not specified
# Check for mobile client (a bit hacky, but works for most cases)
# Streamlit doesn't provide a direct way to detect mobile, so we rely on screen width
# This might not be perfectly accurate but is generally effective.
# We'll use JavaScript to pass screen width to Streamlit later if needed for more robust detection.
# For now, let's assume if the app is run on a narrow screen, it's mobile.
# This is often handled by CSS, but for column layout, Python-side adjustment can be useful.
# A more robust solution would involve custom component for screen width detection.
# Placeholder for actual mobile detection logic if implemented via JS/custom component
# For now, we'll let CSS handle most of the responsiveness, and this function
# will primarily provide a way to define column ratios.
# For demonstration, we'll just return st.columns with the given sizes.
# The actual mobile stacking will be handled by CSS in style.css.
return st.columns(sizes)
def responsive_css():
"""Injects CSS for mobile responsiveness."""
# This CSS is also defined in assets/style.css, but including it here
# ensures it's applied, especially for column stacking.
# In a real app, you'd load this from the assets file.
css = """
<style>
/* Mobile-first responsive design */
@media (max-width: 768px) {
/* Stack columns on mobile */
.row-widget.stHorizontal {
flex-direction: column !important;
}
.row-widget.stHorizontal > div {
width: 100% !important;
margin-bottom: 1rem;
}
/* Full-width buttons on mobile */
.stButton > button {
width: 100% !important;
min-height: 50px;
font-size: 16px !important;
}
/* Responsive cards */
.card {
padding: 15px !important;
margin: 10px 0 !important;
}
}
</style>
"""
return css
|