Update

VLMsAreBlind · Jul 9, 2024 · 5719118 · 5719118
1 parent 5b2bdb5
commit 5719118
Show file tree

Hide file tree

Showing 2 changed files with 286 additions and 20 deletions.
diff --git a/index-preview.html b/index-preview.html
@@ -1089,18 +1089,45 @@
     }
 
 
-    .grid-table th {
-      width: 150px;
-      /* Adjust this value as needed */
-      height: 150px;
-      /* Adjust this value as needed */
+    .grid-table {
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    .grid-table th,
+    .grid-table td {
+      text-align: center;
+      vertical-align: middle;
       padding: 5px;
     }
 
-    .grid-table th img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
+    .grid-table img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    @media screen and (max-width: 768px) {
+      .qualitative-samples-container {
+        overflow-x: auto;
+        max-width: 100%;
+      }
+
+      .qualitative-samples-frame {
+        min-width: 600px;
+      }
+
+      .grid-table {
+        font-size: 0.7em;
+      }
+
+      .grid-table th,
+      .grid-table td {
+        padding: 3px;
+      }
+
+      .grid-table img {
+        max-width: 40px;
+      }
     }
 
     .task-icon {
@@ -1110,6 +1137,113 @@
       vertical-align: middle;
       margin-left: 5px;
     }
+
+
+    @media screen and (max-width: 768px) {
+      .frame {
+        padding: 10px;
+      }
+
+      .result-table {
+        font-size: 0.7em;
+      }
+
+      .result-table th,
+      .result-table td {
+        padding: 3px;
+      }
+
+      .result-table img {
+        max-width: 40px;
+        height: auto;
+      }
+
+      .legend {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .legend-item {
+        margin-bottom: 5px;
+      }
+
+      .model-logo {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    /* Qualitative samples improvements */
+    .qualitative-samples {
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    .qualitative-samples .frame {
+      min-width: 600px;
+    }
+
+    .result-table {
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    .result-table th,
+    .result-table td {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    /* Qualitative samples improvements */
+    .qualitative-samples-container {
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    .qualitative-samples-frame {
+      min-width: 600px;
+    }
+
+    .result-table {
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    .result-table th,
+    .result-table td {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    @media screen and (max-width: 768px) {
+      .result-table {
+        font-size: 0.7em;
+      }
+
+      .result-table th,
+      .result-table td {
+        padding: 3px;
+      }
+
+      .result-table img {
+        max-width: 40px;
+        height: auto;
+      }
+
+      .legend {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .legend-item {
+        margin-bottom: 5px;
+      }
+
+      .model-logo {
+        width: 20px;
+        height: 20px;
+      }
+    }
   </style>
 </head>
 
@@ -1287,7 +1421,6 @@ <h2 class="title is-3">Abstract</h2>
   <!-- TASK 1 Begins -->
   <section id="task1" class="section">
     <div class="container is-max-desktop">
-
       <h2 class="title is-2">Task 1: Counting line intersections <img src="static/images/logo/two_lines.svg"
           alt="Two intersecting lines" class="task-icon"></h2>
 

diff --git a/index.html b/index.html
@@ -1089,18 +1089,45 @@
     }
 
 
-    .grid-table th {
-      width: 150px;
-      /* Adjust this value as needed */
-      height: 150px;
-      /* Adjust this value as needed */
+    .grid-table {
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    .grid-table th,
+    .grid-table td {
+      text-align: center;
+      vertical-align: middle;
       padding: 5px;
     }
 
-    .grid-table th img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
+    .grid-table img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    @media screen and (max-width: 768px) {
+      .qualitative-samples-container {
+        overflow-x: auto;
+        max-width: 100%;
+      }
+
+      .qualitative-samples-frame {
+        min-width: 600px;
+      }
+
+      .grid-table {
+        font-size: 0.7em;
+      }
+
+      .grid-table th,
+      .grid-table td {
+        padding: 3px;
+      }
+
+      .grid-table img {
+        max-width: 40px;
+      }
     }
 
     .task-icon {
@@ -1110,6 +1137,113 @@
       vertical-align: middle;
       margin-left: 5px;
     }
+
+
+    @media screen and (max-width: 768px) {
+      .frame {
+        padding: 10px;
+      }
+
+      .result-table {
+        font-size: 0.7em;
+      }
+
+      .result-table th,
+      .result-table td {
+        padding: 3px;
+      }
+
+      .result-table img {
+        max-width: 40px;
+        height: auto;
+      }
+
+      .legend {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .legend-item {
+        margin-bottom: 5px;
+      }
+
+      .model-logo {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    /* Qualitative samples improvements */
+    .qualitative-samples {
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    .qualitative-samples .frame {
+      min-width: 600px;
+    }
+
+    .result-table {
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    .result-table th,
+    .result-table td {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    /* Qualitative samples improvements */
+    .qualitative-samples-container {
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    .qualitative-samples-frame {
+      min-width: 600px;
+    }
+
+    .result-table {
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    .result-table th,
+    .result-table td {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    @media screen and (max-width: 768px) {
+      .result-table {
+        font-size: 0.7em;
+      }
+
+      .result-table th,
+      .result-table td {
+        padding: 3px;
+      }
+
+      .result-table img {
+        max-width: 40px;
+        height: auto;
+      }
+
+      .legend {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .legend-item {
+        margin-bottom: 5px;
+      }
+
+      .model-logo {
+        width: 20px;
+        height: 20px;
+      }
+    }
   </style>
 </head>
 
@@ -1287,7 +1421,6 @@ <h2 class="title is-3">Abstract</h2>
   <!-- TASK 1 Begins -->
   <section id="task1" class="section">
     <div class="container is-max-desktop">
-
       <h2 class="title is-2">Task 1: Counting line intersections <img src="static/images/logo/two_lines.svg"
           alt="Two intersecting lines" class="task-icon"></h2>