data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix z-index on profile

Browse source
This commit is contained in:
Nolan Lawson 2018-01-28 14:17:37 -08:00
parent 8d5eadf734
commit 3896717c8c
1 changed files with 34 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
routes/_components/AccountProfile.html
View file

@ -1,32 +1,34 @@
<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});"> <div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});">
<div class="account-profile-grid"> <div class="account-profile-grid-wrapper">
<div class="account-profile-avatar"> <div class="account-profile-backdrop"></div>
<img src="{{profile.avatar}}" aria-hidden="true"> <div class="account-profile-grid">
</div> <div class="account-profile-avatar">
<div class="account-profile-name"> <img src="{{profile.avatar}}" aria-hidden="true">
{{profile.display_name}} </div>
</div> <div class="account-profile-name">
<div class="account-profile-followed-by"> {{profile.display_name}}
{{#if relationship && relationship.followed_by}} </div>
<span> <div class="account-profile-followed-by">
Follows you {{#if relationship && relationship.followed_by}}
</span> <span>
{{/if}} Follows you
</div> </span>
<div class="account-profile-follow"> {{/if}}
{{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}} </div>
<IconButton <div class="account-profile-follow">
label="{{relationship && relationship.following ? 'Unfollow' : 'Follow'}}" {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
href="{{relationship && relationship.following ? '#fa-user-times' : '#fa-user-plus'}}" <IconButton
big="true" label="{{relationship && relationship.following ? 'Unfollow' : 'Follow'}}"
/> href="{{relationship && relationship.following ? '#fa-user-times' : '#fa-user-plus'}}"
{{/if}} big="true"
</div> />
<div class="account-profile-note"> {{/if}}
{{{profile.note}}} </div>
<div class="account-profile-note">
{{{profile.note}}}
</div>
</div> </div>
</div> </div>
<div class="account-profile-background"></div>
</div> </div>
<style> <style>
.account-profile { .account-profile {
@ -41,7 +43,7 @@
background-color: #ccc; background-color: #ccc;
} }
.account-profile-background { .account-profile-backdrop {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -59,10 +61,12 @@
grid-row-gap: 2px; grid-row-gap: 2px;
padding: 10px; padding: 10px;
justify-content: center; justify-content: center;
z-index: 10;
position: relative;
} }
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) { @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
:global(.account-profile-grid) { :global(.account-profile-grid-wrapper) {
-webkit-backdrop-filter: blur(7px) saturate(110%); -webkit-backdrop-filter: blur(7px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%); backdrop-filter: blur(7px) saturate(110%);
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
@ -70,13 +74,12 @@
} }
@supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) { @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
:global(.account-profile-grid) { :global(.account-profile-grid-wrapper) {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
} }
.account-profile-followed-by, .account-profile-avatar, .account-profile-follow, .account-profile-grid {
.account-profile-name, .account-profile-username, .account-profile-note {
z-index: 10; z-index: 10;
} }