Not showing streamlit on devices with less than 800px screen space

sstepput · Oct 21, 2023 · 78a6741 · 78a6741
1 parent 1764dc9
commit 78a6741
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
     <link rel="stylesheet" href="./static/css/index.css">
+    <link rel="stylesheet" href="./static/css/custom.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script defer src="./static/js/fontawesome.all.min.js"></script>
     <script src="./static/js/bulma-carousel.min.js"></script>
@@ -131,8 +132,15 @@ <h2 class="title is-3">Introduction Video (7 Minutes)</h2>
                 <div class="rows is-centered ">
                     <di v class="row is-full-width">
                         <h2 class="title is-3"><span class="dcliport">Dataset Overview</span></h2>
-                        The following is an example game from our dataset of current 20 games.
-                        <iframe src="https://avalon-nlu.streamlit.app/?embed=true&embed_options=light_theme" height="1000px" style="width:100%;border:none;"></iframe>
+                        <div class="desk">
+                            The following is an example game from our dataset of current 20 games.
+                            <iframe src="https://avalon-nlu.streamlit.app/?embed=true&embed_options=light_theme" height="1000px" style="width:100%;border:none;"></iframe>
+                        </div>
+                        <div class="div-only-mobile">
+                            Our dataset of currently 20 games contains the following information: Chat among the six players, hand-labeled persuasion strategies, hand-labeled deception strategies for all evil players, beliefs over what players though about other players at different
+                            stages of the game, as well as the full game state containing proposed parties and vote outcomes.
+                            <br> <br><b>Note:</b> <i>For non-mobile devices, this website provides an interactive demo of our dataset.</i>
+                        </div>
 
                 </div>
             </div>

diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
@@ -0,0 +1,18 @@
+.desk {}
+
+.div-only-mobile {}
+
+@media screen and (max-width: 1920px) {
+    .div-only-mobile {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .desk {
+        display: none;
+    }
+    .div-only-mobile {
+        display: block;
+    }
+}