New scrollable tabs

This commit is contained in:
Josef Citrine 2016-06-20 02:42:20 +01:00
parent 336e04a0c1
commit db21f82739
4 changed files with 81 additions and 6 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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