Update app.py

app.py

@@ -1,7 +1,6 @@
 import streamlit as st
 from datasets import load_dataset
 import pandas as pd
-import math
 
 # Fungsi untuk membaca data dari Hugging Face dataset
 @st.cache_resource
@@ -13,43 +12,29 @@ def load_data():
 # Fungsi untuk menampilkan card
 def display_card(article_name, journal_name, article_url):
     return f"""
-    <div style="border:1px solid #ccc; padding: 20px; margin: 15px 0; border-radius: 5px; width: 100%; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); text-align: justify;">
-        <h5 style="margin: 0; font-size: 1.2em;">{article_name}</h5>
-        <p style="margin: 5px 0; text-align: justify;">{journal_name}</p>
+    <div class="card">
+        <h5>{article_name}</h5>
+        <p>{journal_name}</p>
         <a href="{article_url}" target="_blank">
-            <button style="background-color: #4CAF50; color: white; border: none; padding: 5px 9px; margin-top: 5px; border-radius: 5px; font-size: 0.9em;">
-                Kunjungi Artikel
-            </button>
+            <button>Kunjungi Artikel</button>
         </a>
     </div>
     """
 
-# Fungsi untuk menampilkan data dalam 3 kolom atau 1 kolom (mobile)
-def display_data(data, start_index, end_index, is_mobile):
-    if is_mobile:
-        cols = st.columns(3)
-        items_per_column = math.ceil((end_index - start_index) / 3)
-        
-        for col_index in range(3):
-            col_start = start_index + (col_index * items_per_column)
-            col_end = min(col_start + items_per_column, end_index)
-            
-            for i in range(col_start, col_end):
-                article_name = data.iloc[i]['article_name']
-                journal_name = data.iloc[i]['journal_name']
-                article_url = data.iloc[i]['article_url']
-                cols[col_index].markdown(display_card(article_name, journal_name, article_url), unsafe_allow_html=True)
-
-    else:
-        cols = st.columns(3)  # Buat 3 kolom
-        for i in range(start_index, end_index):
+# Fungsi untuk menampilkan data dalam grid responsif
+def display_data(data, start_index, end_index):
+    st.markdown("""
+    <div class="grid-container">
+    """, unsafe_allow_html=True)
+    
+    for i in range(start_index, end_index):
+        if i < len(data):
             article_name = data.iloc[i]['article_name']
             journal_name = data.iloc[i]['journal_name']
             article_url = data.iloc[i]['article_url']
-
-            # Menentukan kolom yang akan digunakan
-            col_index = (i - start_index) % 3
-            cols[col_index].markdown(display_card(article_name, journal_name, article_url), unsafe_allow_html=True)
+            st.markdown(display_card(article_name, journal_name, article_url), unsafe_allow_html=True)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
 
 # Fungsi untuk menambah data yang ditampilkan
 def show_more():
@@ -57,43 +42,65 @@ def show_more():
 
 # Main app
 def main():
-    st.set_page_config(page_title="ID CS Journal Aggregator", layout="wide")  # Set layout lebar
-
-    # JavaScript to get screen width
+    st.set_page_config(page_title="ID CS Journal Aggregator", layout="wide")
+    
+    # CSS untuk tata letak responsif
     st.markdown("""
-        <script>
-        const screenWidth = window.innerWidth;
-        const isMobile = screenWidth <= 768;
-        window.parent.postMessage({
-            type: "streamlit:setComponentValue",
-            value: isMobile
-        }, "*");
-        </script>
+    <style>
+    .grid-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        justify-content: space-between;
+    }
+    .card {
+        flex: 0 1 calc(33.333% - 10px);
+        border: 1px solid #ccc;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+        text-align: justify;
+    }
+    .card h5 {
+        margin: 0;
+        font-size: 1.2em;
+    }
+    .card p {
+        margin: 5px 0;
+    }
+    .card button {
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        padding: 5px 9px;
+        margin-top: 5px;
+        border-radius: 5px;
+        font-size: 0.9em;
+    }
+    @media (max-width: 768px) {
+        .card {
+            flex: 0 1 100%;
+        }
+    }
+    </style>
     """, unsafe_allow_html=True)
 
-    # Get the screen width from JavaScript
-    is_mobile = st.query_params.get("is_mobile", ["false"])[0] == "true"
-    st.write(is_mobile)
-
     # Judul terpusat
     st.markdown("<h1 style='text-align: center;'>Indonesian Computer Science<br>Journal Aggregator</h1>", unsafe_allow_html=True)
-
+    
     # Load data dari Hugging Face dataset
     data = load_data()
-
+    
     # Inisialisasi jumlah data yang ditampilkan
     if 'num_displayed' not in st.session_state:
         st.session_state.num_displayed = 18  # Jumlah card yang ditampilkan awalnya
-
+    
     # Tampilkan data
     end_index = min(st.session_state.num_displayed, len(data))
-    display_data(data, 0, end_index, is_mobile)
-
+    display_data(data, 0, end_index)
+    
     # Tombol "Show More"
-    if st.session_state.num_displayed < len(data):''
-    if is_mobile:
-        st.button("Show More", on_click=show_more, key="show_more", use_container_width=True)
-    else:
+    if st.session_state.num_displayed < len(data):
         col1, col2, col3 = st.columns([1,2,1])
         with col2:
             st.button("Show More", on_click=show_more, key="show_more", use_container_width=True)