From db21f82739b4fc5db010798f40602cb7a7ac738e Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Mon, 20 Jun 2016 02:42:20 +0100
Subject: [PATCH] New scrollable tabs

---
 public/templates/pages/_layout.html |  4 +-
 public/templates/pages/about.html   |  2 +-
 public/templates/pages/faq.html     |  6 +--
 resources/assets/styles/mobile.less | 75 +++++++++++++++++++++++++++++
 4 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/public/templates/pages/_layout.html b/public/templates/pages/_layout.html
index 6819533b..6d7ea104 100644
--- a/public/templates/pages/_layout.html
+++ b/public/templates/pages/_layout.html
@@ -1,7 +1,7 @@
-<ul class="tabs">
+<ul class="tabs fixed">
     <li ui-sref-active="active"><a ui-sref=".about">About Pony.fm</a></li>
     <li ui-sref-active="active"><a ui-sref=".faq">FAQ</a></li>
     <li ui-sref-active="active"><a ui-sref=".mlpforums-advertising-program">MLP Forums Advertising Program</a></li>
 </ul>
 
-<ui-view class="static-page"></ui-view>
+<ui-view class="static-page fixed-tabs"></ui-view>
diff --git a/public/templates/pages/about.html b/public/templates/pages/about.html
index c258bdd1..29884326 100644
--- a/public/templates/pages/about.html
+++ b/public/templates/pages/about.html
@@ -19,5 +19,5 @@
 
     <h2>Who is behind Pony.fm?</h2>
     <p>Pony.fm was created by Feld0, a pony-loving teenager who heard the call of code. Recognizing the need for a true pony-specific music hosting site, and realizing that MLP Forums provided him with the resources he needed to make it happen, he created a blank text file and started pumping code into his computer.</p>
-<p>The site is now maintained by him and Nelson LaQuet as part of the <a href="https://poniverse.net/" target="_blank">Poniverse</a> network.</p>
+<p>The site is now maintained by him, Nelson LaQuet and Logic as part of the <a href="https://poniverse.net/" target="_blank">Poniverse</a> network.</p>
 </div>
diff --git a/public/templates/pages/faq.html b/public/templates/pages/faq.html
index a4295a53..12e2e7c2 100644
--- a/public/templates/pages/faq.html
+++ b/public/templates/pages/faq.html
@@ -69,8 +69,8 @@
             target="_blank">official
             Pony.fm forum</a>.
         </li>
-        <li>Email <a href="mailto:feld0@pony.fm"
-                     target="_blank">Feld0</a>, Pony.fm&#39;s lead developer.
+        <li>Email <a href="mailto:logic@pony.fm"
+                     target="_blank">Logic</a>, Pony.fm&#39;s lead developer.
         </li>
         <li>Open a <a href="https://github.com/Poniverse/Pony.fm/issues"
                       target="_blank">GitHub issue</a>.
@@ -107,7 +107,7 @@
 
     <h2>How do I report someone?</h2>
 
-    <p>Email <a href="mailto:feld0@pony.fm" target="_blank">feld0@pony.fm</a>
+    <p>Email <a href="mailto:logic@pony.fm" target="_blank">logic@pony.fm</a>
         with any
         moderation issues you have.</p>
 
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 9b374df3..0b803dbc 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -17,6 +17,10 @@
     padding: 5px;
   }
 
+  .site-body {
+    overflow-x: hidden;
+  }
+
   .now-playing {
     margin-left: 0px;
     position: fixed;
@@ -74,6 +78,13 @@
       display: none;
     }
 
+    li {
+      font-size: 12pt;
+      a {
+        padding: 13px 25px;
+      }
+    }
+
     &.animated {
       transition: transform 0.3s ease;
     }
@@ -294,6 +305,70 @@
       right: -1px;
     }
   }
+
+  .news {
+    display: none;
+  }
+
+  .two-pane-view.open {
+    .list {
+      width: auto;
+      float: none;
+      margin-bottom: 10px;
+    }
+
+    .editor {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .tabs {
+    width: 100%;
+    overflow-x: scroll;
+    display: flex;
+    white-space: nowrap;
+    border-bottom: 0;
+    height: 41px;
+
+    li {
+      a {
+        border-bottom: 4px solid #ddd;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &.fixed {
+      position: fixed;
+      background: #84528a;
+      top: 64px;
+      left: 0;
+      height: 41px;
+      width: 100%;
+      border-bottom: 0;
+
+      li {
+        a {
+          background: transparent;
+          color: #fff;
+          border-bottom: 0;
+        }
+
+        &.active a {
+          background: transparent;
+          color: #fff;
+          border-bottom: 4px solid #b885bd;
+        }
+      }
+    }
+  }
+
+  .fixed-tabs {
+    padding-top: 42px;
+  }
 }
 
 // Super small phones like the iPhone 5