flash/sakura
flash/sakura
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

big amount of indev stuff

Browse source 
Signed-off-by: Flashwave <me@flash.moe>
This commit is contained in:
flash 2015-11-02 21:00:27 +01:00
parent d4063a994f
commit 5201e8c3fb
11 changed files with 198 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_sakura/templates/misaki/elements/settingsNavigation.tpl
View file

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

2
_sakura/templates/misaki/elements/statsHeader.tpl
View file

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

8
_sakura/templates/misaki/global/information.tpl
View file

@ -3,7 +3,9 @@
{% block title %}Information{% endblock %}
{% block content %}
<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 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 %}

74
_sakura/templates/misaki/global/master.tpl
View file

@ -76,55 +76,43 @@
<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="navigation">
<ul class="nav-left floatLeft">
<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">
<a href="#"{% if session.checkLogin %} style="color: {{ user.colour }};"{% endif %}>{% if session.checkLogin %}{{ user.data.username }}{% else %}Guest{% endif %}</a>
<ul>
{% if session.checkLogin %}
<li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}">My Profile</a></li>
<li><a href="{{ urls.format('SETTING_CAT', ['messages']) }}">Private Messages</a></li>
<li><a href="{{ urls.format('SETTINGS_INDEX') }}">User Settings</a></li>
<li><a href="{{ urls.format('MANAGE_INDEX') }}">Site Management</a></li>
<li><a href="{{ urls.format('USER_LOGOUT', [php.time, php.sessionid, sakura.currentPage]) }}">Logout</a></li>
{% else %}
<li><a href="{{ urls.format('SITE_LOGIN') }}">Login or Register</a></li>
{% endif %}
</ul>
</li>
<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">
<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>
</ul>
<ul class="nav-right floatRight">
<li class="nav-usermenu">
<a href="#"{% if session.checkLogin %} style="color: {{ user.colour }};"{% endif %}>{% if session.checkLogin %}{{ user.data.username }}{% else %}Guest{% endif %}</a>
<ul>
{% if session.checkLogin %}
<li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}">My Profile</a></li>
<li><a href="{{ urls.format('SETTING_CAT', ['messages']) }}">Private Messages</a></li>
<li><a href="{{ urls.format('SETTINGS_INDEX') }}">User Settings</a></li>
<li><a href="{{ urls.format('MANAGE_INDEX') }}">Site Management</a></li>
<li><a href="{{ urls.format('USER_LOGOUT', [php.time, php.sessionid, sakura.currentPage]) }}">Logout</a></li>
{% else %}
<li><a href="{{ urls.format('SITE_LOGIN') }}">Login or Register</a></li>
{% endif %}
</ul>
</li>
<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>
{% block content %}
<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 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>

2
_sakura/templates/misaki/main/index.tpl
View file

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

2
_sakura/templates/misaki/main/infopage.tpl
View file

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

2
_sakura/templates/misaki/main/profile.tpl
View file

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

30
_sakura/templates/misaki/main/search.tpl
View file

@ -3,18 +3,20 @@
{% block title %}Search{% endblock %}
{% block content %}
<h1 class="sectionHead">search</h1>
<script>
(function() {
var cx = '013363332951923767879:krqdp_wt-eg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
<div class="platform">
<h1 class="sectionHead">search</h1>
<script>
(function() {
var cx = '013363332951923767879:krqdp_wt-eg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
</div>
{% endblock %}

25
_sakura/templates/misaki/main/settings.tpl
View file

@ -3,21 +3,16 @@
{% block title %}{{ page.category }} / {{ page.mode }}{% endblock %}
{% block content %}
<div class="content settings messages">
<div class="content-right content-column">
{% include 'elements/settingsNavigation.tpl' %}
{% include 'elements/settingsNavigation.tpl' %}
<div class="platform">
<h1 class="sectionHead">
{{ page.category }} / {{ page.mode }}
</h1>
<div class="settings-explanation">
{% for descline in page.description %}
<div>{{ include(template_from_string(descline)) }}</div>
{% endfor %}
</div>
<div class="content-left content-column">
<h1 class="sectionHead">
{{ page.category }} / {{ page.mode }}
</h1>
<div class="settings-explanation">
{% for descline in page.description %}
<div>{{ include(template_from_string(descline)) }}</div>
{% endfor %}
</div>
{% include 'settings/' ~ current ~ '.tpl' %}
</div>
<div class="clear"></div>
{% include 'settings/' ~ current ~ '.tpl' %}
</div>
{% endblock %}

156
public/content/data/misaki/css/misaki.css
View file

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

28
public/content/data/misaki/js/misaki.js
View file

@ -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;
}
});