jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Improve contact mentions with hovercards.

Browse source
This commit is contained in:
Jonny Barnes 2017-07-17 08:03:25 +01:00
parent 67bd721654
commit 7eb5ecae2d
20 changed files with 1469 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

44
resources/assets/sass/layout.scss vendored
View file

@ -44,9 +44,47 @@ body {
padding-left: 3px;
}
.mini-h-card img {
display: inline-block;
height: 1rem;
.mini-h-card {
position: relative;
}
.mini-h-card .p-name {
position: relative;
z-index: 100; /* we want this to still appear in the hovercard */
}
.mini-h-card .hovercard {
display: none;
}
.mini-h-card:hover .hovercard {
display: inline;
background-color: white;
border: solid 1px grey;
position: absolute;
min-width: 300px;
left: -10px;
top: -10px;
z-index: 50; /* less than p-name */
padding: 2rem 3rem 10px 10px;
}
.hovercard .u-photo {
position: absolute;
top: 10px;
right: 10px;
width: 3rem;
height: auto;
padding-bottom: 10px;
}
.hovercard .social-icon {
height: 0.8rem;
}
.hovercard a::before {
content: "\A";
white-space: pre;
}
body > .h-card {

9
resources/views/templates/mini-hcard.blade.php
View file

@ -1,8 +1 @@
<span class="u-category h-card">
<a class="mini-h-card u-url p-name" href="{{ $contact->homepage }}">
<img class="u-photo" alt="" src="{{ $contact->photo }}">
{!! $contact->name !!}
</a>
@if ($contact->facebook)<a class="u-url" href="https://www.facebook.com/{{ $contact->facebook }}"></a>@endif
@if ($contact->twitter)<a class="u-url" href="https://twitter.com/{{ $contact->twitter }}"></a>@endif
</span>
<span class="u-category h-card mini-h-card"><a class="u-url p-name" href="{{ $contact->homepage }}">{!! $contact->name !!}</a><span class="hovercard">@if ($contact->facebook)<a class="u-url" href="https://www.facebook.com/{{ $contact->facebook }}"><img class="social-icon" src="/assets/img/social-icons/facebook.svg"> {{ $contact->facebook_name ?: 'Facebook' }}</a>@endif @if ($contact->twitter)<a class="u-url" href="https://twitter.com/{{ $contact->twitter }}"><img class="social-icon" src="/assets/img/social-icons/twitter.svg"> {{ $contact->twitter }}</a><img class="u-photo" alt="" src="{{ $contact->photo }}">@endif</span></span>