Adjust table to fit in different sizes

adsabs · Apr 7, 2021 · caadb40 · caadb40
1 parent 08fa0e7
commit caadb40
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/src/js/widgets/libraries_all/templates/libraries-list-container.html b/src/js/widgets/libraries_all/templates/libraries-list-container.html
@@ -33,15 +33,15 @@
   <table class="libraries-list-container table table-hover table-responsive">
     <thead>
       <tr>
-        <th class="hide-xxs">
+        <th class="hide-xs">
           <!--page num -->
           <span class="sr-only">no data</span>
         </th>
-        <th class="hide-xxs">
+        <th class="hide-xs">
           <!--public/private status-->
           <span class="sr-only">no data</span>
         </th>
-        <th class="hide-xxs">
+        <th class="hide-xs">
           <!-- has collaborators -->
           <span class="sr-only">no data</span>
         </th>

diff --git a/src/js/widgets/libraries_all/templates/library-item.html b/src/js/widgets/libraries_all/templates/library-item.html
@@ -1,7 +1,7 @@
-<td class="hide-xxs">
+<td class="hide-xs">
   {{libNum}}
 </td>
-<td class="hide-xxs">
+<td class="hide-xs">
   {{#if public}}
   <i
     class="fa fa-lg fa-unlock"
@@ -17,7 +17,7 @@
   {{/if}}
 </td>
 
-<td class="hide-xxs">
+<td class="hide-xs">
   {{#compare permission 'owner'}} 
     {{#compare num_users 1 operator=">"}} 
       <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
@@ -30,10 +30,10 @@
 </td>
 
 <td>
-  <div class="hide-xxs">
+  <div class="hide-xs">
     <span class="s-library-title">{{name}}</span>
   </div>
-  <div class="hide-all-but-xxs">
+  <div class="hide-all-but-xs">
     <span class="s-library-title">{{name}}</span><br/>
     {{#if public}}
       <i

diff --git a/src/styles/sass/ads-sass/library.scss b/src/styles/sass/ads-sass/library.scss
@@ -86,9 +86,11 @@
     margin: 0 0 5px 0;
     font-weight: 500;
     font-size: 18px;
+    word-wrap: break-word;
 
-    @media screen and (max-width: $screen-xs) {
+    @media screen and (max-width: $screen-sm) {
       font-size: 1em;
+      max-width: 70px;
     }
   }
 
@@ -98,7 +100,7 @@
     text-transform: lowercase;
     font-size: 18px;
 
-    @media screen and (max-width: $screen-xs) {
+    @media screen and (max-width: $screen-sm) {
       font-size: 1em;
     }
   }
@@ -118,6 +120,10 @@
     border-top: 1px solid #ddd;
     vertical-align: top;
     line-height: 1.428571429;
+
+    @media screen and (max-width: $screen-sm) {
+      padding: 5px;
+    }
   }
 
   a:hover {
@@ -130,7 +136,7 @@
   max-width: 370px;
   word-wrap: break-word;
 
-  @media screen and (max-width: $screen-xs) {
+  @media screen and (max-width: $screen-sm) {
     max-width: 70px;
   }
 }
@@ -254,7 +260,7 @@
   .s-library-description p {
     display: inline;
     font-size: 18px;
-    @media screen and (max-width: $screen-xs) {
+    @media screen and (max-width: $screen-sm) {
       font-size: 1em;
     }
   }

diff --git a/src/styles/sass/ads-sass/utility.scss b/src/styles/sass/ads-sass/utility.scss
@@ -25,12 +25,24 @@
   }
 }
 
+@media screen and (max-width: $screen-sm) {
+  .hide-xs {
+    display: none;
+  }
+}
+
 @media screen and (min-width: $screen-xs) {
   .hide-all-but-xxs {
     display: none;
   }
 }
 
+@media screen and (min-width: $screen-sm) {
+  .hide-all-but-xs {
+    display: none;
+  }
+}
+
 //for columns
 .no-right-padding {
   padding-right: 0;