Permalink
Browse files

Major bug fixes.

Changes
- CSS styling and hover effect on pagination.
- Fix: The posts on the tag pages are now visible
- Fix: Prevent altering the Browser History State when toggling the cover
- Fix: Back button how uses window.history.back
- Fix: Pagination is now visible
- Fix: Better route handling for cover on all pages.
- Fix: Tag pages now use masonry and scroll reveal.
- Fix: Images shown on posts are more adaptive depending on screen size.
- FIx: Blockquote styling
  • Loading branch information...
1 parent c1b5acc commit 9c92ac564b4f1a637783058a0f7f7c6afd500873 @kelyvin committed Mar 14, 2016
View
@@ -149,6 +149,18 @@ var profile_resume ='Software Engineer';
</script>
```
+### Tags Overlay
+
+To purpose of the tags overlay is to display a list of popular tags that you want your users to easily find and navigate to. You can continuously add to this list to create an "infinite" list of tags.
+
+Go to Ghost Admin panel → `Code Injection``Blog Header` and add:
+
+```html
+<script>
+var tag_names = ['code', 'career'];
+</script>
+```
+
### Colors
Edit the file `assets/scss/modules/_variables.scss`. Remember that before you deploy your changes to prod, it is necessary to compile the build to rebuild your new stylesheet, so keep running your gulp process in background.
Oops, something went wrong.
Oops, something went wrong.
@@ -5,7 +5,7 @@ $(function() {
openHash = "#open";
window.CaffeineTheme = CaffeineTheme = {
- version: "2.3.0",
+ version: "2.4.0",
search: {
container: function() {
return $("#results");
@@ -37,9 +37,15 @@ $(function() {
isOpen: function () {
return location.hash === openHash;
},
- getOpenHash: function() {
+ getOpenHashFragment: function() {
return openHash;
},
+ open: function() {
+ window.history.replaceState(null, null, openHash);
+ },
+ close: function() {
+ window.history.replaceState(null, null, "#");
+ },
readTime: function() {
var DateInDays;
DateInDays = function(selector) {
@@ -3,7 +3,6 @@
$(function() {
var _expandCover,
_isTagsOverlayOpen,
- _toggleLocation,
_toggleTagsOverlay,
_defaultLogoNavEvent,
$navHeader,
@@ -20,14 +19,12 @@ $(function() {
_expandCover = function() {
$cover.toggleClass("expanded");
- };
- // Toggles the current home page between the cover and the opened page
- _toggleLocation = function() {
- if (CaffeineTheme.isOpen()) {
- location.hash = "";
+ // Toggles the current page between the cover and the current page
+ if ($cover.hasClass("expanded")) {
+ CaffeineTheme.close();
} else {
- location.hash = CaffeineTheme.getOpenHash();
+ CaffeineTheme.open();
}
};
@@ -45,11 +42,11 @@ $(function() {
_defaultLogoNavEvent = function (event) {
event.preventDefault();
CaffeineTheme.showIndexPage();
+
if (_isTagsOverlayOpen()) {
_toggleTagsOverlay();
}
- _toggleLocation();
return _expandCover();
};
@@ -58,15 +55,12 @@ $(function() {
});
$(".nav-blog > a").click(function(event) {
- var isOpen = CaffeineTheme.isOpen();
-
if (CaffeineTheme.is("page", "home")) {
event.preventDefault();
- location.hash = CaffeineTheme.getOpenHash();
CaffeineTheme.showIndexPage();
// Only toggle the cover if it wasn't already open
- if (!isOpen) {
+ if (!CaffeineTheme.isOpen()) {
return _expandCover();
}
}
View
@@ -1,7 +1,7 @@
"use strict";
$(function() {
- var $posts = $(".page-index ol.posts"),
+ var $posts = $("ol.posts"),
cardName = ".card",
el;
@@ -26,20 +26,23 @@ $(function() {
$("#profile-resume").text(window.profile_resume);
}
+ // Dynamically generate tags in tags overlay
+ if (window.tag_names) {
+ for (var i = 0; i < window.tag_names.length; i++) {
+ var tag = window.tag_names[i],
+ link = "/tag/" + tag + "/" + CaffeineTheme.getOpenHashFragment();
+
+ $("<a>", {
+ "href": link,
+ "text": tag
+ }).appendTo("#popular-tags .tags");
+ }
+ }
+
if (CaffeineTheme.is("page", "home")) {
if (!CaffeineTheme.isOpen()) {
CaffeineTheme.hideIndexPage();
}
-
- // Sets up masonry effects
- if ($posts && $posts.masonry) {
- $posts.masonry({
- itemSelector: cardName,
- percentPosition: true
- });
- } else {
- $posts.find(cardName).css("width", "100%");
- }
}
if (CaffeineTheme.is("page", "post")) {
@@ -49,17 +52,28 @@ $(function() {
$(".content").fitVids();
}
+ // Sets up masonry effects
+ if ($posts && $posts.masonry) {
+ $posts.masonry({
+ itemSelector: cardName,
+ percentPosition: true
+ });
+ } else {
+ $posts.find(cardName).css("width", "100%");
+ }
+
$(window).load(function() {
if (CaffeineTheme.is("page", "home")) {
$(".blog-header").addClass("animated fade-in");
- $posts.addClass("animated fade-in");
+ }
+
+ $posts.addClass("animated fade-in");
- // Sets up scroll reveal effects
- if (window.ScrollReveal && $(cardName).length > 0) {
- window.sr = window.ScrollReveal().reveal(cardName);
- } else {
- $posts.css("visibility", "visible");
- }
+ // Sets up scroll reveal effects
+ if (window.ScrollReveal && $(cardName).length > 0) {
+ window.sr = window.ScrollReveal().reveal(cardName);
+ } else {
+ $posts.css("visibility", "visible");
}
});
});
@@ -121,6 +121,14 @@
}
}
+ .post-content {
+ p {
+ img {
+ width: 100%;
+ }
+ }
+ }
+
.nav-header {
&.nav-header-fixed {
position: absolute;
@@ -267,7 +275,7 @@
blockquote {
> p {
- margin: 32px -16px;
+ margin: 32px 10px;
}
}
}
@@ -46,11 +46,13 @@
margin-bottom: 0
}
- .social {
- li {
- a {
- color: $pre-hover-color;
- padding: 5px;
+ .post-header {
+ .social {
+ li {
+ a {
+ color: $pre-hover-color;
+ padding: 5px;
+ }
}
}
}
@@ -31,11 +31,11 @@
}
}
}
-}
-.posts.index {
- margin-right: 16px;
- margin-left: 16px;
- font-size: 12px;
- color: $gray-dark;
+ .index {
+ margin-right: 16px;
+ margin-left: 16px;
+ font-size: 12px;
+ color: $gray-dark;
+ }
}
@@ -104,7 +104,6 @@
p {
img {
- width: 100%;
margin: 24px auto;
text-align: center;
border-radius: $border-radius;
@@ -28,6 +28,7 @@
.tags {
a {
padding: 8px 14px;
+ margin: 0 3px;
font-size: 12px;
background-color: rgba($brown, .7);
View
@@ -6,5 +6,5 @@
{{> post-list-item }}
{{/foreach}}
</ol>
- {{pagination}}
-</div>
+</div>
+{{pagination}}
View
@@ -1,5 +1,5 @@
<header id="default-nav-header" class="nav-header nav-header-fixed animated">
- <a id="home-button" href="{{@blog.url}}/#open">
+ <a id="home-button" href="{{@blog.url}}">
{{#if @blog.logo}}
<img src="{{@blog.logo}}" alt="{{@blog.title}} avatar" class="avatar rounded hvr-buzz-out" />
{{else}}
@@ -1,9 +1,9 @@
<nav class="pagination" role="navigation">
{{#if prev}}
- <a rel="next" class="posts newer btn small" href="{{page_url prev}}#open"><i class="fa fa-arrow-left"></i> Newer Posts</a>
+ <a rel="next" class="newer btn small hvr-grow" href="{{page_url prev}}"><i class="fa fa-arrow-left"></i> Newer Posts</a>
{{/if}}
- <span class="posts index">Page {{page}} of {{pages}}</span>
+ <span class="index">Page {{page}} of {{pages}}</span>
{{#if next}}
- <a rel="prev" class="posts older btn small" href="{{page_url next}}#open">Older Posts <i class="fa fa-arrow-right"></i></a>
+ <a rel="prev" class="older btn small hvr-grow" href="{{page_url next}}">Older Posts <i class="fa fa-arrow-right"></i></a>
{{/if}}
</nav>
@@ -6,8 +6,5 @@ See https://github.com/TryGhost/Ghost/wiki/Tags-101#theming
<div id="popular-tags" class="tags-container">
<h2>Popular Tags</h2>
<div class="tags">
- <!-- List all popular tags here -->
- <a href="/tag/code/">Code</a>
- <a href="/tag/career/">Career</a>
</div>
</div>
@@ -13,7 +13,7 @@
<div class="meta">
<time datetime="{{date published_at format="MMMM DD, YYYY"}}">{{date published_at timeago="true"}}</time>
<span class="tags">{{tags prefix="on " separator=" "}}</span>
- - <a href="{{url}}#disqus_thread">Comments</a>
+ - <a href="{{url}}">Comments</a>
</div>
<div class="clear"></div>
</div>
View
@@ -5,7 +5,7 @@
<article class="{{post_class}}">
{{> material-cover}}
<div class="post-card animated fade-in">
- <a href="{{@blog.url}}/#open" title="Go back" class="hvr-grow">
+ <a href="javascript:window.history.back()" title="Go back" class="hvr-grow">
<div class="back-button">
<i class="fa fa-arrow-left"></i>
</div>

0 comments on commit 9c92ac5

Please sign in to comment.