Mobile Formatting and remove UIDs from tables

3 files changed, 41 insertions, 17 deletions

diff --git a/css/main.css b/css/main.css
index b3f098e..5e924e1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -23,8 +23,10 @@ small {
     color: rgb(190,190,190);
 }
 
-nav h3 small.text-muted {
+nav small {
     color: rgb(190,190,190);
+    font-size: 0.7em;
+    font-variant: small-caps;
 }
 
 a {
@@ -300,4 +302,39 @@ table, td, tr, th {
 #subtitleTable tbody tr.success-transition {
     color: #fff;
     animation: successFadeOut 1.5s ease-out;
+}
+
+/*==========================
+        MEDIA QUERIES
+==========================*/
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    nav small {
+        display: none;
+    }
+
+    .navbar .container {
+        justify-content: center;
+    }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f6eac8c..25221c5 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark static-top">
         <div class="container">
-            <a class="navbar-brand" href="javascript:window.location.reload()"><h3>PASTA<small class="text-muted ml-2">Plex Audio and Subtitle Track Automation</small></h3></a>
+            <a class="navbar-brand" href="javascript:window.location.reload()"><h2>PASTA<small class="ml-2">Plex Audio and Subtitle Track Automation</small></h2></a>
         </div>
     </nav>
 
@@ -52,8 +52,8 @@
 
     <!-- Page Content -->
     <div class="container">
-        <div class="card border-0 shadow my-5">
-            <div class="card-body p-5">
+        <div class="card border-0 shadow my-3 my-md-5">
+            <div class="card-body p-3 p-md-5">
                 
                 <!-- TABS -->
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
@@ -109,7 +109,6 @@
                                     <table id="libraryTable" class="table table-hover mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Name</th>
                                             </tr>
                                         </thead>
@@ -168,7 +167,6 @@
                                     <table id="tvShowsTable" class="table table-hover mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Title</th>
                                                 <th scope="col">Year</th>
                                             </tr>
@@ -191,7 +189,6 @@
                                     <table id="seasonsTable" class="table table-hover mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Title</th>
                                             </tr>
                                         </thead>
@@ -212,7 +209,6 @@
                                     <table id="episodesTable" class="table table-hover mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Title</th>
                                             </tr>
                                         </thead>
@@ -248,7 +244,6 @@
                                     <table id="audioTable" class="table table-hover table-sm mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Title</th>
                                                 <th scope="col">Language</th>
@@ -267,7 +262,6 @@
                                     <table id="subtitleTable" class="table table-hover table-sm mt-3">
                                         <thead>
                                             <tr>
-                                                <th scope="col">UID</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Title</th>
                                                 <th scope="col">Language</th>
diff --git a/js/main.js b/js/main.js
index 91ce3dd..8dd9799 100644
--- a/js/main.js
+++ b/js/main.js
@@ -107,7 +107,6 @@ function displayLibraries(data) {
 
     for (let i = 0; i < libraries.length; i++) {
         let rowHTML = `<tr onclick="getAlphabet(${libraries[i].key}, this)">
-                        <th scope="row">${libraries[i].key}</th>
                         <td>${libraries[i].title}</td>
                     </tr>`;
         $("#libraryTable tbody").append(rowHTML);
@@ -192,7 +191,6 @@ function displayTitles(titles) {
 
     for (let i = 0; i < tvShows.length; i++) {
         let rowHTML = `<tr onclick="getTitleInfo(${tvShows[i].ratingKey}, this)">
-                        <th scope="row">${tvShows[i].ratingKey}</th>
                         <td>${tvShows[i].title}</td>
                         <td>${tvShows[i].year}</td>
                     </tr>`;
@@ -249,7 +247,6 @@ function showTitleInfo(data, row) {
     for (let i = 0; i < seasons.length; i++) {
         seasonsList.push(seasons[i].ratingKey);
         let rowHTML = `<tr onclick="getSeasonInfo(${seasons[i].ratingKey}, this)">
-                        <th scope="row">${seasons[i].ratingKey}</th>
                         <td>${seasons[i].title}</td>
                     </tr>`;
         $("#seasonsTable tbody").append(rowHTML);
@@ -286,7 +283,6 @@ function showSeasonInfo(data, row) {
 
     for (let i = 0; i < episodes.length; i++) {
         let rowHTML = `<tr onclick="getEpisodeInfo(${episodes[i].ratingKey}, this)">
-                        <th scope="row">${episodes[i].ratingKey}</th>
                         <td>${episodes[i].title}</td>
                     </tr>`;
         $("#episodesTable tbody").append(rowHTML);
@@ -328,7 +324,6 @@ function showEpisodeInfo(data, row) {
     for (let i = 0; i < streams.length; i++) {
         if (streams[i].streamType == 2) {
             let rowHTML = `<tr ${streams[i].selected ? "class='table-active'" : ""} onclick="setAudioStream(${partId}, ${streams[i].id}, this)">
-                        <th class="uid" scope="row">${streams[i].id}</th>
                         <td class="name">${streams[i].displayTitle}</td>
                         <td class="title">${streams[i].title}</td>
                         <td class="language">${streams[i].language}</td>
@@ -339,7 +334,6 @@ function showEpisodeInfo(data, row) {
         else if (streams[i].streamType == 3) {
             if (streams[i].selected) subtitlesChosen = true;
             let rowHTML = `<tr ${streams[i].selected ? "class='table-active'" : ""} onclick="setSubtitleStream(${partId}, ${streams[i].id}, this)">
-                        <th class="uid" scope="row">${streams[i].id}</th>
                         <td class="name">${streams[i].displayTitle}</td>
                         <td class="title">${streams[i].title}</td>
                         <td class="language">${streams[i].language}</td>
@@ -351,7 +345,6 @@ function showEpisodeInfo(data, row) {
 
     // Append the "No Subtitles" row to the top of the tracks table
     let noSubsRow = `<tr ${subtitlesChosen ? "" : "class='table-active'"} onclick="setSubtitleStream(${partId}, 0, this)">
-                        <th class="uid" scope="row">0</th>
                         <td class="name">No Subtitles</td>
                         <td class="title">--</td>
                         <td class="language">--</td>