♻️ toolptiped

This commit is contained in:
Van 2019-03-20 13:50:45 +08:00
parent 4d04c02872
commit 8c9b13c393
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
28 changed files with 42 additions and 191 deletions

File diff suppressed because one or more lines are too long

View File

@ -23,8 +23,6 @@
*/
@import "../../../scss/reset";
@import "../../../scss/function";
@import "../../../scss/tooltipped";
@import "../../../scss/comment";
@import "../../../scss/nprogress";
@import "icon";
@import "vditor/src/assets/scss/classic";

View File

@ -19,35 +19,35 @@
-->
<header class="header">
<div class="fn__flex-1">
<a href="${servePath}" rel="start" class="tooltipped__w tooltipped" aria-label="${blogTitle}">
<a href="${servePath}" rel="start" class="vditor-tooltipped__w vditor-tooltipped" aria-label="${blogTitle}">
<i class="icon__home"></i>
</a>
<#list pageNavigations as page>
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}"
class="tooltipped__w tooltipped" rel="section" aria-label="${page.pageTitle}">
class="vditor-tooltipped__w vditor-tooltipped" rel="section" aria-label="${page.pageTitle}">
<#if page.pageIcon != ''><img src="${page.pageIcon}"><#else>
<i class="icon__page"></i>
</#if>
</a>
</#list>
<a href="${servePath}/categories.html" rel="section" aria-label="${categoryLabel}" class="tooltipped tooltipped__w">
<a href="${servePath}/categories.html" rel="section" aria-label="${categoryLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__category"></i>
</a>
<a href="${servePath}/tags.html" rel="section" aria-label="${allTagsLabel}" class="tooltipped tooltipped__w">
<a href="${servePath}/tags.html" rel="section" aria-label="${allTagsLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__tags"></i>
</a>
<a href="${servePath}/archives.html" aria-label="${archiveLabel}" class="tooltipped tooltipped__w">
<a href="${servePath}/archives.html" aria-label="${archiveLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__inbox"></i>
</a>
<a rel="archive" href="${servePath}/links.html" aria-label="${linkLabel}" class="tooltipped tooltipped__w">
<a rel="archive" href="${servePath}/links.html" aria-label="${linkLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__link"></i>
</a>
<a href="${servePath}/search" class="tooltipped__w tooltipped" aria-label="${searchLabel}">
<a href="${servePath}/search" class="vditor-tooltipped__w vditor-tooltipped" aria-label="${searchLabel}">
<i class="icon__search"></i>
</a>
<a rel="alternate" href="${servePath}/rss.xml" rel="section" aria-label="RSS" class="tooltipped tooltipped__w">
<a rel="alternate" href="${servePath}/rss.xml" rel="section" aria-label="RSS" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__rss"></i>
</a>
</div>
@ -55,21 +55,21 @@
<div>
<#if isLoggedIn>
<a href="${servePath}/admin-index.do#main"
aria-label="${adminLabel}" class="tooltipped tooltipped__w">
aria-label="${adminLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__setting"></i>
</a>
<a href="${logoutURL}"
aria-label="${logoutLabel}" class="tooltipped tooltipped__w">
aria-label="${logoutLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__logout"></i>
</a>
<#else>
<a href="${servePath}/start"
aria-label="${startToUseLabel}" class="tooltipped tooltipped__w">
aria-label="${startToUseLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__login"></i>
</a>
</#if>
<span onclick="Util.goTop()"
aria-label="${putTopLabel}" class="tooltipped tooltipped__w">
aria-label="${putTopLabel}" class="vditor-tooltipped vditor-tooltipped__w">
<i class="icon__up"></i>
</span>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 B

View File

