From 8045a3d3cf6180e85c4542e112b42abb4b3351a9 Mon Sep 17 00:00:00 2001
From: Anton Schubert <ischluff@mailbox.org>
Date: Tue, 29 Aug 2017 23:41:19 +0200
Subject: [PATCH] use real table layout, let table rows overflow into ellipsis

---
 src/components/my-table.vue  | 77 +++++++++++++++++++++---------------
 src/views/lists/userlist.vue |  2 +-
 2 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index 9326b0d..a384095 100644
--- a/src/components/my-table.vue
+++ b/src/components/my-table.vue
@@ -1,8 +1,10 @@
 <template>
     <div class="cms_table">
     	<div class="table_header">
-    		<div class="table_row">
-	            <div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
+    		<!-- <div class="table_row"> -->
+	            <div v-for="(col, i) in columns"
+                        :class="['table_cell', {['sortable']: col.orderBy}]"
+                        :key="i">
 	                <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
 	                	{{ col.heading }}
 	                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
@@ -12,13 +14,13 @@
 	                <div v-else>{{ col.heading }}</div>
 	            </div>
                 <div class="table_cell cell_settings" v-if="actions.length"></div>
-            </div>
+            <!-- </div> -->
     	</div>
     	<div class="table_content" is="transition-group" name="list">
             <div class="table_row" v-for="(row, ri) in rows" :key="ri">
                 <div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
-                    <div v-if="col.prop">{{ getProp(row, col.prop) }}</div>
-                    <div v-else-if="col.render">{{ col.render(row) }}</div>
+                    <span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
+                    <span v-else-if="col.render">{{ col.render(row) }}</span>
                 </div>
 
     			<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
@@ -129,35 +131,47 @@
 	# Content Tables
 	--------------------------------------------------------------*/
 	.cms_table{
-		&>.table_header, &>.table_content{margin: 0px -25px;}
-		&>.table_header{
-			.table_row {background:none; font-size:13px; padding:10px 15px;}
-			.icon {font-size:14px;}
-		}
-		.table_row{
-		    position: relative;
-			display: table;
-			width: 100%;
-		    table-layout: fixed;
-		    background: white;
-		    padding: 10px 15px;
+        display: table;
+        width: 100%;
+        overflow: hidden;
+        border-collapse: collapse;
+        table-layout: fixed;
 
-		    &:nth-child(even) {
-		    	background:#f5f3f4;
-		   	}
+		.table_header, .table_content{margin: 0px -25px;}
+		.table_header{
+            display: table-header-group;
 		}
 
-		.table_cell {
-			display: table-cell;
-			vertical-align: middle;
-			padding:0px 10px;
+        .table_content{
+            display: table-row-group;
+        }
 
-			&.sortable{
-				&:hover{
-					cursor: pointer;
-				}
-			}
-		}
+        .table_row{
+            display: table-row;
+            position: relative;
+
+            background: white;
+            &:nth-child(even) {
+                background: #f5f3f4;
+            }
+        }
+
+        .table_cell {
+            display: table-cell;
+            vertical-align: middle;
+            font-size: 13px;
+            padding: 10px 15px;
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &.sortable{
+                &:hover{
+                    cursor: pointer;
+                }
+            }
+        }
 
 		/*.cell_checkbox {width:40px;}
 		.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
@@ -190,9 +204,10 @@
 		/* === Cell settings === */
 		.cell_settings {
             .clearfix();
-            position:relative;
+            position: relative;
             width: 40px;
             text-align: right;
+            overflow: visible;
 
             .actions_btn{
                 z-index: 20;
diff --git a/src/views/lists/userlist.vue b/src/views/lists/userlist.vue
index 73e660c..aa9a88c 100644
--- a/src/views/lists/userlist.vue
+++ b/src/views/lists/userlist.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="Userlist">
         <h1>Userlist</h1>
-        <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" limit="50"></scroll-table>
+        <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
     </div>
 </template>