PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-25 14:37:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

New scrollable tabs

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/templates/pages/_layout.html
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=".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=".faq">FAQ</a></li>
<li ui-sref-active="active"><a ui-sref=".mlpforums-advertising-program">MLP Forums Advertising Program</a></li> <li ui-sref-active="active"><a ui-sref=".mlpforums-advertising-program">MLP Forums Advertising Program</a></li>
</ul> </ul>
<ui-view class="static-page"></ui-view> <ui-view class="static-page fixed-tabs"></ui-view>

2
public/templates/pages/about.html
View file

@ -19,5 +19,5 @@
<h2>Who is behind Pony.fm?</h2> <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>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> </div>

6
public/templates/pages/faq.html
View file

@ -69,8 +69,8 @@
target="_blank">official target="_blank">official
Pony.fm forum</a>. Pony.fm forum</a>.
</li> </li>
<li>Email <a href="mailto:feld0@pony.fm" <li>Email <a href="mailto:logic@pony.fm"
target="_blank">Feld0</a>, Pony.fm&#39;s lead developer. target="_blank">Logic</a>, Pony.fm&#39;s lead developer.
</li> </li>
<li>Open a <a href="https://github.com/Poniverse/Pony.fm/issues" <li>Open a <a href="https://github.com/Poniverse/Pony.fm/issues"
target="_blank">GitHub issue</a>. target="_blank">GitHub issue</a>.
@ -107,7 +107,7 @@
<h2>How do I report someone?</h2> <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 with any
moderation issues you have.</p> moderation issues you have.</p>

75
resources/assets/styles/mobile.less vendored
View file

@ -17,6 +17,10 @@
padding: 5px; padding: 5px;
} }
.site-body {
overflow-x: hidden;
}
.now-playing { .now-playing {
margin-left: 0px; margin-left: 0px;
position: fixed; position: fixed;
@ -74,6 +78,13 @@
display: none; display: none;
} }
li {
font-size: 12pt;
a {
padding: 13px 25px;
}
}
&.animated { &.animated {
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@ -294,6 +305,70 @@
right: -1px; 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 // Super small phones like the iPhone 5