From 2ac9bd12b11e5016680e8227ea7568c935ce3c62 Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Fri, 25 Sep 2020 18:22:57 +0800 Subject: [PATCH 1/3] update docs style Signed-off-by: liuboaibc --- assets/js/aside.js | 12 +- assets/scss/common.scss | 20 +- assets/scss/doc.scss | 6 +- content/zh/docs/_index.md | 2 +- layouts/docs/single.html | 519 +++++++++++++++++++------------------- 5 files changed, 284 insertions(+), 275 deletions(-) diff --git a/assets/js/aside.js b/assets/js/aside.js index 319e4613d..76a8db152 100644 --- a/assets/js/aside.js +++ b/assets/js/aside.js @@ -20,12 +20,11 @@ var bindAsideScroll = function() { return false } var content = $('.middle-div') - var mdBody = $('.md-body') var aside = $('.aside') var contentToTop = getElementTopToScreenTop(content) aside.css("top", contentToTop) var asideInner = $('.aside .inner-div') - scrollEvent(content, mdBody, aside, asideInner) + scrollEvent(content, aside, asideInner) } var bindLeftTreeScroll = function() { @@ -34,25 +33,24 @@ var bindLeftTreeScroll = function() { return false } var content = $('.middle-div') - var mdBody = $('.md-body') var aside = $('.common-layout .left-tree') var contentToTop = getElementTopToScreenTop(content) aside.css("top", contentToTop) var asideInner = $('.left-div .inner-tree') - scrollEvent(content, mdBody, aside, asideInner) + scrollEvent(content, aside, asideInner) } -var scrollEvent = function(content, mdBody, aside, asideInner) { +var scrollEvent = function(content, aside, asideInner) { $( window ).scroll(function() { var headerHeight = $('header').outerHeight() var contentToTop = getElementTopToScreenTop(content) if (contentToTop < headerHeight) { aside.css("top", headerHeight + 10) aside.css("bottom", 10) - var s1 = getElementBottomToTop(mdBody) + var s1 = getElementBottomToTop(content) var s2 = getElementBottomToTop(asideInner) if (s2 > s1) { - var bottom = getElementBottomToScreenBottom(mdBody) + var bottom = getElementBottomToScreenBottom(content) aside.css("bottom", bottom) aside.css("top", "auto") } diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 0526d70aa..7cb2d3e97 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -269,7 +269,7 @@ section { margin: 20px 0; position: relative; - p { + & > p { padding: 0 10px; margin: 0!important; height: 30px; @@ -277,43 +277,43 @@ section { color: #ffffff; } - div { + & > div { padding: 10px; } } .notices.note { - p { + & > p { background: #6ab0de } - div { + & > div { background: #e7f2fa; } } .notices.tip { - p { + & > p { background: #78C578 } - div { + & > div { background: #E6F9E6; } } .notices.info { - p { + & > p { background: #F0B37E } - div { + & > div { background: #FFF2DB; } } .notices.warning { - p { + & > p { background: #E06F6C } - div { + & > div { background: #FAE2E2; } } diff --git a/assets/scss/doc.scss b/assets/scss/doc.scss index c9201fdcd..8ba4aa6b3 100644 --- a/assets/scss/doc.scss +++ b/assets/scss/doc.scss @@ -555,6 +555,7 @@ body { .page-div { position: relative; margin-top: 20px; + height: 30px; a { position: absolute; @@ -594,6 +595,7 @@ body { left: 50%; transform: translateX(420px); width: 160px; + border-left: 1px solid #dde1e6; @media only screen and (max-width: $mobile-max-width) { display: none; } @@ -603,7 +605,6 @@ body { position: relative; overflow-y: auto; padding-left: 10px; - border-left: 1px solid #dde1e6; } .title { @@ -641,5 +642,4 @@ body { } } } -} - +} \ No newline at end of file diff --git a/content/zh/docs/_index.md b/content/zh/docs/_index.md index 97501485f..83fce1a97 100644 --- a/content/zh/docs/_index.md +++ b/content/zh/docs/_index.md @@ -2,7 +2,7 @@ title: "Documentation" css: "scss/docs.scss" -LinkTitle: "Documentation" +LinkTitle: "文档" section1: diff --git a/layouts/docs/single.html b/layouts/docs/single.html index cdb094065..e55c37605 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -1,276 +1,287 @@ -{{ define "main" }} + + + + {{- partial "head.html" . -}} + -
-
- {{ partial "breadcrumb.html" . }} - -
- {{ $sections := .FirstSection.Sections.ByWeight }} - {{ $secondSection := .FirstSection }} - {{ $page := . }} - {{ range $sections }} - {{ if $page.IsDescendant . }} - {{ $secondSection = . }} + +{{- partial "header.html" . -}} +
+
+
+ {{ partial "breadcrumb.html" . }} + +
+ {{ $sections := .FirstSection.Sections.ByWeight }} + {{ $secondSection := .FirstSection }} + {{ $page := . }} + {{ range $sections }} + {{ if $page.IsDescendant . }} + {{ $secondSection = . }} + {{ end }} {{ end }} - {{ end }} -

{{ $secondSection.LinkTitle }}

-
-
-
-
-
-
- -
- {{ partial "searchInput" . }} -
-
-
- -
-{{ with (.GetPage "/docs") }} -
- {{ partial "section" . }} -
-{{ end }} -
- -
-
-
-
- {{ partial "tree.html" . }} - -
-
-
-
-
-
-
-
-
-
- {{ i18n "Last updated" }}: - - -
    -     - +

    {{ $secondSection.LinkTitle }}

    +
    +
    +
    +
    -
    -
    - - - {{ i18n "edit" }} +
    + +
    + {{ partial "searchInput" . }} +
    +
    +
    + +
    + {{ with (.GetPage "/docs") }} +
    + {{ partial "section" . }} +
    + {{ end }} +
    + +
    +
    +
    +
    + {{ partial "tree.html" . }} + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + {{ i18n "Last updated" }}: + + +
      +
      - - - -
      -
      -

      {{ .Title }}

      - {{ .Content }} + +
      +
      +

      {{ .Title }}

      + {{ .Content }} +
      + {{ if .IsPage }} + +
      + {{ with .Next }} + + + {{ i18n + {{ i18n "Last" }} + : {{.LinkTitle}} + + + {{ end }} + {{ with .Prev }} + + + + {{ end }} +
      + {{ end }} +
      {{ if .IsPage }} - -
      - {{ with .Next }} - - - {{ i18n - {{ i18n "Last" }} - : {{.LinkTitle}} - - - {{ end }} - {{ with .Prev }} - - - - {{ end }} +
      +
      +
      + {{ i18n "What’s on this Page" }} +
      +
      + {{ .TableOfContents }} +
      +
      {{ end }} -
      - {{ if .IsPage }} -
      -
      -
      - {{ i18n "What’s on this Page" }} -
      -
      - {{ .TableOfContents }} -
      -
      -
      - {{ end }} -
      -
      -{{ $aside := resources.Get "js/aside.js" }} -{{ $asideJS := $aside | resources.Fingerprint "sha512" }} - - -{{ $tab := resources.Get "js/markdown-tab.js" }} -{{ $tabJS := $tab | resources.Fingerprint "sha512" }} - - - + + {{ $tab := resources.Get "js/markdown-tab.js" }} + {{ $tabJS := $tab | resources.Fingerprint "sha512" }} + + + +
      - $(document).one("click", function(){ - sectionMenu.hide() - }); + - e.stopPropagation() - }) - - sectionMenu.on("click", function(e){ - e.stopPropagation(); - }) - } - - var bindClickSecondMenu = function() { - var sectionMenu = $(".section-2 .left-div") - $('.second-section-menu').on('click', function(e){ - sectionMenu.css("left", "0") - - $(document).one("click", function(){ - sectionMenu.css("left", "-274px") - }); - - e.stopPropagation() - }) - - sectionMenu.on("click", function(e){ - e.stopPropagation(); - }) - } - - var useViewer = function() { - var viewer = new Viewer(document.querySelector('.md-body'), { - url: 'src' - }) - } - - var __main = function() { - getFileContributors() - bindClickMenu() - bindClickSecondMenu() - useViewer() - } - - __main() - - -{{ end }} \ No newline at end of file + \ No newline at end of file From c01c44c3ce3bed8c803e4e72d47c75f7fd9b2a79 Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Sun, 27 Sep 2020 09:55:00 +0800 Subject: [PATCH 2/3] update style Signed-off-by: liuboaibc --- assets/scss/content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/content.scss b/assets/scss/content.scss index e49f11253..533692453 100644 --- a/assets/scss/content.scss +++ b/assets/scss/content.scss @@ -153,7 +153,7 @@ .inner-div { max-height: 100%; position: relative; - overflow: scroll; + overflow-y: auto; } .title { From e86fa55810e4a7b6ba3e0385655ac40e5dcb48fe Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Sun, 27 Sep 2020 10:09:50 +0800 Subject: [PATCH 3/3] update aside scroll Signed-off-by: liuboaibc --- assets/js/aside.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/aside.js b/assets/js/aside.js index 76a8db152..bd12206b0 100644 --- a/assets/js/aside.js +++ b/assets/js/aside.js @@ -5,7 +5,7 @@ var getElementTopToScreenTop = function(element) { } var getElementBottomToScreenBottom = function(element) { - return $(window).height() + $(document).scrollTop() - element.offset().top - element.height() + return $(window).height() + $(document).scrollTop() - element.offset().top - element.outerHeight() } var getElementBottomToTop = function(element) { @@ -44,7 +44,7 @@ var scrollEvent = function(content, aside, asideInner) { $( window ).scroll(function() { var headerHeight = $('header').outerHeight() var contentToTop = getElementTopToScreenTop(content) - if (contentToTop < headerHeight) { + if (contentToTop < headerHeight + 10) { aside.css("top", headerHeight + 10) aside.css("bottom", 10) var s1 = getElementBottomToTop(content)