Added more responsive improvements

src/index.scss

@@ -20,5 +20,9 @@
 }
 
 .short-urls-container {
-  padding: 30px 30px 30px 20px;
+  padding: 20px 0;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 30px 30px 20px;
+  }
 }

src/short-urls/ShortUrlVisits.js

@@ -135,7 +135,7 @@ export class ShortUrlsVisits extends React.Component {
                 {!loading && renderCreated()}
               </div>}
               <div>
-                Original URL:
+                Long URL:
                 &nbsp;
                 {loading && <small>Loading...</small>}
                 {!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}

src/short-urls/ShortUrlsList.js

@@ -53,37 +53,37 @@ export class ShortUrlsList extends React.Component {
 
     return (
       <table className="table table-striped table-hover">
-        <thead>
+        <thead className="short-urls-list__header">
           <tr>
             <th
-              className="short-urls-list__header short-urls-list__header--with-action"
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
               onClick={() => orderBy('dateCreated')}
             >
               {renderOrderIcon('dateCreated')}
               Created at
             </th>
             <th
-              className="short-urls-list__header short-urls-list__header--with-action"
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
               onClick={() => orderBy('shortCode')}
             >
               {renderOrderIcon('shortCode')}
               Short URL
             </th>
             <th
-              className="short-urls-list__header short-urls-list__header--with-action"
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
               onClick={() => orderBy('originalUrl')}
             >
               {renderOrderIcon('originalUrl')}
-              Original URL
+              Long URL
             </th>
-            <th className="short-urls-list__header">Tags</th>
+            <th className="short-urls-list__header-cell">Tags</th>
             <th
-              className="short-urls-list__header short-urls-list__header--with-action"
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
               onClick={() => orderBy('visits')}
             >
               <span className="nowrap">{renderOrderIcon('visits')} Visits</span>
             </th>
-            <th className="short-urls-list__header">&nbsp;</th>
+            <th className="short-urls-list__header-cell">&nbsp;</th>
           </tr>
         </thead>
         <tbody>

src/short-urls/ShortUrlsList.scss

@@ -1,3 +1,11 @@
+@import "../utils/base";
+
+.short-urls-list__header {
+  @media (max-width: $smMax) {
+    display: none;
+  }
+}
+
 .short-urls-list__header--with-action {
   cursor: pointer;
 }

src/short-urls/helpers/ShortUrlsRow.js

@@ -26,20 +26,21 @@ export class ShortUrlsRow extends React.Component {
 
     return (
       <tr
+        className="short-urls-row"
         onMouseEnter={() => this.setState({displayMenu: true})}
         onMouseLeave={() => this.setState({displayMenu: false})}
       >
-        <td className="nowrap short-urls-row__cell">
+        <td className="nowrap short-urls-row__cell" data-th="Created at: ">
           <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
         </td>
-        <td className="short-urls-row__cell">
+        <td className="short-urls-row__cell" data-th="Short URL: ">
           <a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
         </td>
-        <td className="short-urls-row__cell short-urls-row__cell--break">
+        <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
           <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
         </td>
-        <td className="short-urls-row__cell">{this.renderTags(shortUrl.tags)}</td>
+        <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
-        <td className="short-urls-row__cell text-right">{shortUrl.visitsCount}</td>
+        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small
             className="badge badge-warning short-urls-row__copy-hint"

src/short-urls/helpers/ShortUrlsRow.scss

@@ -1,7 +1,33 @@
+@import "../../utils/base";
 @import "../../utils/mixins/vertical-align";
 
-.short-urls-row__cell {
+.short-urls-row {
+  @media (max-width: $smMax) {
+    display: block;
+    margin-bottom: 10px;
+    border-bottom: 1px solid $lightGrey;
+  }
+}
+
+.short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;
+
+  @media (max-width: $smMax) {
+    display: block;
+    width: 100%;
+    position: relative;
+    padding: .5rem;
+    font-size: .9rem;
+
+    &:before {
+      content: attr(data-th);
+      font-weight: bold;
+    }
+
+    &:last-child {
+      display: none;
+    }
+  }
 }
 .short-urls-row__cell--break {
   word-break: break-all;

src/utils/base.scss

@@ -2,7 +2,7 @@
 // Breakpoints
 $xsMax: 575px;
 $smMin: 576px;
-$smMax: 577px;
+$smMax: 767px;
 $mdMin: 768px;
 $mdMax: 991px;
 $lgMin: 992px;
@@ -12,6 +12,7 @@ $xlgMin: 1200px;
 // Colors
 $mainColor: #4696e5;
 $lightHoverColor: #eee;
+$lightGrey: #ddd;
 $dangerColor: #dc3545;
 
 // Misc