mobile optimize

cambrian-mllm · Jun 26, 2024 · 6c1f957 · 6c1f957
1 parent f74bcf1
commit 6c1f957
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 128 deletions.
diff --git a/index.html b/index.html
diff --git a/static/css/style.css b/static/css/style.css
@@ -659,9 +659,6 @@ aside th:first-child, aside td:first-child {
   border-right: 1px solid #dee2e6;
 }
 
-figcaption {
-    font-size: 1em;
-}
 
 figcaption .table-caption {
   text-align: center;
@@ -1106,27 +1103,88 @@ h2.text {
   display: none;
 }
 
+
+.figure-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .figure {
+    /* width: 150%; */
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+}
+
+figure {
     width: 150%;
-    margin-left: -25%
+    margin-left: -20%;
 }
 
-#nav-bar-benchmark {
-    padding-bottom: 10px;
-    /* background-color: #d2e3c845; */
-    background-color: #ffc1c145;
+#fig-vision_connector figure {
+    width: 120%;
+    margin-left: -10%;
 }
 
-#nav-bar-system {
-  /* background-color: #b4d5ff32; */
-    background-color: #ac87c52a;
+#fig-dataengine figure {
+    width: 120%;
+    margin-left: -10%;
 }
 
-@media (max-width: 768px) {
+#fig-filter_k figure {
+    width: 110%;
+    margin-left: -7.5%;
+}
+
+#fig-data_ratio figure {
+    width: 120%;
+    margin-left: 0%;
+}
+
+figcaption {
+    font-size: 1.125em;
+    margin-top: 0.25em;
+    text-align: center;
+}
+
+/* Default: show iframe, hide image */
+.responsive-content iframe {
+    display: block;
+    justify-content: center;
+    width: 150%;
+    margin-left: -5%;
+}
+
+.responsive-content img {
+    display: none;
+}
+
+@media (max-width: 720px) {
     .figure {
         width: 100%;
         margin-left: -1%;
     }
+    figure {
+        width: 100% !important;
+        margin-left: 0% !important;
+    }
+    figure > iframe {
+        max-width: 100%;
+    }
+
+    /* For mobile devices: hide iframe, show image */
+    .responsive-content iframe {
+        display: none;
+    }
+
+    .responsive-content img {
+        display: block;
+    }
+
+    .responsive-content .click-hint {
+        display: none;
+    }
 }
 
 #nav-bar > div {
@@ -1289,12 +1347,6 @@ div.takeaway-tags img {
     margin: 1em 0 1em 0;
   }
 
-  .auto-video, .diego-revise-img,
-  #diego-plan-video, #diego-plan-video-cap {
-    width: 100%;
-    margin-left: 0%;
-  }
-
   div.takeaway-tags img {
     height: 22px;
     margin-right: 2px;

diff --git a/static/img/Cumulative_Sum_of_Counts.png b/static/img/Cumulative_Sum_of_Counts.png
diff --git a/static/img/data_mixture_ratio_w_avg_score.png b/static/img/data_mixture_ratio_w_avg_score.png
diff --git a/static/img/mllm_as_interface.png b/static/img/mllm_as_interface.png
diff --git a/static/img/mllm_interface.png b/static/img/mllm_interface.png
diff --git a/static/img/mllm_interface_shared.png b/static/img/mllm_interface_shared.png
diff --git a/static/img/performance_plot.png b/static/img/performance_plot.png
diff --git a/static/img/sysprompt.png b/static/img/sysprompt.png