💄 [#1436] Added scroll styles for tables on desktop and iOS

maykinmedia · Jun 5, 2023 · 2c143fc · 2c143fc
1 parent 26c9be7
commit 2c143fc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 40 deletions.
diff --git a/src/open_inwoner/scss/components/Table/Table.scss b/src/open_inwoner/scss/components/Table/Table.scss
@@ -1,9 +1,16 @@
 .table {
+  display: block;
+  box-sizing: border-box;
+  white-space: nowrap;
   margin-top: var(--row-height);
   width: 100%;
   font-family: var(--font-family-body);
   border-collapse: collapse;
   border-spacing: 0;
+  overflow-x: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-secondary) var(--color-gray-lightest);
+  -webkit-overflow-scrolling: touch;
 
   &--space-medium {
     margin-top: var(--spacing-medium);
@@ -147,4 +154,25 @@
       font-size: var(--font-size-body);
     }
   }
+
+  @media (min-width: 768px) {
+    display: table;
+  }
+}
+
+/// Scrollbar style for tables on mobile
+
+.table::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.table::-webkit-scrollbar-track {
+  background: var(--color-gray-lightest);
+}
+
+.table::-webkit-scrollbar-thumb {
+  background-color: var(--color-secondary);
+  border-radius: 6px;
+  border: 2px solid var(--color-secondary);
 }
diff --git a/src/open_inwoner/templates/pages/cases/submissions.html b/src/open_inwoner/templates/pages/cases/submissions.html
@@ -35,46 +35,6 @@ <h2 class="h2" id="submissions">{{ page_title }} ({{ submissions|length }})</h2>
                 {% endfor %}
             </tbody>
         </table>
-
-        <hr>
-
-        <div class="tabled tabled--flexible cases__open-overview">
-           <div class="tabled__row">
-              <div class="tabled__item tabled__item--bold">Formulier</div>
-              <div class="tabled__item">Laatste wijziging</div>
-               <div class="tabled__item">?</div>
-              <div class="tabled__item tabled__item--force-right">
-                 <a href="/mijn-profiel/onderwerpen/" class="link link--icon link--icon-position-after  link--primary" aria-label="Aanpassen" title="Aanpassen">
-                 <span class="link__text">Einde geldigheid</span>
-                 <span aria-hidden="true" class="material-icons ">arrow_forward</span>
-                 </a>
-              </div>
-           </div>
-          <div class="tabled__row">
-              <div class="tabled__item tabled__item--bold">Formulier</div>
-              <div class="tabled__item">Laatste wijziging</div>
-               <div class="tabled__item">?</div>
-              <div class="tabled__item tabled__item--force-right">
-                 <a href="/mijn-profiel/onderwerpen/" class="link link--icon link--icon-position-after  link--primary" aria-label="Aanpassen" title="Aanpassen">
-                 <span class="link__text">Einde geldigheid</span>
-                 <span aria-hidden="true" class="material-icons ">arrow_forward</span>
-                 </a>
-              </div>
-           </div>
-           <div class="tabled__row">
-              <div class="tabled__item tabled__item--bold">Formulier</div>
-              <div class="tabled__item">Laatste wijziging</div>
-               <div class="tabled__item">?</div>
-              <div class="tabled__item tabled__item--force-right">
-                 <a href="/mijn-profiel/onderwerpen/" class="link link--icon link--icon-position-after  link--primary" aria-label="Aanpassen" title="Aanpassen">
-                 <span class="link__text">Einde geldigheid</span>
-                 <span aria-hidden="true" class="material-icons ">arrow_forward</span>
-                 </a>
-              </div>
-           </div>
-
-        </div>
-{#        //end of table#}
     </div>
 
 {% endblock content %}