table styling updates

zack · Dec 13, 2019 · f024016 · f024016
1 parent 45f33e0
commit f024016
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 50 deletions.
diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
@@ -125,18 +125,20 @@ ul {
 table {
   border-collapse: collapse;
   border: 1px solid black;
-  table-layout: fixed;
 
-  thead, .header-row {
-    border: 1px solid black;
-    background-color: rgba(black, 0.09);
-    font-weight: bold;
+  &.users {
+    max-width: 800px;
   }
 
   &.events {
-    width: 900px;
+    max-width: 1600px;
   }
 
+  thead, .header-row {
+    border: 1px solid black;
+    background-color: rgba(black, 0.09);
+    font-weight: bold;
+  }
 
   tr {
     border: 1px solid black;
@@ -156,10 +158,11 @@ table {
 
   td, th {
     border: 1px solid black;
-    overflow: hidden;
-    padding: 8px 4px;
-    text-overflow: ellipsis;
+    padding: 0px 10px;
     white-space: nowrap;
+    width: 1px;
+    height: 35px;
+    line-height: 35px;
 
     &.center {
       text-align: center;
@@ -169,30 +172,37 @@ table {
       position: relative;
     }
 
-    &.date{
-      text-align: center;
-      width: 100px;
-    }
-
-    &.time {
-      text-align: center;
-      width: 82px;
-    }
-
-    &.list {
-      text-align: center;
-      width: 250px;
-    }
-
-    &.description {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 525px;
-    }
-
-    &.attendance {
-      text-align: center;
-      width: 60px;
+    &.wide {
+      width: 100%;
+      span.wide-outer-span{
+        position: relative;
+        max-width: 100%;
+        padding: 0 !important;
+        display: -webkit-flex;
+        display: -moz-flex;
+        display: flex;
+        vertical-align: text-bottom !important;
+      }
+      span.wide-inner-span {
+        position: absolute;
+        white-space: nowrap;
+        overflow-y: visible;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        -ms-text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        max-width: 100%;
+        min-width: 0;
+        width:100%;
+        top: 0;
+        left: 0;
+      }
+      span.wide-outer-span:after, span.wide-inner-span:after {
+        content: '-';
+        display: inline;
+        visibility: hidden;
+        width: 0;
+      }
     }
   }
 

diff --git a/app/assets/stylesheets/user.scss b/app/assets/stylesheets/user.scss
diff --git a/app/views/events/_event_table.html.haml b/app/views/events/_event_table.html.haml
@@ -1,34 +1,36 @@
 %table.events
   %thead
     %tr
-      %th.date Date
-      %th.time Time
-      %th.list List
-      %th.description Description
-      %th.attendance RSVP
-      %th.admin Show
+      %th Date
+      %th Time
+      %th List
+      %th Description
+      %th RSVP
+      %th Show
       - if editable
         %th.edit Edit
-      %th.clone Clone
+      %th Clone
 
   %tbody
     - events.each do |e|
       %tr
-        %td.date
+        %td
           = e.datetime.strftime('%Y-%m-%d')
-        %td.time
+        %td
           = e.datetime.strftime('%l:%M %p')
-        %td.list
+        %td
           = SubscriptionList.find(e.subscription_list_id).name
-        %td.description
-          = e.description
-        %td.attendance
+        %td.wide
+          %span.wide-outer-span
+            %span.wide-inner-span
+              = e.description
+        %td.center
           %span{"title" => "Confirmed: #{e.attendees}, Maybe: #{e.maybes}"}
             #{e.attendees}(#{e.maybes})#{e.capacity && ("/#{ e.capacity}")}
-        %td.admin
+        %td.center
           = link_to 'Show', { controller: 'events', action: 'admin', uuid: e.uuid }
         - if editable
           %td.edit
             = link_to 'Edit', { controller: 'events', action: 'edit', uuid: e.uuid }
-        %td.clone
+        %td.center
           = link_to 'Clone', { controller: 'events', action: 'clone', uuid: e.uuid }, method: :post
diff --git a/app/views/users/index.html.haml b/app/views/users/index.html.haml
@@ -2,7 +2,7 @@
 
 %h2 All Users
 
-%table
+%table.users
   %thead
     %tr
       %th Name
@@ -13,7 +13,7 @@
   %tbody
     - @users.each do |user|
       %tr{class: !user.admin_confirmed ? 'not-admin' : !user.email_confirmed ? 'not-email' : ''}
-        %td.name
+        %td
           = link_to user.name, { controller: 'users', action: 'admin', uuid: user.uuid }
         %td
           = user.email_address