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

commented code for potential scrolling profile header

Browse source
This commit is contained in:
flash 2015-10-30 19:23:27 +01:00
parent e7b6f626b7
commit f7433beba6
2 changed files with 71 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,17 +10,53 @@
{% block css %} {% block css %}
<style type="text/css"> <style type="text/css">
.profileHeader { #profileHeader {
background-image: linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .7) 30%, background-image: linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .7) 30%,
transparent 76%, transparent 100%), url('{{ urls.format('IMAGE_HEADER', [profile.data.user_id]) }}'); transparent 76%, transparent 100%), url('{{ urls.format('IMAGE_HEADER', [profile.data.user_id]) }}');
} }
</style> </style>
{% endblock %} {% endblock %}
{# block js %}
<script type="text/javascript">
// Header
window.addEventListener("scroll", function(e) {
if(e.pageY > 244) {
var profileHeader = document.getElementById('profileHeader');
var profileContent = document.getElementById('profileContent');
var userAvatar = document.getElementById('userAvatar');
profileHeader.style.position = 'fixed';
profileHeader.style.paddingTop = '30px';
profileHeader.style.top = '0';
profileHeader.style.maxWidth = '1018px';
profileHeader.style.height = '100px';
profileContent.style.marginTop = '264px';
userAvatar.style.height = '80px';
userAvatar.style.width = '80px';
userAvatar.style.margin = '10px';
userAvatar.style.transition = '.2s';
} else {
var profileHeader = document.getElementById('profileHeader');
var profileContent = document.getElementById('profileContent');
var userAvatar = document.getElementById('userAvatar');
profileHeader.style.position = null;
profileHeader.style.paddingTop = null;
profileHeader.style.top = null;
profileHeader.style.maxWidth = null;
profileHeader.style.height = null;
profileContent.style.marginTop = null;
userAvatar.style.height = null;
userAvatar.style.width = null;
userAvatar.style.margin = null;
}
});
</script>
{% endblock #}
{% block content %} {% block content %}
<div class="profile" id="u{{ profile.data.user_id }}"> <div class="profile" id="u{{ profile.data.user_id }}">
<div class="profileHeaderContent profileHeader"> <div class="profileHeaderContent" id="profileHeader">
<div class="userAvatar" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [profile.data.user_id]) }}');">{{ profile.data.username }}'s Avatar</div> <div id="userAvatar" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [profile.data.user_id]) }}');">{{ profile.data.username }}'s Avatar</div>
<div class="userData"> <div class="userData">
<div class="headerLeft"> <div class="headerLeft">
<div class="profileUsername" style="color: {{ profile.colour }};"{% if profile.getUsernameHistory %} title="Known as {{ profile.getUsernameHistory[0]['username_old'] }} before {{ profile.getUsernameHistory[0]['change_time']|date(sakura.dateFormat) }}."{% endif %}> <div class="profileUsername" style="color: {{ profile.colour }};"{% if profile.getUsernameHistory %} title="Known as {{ profile.getUsernameHistory[0]['username_old'] }} before {{ profile.getUsernameHistory[0]['change_time']|date(sakura.dateFormat) }}."{% endif %}>
@ -38,7 +74,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="profileContainer profileContent"> <div class="profileContainer" id="profileContent">
<div class="userDataBar"> <div class="userDataBar">
{% if not profileHidden and (profile.checkPremium[0] or profile.checkPermission('MANAGE', 'USE_MANAGE')) %} {% if not profileHidden and (profile.checkPremium[0] or profile.checkPermission('MANAGE', 'USE_MANAGE')) %}
<div class="profilePlatform hierarchyContainer"> <div class="profilePlatform hierarchyContainer">

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

