Fixed table widths, reliable truncating

hail-is · Jul 29, 2024 · 2cb6409 · 2cb6409
1 parent 925d6b5
commit 2cb6409
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/batch/batch/front_end/templates/batches.html b/batch/batch/front_end/templates/batches.html
@@ -9,25 +9,24 @@
 <div class='flex-col m-auto w-full space-y-4'>
   <h1 class="text-2xl font-light">Batches</h1>
   {{ table_search("batch-search", base_path ~ "/batches") }}
-  <table class='table-auto w-full' id='batches'>
+  <table class='table-fixed w-full' id='batches'>
     <thead>
-    <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'></th>
-    <th class='h-12 bg-slate-200 font-light text-md text-center rounded-tl rounded-tr md:rounded-tr-none'>
-        ID</th>
-    <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'>Batch Name
-      </th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Billing Project</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Job Statuses</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Created</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Completed</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Duration</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr'>Cost</th>
+      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none' style='width:2rem'></th>
+      <th class='h-12 bg-slate-200 font-light text-md text-center rounded-tl rounded-tr md:rounded-tr-none' style='width:6rem'>
+          ID</th>
+      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'>Batch Name</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Billing Project</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Job Statuses</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Created</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Completed</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Duration</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr' style='width:6rem'>Cost</th>
     </thead>
     <tbody class='border border-collapse border-slate-50'>
       {% for batch in batches %}
       <tr class='border border-collapse hover:bg-slate-100'>
         <td class='table-cell'>
-          <div class='flex-col py-1 block overflow-x-auto space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
+          <div class='flex-col py-1 block space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
             {{ batch_state_indicator(batch) }}
           </div>
         </td>
@@ -37,22 +36,20 @@ <h1 class="text-2xl font-light">Batches</h1>
           </div>
         </td>
         <td class='table-cell'>
-          <div class='flex-col py-1 block overflow-x-auto'>
-            <div class='flex flex-col space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
-              {% if 'attributes' in batch and 'name' in batch['attributes'] %}
-              <div class='text-wrap pr-4'>
-                {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], batch['attributes']['name']) }}
-              </div>
-              {% else %}
-              <div class='text-wrap pr-4 text-zinc-400 italic'>
-                {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], 'no name') }}
-              </div>
-              {% endif %}
+          <div class='space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
+            {% if 'attributes' in batch and 'name' in batch['attributes'] %}
+            <div>
+              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], batch['attributes']['name']) }}
             </div>
+            {% else %}
+            <div class='text-wrap pr-4 text-zinc-400 italic'>
+              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], 'no name') }}
+            </div>
+            {% endif %}
           </div>
         </td>
         <td class='hidden lg:table-cell'>
-          <div class='font-light text-zinc-500'>{{ batch['billing_project'] }}</div>
+          <div class='font-light text-zinc-500 truncating-text'>{{ batch['billing_project'] }}</div>
         </td>
         <td class='hidden lg:table-cell overflow-hidden'>
           <div class='flex items-center font-light'>
@@ -73,7 +70,7 @@ <h1 class="text-2xl font-light">Batches</h1>
           </div>
         </td>
         <td class='hidden lg:table-cell font-light'>
-          {{ batch.get('time_created') or '--' }}
+          {{ batch.get('time_created') or '' }}
         </td>
         <td class='hidden lg:table-cell font-light'>
           {{ batch.get('time_completed') or '--' }}

diff --git a/web_common/input.css b/web_common/input.css
@@ -8,3 +8,11 @@
   left: 50vw;
   transform: translate(-50%, -50%);
 }
+
+.truncating-text {
+    text-wrap:nowrap;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    overflow:hidden;
+    x-overflow: hidden;
+}
diff --git a/web_common/web_common/templates/utils.html b/web_common/web_common/templates/utils.html
@@ -71,9 +71,7 @@
 {% endmacro %}
 
 {% macro truncated_link(href, text) %}
-<a class='block' href="{{ href }}">
-  <div class='hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2' style='text-overflow:ellipsis;max-width:500px;height:20px;overflow:hidden;'>
+<a class='block hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2 truncating-text'  href="{{ href }}">
     {{ text }}
-  </div>
 </a>
 {% endmacro %}