big amount of indev stuff
Signed-off-by: Flashwave <me@flash.moe>
This commit is contained in:
parent
d4063a994f
commit
5201e8c3fb
11 changed files with 198 additions and 135 deletions
|
|
@ -1 +1,3 @@
|
|||
<h2><a href="/settings/general/options">Go to Site Options</a></h2>
|
||||
<div class="platform" style="padding: 10px;">
|
||||
<h1><a href="/settings/general/options">Go to Site Options</a></h1>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="frontStats">
|
||||
<div class="platform frontStats">
|
||||
<div title="We have {{ stats.userCount }} user{% if stats.userCount != 1 %}s{% endif %}">
|
||||
<div>
|
||||
<span class="fa fa-line-chart"></span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
{% block title %}Information{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="platform">
|
||||
<h1 class="sectionHead">Information</h1>
|
||||
{{ page.message }}
|
||||
{% if page.redirect %}<br /><a href="{{ page.redirect }}" class="default">Click here if you aren't being redirected.</a>{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -76,34 +76,19 @@
|
|||
<span id="top"></span>
|
||||
<div class="header-fade"></div>
|
||||
<div id="notifications"></div>
|
||||
<div id="header">
|
||||
<a href="/" title="{{ sakura.siteName }}">
|
||||
<div class="logo"{% if sakura.siteLogo %} style="background-image: url('{{ sakura.siteLogo }}');"{% endif %}></div>
|
||||
</a>
|
||||
<div class="social">
|
||||
<ul>
|
||||
<li><a target="_blank" title="Flashii on Twitter" class="fa fa-twitter" href="https://twitter.com/_flashii"></a></li>
|
||||
<li><a target="_blank" title="Flashii on YouTube" class="fa fa-youtube-play" href="https://youtube.com/user/flashiinet"></a></li>
|
||||
<li><a target="_blank" title="Flashii on Steam" class="fa fa-steam" href="https://steamcommunity.com/groups/flashiinet"></a></li>
|
||||
<li><a title="Subscribe to the news page feed" class="fa fa-rss" href="/news.xml"></a></li>
|
||||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
{% if php.self == '/profile.php' ? profile.data.user_data.profileBackground : (user.checkPermission('SITE', 'CREATE_BACKGROUND') and user.data.user_data.userOptions.profileBackgroundSiteWide and user.data.user_data.profileBackground) %}
|
||||
<div id="userBackground" style="background-image: url('{{ urls.format('IMAGE_BACKGROUND', [(php.self == '/profile.php' ? profile : user).data.user_id]) }}');"></div>
|
||||
{% endif %}
|
||||
<div id="content">
|
||||
<div id="navigation">
|
||||
<ul class="nav-left floatLeft">
|
||||
<li><a href="{{ urls.format('SITE_HOME') }}">Home</a></li>
|
||||
<li><a href="{{ urls.format('SITE_NEWS') }}">News</a></li>
|
||||
<li><a href="//chat.{{ sakura.urlMain }}/">Chat</a></li>
|
||||
<li><a href="{{ urls.format('FORUM_INDEX') }}">Forum</a></li>
|
||||
<li><a href="{{ urls.format('MEMBERLIST_INDEX') }}">Members</a></li>
|
||||
<li><a href="{{ urls.format('SITE_SEARCH') }}">Search</a></li>
|
||||
<li><a href="{{ urls.format('SITE_PREMIUM') }}">Support us</a></li>
|
||||
<li class="logo"><a href="{{ urls.format('SITE_HOME') }}"><div {% if sakura.siteLogo %} style="background-image: url('{{ sakura.siteLogo }}');"{% endif %}></div><div>Home</div></a></li>
|
||||
<li><a href="{{ urls.format('SITE_NEWS') }}"><div class="fa fa-newspaper-o"></div><div>News</div></a></li>
|
||||
<li><a href="//chat.{{ sakura.urlMain }}/"><div class="fa fa-commenting"></div><div>Chat</div></a></li>
|
||||
<li><a href="{{ urls.format('FORUM_INDEX') }}"><div class="fa fa-comments"></div><div>Forum</div></a></li>
|
||||
<li><a href="{{ urls.format('MEMBERLIST_INDEX') }}"><div class="fa fa-users"></div><div>Members</div></a></li>
|
||||
<li><a href="{{ urls.format('SITE_SEARCH') }}"><div class="fa fa-search"></div><div>Search</div></a></li>
|
||||
<li><a href="{{ urls.format('SITE_PREMIUM') }}"><div class="fa fa-heart"></div><div>Support us</div></a></li>
|
||||
</ul>
|
||||
<ul class="nav-right floatRight">
|
||||
<li class="nav-usermenu">
|
||||
|
|
@ -123,8 +108,11 @@
|
|||
<li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}" class="ignore"><img src="{{ sakura.contentPath }}/pixel.png" alt="{{ user.data.username }}" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [user.data.user_id]) }}');" class="nav-avatar" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content">
|
||||
{% block content %}
|
||||
<div class="platform">
|
||||
<div style="text-align: center; font-family: 'Exo2-0-LightItalic', sans-serif; font-size: 3em; line-height: 1.5em; margin: 10px auto">This template doesn't exist (yet)!<br />Switch back to Yuuno via the User Settings to view this page!</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{% block content %}
|
||||
<div class="homepage">
|
||||
{% include 'elements/statsHeader.tpl' %}
|
||||
<div class="frontNews">
|
||||
<div class="frontNews platform">
|
||||
{% for post in news.getPosts(0, newsCount) %}
|
||||
{% include 'elements/newsPost.tpl' %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{% block title %}{% if page.title %}{{ page.title }}{% else %}Not found!{% endif %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="markdown">
|
||||
<div class="markdown platform">
|
||||
<div>
|
||||
{{ page.content|raw }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<script type="text/javascript">
|
||||
// Header
|
||||
window.addEventListener("scroll", function(e) {
|
||||
if(e.pageY > 250) {
|
||||
if(e.pageY > 165) {
|
||||
var profileHeader = document.getElementById('profileHeader');
|
||||
var profileContent = document.getElementById('profileContent');
|
||||
profileHeader.className = 'profileHeaderContent floating';
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{% block title %}Search{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="platform">
|
||||
<h1 class="sectionHead">search</h1>
|
||||
<script>
|
||||
(function() {
|
||||
|
|
@ -17,4 +18,5 @@
|
|||
</script>
|
||||
<gcse:searchbox></gcse:searchbox>
|
||||
<gcse:searchresults></gcse:searchresults>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,8 @@
|
|||
{% block title %}{{ page.category }} / {{ page.mode }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content settings messages">
|
||||
<div class="content-right content-column">
|
||||
{% include 'elements/settingsNavigation.tpl' %}
|
||||
</div>
|
||||
<div class="content-left content-column">
|
||||
<div class="platform">
|
||||
<h1 class="sectionHead">
|
||||
{{ page.category }} / {{ page.mode }}
|
||||
</h1>
|
||||
|
|
@ -18,6 +15,4 @@
|
|||
</div>
|
||||
{% include 'settings/' ~ current ~ '.tpl' %}
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -266,74 +266,155 @@ a:active {
|
|||
* Wrapper
|
||||
*/
|
||||
#wrapper {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#wrapper.navFloat {
|
||||
padding-top: 37px;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
max-width: 1018px;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.platform {
|
||||
background: #231C29;
|
||||
box-shadow: 0 0 7px rgba(255, 255, 255, .2);
|
||||
z-index: 4;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(148, 117, 178, .6);
|
||||
}
|
||||
|
||||
#content.floatingNavigation {
|
||||
padding-top: 37px;
|
||||
.platform:not(:last-child) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header navigation
|
||||
*/
|
||||
#navigation {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background: linear-gradient(0deg, transparent, #453851 50%, #342740) transparent;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
background: linear-gradient(0deg, transparent, #453851 50%, #342740) #231C29;
|
||||
font-family: "Exo2-0-LightItalic", sans-serif;
|
||||
height: 30px;
|
||||
font-size: 1.5em;
|
||||
line-height: 25px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 1px 1px 3px #111;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
z-index: 900;
|
||||
max-width: 1018px;
|
||||
max-width: 1022px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(148, 117, 178, .6);
|
||||
box-shadow: 0 0 7px rgba(255, 255, 255, .2);
|
||||
transition: background-color .2s, box-shadow .2s, height .2s, line-height .2s;
|
||||
}
|
||||
|
||||
#content.floatingNavigation #navigation {
|
||||
#navigation.floating {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
background-color: transparent;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
#navigation > ul > li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#navigation > ul > li > a:not(.ignore) {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
max-height: 30px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#navigation.floating > ul > li {
|
||||
max-height: 25px;
|
||||
}
|
||||
|
||||
#navigation > ul > li > a:not(.ignore) {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#navigation > .nav-right > li > a:not(.ignore) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#navigation > .nav-left > li > a:not(.ignore) {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#navigation.floating > ul > li > a:not(.ignore) {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
#navigation.floating > .nav-left > li > a:not(.ignore) {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#navigation > ul > li.logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#navigation.floating > ul > li.logo {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#navigation > ul > li.logo > a > div:first-child {
|
||||
background: url('../images/image-logo-white.svg') no-repeat scroll center center / cover;
|
||||
content: ".";
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#navigation > ul > li > a {
|
||||
z-index: 901;
|
||||
position: relative;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
#navigation > .nav-left > li > a:not(.ignore):hover {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
#navigation > .nav-left > li > a:not(.ignore) > div:first-child {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#navigation > .nav-left > li > a:not(.ignore):active {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
#navigation > .nav-left > li > a:not(.ignore):hover > div:first-child {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#navigation > .nav-left > li > a:not(.ignore) > div:last-child {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
max-height: 30px;
|
||||
font-family: "Exo2-0-LightItalic", sans-serif;
|
||||
background: rgba(69, 56, 81, .8);
|
||||
padding: 0 10px 0 30px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
|
||||
z-index: 8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#navigation > .nav-left > li > a:not(.ignore):hover > div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#navigation .nav-usermenu > a {
|
||||
|
|
@ -352,9 +433,15 @@ a:active {
|
|||
}
|
||||
|
||||
#navigation .nav-avatar {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: url('/pixel.png') no-repeat scroll left center / cover transparent;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#navigation.floating .nav-avatar {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('/pixel.png') no-repeat scroll left center / cover transparent;
|
||||
}
|
||||
|
||||
#navigation > ul > li > ul {
|
||||
|
|
@ -417,9 +504,6 @@ a:active {
|
|||
flex-direction: column;
|
||||
align-content: stretch;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -31px;
|
||||
margin-bottom: -31px;
|
||||
}
|
||||
|
||||
.profile .profileContainer {
|
||||
|
|
@ -427,7 +511,7 @@ a:active {
|
|||
}
|
||||
|
||||
.profile .profilePlatform {
|
||||
background: rgba(148, 117, 178, .2);
|
||||
background: #3A2E44;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
|
|
@ -448,13 +532,14 @@ a:active {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
#profileHeader.floating {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding-top: 30px;
|
||||
max-width: 1018px;
|
||||
max-width: 1024px;
|
||||
height: 95px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
|
@ -652,8 +737,7 @@ a:active {
|
|||
* Homepage
|
||||
*/
|
||||
.homepage .frontStats {
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
font: 2.5em/1em "Exo2-0-LightItalic", sans-serif;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
|
||||
|
|
@ -662,7 +746,7 @@ a:active {
|
|||
.homepage .frontStats > div {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
background: rgba(148, 117, 178, .2);
|
||||
background: #3A2E44;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@
|
|||
|
||||
// Get or set cookies
|
||||
function cookieData(action, name, data) {
|
||||
|
||||
switch(action) {
|
||||
|
||||
case 'get':
|
||||
return (result = new RegExp('(^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie)) ? result[2] : '';
|
||||
|
||||
|
|
@ -16,14 +14,11 @@ function cookieData(action, name, data) {
|
|||
|
||||
default:
|
||||
return null;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Initialising the element parallax functionality
|
||||
function initialiseParallax(id) {
|
||||
|
||||
// Assign the element to a variable
|
||||
var parallax = document.getElementById(id);
|
||||
|
||||
|
|
@ -35,20 +30,16 @@ function initialiseParallax(id) {
|
|||
|
||||
// Add the event listener to the body element
|
||||
document.addEventListener("mousemove", function(e) {
|
||||
|
||||
// Alter the position of the parallaxed element
|
||||
parallax.style.top = convertParallaxPositionValue(e.clientY, true, false) + 'px';
|
||||
parallax.style.bottom = convertParallaxPositionValue(e.clientY, true, true) + 'px';
|
||||
parallax.style.left = convertParallaxPositionValue(e.clientX, false, false) + 'px';
|
||||
parallax.style.right = convertParallaxPositionValue(e.clientX, false, true) + 'px';
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Converting the position value of the mouseover to a pixel value
|
||||
function convertParallaxPositionValue(pos, dir, neg) {
|
||||
|
||||
// Get the body element
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
|
||||
|
|
@ -57,9 +48,7 @@ function convertParallaxPositionValue(pos, dir, neg) {
|
|||
|
||||
// If someone decided to fuck with the inputs reset it to 0%
|
||||
if(position < 0 || position > 100) {
|
||||
|
||||
position = 0;
|
||||
|
||||
}
|
||||
|
||||
// Do the first maths
|
||||
|
|
@ -67,9 +56,7 @@ function convertParallaxPositionValue(pos, dir, neg) {
|
|||
|
||||
// If the negative flag is set inverse the number
|
||||
if(neg) {
|
||||
|
||||
position = -position;
|
||||
|
||||
}
|
||||
|
||||
// Subtract another 2.5 to make the element not go all over the place
|
||||
|
|
@ -77,16 +64,19 @@ function convertParallaxPositionValue(pos, dir, neg) {
|
|||
|
||||
// Return the proper position value
|
||||
return position;
|
||||
|
||||
}
|
||||
|
||||
// Menu bar
|
||||
window.addEventListener("scroll", function(e) {
|
||||
if(e.pageY > 123) {
|
||||
var content = document.getElementById('content');
|
||||
content.className = 'floatingNavigation';
|
||||
if(e.pageY > 6) {
|
||||
var wrapper = document.getElementById('wrapper');
|
||||
var navbar = document.getElementById('navigation');
|
||||
wrapper.className = 'navFloat';
|
||||
navbar.className = 'floating';
|
||||
} else {
|
||||
var content = document.getElementById('content');
|
||||
content.className = null;
|
||||
var wrapper = document.getElementById('wrapper');
|
||||
var navbar = document.getElementById('navigation');
|
||||
wrapper.className = null;
|
||||
navbar.className = null;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Reference in a new issue