From ae0c27bca6df8f2b47325bf7767d5232efd065f4 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Thu, 15 Oct 2020 22:57:24 +0200
Subject: [PATCH] Table component further styling

---
 src/App.vue                            |  12 +++
 src/components/Table/Table.vue         | 104 ++++++-------------------
 src/components/TableItem/TableItem.vue |  43 +++++++++-
 3 files changed, 74 insertions(+), 85 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fdab444..f17942f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,3 +73,15 @@ export default {
 	},
 }
 </script>
+
+<style>
+
+.app-navigation-toggle {
+	display: none;
+}
+
+.app-content-vue {
+	padding-left: 5px;
+}
+
+</style>
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 5729cc2..ab1ea14 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -2,25 +2,19 @@
 	<table id="table">
 		<thead>
 			<tr>
-				<th id="headerName" class="hidden column-name">
-					<div id="headerName-container">
-						<a class="name sort columntitle" data-sort="name">
-							<span>Name</span>
-							<span class="sort-indicator" />
-						</a>
-						<span id="selectedActionsList" class="selectedActions">
-							<a href="" class="actions-selected">
-								<span class="icon icon-more" />
-								<span>Actions</span>
-							</a>
-						</span>
-					</div>
+				<th />
+				<th class="nameColumn">
+					Name
 				</th>
-				<th>Options</th>
+				<th />
 			</tr>
 		</thead>
 		<tbody>
-			<TableItem />
+			<TableItem
+				station-name="SRF Virus"
+				station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
+				station-isfav="false"
+				station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
 		</tbody>
 	</table>
 </template>
@@ -37,6 +31,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 table {
 	position: relative;
 	width: 100%;
@@ -44,33 +39,28 @@ table {
 	display: block;
 	flex-direction: column;
 
-	// FIXME
 	thead {
-		position: -webkit-sticky;
 		position: sticky;
-		//@include position('sticky');
-		// header + breadcrumbs
-		//top: $header-height;
-		// under breadcrumbs, over file list
 		z-index: 60;
 		display: block;
 		background-color: var(--color-main-background-translucent);
+
+		th {
+			border-bottom: 1px solid var(--color-border);
+			padding: 15px;
+			height: 50px;
+		}
+
+		th.nameColumn {
+			width: 100%;
+			padding-left: 35px;
+		}
+
 	}
 
 	tbody {
 		display: table;
 		width: 100%;
-
-		tr {
-			height: 51px;
-			background-color: var(--color-background-light);
-
-			tr:hover, tr:focus, tr.mouseOver td {
-				background-color: var(--color-background-hover);
-			}
-
-		}
-
 	}
 
 }
@@ -79,27 +69,6 @@ table th, table th a {
 	color: var(--color-text-maxcontrast);
 }
 
-table th .columntitle {
-	display: block;
-	padding: 15px;
-	height: 50px;
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	vertical-align: middle;
-}
-
-table th .columntitle.name {
-	padding-left: 0;
-	margin-left: 50px;
-}
-
-table th,
-table td {
-	border-bottom: 1px solid var(--color-border);
-	text-align: left;
-	font-weight: normal;
-}
-
 table td {
 	padding: 0 15px;
 	font-style: normal;
@@ -107,33 +76,4 @@ table td {
 	background-repeat: no-repeat;
 }
 
-table th#headerName {
-	position: relative;
-	width: 9999px; /* not really sure why this works better than 100% … table styling */
-	padding: 0;
-}
-
-#headerName-container {
-	position: relative;
-	height: 50px;
-}
-
-table th#headerSize, table td.filesize {
-	text-align: right;
-}
-
-table th#headerDate, table td.date,
-table th.column-last, table td.column-last {
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	position: relative;
-	/* this can not be just width, both need to be set … table styling */
-	min-width: 130px;
-	max-width: 130px;
-}
-
-#app-content-files thead {
-	top: 94px;
-}
-
 </style>
diff --git a/src/components/TableItem/TableItem.vue b/src/components/TableItem/TableItem.vue
index 9fb9ecd..5d4d12f 100644
--- a/src/components/TableItem/TableItem.vue
+++ b/src/components/TableItem/TableItem.vue
@@ -1,11 +1,11 @@
 <template>
 	<tr>
 		<td>
-			<div class="stationIcon" />
+			<div class="stationIcon" :style="style" />
 		</td>
 		<td class="filenameColumn">
 			<span class="innernametext">
-				SRF Virus
+				{{ stationName }}
 			</span>
 		</td>
 		<td class="actionColumn">
@@ -31,16 +31,54 @@ export default {
 		Actions,
 		ActionButton,
 	},
+	props: {
+		stationName: {
+			type: String,
+			required: true,
+		},
+		stationIsfav: {
+			type: Boolean,
+			default: false,
+		},
+		stationUuid: {
+			type: String,
+			required: true,
+		},
+		stationImg: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		style() {
+			return 'background-image: url(' + this.stationImg + ')'
+		},
+	},
 }
 </script>
 
 <style>
+
+tr {
+	height: 51px;
+	background-color: var(--color-background-light);
+
+	tr:hover, tr:focus, tr.mouseOver td {
+		background-color: var(--color-background-hover);
+	}
+
+}
+
 tr td:first-child {
 	margin-left: 20px;
 	width: 32px;
 	padding-right: 0px;
 }
 
+td {
+	border-bottom: 1px solid var(--color-border);
+}
+
 td.filenameColumn .innernametext {
 	color: var(--color-main-text);
 }
@@ -48,7 +86,6 @@ td.filenameColumn .innernametext {
 .stationIcon {
 	width: 32px;
 	height: 32px;
-	background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png');
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: center;