fix frontend table max width and content

mc51 · Dec 29, 2020 · 393765a · 393765a
1 parent ad4eda4
commit 393765a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/server/staticfiles/rest/css/bootstrap-tweaks.css b/server/staticfiles/rest/css/bootstrap-tweaks.css
@@ -17,6 +17,25 @@ a single block in the template.
   height: 120px;
 }
 
+.list_clips {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.list_clips #clip_encrypted {
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list_clips #clip_cleartext {
+  overflow: auto;
+  text-overflow: ellipsis;
+}
+
+
+
+
 #generic-content-form textarea {
   font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
   font-size: 80%;

diff --git a/server/templates/rest_framework/list.html b/server/templates/rest_framework/list.html
@@ -25,18 +25,17 @@
     The cleartext is not transmitted and only available to you locally in the browser.
 </p>
 <br>
-<table style="width: 100%;" class="fixed">
-    <tbody>
-        <col width="15%" />
-        <col width="15%" />
-        <col width="35%" />
-        <col width="35%" />
+
+<table class="list_clips">
+    <thead>
         <tr>
-            <td style="font-size: 120%;"><b>Date created</b></td>
-            <td style="font-size: 120%;"><b>Device</b></td>
-            <td style="font-size: 120%;"><b>Clip (Encrypted)</b></td>
-            <td style="font-size: 120%;"><b>Clip (Cleartext)</b></td>
+            <th style="font-size: 120%;width: 20%;"><b>Date created</b></td>
+            <th style="font-size: 120%;width: 10%;"><b>Device</b></td>
+            <th style="font-size: 120%;width: 35%;"><b>Clip (Encrypted)</b></td>
+            <th style="font-size: 120%;width: 35%;"><b>Clip (Cleartext)</b></td>
         </tr>
+    </thead>
+    <tbody>
         {% for clip in clips %}
         <tr>
             <td>{{ clip.created_at }} </td>
@@ -46,8 +45,9 @@
         </tr>
         {% endfor %}
     </tbody>
-</table><br>
+</table>
 
+<br>
 <div class="container-fluid" style="margin-top: 30px">
     <div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
         <form action="javascript:void(0);" onsubmit="decryptClipList(event)">