mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
75 lines
2.9 KiB
HTML
75 lines
2.9 KiB
HTML
|
---
|
||
|
|
layout: default
|
||
|
|
title: Popovers · Ghost UI
|
||
|
|
---
|
||
|
|
|
||
|
|
<header class="page-header">
|
||
|
|
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||
|
|
<h2>Popovers</h2>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="page-content" style="padding: 5%; text-align: center;">
|
||
|
|
|
||
|
|
<h1>Popovers</h1>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="popover-item popover-triangle-bottom">
|
||
|
|
<div class="popover-title">URL Structure Formatting</div>
|
||
|
|
<div class="popover-desc">You can use dynamic variables in this field.</div>
|
||
|
|
<div class="popover-body">
|
||
|
|
<p>
|
||
|
|
<b>%t</b> - The title of your post (or page)<br>
|
||
|
|
<b>%c</b> - The tag which your post is categorised in<br>
|
||
|
|
<b>%y</b> - The year your post was published<br>
|
||
|
|
<b>%m</b> - The month your post was published<br>
|
||
|
|
<b>%d</b> - The day your post was published
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
{% assign popover_classes = "popover-triangle-top|popover-triangle-top-left|popover-triangle-top-right|popover-triangle-bottom|popover-triangle-bottom-left|popover-triangle-bottom-right|popover-triangle-right|popover-triangle-right-top|popover-triangle-right-bottom|popover-triangle-left|popover-triangle-left-top|popover-triangle-left-bottom" | split: "|" %}
|
||
|
|
{% for item in popover_classes %}
|
||
|
|
<div class="popover">
|
||
|
|
<span class="label label-default hover-me">{{item}}</span>
|
||
|
|
<div class="popover-item closed {{item}}">
|
||
|
|
<div class="popover-title">URL Structure Formatting</div>
|
||
|
|
<div class="popover-desc">You can use dynamic variables in this field.</div>
|
||
|
|
<div class="popover-body">
|
||
|
|
<p>
|
||
|
|
<b>%t</b> - The title of your post (or page)<br>
|
||
|
|
<b>%c</b> - The tag which your post is categorised in<br>
|
||
|
|
<b>%y</b> - The year your post was published<br>
|
||
|
|
<b>%m</b> - The month your post was published<br>
|
||
|
|
<b>%d</b> - The day your post was published
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br><br>
|
||
|
|
{% endfor %}
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
$(".hover-me").hover(function(){
|
||
|
|
$(this).next(".popover-item").addClass("open fade-in").removeClass("closed fade-out");
|
||
|
|
}, function(){
|
||
|
|
$(this).next(".popover-item").removeClass("fade-in").addClass("fade-out");
|
||
|
|
$(this).next(".popover-item").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
|
||
|
|
if (event.originalEvent.animationName === 'fade-out') {
|
||
|
|
$(this).removeClass("open fade-out").addClass("closed");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|