Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes and enhancements. [13] #1898

Merged
merged 57 commits into from
Sep 30, 2017
Merged

Fixes and enhancements. [13] #1898

merged 57 commits into from
Sep 30, 2017

Conversation

ivan-nginx
Copy link
Collaborator

@ivan-nginx ivan-nginx commented Sep 23, 2017

PART 1. Some small fixes & refactorings.

Files modified:

  1. MOD: move getContentHeight() to variable. 028fe60
    MOD: rename getContentHeight() to getContentVisibilityHeight(). 61086aa
  2. ADD: scrolling to active TOC if TOC > viewport. 619c49e
  3. FIX: sidebar with motion on Mist & Muse schemes. 9ce276f
  4. FIX: tabbed code block padding style. beb52f8 d433afd
  5. MOD: post more link margin-top refactor. 41ff452
  6. FIX: site state items padding for Pisces & Gemini. b9243d9
  7. Update readme. cc2deca 45d6254
  8. FIX: comments block only show if comments present. d8543f8 abb1424
  9. Update version to 5.1.3. 9c33832 3a2f34d 88c3904

Global code changes:

  • Add getContentVisibilityHeight() in utils.js.

What's this?

  1. Little trick to get #content visible height in js from anywhere.
  2. Scrolling to center active TOC selected element if TOC content is taller then viewport.
  3. Bugfix: sidebar not autovisible in posts if motion was disable on Muse & Mist schemes.
  4. On mobiles padding was 10px, but on desktop was 0. It's only about tabbed code block (when u input in *md tab or 4 spaces).
  5. For better look just changed top margin of post read more button.
  6. In Pisces or Gemini sidebar state items (Archives / Categories / Tags) was too wide padding if English or any «long-letters» language was used.
    Before:
    image
    After:
    image
  7. Add more NexT live demo examples & fix non-working links in forks.
  8. When comments wasn't defined, comments div block was appear and break styles in some schemes.
  9. Update NexT version to 5.1.3.

PART 2. Sidebar scrollable in all schemes.

  • For now all sidebars on all schemes are scrollable. It mean if sidebar content is taller then sidebar (viewport) height, user may scroll sidebar to see elements outside.
  • Add sidebar bottom alignment for Pisces & Gemini schemes (fix bottom jumping if sidebar taller then content).
  • Add motion appearance for sidebar in Pisces & Gemini.

Issue Number(s): #1888.

Files modified:

  1. ADD: sidebar scrollable in all schemes [1]. e75a2a1
  2. ADD: sidebar scrollable in all schemes [2]. 334e50e
  3. ADD: sidebar scrollable in all schemes [3]. 59209cf
  4. FIX: sidebar scrollable in all schemes [4]. a8344d8
  5. ADD: sidebar scrollable in all schemes [5]. af067cd
  6. ADD: sidebar scrollable in all schemes [6]. 65cb162
  7. ADD: sidebar scrollable in all schemes [7]. d23c0e0
  8. ADD: sidebar scrollable in all schemes [8]. 0f27b0c
  9. ADD: sidebar scrollable in all schemes [9]. fd91285
  10. ADD: sidebar scrollable in all schemes [10]. e3d06b2
  11. MOD: sidebar scrollable in all schemes [11]. cd92796
  12. FIX: sidebar scrollable in all schemes [12]. 77b5a30
  13. FIX: sidebar scrollable in all schemes [13]. dca0ff4
  14. ADD: sidebar scrollable in all schemes [14]. 920bd39
  15. FIX: sidebar scrollable in all schemes [15]. a0914e8
  16. FIX: sidebar scrollable in all schemes [16]. 267109c
  17. FIX: sidebar scrollable in all schemes [17]. 74c34c9
  18. FIX: sidebar scrollable in all schemes [18]. 42777af
  19. FIX: sidebar scrollable in all schemes [19]. 7083a9d
  20. FIX: sidebar scrollable in all schemes [20]. 1a6e24c
  21. FIX: sidebar scrollable in all schemes [21]. 22569da
  22. FIX: sidebar scrollable in all schemes [22]. 1280837
  23. FIX: sidebar scrollable in all schemes [23]. fa871de
  24. FIX: sidebar scrollable in all schemes [24]. 11c5d1c
  25. FIX: sidebar scrollable in all schemes [25]. 867fdbd
  26. FIX: sidebar scrollable in all schemes [26]. c2c2834

