Merge pull request #386 from ucdavis/cyd/responsive-pass

Responsive pass
ucdavis · Jun 26, 2023 · 12c811f · 12c811f
2 parents 5784d1f + 891ca15
commit 12c811f
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 21 deletions.
diff --git a/Sloth.Web/Views/Home/TeamIndex.cshtml b/Sloth.Web/Views/Home/TeamIndex.cshtml
@@ -24,7 +24,7 @@
             </ul>
 
         </div>
-        <div class="col d-flex justify-content-center align-items-center">
+        <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
             <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">Pending Approvals</h5>

diff --git a/Sloth.Web/Views/Jobs/JobList.cshtml b/Sloth.Web/Views/Jobs/JobList.cshtml
@@ -19,7 +19,8 @@
 <div class="container">
   <div class="row mb-2">
     <div class="col-8">
-      <h2>@ViewBag.Title</h2>
+      <h2>Job Title:</h2>
+      <p><b>@ViewBag.Title</b></p>
     </div>
     <div class="col-4 d-flex justify-content-end align-items-end">
       <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#run-job-modal">Run Job</button>
@@ -48,7 +49,7 @@
 
     </div>
   </form>
-
+<div class="responive-table">
   <table id="recordsTable" class="table sloth-table active-table">
     <thead>
       <tr>
@@ -80,6 +81,7 @@
       }
     </tbody>
   </table>
+  </div>
 </div>
 
 <div id="run-job-modal" class="modal fade">

diff --git a/Sloth.Web/Views/Scrubbers/Index.cshtml b/Sloth.Web/Views/Scrubbers/Index.cshtml
@@ -11,8 +11,8 @@
 <div class="container">
     <div class="row">
         <h2>@ViewBag.Title</h2>
-
-        <table id="scrubbersTable" class="table sloth-table active-table">
+<div class="responsive-table">
+<table id="scrubbersTable" class="table sloth-table active-table">
             <thead>
                 <tr>
                     <th>@Html.DisplayNameFor(x => x.Id)</th>
@@ -33,6 +33,8 @@
                 }
             </tbody>
         </table>
+</div>
+
     </div>
 </div>
 

diff --git a/Sloth.Web/Views/Shared/_Layout.cshtml b/Sloth.Web/Views/Shared/_Layout.cshtml
@@ -104,8 +104,8 @@
             <div class="container">
                 <div class="row justify-content-between">
 
-                    <div class="col-8 d-flex search-bar">
-                        <div class="col-3 team-chooser">
+                    <div class="col-12 col-md-8 d-flex search-bar">
+                        <div class="col-4 team-chooser">
                             <select id="team-select" class="form-select" aria-label="Default select example">
                                 <option value="">-- Choose team --</option>
                                 @foreach (var item in teams)
@@ -131,7 +131,7 @@
                         }
 
                     </div>
-                    <div class="col-4 text-end profile-bar"><partial name="_LoginPartial" /></div>
+                    <div class="col-12 col-md-4 profile-bar"><partial name="_LoginPartial" /></div>
                 </div>
 
             </div>

diff --git a/Sloth.Web/Views/Shared/_SourcesTable.cshtml b/Sloth.Web/Views/Shared/_SourcesTable.cshtml
@@ -1,5 +1,7 @@
 @using Sloth.Core.Models
 @model IEnumerable<Source>
+<div class="responsive-table">
+
 
 <table id="sourcesTable" class="table table-bordered">
     <thead>
@@ -32,3 +34,4 @@
     }
     </tbody>
 </table>
+</div>
diff --git a/Sloth.Web/Views/Shared/_TransactionsTable.cshtml b/Sloth.Web/Views/Shared/_TransactionsTable.cshtml
@@ -10,7 +10,7 @@
 @{
     var teamSlug = HttpContextAccessor.HttpContext.GetRouteData().Values["team"] as string;
 }
-
+<div class="responsive-table">
 <table id="transactionsTable" class="table sloth-table active-table">
     <thead>
         <tr>
@@ -74,3 +74,4 @@
         }
     </tbody>
 </table>
+</div>
diff --git a/Sloth.Web/Views/System/Index.cshtml b/Sloth.Web/Views/System/Index.cshtml
@@ -25,8 +25,8 @@
                     </div>
                 </div>
             </div>
