wip #1388 @1

diff --git a/images/interface.svg b/images/interface.svg
index 89ec20406ee059708580181d703220fbbe8a5a04..b55c7f560c7d7457b0e65c07b3a1df86e4dae5b7 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,7 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
     <symbol id="interface-close" viewBox="0 0 512 512">
-        <path d="m0 68l68-68 476 476-68 68z m68 476l-68-68 476-476 68 68z"/>
+        <path d="m512 63l-66-63-190 193-193-193-63 63 193 193-193 190 63 66 193-193 190 193 66-66-193-190z"/>
     </symbol>
 
+
+    <symbol id="interface-chevron" viewBox="0 0 512 512">
+        <path d="m342 179l-175-174-62 62 178 177-178 198 62 65 240-266z"/>
+    </symbol>
 </svg>

diff --git a/js/libs/fluidbook/menu/fluidbook.chapters.js b/js/libs/fluidbook/menu/fluidbook.chapters.js
index 30c0a50f31817b346b2b7ddd63e712b9f021c885..5c9e5b8499441b7f64e0051c9c9cc499b3f0aa40 100644 (file)
--- 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('<ul></ul>');
-                                       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('<ul></ul>');
+                    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 = '<ul class="chapters">';
-               $.each(this.chapters, function(k, v) {
-                       $this.html += $this.addItem(v);
-               });
-               this.html += '</ul>';
-       },
-       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 = '<ul class="chapters">';
+        $.each(this.chapters, function (k, v) {
+            $this.html += $this.addItem(v);
+        });
+        this.html += '</ul>';
+    },
+    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 += '<li data-level="' + chapter.level + '"><a href="#/page/' + p + '" class="level' + chapter.level + '">';
-               } else if (this.style == 'ina') {
-                       res += '<li style="background-color:#' + color + ';" data-level="' + chapter.level + '"><a href="#/page/' + p + '" class="nodark level' + chapter.level + '">';
-               }
-               res += chapter.label;
-               res += '<div class="right" data-page="' + p + '">';
+        var res = '';
+        if (this.style == 'classic') {
+            res += '<li data-level="' + chapter.level + '"><a href="#/page/' + p + '" class="level' + chapter.level + '">';
+        } else if (this.style == 'ina') {
+            res += '<li style="background-color:#' + color + ';" data-level="' + chapter.level + '"><a href="#/page/' + p + '" class="nodark level' + chapter.level + '">';
+        }
+        res += chapter.label;
+        res += '<div class="right" data-page="' + p + '">';
 
-               if (this.style == 'classic') {
-                       if (color == '') {
-                               if (chapter.page != '') {
-                                       res += '<span class="pagen">' + chapter.page + '</span>';
-                               }
-                       } else {
-                               res += '<div class="puce" style="background-color:#' + color + ';"></div>';
-                       }
-               } else {
-                       if (chapter.page != '') {
-                               res += '<span class="pagen">' + chapter.page + '</span>';
-                       }
-                       res += '<div class="puce noshadow"></div>';
-               }
-               res += '</div>'
-               res += '</a></li>';
+        if (this.style == 'classic') {
+            if (color == '') {
+                if (chapter.page != '') {
+                    res += '<span class="pagen">' + chapter.page + '</span>';
+                }
+            } else {
+                res += '<div class="puce" style="background-color:#' + color + ';">' + getSpriteIcon('interface-chevron') + '</div>';
+            }
+        } else {
+            if (chapter.page != '') {
+                res += '<span class="pagen">' + chapter.page + '</span>';
+            }
+            res += '<div class="puce noshadow"></div>';
+        }
+        res += '</div>'
+        res += '</a></li>';
 
-               return res;
-       }
+        return res;
+    }
 };
 

diff --git a/style/fluidbook.less b/style/fluidbook.less
index dbe655d36967a397c98b1f9cf687477c56b7f2d6..82203b8e381ea8161a2cd6e3f9a9bf445ce4a2b5 100644 (file)
--- 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;