From 6ea58f359961883df45e349dae1280e6a567489a Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 13 Mar 2019 21:07:52 -0700
Subject: [PATCH] Reenable bits of library start adopting CSS Grid

---
 css/media-library-window.css                  | 15 ----
 .../MediaLibraryWindow/TracksTable.tsx        | 72 ++++++++++++-------
 js/components/MediaLibraryWindow/index.tsx    |  4 --
 3 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/css/media-library-window.css b/css/media-library-window.css
index befcf080..3d49ac6d 100644
--- a/css/media-library-window.css
+++ b/css/media-library-window.css
@@ -13,17 +13,6 @@
   padding: 0;
 }
 
-#webamp-media-library th {
-  font-weight: normal;
-  text-align: left;
-  padding-left: 5px;
-  white-space: nowrap;
-  height: 14px;
-}
-
-#webamp-media-library td {
-  white-space: nowrap;
-}
 #webamp-media-library ul {
   list-style: none;
 }
@@ -37,10 +26,6 @@
   padding-left: 10px;
 }
 
-#webamp-media-library .webamp-media-library-table {
-  width: 100%;
-  border-spacing: unset;
-}
 #webamp-media-library .webamp-media-library-vertical-divider {
   padding-top: 2px;
   padding-bottom: 2px;
diff --git a/js/components/MediaLibraryWindow/TracksTable.tsx b/js/components/MediaLibraryWindow/TracksTable.tsx
index f125c36a..b6dad0dd 100644
--- a/js/components/MediaLibraryWindow/TracksTable.tsx
+++ b/js/components/MediaLibraryWindow/TracksTable.tsx
@@ -19,7 +19,11 @@ class TracksTable extends React.Component<StateProps, State> {
     super(props);
     this.state = { filter: "" };
   }
+
   render() {
+    const cellStyle: React.CSSProperties = {
+      whiteSpace: "nowrap"
+    };
     return (
       <div
         style={{
@@ -43,43 +47,57 @@ class TracksTable extends React.Component<StateProps, State> {
           style={{ flexGrow: 1, overflowY: "scroll" }}
           className="webamp-media-library-item"
         >
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns:
+                "[artist] 1fr [title] 1fr [album] 1fr [length] 1fr [track number] 1fr [genere] 1fr [year] 1fr [filename] 1fr",
+              gridColumnGap: 1
+            }}
+          >
+            <div style={cellStyle}>Artist</div>
+            <div style={cellStyle}>Title</div>
+            <div style={cellStyle}>Album</div>
+            <div style={cellStyle}>Length</div>
+            <div style={cellStyle}>Track #</div>
+            <div style={cellStyle}>Genere</div>
+            <div style={cellStyle}>Year</div>
+            <div style={cellStyle}>Filename</div>
+
+            {this.props.filterTracks(this.state.filter).map(track => {
+              return (
+                <React.Fragment key={track.id}>
+                  <div style={cellStyle}>{track.artist}</div>
+                  <div style={cellStyle}>{track.title}</div>
+                  <div style={cellStyle}>{track.album}</div>
+                  <div style={cellStyle}>
+                    {Utils.getTimeStr(track.duration)}
+                  </div>
+                  <div style={cellStyle}>1</div>
+                  <div style={cellStyle}>Primus</div>
+                  <div style={cellStyle}>2001</div>
+                  <div style={cellStyle}>
+                    {track.url == null
+                      ? track.defaultName
+                      : FileUtils.filenameFromUrl(track.url)}
+                  </div>
+                </React.Fragment>
+              );
+            })}
+          </div>
+          {/*
           <table
             className="webamp-media-library-table"
             style={{ overflow: "scroll" }}
           >
             <thead>
               <tr>
-                <th>Artist</th>
-                <th>Title</th>
-                <th>Album</th>
-                <th>Length</th>
-                <th>Track #</th>
-                <th>Genere</th>
-                <th>Year</th>
-                <th>Filename</th>
               </tr>
             </thead>
             <tbody>
-              {this.props.filterTracks(this.state.filter).map(track => {
-                return (
-                  <tr key={track.id}>
-                    <td>{track.artist}</td>
-                    <td>{track.title}</td>
-                    <td>{track.album}</td>
-                    <td>{Utils.getTimeStr(track.duration)}</td>
-                    <td>1</td>
-                    <td>Primus</td>
-                    <td>2001</td>
-                    <td>
-                      {track.url == null
-                        ? track.defaultName
-                        : FileUtils.filenameFromUrl(track.url)}
-                    </td>
-                  </tr>
-                );
-              })}
+             
             </tbody>
-          </table>
+          </table> */}
         </div>
         <div style={{ marginTop: 2 }}>
           <button>Play</button>
diff --git a/js/components/MediaLibraryWindow/index.tsx b/js/components/MediaLibraryWindow/index.tsx
index 0f7325c5..ea2aab47 100644
--- a/js/components/MediaLibraryWindow/index.tsx
+++ b/js/components/MediaLibraryWindow/index.tsx
@@ -87,11 +87,9 @@ class MediaLibraryWindow extends React.Component<Props, State> {
               overflow: "hidden"
             }}
           >
-            {/*
             <div style={{ width: this.state.sidebarWidth }}>
               <Sidebar />
             </div>
-          */}
             <div
               className="webamp-media-library-vertical-divider"
               onMouseDown={this._handleSidebarMouseDown}
@@ -108,7 +106,6 @@ class MediaLibraryWindow extends React.Component<Props, State> {
                 overflow: "hidden"
               }}
             >
-              {/*
               <div
                 style={{
                   display: "flex",
@@ -128,7 +125,6 @@ class MediaLibraryWindow extends React.Component<Props, State> {
                 </div>
                 <AlbumsTable />
               </div>
-              */}
               <div
                 className="webamp-media-library-horizontal-divider"
                 onMouseDown={this._handlePlaylistResizeMouseDown}