@ -429,14 +429,14 @@ a:active {
color: inherit; color: inherit;
} }
.profile > .profileHeader { #profileHeader {
height: 250px; height: 250px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.profile > .profileHeader > .userAvatar { #userAvatar {
font-size: 0; font-size: 0;
background: transparent no-repeat scroll left center / cover; background: transparent no-repeat scroll left center / cover;
height: 200px; height: 200px;
@ -448,7 +448,7 @@ a:active {
flex-shrink: 0; flex-shrink: 0;
} }
.profile > .profileHeader > .userData { #profileHeader > .userData {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -456,41 +456,41 @@ a:active {
width: 100%; width: 100%;
} }
.profile > .profileHeader > .userData > .headerLeft { #profileHeader > .userData > .headerLeft {
flex-grow: 1; flex-grow: 1;
} }
.profile > .profileHeader > .userData > .headerLeft > .profileUsername { #profileHeader > .userData > .headerLeft > .profileUsername {
font-size: 3em; font-size: 3em;
line-height: .8em; line-height: .8em;
} }
.profile > .profileHeader > .userData > .headerLeft > .profileUserTitle { #profileHeader > .userData > .headerLeft > .profileUserTitle {
padding-left: 12px; padding-left: 12px;
} }
.profile > .profileHeader > .userData > .headerRight { #profileHeader > .userData > .headerRight {
text-align: right; text-align: right;
padding-right: 12px; padding-right: 12px;
} }
.profile > .profileContent { #profileContent {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
} }
.profile > .profileContent > .userDataBar { #profileContent > .userDataBar {
width: 210px; width: 210px;
margin-top: 10px; margin-top: 10px;
flex-shrink: 0; flex-shrink: 0;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies {
list-style: none; list-style: none;
font-size: 2.5em; font-size: 2.5em;
line-height: 1.2em; line-height: 1.2em;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > li:before { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > li:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
width: 36px; width: 36px;
padding-right: 3px; padding-right: 3px;
@ -500,83 +500,83 @@ a:active {
text-shadow: 0 0 3px #fcfcfc; text-shadow: 0 0 3px #fcfcfc;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .tenshi { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .tenshi {
color: #ee9400; color: #ee9400;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .tenshi:before { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .tenshi:before {
content: "\f004"; content: "\f004";
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .staff { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .staff {
color: #09f; color: #09f;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .staff:before { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .staff:before {
content: "\f0e3"; content: "\f0e3";
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .developer { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .developer {
color: #824ca0; color: #824ca0;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .developer:before { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .developer:before {
content: "\f121"; content: "\f121";
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .alumnii { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .alumnii {
color: #ff69b4; color: #ff69b4;
} }
.profile > .profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .alumnii:before { #profileContent > .userDataBar > .hierarchyContainer > .inner > .hierarchies > .alumnii:before {
content: "\f005"; content: "\f005";
} }
.profile > .profileContent > .userDataBar > .userAccounts a { #profileContent > .userDataBar > .userAccounts a {
color: inherit; color: inherit;
} }
.profile > .profileContent > .userDataBar > .userAccounts > .inner > .field > div:nth-child(1) { #profileContent > .userDataBar > .userAccounts > .inner > .field > div:nth-child(1) {
float: left; float: left;
font-weight: bold; font-weight: bold;
} }
.profile > .profileContent > .userDataBar > .userAccounts > .inner > .field > div:nth-child(2) { #profileContent > .userDataBar > .userAccounts > .inner > .field > div:nth-child(2) {
float: right; float: right;
} }
.profile > .profileContent > .userDataBar > .userAccounts > .inner > .noAccounts > .fa { #profileContent > .userDataBar > .userAccounts > .inner > .noAccounts > .fa {
font-size: 3em; font-size: 3em;
} }
.profile > .profileContent > .userDataBar > .userAccounts > .inner > .noAccounts { #profileContent > .userDataBar > .userAccounts > .inner > .noAccounts {
font-size: 1.5em; font-size: 1.5em;
line-height: 1em; line-height: 1em;
text-align: center; text-align: center;
} }
.profile > .profileContent > .userDataBar > .accountStanding > .inner > .title { #profileContent > .userDataBar > .accountStanding > .inner > .title {
font-size: 1.5em; font-size: 1.5em;
line-height: 1em; line-height: 1em;
font-weight: bold; font-weight: bold;
} }
.profile > .profileContent > .userDataBar > .accountStanding > .inner > .standing { #profileContent > .userDataBar > .accountStanding > .inner > .standing {
font-size: 2.5em; font-size: 2.5em;
line-height: 1.5em; line-height: 1.5em;
text-align: center; text-align: center;
} }
.profile > .profileContent > .profileMain { #profileContent > .profileMain {
width: 100%; width: 100%;
} }
.profile > .profileContent > .profileMain > .statsRow { #profileContent > .profileMain > .statsRow {
width: 100%; width: 100%;
display: flex; display: flex;
} }
.profile > .profileContent > .profileMain > .statsRow > div { #profileContent > .profileMain > .statsRow > div {
font-size: 2.5em; font-size: 2.5em;
line-height: 1em; line-height: 1em;
flex-basis: 0; flex-basis: 0;
@ -584,11 +584,11 @@ a:active {
flex-shrink: 0; flex-shrink: 0;
} }
.profile > .profileContent > .profileMain > .statsRow .inner > .count { #profileContent > .profileMain > .statsRow .inner > .count {
float: right; float: right;
} }
.profile > .profileContent > .profileMain > .statsRow .inner a { #profileContent > .profileMain > .statsRow .inner a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }