Improve contact mentions with hovercards.

package.json

@@ -15,15 +15,16 @@
         "babel-cli": "^6.18.0",
         "babel-core": "^6.21.0",
         "babel-loader": "^7.1.1",
-        "babel-preset-env": "^1.2.2",
+        "babel-preset-env": "^1.6.0",
         "babel-preset-es2015": "^6.18.0",
         "babel-preset-latest": "^6.16.0",
         "babel-runtime": "^6.20.0",
-        "dotenv-webpack": "^1.5.2",
-        "lint-staged": "^4.0.0",
+        "dotenv-webpack": "^1.5.3",
+        "lint-staged": "^4.0.1",
         "pre-commit": "^1.1.3",
+        "stylelint": "^7.13.0",
         "stylelint-config-standard": "^16.0.0",
-        "webpack": "^3.0.0"
+        "webpack": "^3.2.0"
     },
     "scripts": {
         "compress": "scripts/compress",

public/assets/css/app.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../resources/assets/sass/app.scss","../../../resources/assets/sass/layout.scss","../../../resources/assets/sass/styles.scss","../../../resources/assets/sass/pagination.scss","../../../resources/assets/sass/note-form.scss","../../../resources/assets/sass/mapbox.scss","../../../resources/assets/sass/contacts.scss","../../../resources/assets/sass/emoji.scss"],"names":[],"mappings":"AAIA,KACI,8BACA,AADA,sBACA,cAAe,CAClB,qBAKG,2BAAmB,AAAnB,kBAAmB,CACtB,KCVG,eACA,cACA,iBACA,kBACA,oBAAqB,CACxB,WAGG,iBAAkB,CACrB,SAGG,gBAAiB,CACpB,MAGG,oBACA,AADA,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,0BAAsB,AAAtB,qBAAsB,CACzB,eAGG,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,yBACA,AADA,sBACA,AADA,8BACA,gBAAiB,CACpB,UAGG,gBACA,WACA,eACA,4BAA6B,CAChC,cAGG,oBACA,AADA,oBACA,AADA,aACA,yBAAmB,AAAnB,sBAAmB,AAAnB,kBAAmB,CACtB,kBAGG,gBAAiB,CACpB,iBAGG,qBACA,WAAY,CACf,aAGG,eACA,yBAA0B,CAC7B,OAGG,eAAgB,CACnB,cAGG,eAAgB,CACnB,WAGG,eACA,cACA,iBAAkB,CACrB,sBAGG,cAAe,CAClB,sBAGG,iBACA,cAAe,CAClB,WAGG,kBACA,WACA,SACA,qBAAsB,CACzB,SAGG,kBACA,MACA,OACA,WACA,WAAY,CACf,KCxFG,6JAWc,CACjB,EAGG,qBACA,wBACA,UAAW,CACd,gBAGG,kBAAmB,CACtB,MAGG,WACA,UAAW,CACd,OAGG,iBACA,iBAAkB,CACrB,WAGG,kBAAmB,CACtB,UAGG,YACA,WAAY,CACf,YC1CG,WACA,YACA,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,yBACA,AADA,sBACA,AADA,8BACA,yBAAmB,AAAnB,sBAAmB,AAAnB,kBAAmB,CACtB,eAGG,oBAAqB,CACxB,SCVG,oBACA,AADA,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,0BAAsB,AAAtB,qBAAsB,CACzB,0BAGG,aACI,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,cAAe,CAClB,mBAGG,SAAU,CACb,CAGL,0BACI,mBACI,UAAW,CACd,4BAIG,UAAW,CACd,CAGL,eACI,UACA,oBACA,gBAAiB,CACpB,oDAIG,mBAAO,AAAP,WAAO,AAAP,MAAO,CACV,kBAGG,qBAAsB,CACzB,QAGG,mBAAoB,CACvB,aAGG,oBAAqB,CACxB,cAGG,WACA,SAAU,CACb,KCrDG,eACA,YAAa,CAChB,oBAGG,kBAAmB,CACtB,QAGG,y4HACA,wBACA,WACA,WAAY,CACf,UAGG,kBACA,MACA,OACA,iBACA,cAAe,CAClB,gBAGG,gBACA,gBAAiB,CACpB,SC1BG,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,eACA,6BAA8B,CACjC,aAGG,oBACA,YACA,YAAa,CAChB,sDCPG,iBAAkB,CACrB,gFAIG,kBACA,cACA,UACA,aACA,OACA,cACA,qBACA,yBACA,oBACA,4CACA,AADA,oCACA,yBACA,kCACA,WACA,cACA,0CAAkC,AAAlC,iCAAkC,CACrC,2BAGG,KACI,aACA,6BACA,wCACA,0BACA,8BAAkC,AAAlC,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,4CAAgD,AAAhD,mCAAgD,CAAA,CAIxD,AApBC,mBAGG,KACI,aACA,6BACA,wCACA,0BACA,8BAAkC,AAAlC,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,4CAAgD,AAAhD,mCAAgD,CAAA,CAIxD,aACI,kCACI,kCAAmC,CACtC,CAAA","file":"app.css"}
+{"version":3,"sources":["../../../resources/assets/sass/app.scss","../../../resources/assets/sass/layout.scss","../../../resources/assets/sass/styles.scss","../../../resources/assets/sass/pagination.scss","../../../resources/assets/sass/note-form.scss","../../../resources/assets/sass/mapbox.scss","../../../resources/assets/sass/contacts.scss","../../../resources/assets/sass/emoji.scss"],"names":[],"mappings":"AAIA,KACI,8BACA,AADA,sBACA,cAAe,CAClB,qBAKG,2BAAmB,AAAnB,kBAAmB,CACtB,KCVG,eACA,cACA,iBACA,kBACA,oBAAqB,CACxB,WAGG,iBAAkB,CACrB,SAGG,gBAAiB,CACpB,MAGG,oBACA,AADA,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,0BAAsB,AAAtB,qBAAsB,CACzB,eAGG,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,yBACA,AADA,sBACA,AADA,8BACA,gBAAiB,CACpB,UAGG,gBACA,WACA,eACA,4BAA6B,CAChC,cAGG,oBACA,AADA,oBACA,AADA,aACA,yBAAmB,AAAnB,sBAAmB,AAAnB,kBAAmB,CACtB,kBAGG,gBAAiB,CACpB,aAGG,iBAAkB,CACrB,qBAGG,kBACA,WAAY,CACf,wBAGG,YAAa,CAChB,8BAGG,eACA,uBACA,sBACA,kBACA,gBACA,WACA,UACA,WACA,2BAA4B,CAC/B,oBAGG,kBACA,SACA,WACA,WACA,YACA,mBAAoB,CACvB,wBAGG,aAAc,CACjB,qBAGG,aACA,eAAgB,CACnB,aAGG,eACA,yBAA0B,CAC7B,OAGG,eAAgB,CACnB,cAGG,eAAgB,CACnB,WAGG,eACA,cACA,iBAAkB,CACrB,sBAGG,cAAe,CAClB,sBAGG,iBACA,cAAe,CAClB,WAGG,kBACA,WACA,SACA,qBAAsB,CACzB,SAGG,kBACA,MACA,OACA,WACA,WAAY,CACf,KC9HG,6JAWc,CACjB,EAGG,qBACA,wBACA,UAAW,CACd,gBAGG,kBAAmB,CACtB,MAGG,WACA,UAAW,CACd,OAGG,iBACA,iBAAkB,CACrB,WAGG,kBAAmB,CACtB,UAGG,YACA,WAAY,CACf,YC1CG,WACA,YACA,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,yBACA,AADA,sBACA,AADA,8BACA,yBAAmB,AAAnB,sBAAmB,AAAnB,kBAAmB,CACtB,eAGG,oBAAqB,CACxB,SCVG,oBACA,AADA,oBACA,AADA,aACA,4BAAsB,AAAtB,6BAAsB,AAAtB,0BAAsB,AAAtB,qBAAsB,CACzB,0BAGG,aACI,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,cAAe,CAClB,mBAGG,SAAU,CACb,CAGL,0BACI,mBACI,UAAW,CACd,4BAIG,UAAW,CACd,CAGL,eACI,UACA,oBACA,gBAAiB,CACpB,oDAIG,mBAAO,AAAP,WAAO,AAAP,MAAO,CACV,kBAGG,qBAAsB,CACzB,QAGG,mBAAoB,CACvB,aAGG,oBAAqB,CACxB,cAGG,WACA,SAAU,CACb,KCrDG,eACA,YAAa,CAChB,oBAGG,kBAAmB,CACtB,QAGG,y4HACA,wBACA,WACA,WAAY,CACf,UAGG,kBACA,MACA,OACA,iBACA,cAAe,CAClB,gBAGG,gBACA,gBAAiB,CACpB,SC1BG,oBACA,AADA,oBACA,AADA,aACA,8BACA,AADA,6BACA,AADA,uBACA,AADA,mBACA,eACA,6BAA8B,CACjC,aAGG,oBACA,YACA,YAAa,CAChB,sDCPG,iBAAkB,CACrB,gFAIG,kBACA,cACA,UACA,aACA,OACA,cACA,qBACA,yBACA,oBACA,4CACA,AADA,oCACA,yBACA,kCACA,WACA,cACA,0CAAkC,AAAlC,iCAAkC,CACrC,2BAGG,KACI,aACA,6BACA,wCACA,0BACA,8BAAkC,AAAlC,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,4CAAgD,AAAhD,mCAAgD,CAAA,CAIxD,AApBC,mBAGG,KACI,aACA,6BACA,wCACA,0BACA,8BAAkC,AAAlC,qBAAkC,CAGtC,GACI,aACA,kCACA,yBACA,WACA,4CAAgD,AAAhD,mCAAgD,CAAA,CAIxD,aACI,kCACI,kCAAmC,CACtC,CAAA","file":"app.css"}

public/assets/img/social-icons/facebook.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#3b5998" height="512" rx="15%" width="512"/>
+<path d="m287 456v-299c0-21 6-35 35-35h38v-63c-7-1-29-3-55-3-54 0-91 33-91 94v306m143-254h-205v72h196" fill="#fff"/>
+</svg>

public/assets/img/social-icons/twitter.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#1da1f3" height="512" rx="15%" width="512"/>
+<path d="m456 133c-14 7-31 11-47 13 17-10 30-27 37-46-15 10-34 16-52 20-61-62-157-7-141 75-68-3-129-35-169-85-22 37-11 86 26 109-13 0-26-4-37-9 0 39 28 72 65 80-12 3-25 4-37 2 10 33 41 57 77 57-42 30-77 38-122 34 170 111 378-32 359-208 16-11 30-25 41-42z" fill="#fff"/>
+</svg>

resources/assets/sass/layout.scss

@@ -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 {

resources/views/templates/mini-hcard.blade.php

@@ -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>