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:
Pachira 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 %}
<style type="text/css">
.profileHeader {
#profileHeader {
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]) }}');
}
</style>
{% 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 %}
<div class="profile" id="u{{ profile.data.user_id }}">
<div class="profileHeaderContent profileHeader">
<div class="userAvatar" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [profile.data.user_id]) }}');">{{ profile.data.username }}'s Avatar</div>
<div class="profileHeaderContent" id="profileHeader">
<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="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 %}>
@ -38,7 +74,7 @@
</div>
</div>
</div>
<div class="profileContainer profileContent">
<div class="profileContainer" id="profileContent">
<div class="userDataBar">
{% if not profileHidden and (profile.checkPremium[0] or profile.checkPermission('MANAGE', 'USE_MANAGE')) %}
<div class="profilePlatform hierarchyContainer">

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

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