-
-            <table id="usersTable" class="table table-bordered">
+<div class="responsive-table">
+<table id="usersTable" class="table table-bordered">
                 <thead>
                     <tr>
                         <th>Name</th>
@@ -55,6 +55,8 @@
                     }
                 </tbody>
             </table>
+</div>
+
         </div>
     </div>
 

diff --git a/Sloth.Web/Views/Teams/Details.cshtml b/Sloth.Web/Views/Teams/Details.cshtml
@@ -36,7 +36,7 @@
                     </button>
                 </div>
             </div>
-
+<div class="responsive-table">
             <table id="usersTable" class="table table-bordered">
                 <thead>
                 <tr>
@@ -67,6 +67,7 @@
                 }
                 </tbody>
             </table>
+            </div>
         </div>
     </div>
 
@@ -96,7 +97,7 @@
                     </a>
                 </div>
             </div>
-
+<div class="responsive-table">
             <table id="integrationsTable" class="table table-bordered">
                 <thead>
                 <tr>
@@ -129,6 +130,7 @@
                 }
                 </tbody>
             </table>
+            </div>
 
         </div>
     </div>
@@ -143,6 +145,8 @@
                     </button>
                 </div>
             </div>
+<div class="responsive-table">
+
 
             <table id="apiKeysTable" class="table table-bordered table-condensed">
                 <thead>
@@ -183,6 +187,7 @@
                 }
                 </tbody>
             </table>
+            </div>
 
         </div>
     </div>
@@ -197,7 +202,7 @@
                     </a>
                 </div>
             </div>
-
+<div class="responsive-table">
             <table id="webHooksTable" class="table table-bordered table-condensed">
                 <thead>
                 <tr>
@@ -229,6 +234,7 @@
                 }
                 </tbody>
             </table>
+            </div>
         </div>
     </div>
 

diff --git a/Sloth.Web/Views/Transactions/Index.cshtml b/Sloth.Web/Views/Transactions/Index.cshtml
@@ -25,7 +25,7 @@
         <h3>Filters</h3>
         <form class="row" id="transactionFilterForm" asp-controller="Transactions" asp-action="Index" method="get">
             <div class="row justify-content-between filters-wrapper">
-                <div class="col-4">
+                <div class="col-8 col-md-5">
                     <div id="filter-date-range" class="input-group">
                         <input name="from" type="text" class="form-control" placeholder="MM/DD/YYYY" asp-for="Filter.From" asp-format="{0:MM/dd/yyyy}" aria-label="" />
                         <span class="input-group-text">to</span>

diff --git a/Sloth.Web/wwwroot/scss/components.scss b/Sloth.Web/wwwroot/scss/components.scss
@@ -110,7 +110,14 @@ a.stretched-link {
   margin-bottom: 2%;
 }
 table#integrationsTable {
-  td:nth-child(5), td:nth-child(4) {
-    word-wrap: anywhere ;
+  td:nth-child(5),
+  td:nth-child(4) {
+    word-wrap: anywhere;
+  }
+}
+.responsive-table {
+  overflow-x: auto;
+  @include breakpoint(md) {
+    overflow: inherit;
   }
 }
diff --git a/Sloth.Web/wwwroot/scss/layout.scss b/Sloth.Web/wwwroot/scss/layout.scss
@@ -30,6 +30,14 @@ header {
   padding: 4px 0;
   border-bottom: 1px solid $borders-sloth;
 }
+.profile-bar {
+  padding-top: 2%;
+  text-align: left;
+  @include breakpoint(md) {
+    padding-top: 0%;
+    text-align: right;
+  }
+}
 .search-wrapper {
   padding: 8px 0;
   border-bottom: 1px solid $borders-sloth;
@@ -68,12 +76,21 @@ footer {
   border-bottom: 1px solid $borders-sloth;
 }
 .nav-link {
-  padding: 8px 16px;
+  padding: 4px 8px;
   color: $secondary-font;
-  font-size: 1.3rem;
+  font-size: 0.8rem;
   svg {
-    margin-right: 4px;
-    padding-bottom: 2px;
+    display: none;
+  }
+  @include breakpoint(md) {
+    padding: 8px 16px;
+    color: $secondary-font;
+    font-size: 1.3rem;
+    svg {
+      display: inline;
+      margin-right: 4px;
+      padding-bottom: 2px;
+    }
   }
 }
 //body