From b1d6f5861934c8500711a8f5350c172bd4970efb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 22 Aug 2021 10:46:47 +0200
Subject: [PATCH] Added responsiveness to manage domains table

---
 src/domains/DomainRow.tsx                | 18 ++++++----
 src/domains/ManageDomains.tsx            |  2 +-
 src/index.scss                           |  1 +
 src/short-urls/ShortUrlsTable.scss       |  8 -----
 src/short-urls/ShortUrlsTable.tsx        |  2 +-
 src/short-urls/helpers/ShortUrlsRow.scss | 31 -----------------
 src/short-urls/helpers/ShortUrlsRow.tsx  | 16 ++++-----
 src/utils/table/ResponsiveTable.scss     | 42 ++++++++++++++++++++++++
 8 files changed, 64 insertions(+), 56 deletions(-)
 create mode 100644 src/utils/table/ResponsiveTable.scss

diff --git a/src/domains/DomainRow.tsx b/src/domains/DomainRow.tsx
index de7c3217..bf887f52 100644
--- a/src/domains/DomainRow.tsx
+++ b/src/domains/DomainRow.tsx
@@ -36,15 +36,19 @@ export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, def
   const domainId = `domainEdit${authority.replace('.', '')}`;
 
   return (
-    <tr>
-      <td>{isDefault ? <DefaultDomain /> : ''}</td>
-      <th>{authority}</th>
-      <td>{redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}</td>
-      <td>{redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}</td>
-      <td>
+    <tr className="responsive-table__row">
+      <td className="responsive-table__cell" data-th="Is default domain">{isDefault ? <DefaultDomain /> : ''}</td>
+      <th className="responsive-table__cell" data-th="Domain">{authority}</th>
+      <td className="responsive-table__cell" data-th="Base path redirect">
+        {redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
+      </td>
+      <td className="responsive-table__cell" data-th="Regular 404 redirect">
+        {redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}
+      </td>
+      <td className="responsive-table__cell" data-th="Invalid short URL redirect">
         {redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
       </td>
-      <td className="text-right">
+      <td className="responsive-table__cell text-right">
         <span id={domainId}>
           <Button outline size="sm" disabled={isDefault} onClick={isDefault ? undefined : toggle}>
             <FontAwesomeIcon icon={isDefault ? forbiddenIcon : editIcon} />
diff --git a/src/domains/ManageDomains.tsx b/src/domains/ManageDomains.tsx
index 9d94002b..69f67a30 100644
--- a/src/domains/ManageDomains.tsx
+++ b/src/domains/ManageDomains.tsx
@@ -43,7 +43,7 @@ export const ManageDomains: FC<ManageDomainsProps> = (
     return (
       <SimpleCard>
         <table className="table table-hover mb-0">
-          <thead>
+          <thead className="responsive-table__header">
             <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
           </thead>
           <tbody>
diff --git a/src/index.scss b/src/index.scss
index 5a330475..5251b46e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,6 +4,7 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
 @import './theme/theme';
+@import './utils/table/ResponsiveTable';
 
 * {
   outline: none !important;
diff --git a/src/short-urls/ShortUrlsTable.scss b/src/short-urls/ShortUrlsTable.scss
index 0cf48290..70a18a20 100644
--- a/src/short-urls/ShortUrlsTable.scss
+++ b/src/short-urls/ShortUrlsTable.scss
@@ -1,11 +1,3 @@
-@import '../utils/base';
-
-.short-urls-table__header {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: none;
-  }
-}
-
 .short-urls-table__header-cell--with-action {
   cursor: pointer;
 }
diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index f1f6c05c..acf5d8fd 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -60,7 +60,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
 
   return (
     <table className={tableClasses}>
-      <thead className="short-urls-table__header">
+      <thead className="responsive-table__header short-urls-table__header">
         <tr>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
             Created at
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index a199b69b..92410c15 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -1,39 +1,8 @@
 @import '../../utils/base';
 @import '../../utils/mixins/vertical-align';
 
-.short-urls-row {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
-    position: relative;
-  }
-}
-
 .short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;
-
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    width: 100%;
-    position: relative;
-    padding: .5rem;
-    font-size: .9rem;
-
-    &:before {
-      content: attr(data-th);
-      font-weight: 700;
-    }
-
-    &:last-child {
-      position: absolute;
-      top: 3.5px;
-      right: .5rem;
-      width: auto;
-      padding: 0;
-      border: none;
-    }
-  }
 }
 
 .short-urls-row__cell--break {
diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx
index e04710c9..02ecd739 100644
--- a/src/short-urls/helpers/ShortUrlsRow.tsx
+++ b/src/short-urls/helpers/ShortUrlsRow.tsx
@@ -51,11 +51,11 @@ const ShortUrlsRow = (
   }, [ shortUrl.visitsCount ]);
 
   return (
-    <tr className="short-urls-row">
-      <td className="indivisible short-urls-row__cell" data-th="Created at: ">
+    <tr className="responsive-table__row">
+      <td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
         <Time date={shortUrl.dateCreated} />
       </td>
-      <td className="short-urls-row__cell" data-th="Short URL: ">
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
         <span className="indivisible short-urls-row__cell--relative">
           <ExternalLink href={shortUrl.shortUrl} />
           <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
@@ -64,16 +64,16 @@ const ShortUrlsRow = (
           </span>
         </span>
       </td>
-      <td className="short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}: `}>
+      <td className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}>
         <ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
       </td>
       {shortUrl.title && (
-        <td className="short-urls-row__cell short-urls-row__cell--break d-lg-none" data-th="Long URL: ">
+        <td className="short-urls-row__cell responsive-table__cell short-urls-row__cell--break d-lg-none" data-th="Long URL">
           <ExternalLink href={shortUrl.longUrl} />
         </td>
       )}
-      <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
-      <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
+      <td className="responsive-table__cell short-urls-row__cell text-lg-right" data-th="Visits">
         <ShortUrlVisitsCount
           visitsCount={shortUrl.visitsCount}
           shortUrl={shortUrl}
@@ -81,7 +81,7 @@ const ShortUrlsRow = (
           active={active}
         />
       </td>
-      <td className="short-urls-row__cell">
+      <td className="responsive-table__cell short-urls-row__cell">
         <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
       </td>
     </tr>
diff --git a/src/utils/table/ResponsiveTable.scss b/src/utils/table/ResponsiveTable.scss
new file mode 100644
index 00000000..40b6da02
--- /dev/null
+++ b/src/utils/table/ResponsiveTable.scss
@@ -0,0 +1,42 @@
+@import '../../utils/base';
+
+.responsive-table__header {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: none;
+  }
+}
+
+.responsive-table__row {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+  }
+}
+
+.responsive-table__cell.responsive-table__cell {
+  vertical-align: middle !important;
+
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    width: 100%;
+    position: relative;
+    padding: .5rem;
+    font-size: .9rem;
+
+    &[data-th]:before {
+      content: attr(data-th) ': ';
+      font-weight: 700;
+    }
+
+    &:last-child {
+      position: absolute;
+      top: 3.5px;
+      right: .5rem;
+      width: auto;
+      padding: 0;
+      border: none;
+    }
+  }
+}