Global code changes:

  • Move initAffix() from post-details.js to pisces.js (to affix sidebar in Pisces | Gemini only).
    Remove unneeded anymore needAffix() from utils.js.
  • Add resizeListener() in pisces.js.
  • Add getSidebarSchemePadding() in utils.js.
  • Add .site-overview-wrap style in global sidebar.styl.
  • Remove offset_float from NexT _config.yml.
  • Move initTOCDimension() from post-details.js to utils.js (for init not only TOC, but Sidebar dimensions too).
    Rename initTOCDimension() into initSidebarDimension.
  • Add getSidebarb2tHeight() in utils.js.

How it looks?

image

image

image
image

Live demo here.

How to use?

In Next _config.yml:

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
- offset_float: 12

motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
+   # Only for Pisces | Gemini.
+   sidebar: slideUpIn

PART 3. Enhancements for Gemini scheme.

Some fixes and enhancements in Gemini scheme styles.

Pull Number(s): #1697 (PART 9. Add Gemini scheme).

Files modified:

  1. MOD: Enhancements to Gemini scheme [1]. 2f2e816
  2. ADD: Enhancements to Gemini scheme [2]. 3a1b4c0
  3. MOD: Enhancements to Gemini scheme [3]. 7226ad4
  4. MOD: Enhancements to Gemini scheme [4]. 87fa64e
  5. FIX: Enhancements to Gemini scheme [5]. 0ed5ec9
  6. ADD: Enhancements to Gemini scheme [6]. 00f7b64
  7. MOD: Enhancements to Gemini scheme [7]. 36a3e31
  8. MOD: Enhancements to Gemini scheme [8]. 7b41c6a

Global code changes:

source/css/_variables/base.styl:

  1. Add 2 variables for better layout adaptation:
    • $content-tablet-paddin = 10px
    • $content-mobile-padding = 8px

source/css/_schemes/Gemini/index.styl:

  1. Use 3 variables for better layout adaptation. U can see how to use inside they this file:
    // =================================================
    // Sidebar padding used as main desktop content padding for sidebar padding and post blocks padding too.
    
    // In main NexT config set `sidebar: offset: 12` option as main padding.
    // In `source/css/_variables/Gemini.styl` there are variables for other resolutions:
    // $content-tablet-paddin            = 10px;
    // $content-mobile-padding           = 8px;
    // P.S. If u want to change this paddings u may set this variables into `source/css/_variables/custom.styl`.
    
    // So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
    // =================================================
    // Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
    hexo-config('sidebar.offset') is a 'unit' ? (sboffset = unit(hexo-config('sidebar.offset'), px)) : (sboffset = 0)
  2. Add block style to comments.
  3. Add navigation items styles.
  4. Hide all possible delimiters.
  5. Add pagination styles.
  6. Add headers styles:
    • Inherit line-height for syncronize post titles in homepage and posts.
    • Add border-bottom on H2-H3 / H3-H4 (if seo) headers like on Github.
    • Font sizes in em values » autoadaptive for all resolutions.
  7. Add tablet & mobile basic styles. If need wider width may use mobile_style_economy option (may be used in schemes).
  8. Changed margin-bottom on margin-top in main blocks offsets & add siblings metod to detect blocks with offsets.
  9. Rewrited shadows in all blocks with offsets & added forgotten borders.
  10. Removed unused (commented) values.
  11. Used .post-body to filter <h> tags & refactored fonts sizes.

source/css/_common/scaffolding/mobile.styl:

  1. Move main wider width styles from +mobile() section to Gemini index.styl.
  2. Add .post-block with main margins & paddings.
  3. Add .post-nav (wich actually need to remake into flex style).
  4. Refactor some comments.
  5. Remove excess margin for better economy in all schemes.

How it looks?

mobile_layout_economy: false

image
image

mobile_layout_economy: true

image
image

Live demo here.

How to use?

In Next _config.yml:

mobile_layout_economy: false | true

PART 4. Responsive favicons options.

For now can set all of possible favicons wich geted by various devices.

Files modified:

  1. ADD: responsive favicons options [1]. 031244b
  2. FIX: responsive favicons options [2]. 685b0ee
  3. ADD: responsive favicons options [3]. f406902
  4. ADD: responsive favicons options [4]. 2ca6c06

How it looks?

image

Live demo here.