@ -47,9 +47,9 @@ var Skin = {
Util.initPjax(function () {
$('.header a').each(function () {
if (this.href === location.href) {
this.className = 'current tooltipped tooltipped__w'
this.className = 'current vditor-tooltipped vditor-tooltipped__w'
} else {
this.className = 'tooltipped tooltipped__w'
this.className = 'vditor-tooltipped vditor-tooltipped__w'
}
})
@ -58,11 +58,11 @@ var Skin = {
$('.header a').each(function () {
if (this.href === location.href) {
this.className = 'current tooltipped tooltipped__w'
this.className = 'current vditor-tooltipped vditor-tooltipped__w'
}
}).click(function () {
$('.header a').removeClass('current')
this.className = 'current tooltipped tooltipped__w'
this.className = 'current vditor-tooltipped vditor-tooltipped__w'
})
},
}

View File

@ -1 +1 @@
var Skin={initToc:function(){0<$(".b3-solo-list li").length&&768<$(window).width()?($(".b3-solo-list").css({right:"50px","border-right":"1px solid #fff",opacity:1}),$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"})):$("#pjax.wrapper").removeAttr("style")},init:function(){Skin.initToc(),Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current tooltipped tooltipped__w":this.className="tooltipped tooltipped__w"}),Skin.initToc()}),$(".header a").each(function(){this.href===location.href&&(this.className="current tooltipped tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current tooltipped tooltipped__w"})}};Skin.init();
var Skin={initToc:function(){0<$(".b3-solo-list li").length&&768<$(window).width()?($(".b3-solo-list").css({right:"50px","border-right":"1px solid #fff",opacity:1}),$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"})):$("#pjax.wrapper").removeAttr("style")},init:function(){Skin.initToc(),Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current vditor-tooltipped vditor-tooltipped__w":this.className="vditor-tooltipped vditor-tooltipped__w"}),Skin.initToc()}),$(".header a").each(function(){this.href===location.href&&(this.className="current vditor-tooltipped vditor-tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current vditor-tooltipped vditor-tooltipped__w"})}};Skin.init();

View File

@ -100,7 +100,7 @@
<a class="post__view" href="${servePath}${article.articlePermalink}">
${article.articleViewCount} ${viewLabel}</a>
<div class="fn-right">
<span class="pipe-tooltipped pipe-tooltipped--n post__share-icon ft-green"
<span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<svg>
@ -149,7 +149,7 @@
${article.articleViewCount} ${viewLabel}
</a>
<div class="fn-right">
<span class="pipe-tooltipped pipe-tooltipped--n post__share-icon ft-green"
<span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<svg>
@ -188,7 +188,7 @@
</div>
<div class="post__side">
<span class="pipe-tooltipped pipe-tooltipped--e post__share-icon ft-green"
<span class="vditor-tooltipped vditor-tooltipped__e post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<span class="ft-gray">${article.articleCommentCount}</span>

View File

@ -25,7 +25,7 @@
</div>
<div>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
<a class="tag vditor-tooltipped vditor-tooltipped__n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/category/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
@ -40,7 +40,7 @@
<div>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
class="tag vditor-tooltipped vditor-tooltipped__n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>

View File

@ -20,7 +20,7 @@
<div class="footer__tag wrapper">
<#if 0 != mostUsedCategories?size>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
<a class="tag vditor-tooltipped vditor-tooltipped__n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/category/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
@ -28,7 +28,7 @@
<#if 0 != mostUsedTags?size>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
class="tag vditor-tooltipped vditor-tooltipped__n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>

File diff suppressed because one or more lines are too long

View File

@ -73,149 +73,6 @@
color: #018f69 !important
}
.pipe-tooltipped {
position: relative;
cursor: pointer
}
.pipe-tooltipped::after {
position: absolute;
z-index: 1000;
display: none;
padding: 5px 8px;
font-size: 11px;
font-weight: normal;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
line-height: 16px;
opacity: 0
}
.pipe-tooltipped::before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent;
opacity: 0
}
@keyframes tooltip-appear {
from {
opacity: 0
}
to {
opacity: 1
}
}
.pipe-tooltipped:hover::before, .pipe-tooltipped:hover::after, .pipe-tooltipped:active::before, .pipe-tooltipped:active::after, .pipe-tooltipped:focus::before, .pipe-tooltipped:focus::after {
display: inline-block;
text-decoration: none;
animation-name: tooltip-appear;
animation-duration: 0.1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: 0.4s
}
.pipe-tooltipped--s::after, .pipe-tooltipped--se::after, .pipe-tooltipped--sw::after {
top: 100%;
right: 50%;
margin-top: 5px
}
.pipe-tooltipped--s::before, .pipe-tooltipped--se::before, .pipe-tooltipped--sw::before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.pipe-tooltipped--se::after {
right: auto;
left: 50%;
margin-left: -15px
}
.pipe-tooltipped--sw::after {
margin-right: -15px
}
.pipe-tooltipped--n::after, .pipe-tooltipped--ne::after, .pipe-tooltipped--nw::after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.pipe-tooltipped--n::before, .pipe-tooltipped--ne::before, .pipe-tooltipped--nw::before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.pipe-tooltipped--ne::after {
right: auto;
left: 50%;
margin-left: -15px
}
.pipe-tooltipped--nw::after {
margin-right: -15px
}
.pipe-tooltipped--s::after, .pipe-tooltipped--n::after {
transform: translateX(50%)
}
.pipe-tooltipped--w::after {
right: 100%;
bottom: 50%;
margin-right: 5px;
transform: translateY(50%)
}
.pipe-tooltipped--w::before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.pipe-tooltipped--e::after {
bottom: 50%;
left: 100%;
margin-left: 5px;
transform: translateY(50%)
}
.pipe-tooltipped--e::before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tag {
background-color: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.68);

View File

@ -85,13 +85,13 @@
<div class="fn-right">
<a href="${servePath}/search" aria-label="${searchLabel}"
class="pipe-tooltipped pipe-tooltipped--w header__icon">
class="vditor-tooltipped vditor-tooltipped__w header__icon">
<svg>
<use xlink:href="#icon-search"></use>
</svg>
</a>
<#if isLoggedIn>
<a class="avatar pipe-tooltipped pipe-tooltipped--w header__icon" aria-label="${adminLabel}"
<a class="avatar vditor-tooltipped vditor-tooltipped__w header__icon" aria-label="${adminLabel}"
href="${servePath}/admin-index.do#main"
style="background-image: url(${adminUser.userAvatar});"></a>
<#else>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 B

View File

@ -1 +1 @@
var goTop=function(e){e=e||.1;var a=$(window).scrollTop(),t=1+e;if(window.scrollTo(0,Math.floor(a/t)),0<a){var n="goTop("+e+")";window.setTimeout(n,16)}},collapseArchive=function(e,a){var t=!0;"collapse-ico"===e.className?(e.className="expand-ico",t=!1):e.className="collapse-ico",$("#archiveSide li").each(function(){$(this).data("year")===a&&(t?$(this).show():$(this).hide())})},getArticle=function(t,e){var n=$("#abstract"+e),i=$("#content"+e);return""===i.html()?$.ajax({url:"/get-article-content?id="+e,type:"GET",dataType:"html",beforeSend:function(){n.css("background","url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent")},success:function(e,a){t.className="collapse-ico",i.html(e),n.hide().css("background","none"),i.fadeIn("slow")}}):"expand-ico"===t.className?(n.hide(),i.fadeIn(),t.className="collapse-ico"):(i.hide(),n.fadeIn(),t.className="expand-ico"),!1},goTranslate=function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)};!function(){$(window).scroll(function(){var e=$(window).scrollTop();if(182<e){var a=$(window).height(),t=e+a-21;$("body").height()-58<=e+a&&(t=$(".footer").offset().top-21),$("#goTop").fadeIn("slow").css("top",t)}else $("#goTop").hide()});var t=(new Date).getFullYear(),n=t;$("#archiveSide li").each(function(e){var a=$(this);a.data("year")!==t&&$(this).hide(),n!==a.data("year")&&(n=a.data("year"),a.before("<li class='archive-year'><div onclick='collapseArchive(this, "+n+")' class='expand-ico'>"+n+"&nbsp;年</div></li>"))}),$(".recent-comments .expand-ico").click(function(){"expand-ico"===this.className?($(this).parent().next().css({height:"auto","white-space":"normal"}),this.className="collapse-ico"):($(this).parent().next().animate({height:"18px"},function(){$(this).css("white-space","nowrap")}),this.className="expand-ico")}),$(".nav ul li").each(function(){$(this).find("a").attr("href")===Label.servePath+location.pathname?$(this).addClass("current"):/\/[0-9]+$/.test(location.pathname)&&($(".nav ul li")[0].className="current")}),Util.setTopBar(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),$(".recent-comments .recent-comments-main").each(function(){$(this).find(".recent-comments-content>a").height()<30?$(this).find(".expand-ico").remove():$(this).find(".expand-ico").parent().next().css({"white-space":"nowrap"})})}();
var goTop=function(e){e=e||.1;var a=$(window).scrollTop(),t=1+e;if(window.scrollTo(0,Math.floor(a/t)),0<a){var n="goTop("+e+")";window.setTimeout(n,16)}},collapseArchive=function(e,a){var t=!0;"collapse-ico"===e.className?(e.className="expand-ico",t=!1):e.className="collapse-ico",$("#archiveSide li").each(function(){$(this).data("year")===a&&(t?$(this).show():$(this).hide())})},getArticle=function(t,e){var n=$("#abstract"+e),o=$("#content"+e);return""===o.html()?$.ajax({url:"/get-article-content?id="+e,type:"GET",dataType:"html",beforeSend:function(){n.css("background","url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent")},success:function(e,a){t.className="collapse-ico",o.html(e),n.hide().css("background","none"),o.fadeIn("slow")}}):"expand-ico"===t.className?(n.hide(),o.fadeIn(),t.className="collapse-ico"):(o.hide(),n.fadeIn(),t.className="expand-ico"),!1},goTranslate=function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)};$(document).ready(function(){$(window).scroll(function(){var e=$(window).scrollTop();if(182<e){var a=$(window).height(),t=e+a-21;$("body").height()-58<=e+a&&(t=$(".footer").offset().top-21),$("#goTop").fadeIn("slow").css("top",t)}else $("#goTop").hide()});var t=(new Date).getFullYear(),n=t;$("#archiveSide li").each(function(e){var a=$(this);a.data("year")!==t&&$(this).hide(),n!==a.data("year")&&(n=a.data("year"),a.before("<li class='archive-year'><div onclick='collapseArchive(this, "+n+")' class='expand-ico'>"+n+"&nbsp;年</div></li>"))}),$(".recent-comments .expand-ico").click(function(){"expand-ico"===this.className?($(this).parent().next().css({height:"auto","white-space":"normal"}),this.className="collapse-ico"):($(this).parent().next().animate({height:"18px"},function(){$(this).css("white-space","nowrap")}),this.className="expand-ico")}),$(".nav ul li").each(function(){$(this).find("a").attr("href")===Label.servePath+location.pathname?$(this).addClass("current"):/\/[0-9]+$/.test(location.pathname)&&($(".nav ul li")[0].className="current")}),Util.setTopBar(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),$(".recent-comments .recent-comments-main").each(function(){$(this).find(".recent-comments-content>a").height()<30?$(this).find(".expand-ico").remove():$(this).find(".expand-ico").parent().next().css({"white-space":"nowrap"})})});

View File

@ -134,20 +134,20 @@
<span class="post__arrow">
<#if previousArticlePermalink??>
<a href="${servePath}${previousArticlePermalink}" rel="prev"
class="tooltipped__n tooltipped"
class="vditor-tooltipped__n vditor-tooltipped"
pjax-title="${previousArticleTitle}"
aria-label="${previousArticleLabel}: ${previousArticleTitle}">←</a>
</#if>
<#if nextArticlePermalink??>
<a href="${servePath}${nextArticlePermalink}" rel="next"
class="tooltipped__n tooltipped"
class="vditor-tooltipped__n vditor-tooltipped"
pjax-title="${nextArticleTitle}"
aria-label="${nextArticleLabel}: ${nextArticleTitle}">→</a>
</#if>
<a href="javascript:Util.goTop()" class="tooltipped__n tooltipped"
<a href="javascript:Util.goTop()" class="vditor-tooltipped__n vditor-tooltipped"
aria-label="${goTopLabel}">↑</a>
<a href="javascript:Util.goBottom()" class="tooltipped__n tooltipped"
<a href="javascript:Util.goBottom()" class="vditor-tooltipped__n vditor-tooltipped"
aria-label="${goBottomLabel}">↓</a>
</span>
</div>

File diff suppressed because one or more lines are too long

View File

@ -23,8 +23,6 @@
*/
@import "../../../scss/reset";
@import "../../../scss/function";
@import "../../../scss/tooltipped";
@import "../../../scss/comment";
@import "../../../scss/nprogress";
@import "icon";
@import "vditor/src/assets/scss/classic";

View File

@ -47,7 +47,7 @@
<#list mostUsedCategories as category>
<a href="${servePath}/category/${category.categoryURI}"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
class="ft__link ft__nowrap tooltipped tooltipped__n">
class="ft__link ft__nowrap vditor-tooltipped vditor-tooltipped__n">
${category.categoryTitle}</a> &nbsp; &nbsp;
</#list>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 B

View File

@ -20,7 +20,7 @@
<div class="article-list">
<#list articles as article>
<article class="item <#if article_index &lt; 3>item--active</#if>">
<time class="tooltipped tooltipped__n item__date"
<time class="vditor-tooltipped vditor-tooltipped__n item__date"
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
${article.articleCreateDate?string("MM")}${monthLabel}
<span class="item__day">${article.articleCreateDate?string("dd")}</span>

View File

@ -56,7 +56,7 @@
<main id="articlePage">
<div class="article-list">
<div class="item item--active">
<time class="tooltipped tooltipped__n item__date"
<time class="vditor-tooltipped vditor-tooltipped__n item__date"
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
${article.articleCreateDate?string("MM")}${monthLabel}
<span class="item__day">${article.articleCreateDate?string("dd")}</span>

View File

@ -41,7 +41,7 @@
<i class="icon__category"></i>
${categoryLabel}
&nbsp; > &nbsp;
<span class="tooltipped tooltipped__w"
<span class="vditor-tooltipped vditor-tooltipped__w"
aria-label="${category.categoryDescription}">${category.categoryTitle}</span>
</div>
</div>

File diff suppressed because one or more lines are too long

View File

@ -23,8 +23,6 @@
*/
@import "../../../scss/reset";
@import "../../../scss/function";
@import "../../../scss/tooltipped";
@import "../../../scss/comment";
@import "../../../scss/nprogress";
@import "icon";
@import "vditor/src/assets/scss/classic";

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 B

View File

@ -54,7 +54,7 @@
<#list mostUsedCategories as category>
<a href="${servePath}/category/${category.categoryURI}"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
class="tag tooltipped tooltipped__n">
class="tag vditor-tooltipped vditor-tooltipped__n">
${category.categoryTitle}</a>
</#list>
</main>
@ -68,7 +68,7 @@
<#list mostUsedTags as tag>
<a rel="tag"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
class="tag tooltipped tooltipped__n"
class="tag vditor-tooltipped vditor-tooltipped__n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
${tag.tagTitle}</a>
</#list>

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 B