From 8b1af48ec9e86784402ce282375343e44dc460b7 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 2 Jun 2017 11:50:33 +0200 Subject: [PATCH] wip #1388 @1 --- images/interface.svg | 6 +- js/libs/fluidbook/menu/fluidbook.chapters.js | 218 +++++++++---------- style/fluidbook.less | 46 ++-- 3 files changed, 133 insertions(+), 137 deletions(-) diff --git a/images/interface.svg b/images/interface.svg index 89ec2040..b55c7f56 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -1,7 +1,11 @@ - + + + + + diff --git a/js/libs/fluidbook/menu/fluidbook.chapters.js b/js/libs/fluidbook/menu/fluidbook.chapters.js index 30c0a50f..5c9e5b84 100644 --- a/js/libs/fluidbook/menu/fluidbook.chapters.js +++ b/js/libs/fluidbook/menu/fluidbook.chapters.js @@ -1,123 +1,123 @@ function FluidbookChapters(fluidbook, chapters) { - this.fluidbook = fluidbook; - this.chapters = chapters; - this.style = 'classic'; - if (this.fluidbook.datas.mobileChaptersStyle) { - this.style = this.fluidbook.datas.mobileChaptersStyle; - } - this.html = ''; - this.lastColor; + this.fluidbook = fluidbook; + this.chapters = chapters; + this.style = 'classic'; + if (this.fluidbook.datas.mobileChaptersStyle) { + this.style = this.fluidbook.datas.mobileChaptersStyle; + } + this.html = ''; + this.lastColor; } FluidbookChapters.prototype = { - getView: function() { - if (this.html == '') { - this.makeView(); - } - return this.html; - }, - makeView: function() { - this.makeClassicMenu(); - if (this.fluidbook.datas.chaptersCascade) { - this.makeCascadeMenu(); - } - }, - makeCascadeMenu: function() { - var h = $(this.html); + getView: function () { + if (this.html == '') { + this.makeView(); + } + return this.html; + }, + makeView: function () { + this.makeClassicMenu(); + if (this.fluidbook.datas.chaptersCascade) { + this.makeCascadeMenu(); + } + }, + makeCascadeMenu: function () { + var h = $(this.html); - for (var i = 3; i >= 0; i--) { - $(h).find('li[data-level=' + i + ']').each(function() { - var siblings = $(this).nextUntil('li[data-level!=' + (i + 1) + ']', 'li[data-level=' + (i + 1) + ']'); - if (siblings.length > 0) { - $(this).append(''); - var nav = $(this).find('ul'); - $(nav).append(siblings); - $(nav).hide(); - } - }); - } - this.html = $(h).get(0).outerHTML; + for (var i = 3; i >= 0; i--) { + $(h).find('li[data-level=' + i + ']').each(function () { + var siblings = $(this).nextUntil('li[data-level!=' + (i + 1) + ']', 'li[data-level=' + (i + 1) + ']'); + if (siblings.length > 0) { + $(this).append(''); + var nav = $(this).find('ul'); + $(nav).append(siblings); + $(nav).hide(); + } + }); + } + this.html = $(h).get(0).outerHTML; - if (this.style == 'ina') { - $(document).on('click', 'ul.chapters a .right', function(e) { - var p = $(this).data('page'); - if (p != '') { - $this.fluidbook.setCurrentPage(p); - e.stopImmediatePropagation(); - e.stopPropagation(); - e.preventDefault(); - return false; - } - }); - } + if (this.style == 'ina') { + $(document).on('click', 'ul.chapters a .right', function (e) { + var p = $(this).data('page'); + if (p != '') { + $this.fluidbook.setCurrentPage(p); + e.stopImmediatePropagation(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + }); + } - $(document).on('click', 'ul.chapters a', function() { - var li = $(this).parent(); - var subnav = $(li).children('ul'); - if ($(subnav).length) { - $(subnav).slideToggle(); - return false; - } else { - return true; - } - }); - }, - makeClassicMenu: function() { - var $this = this; - this.html = ''; - }, - addItem: function(chapter) { - if (chapter.label == '--' || chapter.label == '++') { - return ""; - } - var color = chapter.color; - if (color == '') { - if (this.lastColor != undefined) { - color = this.lastColor; - } - } - if (color != '') { - this.lastColor = color; - } + $(document).on('click', 'ul.chapters a', function () { + var li = $(this).parent(); + var subnav = $(li).children('ul'); + if ($(subnav).length) { + $(subnav).slideToggle(); + return false; + } else { + return true; + } + }); + }, + makeClassicMenu: function () { + var $this = this; + this.html = ''; + }, + addItem: function (chapter) { + if (chapter.label == '--' || chapter.label == '++') { + return ""; + } + var color = chapter.color; + if (color == '') { + if (this.lastColor != undefined) { + color = this.lastColor; + } + } + if (color != '') { + this.lastColor = color; + } - if (chapter.label.substr(0, 3) == '!!!') { - chapter.label = chapter.label.substring(3); - chapter.level = '-1'; - } + if (chapter.label.substr(0, 3) == '!!!') { + chapter.label = chapter.label.substring(3); + chapter.level = '-1'; + } - var p = (this.fluidbook.virtualToPhysical(chapter.page)); + var p = (this.fluidbook.virtualToPhysical(chapter.page)); - var res = ''; - if (this.style == 'classic') { - res += '
  • '; - } else if (this.style == 'ina') { - res += '
  • '; - } - res += chapter.label; - res += '
    '; + var res = ''; + if (this.style == 'classic') { + res += '
  • '; + } else if (this.style == 'ina') { + res += '
  • '; + } + res += chapter.label; + res += '
    '; - if (this.style == 'classic') { - if (color == '') { - if (chapter.page != '') { - res += '' + chapter.page + ''; - } - } else { - res += '
    '; - } - } else { - if (chapter.page != '') { - res += '' + chapter.page + ''; - } - res += '
    '; - } - res += '
    ' - res += '
    • '; + if (this.style == 'classic') { + if (color == '') { + if (chapter.page != '') { + res += '' + chapter.page + ''; + } + } else { + res += '
    ' + getSpriteIcon('interface-chevron') + '
    '; + } + } else { + if (chapter.page != '') { + res += '' + chapter.page + ''; + } + res += '
    '; + } + res += '' + res += ''; - return res; - } + return res; + } }; diff --git a/style/fluidbook.less b/style/fluidbook.less index dbe655d3..82203b8e 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -312,7 +312,7 @@ body, html { display: inline-block; width: 22px; height: 17px; - border-radius: 3px; + border-radius: 1px; background-position: 50% 50%; background-repeat: no-repeat; margin: 11px 3px 0; @@ -612,7 +612,7 @@ header { } #searchHints { - border-radius: 5px; + border-radius: 1px; width: 150px; padding: 5px; display: none; @@ -1028,7 +1028,7 @@ form input[type="text"], form input[type="email"] { top: @hits-top; &.yes { padding: 5px; - border-radius: 5px; + border-radius: 1px; color: @menu-text; background-color: @menu-background; } @@ -1312,7 +1312,7 @@ ul.chapters.shareList a.level0 img { &[type="text"], &[type="email"] { font-family: @font; padding: 5px; - border-radius: 5px; + border-radius: 1px; border: 0; width: 100%; margin: 7px 0; @@ -1346,7 +1346,7 @@ ul.chapters.shareList a.level0 img { right: 20px; bottom: 20px; padding: 4px 10px 6px; - border-radius: 5px; + border-radius: 1px; display: inline-block; cursor: pointer; } @@ -1456,28 +1456,20 @@ ul.chapters { .puce { width: 25px; height: 25px; - - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); - -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); - -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); - -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); - -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); - - background-image: url("../images/chapters-arrow.png"); - background-repeat: no-repeat; + line-height:17px; + padding: 6px; + color: #fff; + svg { + width: 16px; + height: 16px; + position: relative; + left: -1px; + top: -1px; + } + border-radius: 1px; &.noshadow { border-radius: 0px; - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -ms-border-radius: 0px; - -o-border-radius: 0px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); @@ -1520,7 +1512,7 @@ ul.chapters { display: block; width: 40px; height: 40px; - border-radius: 5px; + border-radius: 1px; background-image: url("../data/images/interface-down.svg"); background-repeat: no-repeat; padding: 8px 8px 8px 8px; @@ -1704,7 +1696,7 @@ ul.chapters { a.button { display: inline-block; padding: 8px 32px 8px 16px; - border-radius: 6px; + border-radius: 1px; font-weight: 600; margin: 10px 0; background-image: url("../images/arrow-button.png"); @@ -1764,7 +1756,7 @@ a.button { top: 0px; left: 0px; padding: 5px 10px; - border-radius: 5px; + border-radius: 1px; display: none; font-size: 0.8rem; max-width: 180px; -- 2.39.5