How to use?

  1. To get favicons visit: https://realfavicongenerator.net

  2. In Next _config.yml:

    Old configuration:

    -# Put your favicon.ico into `hexo-site/source/` directory.
    -favicon: /favicon.ico

    New configuration:

    # To get favicons visit: https://realfavicongenerator.net
    # Put your favicons into `hexo-site/source/` or `hexo-site/themes/next/source/images/` directory.
    # Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory.
    # And if you want to place your icons in `hexo-site/source/`, you must remove `/images` prefix from pathes.
    favicon:
      small: /images/favicon-16x16.png
      medium: /images/favicon-32x32.png
      apple_touch_icon: /images/apple-touch-icon.png
      safari_pinned_tab: /images/logo.svg
      #android_manifest: /images/manifest.json
      #ms_browserconfig: /images/browserconfig.xml

PART 5. Post custom copyright feature.

Added custom copyright on any post u want. If no custom author / url specified, will be used default values (config.author / post.permalink).

Issue Number(s): #1843, #1767, #1463, #1036.

Files modified:

  1. ADD: Post custom copyright feature. a558d60

How it looks?

image

Live demo here.

How to use?

In Next _config.yml:

post_copyright:
  enable: true

In *.md file:

---
permalink: sidebar-tall-toc-test-post
title: Sidebar Tall TOC Test Post
date: 2017-09-20 20:15:31
description: Welcome to Sidebar Tall TOC test post.
tags: [Sidebar, TOC, test]
+author: Lorem Ipsum
+url: http://generator.lorem-ipsum.info
---

getContentVisibilityHeight: function () {
var docHeight = $('#content').height(),
winHeight = $(window).height(),
contentVisibilityHeight = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line is too long.

Scrolling to center active TOC element if TOC content is taller then viewport.
@@ -17,6 +17,9 @@ $(document).ready(function () {

removeCurrentActiveClass();
$currentActiveElement.addClass('active-current');

// Scrolling to center active TOC element if TOC content is taller then viewport.
$tocElement.scrollTop($currentActiveElement.offset().top - $tocElement.offset().top + $tocElement.scrollTop() - ($tocElement.height() / 2));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line is too long.

$('.sidebar-inner').affix({
offset: {
top: headerOffset - CONFIG.sidebar.offset,
bottom: footerOffset

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'footerOffset' is not defined.


footerInner = $('.footer-inner'),
footerMargin = footerInner.outerHeight(true) - footerInner.outerHeight(),
footerOffset = footerInner.outerHeight(true) + footerMargin;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'footerInner' is not defined.
'footerMargin' is not defined.
'footerOffset' is not defined.

headerOffset = (headerHeight + CONFIG.sidebar.offset)

footerInner = $('.footer-inner'),
footerMargin = footerInner.outerHeight(true) - footerInner.outerHeight(),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'footerInner' is not defined.
'footerMargin' is not defined.

var headerHeight = $('.header-inner').height(),
headerOffset = (headerHeight + CONFIG.sidebar.offset)

footerInner = $('.footer-inner'),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'footerInner' is not defined.


function initAffix () {
var headerHeight = $('.header-inner').height(),
headerOffset = (headerHeight + CONFIG.sidebar.offset)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.


function recalculateAffixPosition () {
$(window).off('.affix')
sidebarInner.removeData('bs.affix').removeClass('affix affix-top affix-bottom')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

}

function recalculateAffixPosition () {
$(window).off('.affix')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

}

function resizeListener () {
var mql = window.matchMedia('(min-width: 991px)')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

Not affix if sidebar taller then content (to prevent bottom jumping).
1. Replace display style for sidebar top alignment with margin-left.
2. Add motion for sidebar in Pisces | Gemini.
Add `post_block` motion effects on `.pagination` and `.comments` [2].
1. Add `post_block` motion effects on `.pagination` and `.comments` [3].
2. Add motion for sidebar in Pisces | Gemini [2].
1. NexT logo (SVG, 512x512).
2. Apple icon (PNG, 180x180).
3. Favicon (PNG, 32x32).
4. Favicon (PNG, 16x16).
Remove excess margin for better economy in all schemes.
Note to remember `$border-radius` values.
1. Changed `margin-bottom` on `margin-top` in main blocks offsets & add siblings metod to detect blocks with offsets.
2. Rewrited shadows  in all blocks with offsets & added forgotten borders.
3. Removed unused (commented) values.
Used `.post-body` to filter `<h>` tags & refactored fonts sizes.
@ivan-nginx ivan-nginx merged commit ffa28c1 into iissnan:master Sep 30, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants