From 231516f5238b6023001bed548569077c61411a4e Mon Sep 17 00:00:00 2001 From: Alexandre Alapetite Date: Sun, 3 Nov 2013 19:22:59 +0100 Subject: Grosse optimisation JavaScript MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fusion de endless_mode.js dans main.js car endless_mode.js est toujours chargé et assez petit. * Suppression des changements de style en JavaScript lors du chargement (genre boucle de .hide(), ou d'ajout de classe ".stick") et implémentation en PHP + CSS à la place. * Chargement JavaScript asynchrone (defer + async) pour de meilleurs performances. * Utilisation préférable des événements globaux plutôt que des événements pour chaque élément avec jQuery.on(events, selector) pour un chargement plus rapide et moins de mémoire utilisée. * Optimisation manuelle du JavaScript (sélecteurs CSS plus performants, méthodes jQuery plus appropriées, etc.). * Désactivation de init_img() qui était coûteux, lancé à un moment où les images ne sont de toute manière pas encore chargées, et qui n'apporte rien car il y a déjà un img {max-width:100%} en CSS. * JavaScript en mode strict. * Enfin, passage du code JavaScript dans JSLint et du coup nombreuses corrections (syntaxe, variables, méthodes dépréciées...). * Devrait permettre de fermer https://github.com/marienfressinaud/FreshRSS/issues/121 * Au passage, quelques simplifications CSS pour de meilleures performances. --- public/themes/default/freshrss.css | 40 +++++++++++++++--------- public/themes/default/global.css | 62 +++++++++++++++++++------------------- 2 files changed, 56 insertions(+), 46 deletions(-) (limited to 'public/themes/default') diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css index 144c77c92..168417312 100644 --- a/public/themes/default/freshrss.css +++ b/public/themes/default/freshrss.css @@ -107,6 +107,9 @@ width: 195px; position: relative; } + .category.stick .btn:first-child { + width:160px; + } .category .btn:first-child:not([data-unread="0"]):after { content: attr(data-unread); position: absolute; @@ -120,6 +123,9 @@ box-shadow: 1px 3px 3px #aaa inset; text-shadow: 0 0 1px #aaa; } + .category + .feeds:not(.active) { + display:none; + } .categories .feeds { width: 100%; margin: 0; @@ -403,11 +409,11 @@ .content p { margin: 0 0 20px; } - .content img.big { + img.big { display: block; margin: 10px auto; } - .content figure img.big { + figure img.big { margin: 0; } .content hr { @@ -473,6 +479,10 @@ text-align: center; } +.hide_posts > :not(.active) > .flux_content { + display:none; +} + /*** PAGINATION ***/ .pagination { display: table; @@ -493,10 +503,10 @@ font-weight: bold; font-size: 140%; } - .pagination .item.pager-first, - .pagination .item.pager-previous, - .pagination .item.pager-next, - .pagination .item.pager-last { + .pagination .pager-first, + .pagination .pager-previous, + .pagination .pager-next, + .pagination .pager-last { width: 100px; } .pagination .item a { @@ -511,7 +521,7 @@ border-top: 1px solid #aaa; } -.nav_entries { +#nav_entries { display: table; width: 250px; height: 40px; @@ -525,14 +535,14 @@ line-height: 40px; table-layout: fixed; } - .nav_entries .item { + #nav_entries .item { display: table-cell; width: 30%; } - .nav_entries .item a { + #nav_entries a { display: block; } - .nav_entries .item .icon.i_up { + #nav_entries .i_up { margin: 5px 0 0; vertical-align: top; } @@ -720,7 +730,7 @@ margin: 30px 0; } - .nav_entries { + #nav_entries { width: 100%; } @@ -769,27 +779,27 @@ background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); } - .btn.btn-important { + .btn-important { background: #0084CC; background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%); background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%); background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%); background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%); } - .btn.btn-important:hover { + .btn-important:hover { background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%); background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%); background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%); background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%); } - .btn.btn-attention { + .btn-attention { background: #E95B57; background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%); background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%); background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%); background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%); } - .btn.btn-attention:hover { + .btn-attention:hover { background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%); background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%); background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%); diff --git a/public/themes/default/global.css b/public/themes/default/global.css index 8685b4e92..f6fb1bcf2 100644 --- a/public/themes/default/global.css +++ b/public/themes/default/global.css @@ -161,7 +161,7 @@ input, select, textarea { .stick input:first-child { border-radius: 3px 0 0 3px; } - .stick .btn.btn-important:first-child { + .stick .btn-important:first-child { border-right: 1px solid #06f; } .stick .btn:last-child, @@ -217,30 +217,30 @@ input, select, textarea { background: #eee; } - .btn.btn-important { + .btn-important { background: linear-gradient(to bottom, #0084CC, #0045CC); color: #fff; border: 1px solid #0062B7; text-shadow: 0px -1px 0 #aaa; } - .btn.btn-important:hover { + .btn-important:hover { background: linear-gradient(to bottom, #0066CC, #0045CC); } - .btn.btn-important:active { + .btn-important:active { background: #0044CB; box-shadow: none; } - .btn.btn-attention { + .btn-attention { background: linear-gradient(to bottom, #E95B57, #BD362F); color: #fff; border: 1px solid #C44742; text-shadow: 0px -1px 0px #666; } - .btn.btn-attention:hover { + .btn-attention:hover { background: linear-gradient(to bottom, #D14641, #BD362F); } - .btn.btn-attention:active { + .btn-attention:active { background: #BD362F; box-shadow: none; } @@ -486,99 +486,99 @@ input, select, textarea { line-height: 16px; background: center center no-repeat; } - .icon.i_refresh { + .i_refresh { background-image: url("icons/refresh.png"); background-image: url("icons/refresh.svg"); } - .icon.i_bookmark { + .i_bookmark { background-image: url("icons/starred.png"); background-image: url("icons/starred.svg"); } - .icon.i_not_bookmark { + .i_not_bookmark { background-image: url("icons/unstarred.png"); background-image: url("icons/unstarred.svg"); } - .icon.i_read { + .i_read { background-image: url("icons/read.png"); background-image: url("icons/read.svg"); } - .icon.i_unread { + .i_unread { background-image: url("icons/unread.png"); background-image: url("icons/unread.svg"); } - .icon.i_all { + .i_all { background-image: url("icons/all.png"); background-image: url("icons/all.svg"); } - .icon.i_close { + .i_close { background-image: url("icons/close.png"); background-image: url("icons/close.svg"); } - .icon.i_search { + .i_search { background-image: url("icons/search.png"); background-image: url("icons/search.svg"); } - .icon.i_configure { + .i_configure { background-image: url("icons/configure.png"); background-image: url("icons/configure.svg"); } - .icon.i_login { + .i_login { background-image: url("icons/login.png"); background-image: url("icons/login.svg"); } - .icon.i_logout { + .i_logout { background-image: url("icons/logout.png"); background-image: url("icons/logout.svg"); } - .icon.i_add { + .i_add { background-image: url("icons/add.png"); background-image: url("icons/add.svg"); } - .icon.i_link { + .i_link { background-image: url("icons/link.png"); background-image: url("icons/link.svg"); } - .icon.i_down { + .i_down { background-image: url("icons/down.png"); background-image: url("icons/down.svg"); } - .icon.i_up { + .i_up { background-image: url("icons/up.png"); background-image: url("icons/up.svg"); } - .icon.i_next { + .i_next { background-image: url("icons/next.png"); background-image: url("icons/next.svg"); } - .icon.i_prev { + .i_prev { background-image: url("icons/previous.png"); background-image: url("icons/previous.svg"); } - .icon.i_help { + .i_help { background-image: url("icons/help.png"); background-image: url("icons/help.svg"); } - .icon.i_note { + .i_note { background-image: url("icons/note.png"); background-image: url("icons/note.svg"); } - .icon.i_note_empty { + .i_note_empty { background-image: url("icons/note_empty.png"); background-image: url("icons/note_empty.svg"); } - .icon.i_category { + .i_category { background-image: url("icons/category.png"); background-image: url("icons/category.svg"); } - .icon.i_rss { + .i_rss { background-image: url("icons/rss.png"); background-image: url("icons/rss.svg"); } - .icon.i_share { + .i_share { background-image: url("icons/share.png"); background-image: url("icons/share.svg"); } - .icon.i_tag { + .i_tag { background-image: url("icons/tag.png"); background-image: url("icons/tag.svg"); } -- cgit v1.2.3