1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

icon tooltips

This commit is contained in:
Matthias Kretschmann 2015-12-02 00:19:46 +01:00
parent d99a4b93b0
commit 83d390dc1a
10 changed files with 106 additions and 14 deletions

View File

@ -1,3 +1,6 @@
//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.js
var Search = (function(w, d) {
var content = $('.site__content'),

View File

@ -0,0 +1,26 @@
//=require ../../../node_modules/bootstrap/js/tooltip.js
var Tooltips = (function(w, d) {
var app, _private;
_private = {
tooltipsShow: function() {
$('[data-toggle="tooltip"]').tooltip({
placement: 'bottom',
template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>',
container: 'body'
})
}
};
app = {
init: function() {
_private.tooltipsShow();
}
};
return app;
})(window, document);

View File

@ -3,13 +3,14 @@
//=require ../../../node_modules/svg4everybody/dist/svg4everybody.js
//=require ../../../node_modules/jquery/dist/jquery.js
//=require ../../../bower_components/time-elements/time-elements.js
//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.js
//
// include modules
//
//=include _menu.js
//=include _search.js
//=include _tooltips.js
(function($) {
@ -18,6 +19,7 @@
//
Menu.init();
Search.init();
Tooltips.init();
svg4everybody({
nosvg: false

View File

@ -43,6 +43,7 @@
@import 'header'
@import 'navigation'
@import 'search'
@import 'tooltips'
@import 'footer'
// Print

View File

@ -0,0 +1,52 @@
//
// kremalicious3
// --------------
// Tooltips
//
// Base class
.tooltip
position: absolute
z-index: 1000
display: block
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
font-family: $font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
font-size: $font-size-mini
opacity: 0
&.in
opacity: .8
&.top
margin-top: -1px
&.right
margin-left: 1px
&.bottom
margin-top: 1px
&.left
margin-left: -1px
// Wrapper for the tooltip content
.tooltip-inner
max-width: 120px
padding: 4px 8px
color: $tooltip-color
text-align: center
background-color: $tooltip-bg
border-radius: $border-radius-base

View File

@ -164,3 +164,10 @@ $breakpoint3 = 'only screen and (min-width: 87.500em)'
$highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
$highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '
// Tooltips
/////////////////////////////////////
$tooltip-color = #fff
$tooltip-bg = darken($brand-dark, 15%)

View File

@ -22,7 +22,7 @@
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
</a>
<a class="permalink-link" href="{{ post.url }}" rel="tooltip" title="Permalink">
<a class="permalink-link" href="{{ post.url }}" data-toggle="tooltip" title="Permalink">
<svg class="icon icon-entypo icon-entypo-infinity">
<use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use>
</svg>

View File

@ -12,7 +12,7 @@
</div>
<nav role="navigation" class="nav-main grid__col">
<button type="button" class="menu-btn">
<button type="button" class="menu-btn" data-toggle="tooltip" title="Menu">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
@ -21,7 +21,7 @@
</nav>
<section class="site-search">
<button type="button" class="search-btn">
<button type="button" class="search-btn" data-toggle="tooltip" title="Search">
<svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>

View File

@ -41,18 +41,18 @@
// Send initial pageview
ga('send', 'pageview');
}
// Track uncaught errors
window.onerror = function(message, url, line, col) {
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
+ col + ')';
// Track uncaught errors
window.onerror = function(message, url, line, col) {
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
+ col + ')';
ga('send', 'exception', {
exDescription: 'window.onerror: ' + desc,
exFatal: false
});
};
ga('send', 'exception', {
exDescription: 'window.onerror: ' + desc,
exFatal: false
});
};
}
}(window, navigator.doNotTrack || navigator.msDoNotTrack || null));
</script>

View File

@ -22,6 +22,7 @@
"webcomponents.js": ">=0.7.1"
},
"devDependencies": {
"bootstrap": "^3.3.6",
"browser-sync": ">=2.10.0",
"chalk": ">=1.0.0",
"concurrent-transform": ">=1.0.0",