From 5201e8c3fb9a358ea22de601d6803be60989891c Mon Sep 17 00:00:00 2001 From: flashwave Date: Mon, 2 Nov 2015 21:00:27 +0100 Subject: [PATCH] big amount of indev stuff Signed-off-by: Flashwave --- .../misaki/elements/settingsNavigation.tpl | 4 +- .../templates/misaki/elements/statsHeader.tpl | 2 +- .../templates/misaki/global/information.tpl | 8 +- _sakura/templates/misaki/global/master.tpl | 74 ++++----- _sakura/templates/misaki/main/index.tpl | 2 +- _sakura/templates/misaki/main/infopage.tpl | 2 +- _sakura/templates/misaki/main/profile.tpl | 2 +- _sakura/templates/misaki/main/search.tpl | 30 ++-- _sakura/templates/misaki/main/settings.tpl | 25 ++- public/content/data/misaki/css/misaki.css | 156 ++++++++++++++---- public/content/data/misaki/js/misaki.js | 28 +--- 11 files changed, 198 insertions(+), 135 deletions(-) diff --git a/_sakura/templates/misaki/elements/settingsNavigation.tpl b/_sakura/templates/misaki/elements/settingsNavigation.tpl index 9c436bd..a849cbe 100755 --- a/_sakura/templates/misaki/elements/settingsNavigation.tpl +++ b/_sakura/templates/misaki/elements/settingsNavigation.tpl @@ -1 +1,3 @@ -

Go to Site Options

+
+

Go to Site Options

+
diff --git a/_sakura/templates/misaki/elements/statsHeader.tpl b/_sakura/templates/misaki/elements/statsHeader.tpl index ea821fc..c9d0960 100755 --- a/_sakura/templates/misaki/elements/statsHeader.tpl +++ b/_sakura/templates/misaki/elements/statsHeader.tpl @@ -1,4 +1,4 @@ -
+
diff --git a/_sakura/templates/misaki/global/information.tpl b/_sakura/templates/misaki/global/information.tpl index c4f76e2..96b93ef 100755 --- a/_sakura/templates/misaki/global/information.tpl +++ b/_sakura/templates/misaki/global/information.tpl @@ -3,7 +3,9 @@ {% block title %}Information{% endblock %} {% block content %} -

Information

- {{ page.message }} - {% if page.redirect %}
Click here if you aren't being redirected.{% endif %} +
+

Information

+ {{ page.message }} + {% if page.redirect %}
Click here if you aren't being redirected.{% endif %} +
{% endblock %} diff --git a/_sakura/templates/misaki/global/master.tpl b/_sakura/templates/misaki/global/master.tpl index f0350d1..ee3fbd9 100755 --- a/_sakura/templates/misaki/global/master.tpl +++ b/_sakura/templates/misaki/global/master.tpl @@ -76,55 +76,43 @@
-
{% 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) %}
{% endif %} +
- {% block content %} -
This template doesn't exist (yet)!
Switch back to Yuuno via the User Settings to view this page!
+
+
This template doesn't exist (yet)!
Switch back to Yuuno via the User Settings to view this page!
+
{% endblock %}
diff --git a/_sakura/templates/misaki/main/index.tpl b/_sakura/templates/misaki/main/index.tpl index 8cd847e..9abe8ec 100755 --- a/_sakura/templates/misaki/main/index.tpl +++ b/_sakura/templates/misaki/main/index.tpl @@ -3,7 +3,7 @@ {% block content %}
{% include 'elements/statsHeader.tpl' %} -
+
{% for post in news.getPosts(0, newsCount) %} {% include 'elements/newsPost.tpl' %} {% endfor %} diff --git a/_sakura/templates/misaki/main/infopage.tpl b/_sakura/templates/misaki/main/infopage.tpl index 96fcd81..2645c56 100755 --- a/_sakura/templates/misaki/main/infopage.tpl +++ b/_sakura/templates/misaki/main/infopage.tpl @@ -3,7 +3,7 @@ {% block title %}{% if page.title %}{{ page.title }}{% else %}Not found!{% endif %}{% endblock %} {% block content %} -
+
{{ page.content|raw }}
diff --git a/_sakura/templates/misaki/main/profile.tpl b/_sakura/templates/misaki/main/profile.tpl index e5cf687..59146f2 100755 --- a/_sakura/templates/misaki/main/profile.tpl +++ b/_sakura/templates/misaki/main/profile.tpl @@ -28,7 +28,7 @@ - - +
+

search

+ + + +
{% endblock %} diff --git a/_sakura/templates/misaki/main/settings.tpl b/_sakura/templates/misaki/main/settings.tpl index 16ee85d..e1e1df2 100755 --- a/_sakura/templates/misaki/main/settings.tpl +++ b/_sakura/templates/misaki/main/settings.tpl @@ -3,21 +3,16 @@ {% block title %}{{ page.category }} / {{ page.mode }}{% endblock %} {% block content %} -
-
- {% include 'elements/settingsNavigation.tpl' %} + {% include 'elements/settingsNavigation.tpl' %} +
+

+ {{ page.category }} / {{ page.mode }} +

+
+ {% for descline in page.description %} +
{{ include(template_from_string(descline)) }}
+ {% endfor %}
-
-

- {{ page.category }} / {{ page.mode }} -

-
- {% for descline in page.description %} -
{{ include(template_from_string(descline)) }}
- {% endfor %} -
- {% include 'settings/' ~ current ~ '.tpl' %} -
-
+ {% include 'settings/' ~ current ~ '.tpl' %}
{% endblock %} diff --git a/public/content/data/misaki/css/misaki.css b/public/content/data/misaki/css/misaki.css index 9b9d339..3706abe 100755 --- a/public/content/data/misaki/css/misaki.css +++ b/public/content/data/misaki/css/misaki.css @@ -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; } diff --git a/public/content/data/misaki/js/misaki.js b/public/content/data/misaki/js/misaki.js index eec4e0e..05d886f 100755 --- a/public/content/data/misaki/js/misaki.js +++ b/public/content/data/misaki/js/misaki.js @@ -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; } });