Small refactor of multi-authors

This commit is contained in:
John O'Nolan 2018-04-12 10:05:40 +02:00
parent 98e9c12018
commit 6e3399366d
5 changed files with 65 additions and 142 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -455,38 +455,13 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-meta { .post-card-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-end;
padding: 0 25px 25px; padding: 0 25px 25px;
} }
.profile-image-wrapper,
.avatar-wrapper {
position: absolute;
display: inline-block;
width: 28px;
}
.avatar-wrapper {
display: inline-block;
box-sizing: content-box;
margin-right: 3px;
border: 2px solid #fff;
text-align: center;
background-color: color(var(--lightgrey) l(+10%));
border-radius: 100%;
}
.avatar-wrapper svg {
width: 28px;
height: 28px;
}
.author-profile-image { .author-profile-image {
box-sizing: content-box; display: block;
margin-right: 5px; background: color(var(--lightgrey) l(+10%));
width: 28px;
height: 28px;
border: 2px solid #fff;
border-radius: 100%; border-radius: 100%;
object-fit: cover; object-fit: cover;
@ -499,75 +474,61 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.author-list { .author-list {
display: flex; display: flex;
margin-bottom: 0; flex-wrap: wrap-reverse;
margin: 0;
padding: 0; padding: 0;
max-width: calc(100% - 120px); list-style: none;
list-style-type: none;
} }
.author-list-item { .author-list-item {
flex-shrink: 0;
position: relative; position: relative;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 25px; }
.author-list-item:nth-child(1) { z-index: 10; }
.author-list-item:nth-child(2) { z-index: 9; }
.author-list-item:nth-child(3) { z-index: 8; }
.author-list-item:nth-child(4) { z-index: 7; }
.author-list-item:nth-child(5) { z-index: 6; }
.author-list-item:nth-child(6) { z-index: 5; }
.author-list-item:nth-child(7) { z-index: 4; }
.author-list-item:nth-child(8) { z-index: 3; }
.author-list-item:nth-child(9) { z-index: 2; }
.author-list-item:nth-child(10) { z-index: 1; }
.static-avatar {
display: block;
height: 34px;
width: 34px;
border: #fff 2px solid;
margin: 0 -5px;
border-radius: 100%;
overflow: hidden;
} }
.moving-avatar { .moving-avatar {
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); display: block;
transform: translate(0px); height: 56px;
width: 56px;
border: #fff 2px solid;
margin: 0 -6px;
border-radius: 100%;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
} }
.moving-avatar.right { @media (min-width: 800px) {
transform: translateX(10px); .author-list:hover .moving-avatar {
margin: 0;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
} }
.moving-avatar.left {
transform: translateX(-10px);
}
.author-list-item:nth-child( 1 ) {
z-index: 9;
}
.author-list-item:nth-child( 2 ) {
z-index: 8;
}
.author-list-item:nth-child( 3 ) {
z-index: 7;
}
.author-list-item:nth-child( 4 ) {
z-index: 6;
}
.author-list-item:nth-child( 5 ) {
z-index: 5;
}
.author-list-item:nth-child( 6 ) {
z-index: 4;
}
.author-list-item:nth-child( 7 ) {
z-index: 3;
}
.author-list-item:nth-child( 8 ) {
z-index: 2;
}
.author-list-item:nth-child( 9 ) {
z-index: 1;
}
.z-999 {
z-index: 999;
} }
.author-name-tooltip { .author-name-tooltip {
position: absolute; position: absolute;
bottom: 36px; bottom: 105%;
z-index: 999; z-index: 999;
display: block; display: block;
padding: 2px 8px; padding: 2px 8px;
@ -596,8 +557,11 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.reading-time { .reading-time {
flex-shrink: 0;
margin-left: 20px;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.2rem; font-size: 1.2rem;
line-height: 33px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
@ -1292,6 +1256,10 @@ Usage (In Ghost editor):
.author-card { .author-card {
display: flex; display: flex;
align-items: center; align-items: center;
.author-card .author-profile-image {
margin-right: 15px;
width: 60px;
height: 60px;
} }
.author-card-name { .author-card-name {
@ -1369,27 +1337,9 @@ Usage (In Ghost editor):
text-transform: uppercase; text-transform: uppercase;
} }
.post-full-footer .author-list-item { .post-full-footer .author-list {
width: 42px; justify-content: center;
} padding: 10px 20px;
@media (max-width: 650px) {
.post-full-footer .author-list-item {
width: 54px;
height: 54px;
}
}
.post-full-footer .author-list-item > a {
position: absolute;
display: inline-block;
width: 48px;
}
.post-full-footer .author-profile-image,
.post-full-footer .avatar-wrapper {
width: 48px;
height: 48px;
} }
.author-card .author-profile-image, .author-card .author-profile-image,
@ -1398,18 +1348,14 @@ Usage (In Ghost editor):
position: relative; position: relative;
} }
.post-full-footer .avatar-wrapper svg {
width: 46px;
height: 46px;
}
.author-list-item .author-card { .author-list-item .author-card {
position: absolute; position: absolute;
bottom: 12px; bottom: 130%;
left: calc(-160px + 28px); left: 50%;
z-index: 999; z-index: 300;
display: block; display: block;
width: 320px; width: 320px;
margin-left: -160px;
font-size: 1.4rem; font-size: 1.4rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
background: white; background: white;
@ -1417,7 +1363,7 @@ Usage (In Ghost editor):
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px; box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
opacity: 0; opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: scale(0.98) translateY(10px); transform: scale(0.98) translateY(15px);
pointer-events: none; pointer-events: none;
} }
@ -1425,10 +1371,11 @@ Usage (In Ghost editor):
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: calc(160px - 20px + 6px); left: 50%;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
margin-left: -12px;
border-top: 12px solid #fff; border-top: 12px solid #fff;
border-right: 12px solid transparent; border-right: 12px solid transparent;
border-left: 12px solid transparent; border-left: 12px solid transparent;

View File

@ -14,7 +14,7 @@
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}} {{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span> <div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}} {{/if}}
<h2>{{name}}</h2> <h2>{{name}}</h2>
</div> </div>
@ -31,7 +31,7 @@
{{#if profile_image}} {{#if profile_image}}
<a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a> <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
{{else}} {{else}}
<a href="{{url}}" class="moving-avatar"><span class="avatar-wrapper">{{> "icons/avatar"}}</span></a> <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/if}}
</li> </li>
@ -50,27 +50,6 @@
$(document).ready(function () { $(document).ready(function () {
var hoverTimeout; var hoverTimeout;
var direction = 'left';
$('.author-list-item:first-child').addClass('first-child');
function makeSpaceForAvatar(avatar) {
if (avatar.hasClass('first-child')) {
return;
}
$('.author-list-item').each(function(i, obj) {
if ($(this)[0] != avatar[0]) {
if (Number($(this).css('z-index')) > Number(avatar.css('z-index'))) {
$(this).children('.moving-avatar').addClass('left');
} else {
$(this).children('.moving-avatar').addClass('right');
}
}
});
}
$('.author-list-item').hover(function(){ $('.author-list-item').hover(function(){
var $this = $(this); var $this = $(this);
@ -80,12 +59,9 @@ $(document).ready(function () {
$('.author-card').removeClass('hovered'); $('.author-card').removeClass('hovered');
$(this).children('.author-card').addClass('hovered'); $(this).children('.author-card').addClass('hovered');
makeSpaceForAvatar($this);
}, function() { }, function() {
var $this = $(this); var $this = $(this);
$('.author-list-item').children('.moving-avatar').removeClass('left right');
hoverTimeout = setTimeout(function() { hoverTimeout = setTimeout(function() {
$this.children('.author-card').removeClass('hovered'); $this.children('.author-card').removeClass('hovered');
}, 800); }, 800);

View File

@ -27,9 +27,9 @@
</div> </div>
{{#if profile_image}} {{#if profile_image}}
<span class="profile-image-wrapper"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></span> <a href="{{url}}" class="static-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
{{else}} {{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span> <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/if}}
</li> </li>
{{/foreach}} {{/foreach}}