Style overhaul (WIP)

Renamed .pageNavigation to .pagination
Renamed .navigation/.navigationIcons to
.pageNavigation/.pageNavigationIcons
Removed obsolete some code/files

diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index f938b8d9950ab9f82bafa474d9bc640a9dabe244..082ef72e7f26e6c74eadefd5bf4a6f1c84037c4d 100644 (file)
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -70,7 +70,7 @@ requirejs.config({
                        'wcf.global.loading': '{lang}wcf.global.loading{/lang}',
                        'wcf.global.page.jumpTo': '{lang}wcf.global.page.jumpTo{/lang}',
                        'wcf.global.page.jumpTo.description': '{lang}wcf.global.page.jumpTo.description{/lang}',
-                       'wcf.global.page.pageNavigation': '{lang}wcf.global.page.pageNavigation{/lang}',
+                       'wcf.global.page.pagination': '{lang}wcf.global.page.pagination{/lang}',
                        'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
                        'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
                        'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}',
@@ -180,7 +180,7 @@ requirejs.config({
        $(function() {
                new WCF.Effect.SmoothScroll();
                
-               WCF.System.PageNavigation.init('.pageNavigation');
+               WCF.System.PageNavigation.init('.pagination');
                WCF.User.Profile.ActivityPointList.init();
                
                {event name='javascriptInit'}

diff --git a/com.woltlab.wcf/templates/pageNavbarBottom.tpl b/com.woltlab.wcf/templates/pageNavbarBottom.tpl
deleted file mode 100644 (file)
index 880ffdc..0000000
--- a/com.woltlab.wcf/templates/pageNavbarBottom.tpl
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="navigation navigationBottom">
-       <div class="layoutFluid">
-               {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
-               
-               <ul class="navigationIcons">
-                       <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 fa-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-                       {event name='navigationIcons'}
-               </ul>
-       </div>
-</div>

diff --git a/com.woltlab.wcf/templates/pageNavbarTop.tpl b/com.woltlab.wcf/templates/pageNavbarTop.tpl
index 22cac09a91d24c0412e6900760556ec545410aae..7f9668f223a1388c32bd8493c5d389bd30749f98 100644 (file)
--- a/com.woltlab.wcf/templates/pageNavbarTop.tpl
+++ b/com.woltlab.wcf/templates/pageNavbarTop.tpl
@@ -1,8 +1,8 @@
-<div class="navigation navigationTop">
+<div class="pageNavigation">
        <div class="layoutBoundary">
                {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
                
-               <ul class="navigationIcons">
+               <ul class="pageNavigationIcons">
                        <li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 fa-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
                        {if $headerNavigation|isset}{@$headerNavigation}{/if}
                        {event name='navigationIcons'}

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 467e0b7c04d9700204073961cd5af69139e2dbfb..a24429ec0b75762b816ada9718b5cfea964a8875 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -1107,7 +1107,7 @@ WCF.ACP.Package.Search = Class.extend({
        _setupPagination: function() {
                // remove previous instances
                this._content = { 1: this._packageSearchResultList.html() };
-               this._packageSearchResultContainer.find('.pageNavigation').wcfPages('destroy').remove();
+               this._packageSearchResultContainer.find('.pagination').wcfPages('destroy').remove();
                
                if (this._pageCount > 1) {
                        // TODO: Fix ui.wcfPages to properly synchronize multiple instances without triggering events
@@ -1493,7 +1493,7 @@ WCF.ACP.Package.Update.Search = Class.extend({
                }
                else {
                        var $button = $('<li><a class="button"><span class="icon icon16 fa-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>');
-                       $button.click($.proxy(this._click, this)).prependTo($('.contentNavigation:eq(0) > nav:not(.pageNavigation) > ul'));
+                       $button.click($.proxy(this._click, this)).prependTo($('.contentNavigation:eq(0) > nav:not(.pagination) > ul'));
                }
        },
        
@@ -1575,7 +1575,7 @@ WCF.ACP.PluginStore.PurchasedItems.Search = Class.extend({
                });
                
                var $button = $('<li><a class="button"><span class="icon icon16 fa-shopping-cart" /> <span>' + WCF.Language.get('wcf.acp.pluginStore.purchasedItems.button.search') + '</span></a></li>');
-               $button.prependTo($('.contentNavigation:eq(0) > nav:not(.pageNavigation) > ul')).click($.proxy(this._click, this));
+               $button.prependTo($('.contentNavigation:eq(0) > nav:not(.pagination) > ul')).click($.proxy(this._click, this));
        },
        
        /**

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 4ca46ad947eca1e21c033401ed8848eda5555d06..bdfcd879fe8883b9aec54864b42bf9c2440c7cc1 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -84,7 +84,7 @@
                                'wcf.global.loading': '{lang}wcf.global.loading{/lang}',
                                'wcf.global.page.jumpTo': '{lang}wcf.global.page.jumpTo{/lang}',
                                'wcf.global.page.jumpTo.description': '{lang}wcf.global.page.jumpTo.description{/lang}',
-                               'wcf.global.page.pageNavigation': '{lang}wcf.global.page.pageNavigation{/lang}',
+                               'wcf.global.page.pagination': '{lang}wcf.global.page.pagination{/lang}',
                                'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
                                'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
                                'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}',
@@ -131,7 +131,7 @@
                        if (jQuery.browser.touch) $('html').addClass('touch');
                        
                        new WCF.Effect.SmoothScroll();
-                       WCF.System.PageNavigation.init('.pageNavigation');
+                       WCF.System.PageNavigation.init('.pagination');
                        
                        {if $__wcf->user->userID}
                                //new WCF.ACP.Search();

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpTo.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpTo.js
index 2c86accd5bb3ce66df2b6f22b91fa6ea6718d9e5..3e1c6d5a64feb4797980b6191e85b48b449390f8 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpTo.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/JumpTo.js
@@ -108,9 +108,9 @@ define(['Language', 'ObjectMap', 'Ui/Dialog'], function(Language, ObjectMap, UiD
                
                _dialogSetup: function() {
                        var source = '<dl>'
-                                       + '<dt><label for="jsPageNavigationPageNo">' + Language.get('wcf.global.page.jumpTo') + '</label></dt>'
+                                       + '<dt><label for="jsPaginationPageNo">' + Language.get('wcf.global.page.jumpTo') + '</label></dt>'
                                        + '<dd>'
-                                               + '<input type="number" id="jsPageNavigationPageNo" value="1" min="1" max="1" class="tiny">'
+                                               + '<input type="number" id="jsPaginationPageNo" value="1" min="1" max="1" class="tiny">'
                                                + '<small></small>'
                                        + '</dd>'
                                + '</dl>'
@@ -119,7 +119,7 @@ define(['Language', 'ObjectMap', 'Ui/Dialog'], function(Language, ObjectMap, UiD
                                + '</div>';
                        
                        return {
-                               id: 'pageNavigationOverlay',
+                               id: 'paginationOverlay',
                                options: {
                                        onSetup: (function(content) {
                                                _input = elByTag('input', content)[0];
@@ -130,7 +130,7 @@ define(['Language', 'ObjectMap', 'Ui/Dialog'], function(Language, ObjectMap, UiD
                                                _buttonSubmit = elByTag('button', content)[0];
                                                _buttonSubmit.addEventListener('click', this._submit.bind(this));
                                        }).bind(this),
-                                       title: Language.get('wcf.global.page.pageNavigation')
+                                       title: Language.get('wcf.global.page.pagination')
                                },
                                source: source
                        };

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Pagination.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Pagination.js
index 9f079757413eab737bafe5edae9c5e429be57f20..11550e96c9e4775a7002bf245ff8a75c64db7729 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Pagination.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Pagination.js
@@ -39,7 +39,7 @@ define(['Core', 'Language', 'ObjectMap', 'StringUtil', 'WoltLab/WCF/Ui/Page/Jump
                        if (typeof this._options.callbackShouldSwitch !== 'function') this._options.callbackShouldSwitch = null;
                        if (typeof this._options.callbackSwitch !== 'function') this._options.callbackSwitch = null;
                        
-                       this._element.classList.add('pageNavigation');
+                       this._element.classList.add('pagination');
                        this._element.classList.add('small');
                        
                        this._rebuild(this._element);

diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index 5832e40d10b27b04124d34ecd2bdd5954e56cfbb..0122ea7d1ccfaff1dc4af29f4e5b8969cf48fede 100644 (file)
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -33,7 +33,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
         * CSS class name for <nav> element
         * @var string
         */
-       protected $cssClassName = 'pageNavigation';
+       protected $cssClassName = 'pagination';
        
        /**
         * Inserts the page number into the link.

diff --git a/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
index 3605c45a96b7d78e018755ad276da84b38a6d922..c361ebc68634319c53d9e9b32d19d534f336573c 100644 (file)
--- a/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
@@ -30,7 +30,7 @@ class SmallpagesFunctionTemplatePlugin extends PagesFunctionTemplatePlugin {
        /**
         * @see \wcf\system\template\plugin\PagesFunctionTemplatePlugin::$cssClassName
         */
-       protected $cssClassName = 'pageNavigation small';
+       protected $cssClassName = 'pagination small';
        
        /**
         * @see \wcf\system\template\plugin\PagesFunctionTemplatePlugin::makePreviousLink()

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index d8f04f83b5776c7df570061d4637d34000b8b981..1c86890c88400097360a39dc7c41b53e84ed17da 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -112,3 +112,57 @@
                }
        }
 }
+
+.contentNavigation {
+       align-items: center;
+       display: flex;
+       
+       // align <nav> to the right side
+       justify-content: flex-end;
+       
+       &:not(:first-child) {
+               margin-top: 30px;
+       }
+       
+       &:not(:last-child) {
+               margin-bottom: 30px;
+       }
+       
+       > nav {
+               flex: 0 0 auto;
+               order: 3;
+               
+               &.pagination {
+                       order: 1;
+                       
+                       // use up maximum space, causing it to stick to the left while all other
+                       // <nav> elements will still be aligned to the right side
+                       flex: 1 1 auto;
+               }
+               
+               &.jsClipboardEditor {
+                       margin-right: 5px;
+                       order: 2;
+               }
+               
+               & + nav {
+                       flex: 0 0 auto;
+               }
+               
+               &:not(.pagination) {
+                       text-align: right;
+               }
+       }
+       
+       ul {
+               display: inline-flex;
+               
+               > li {
+                       flex: 0 0 auto;
+                       
+                       &:not(:last-child) {
+                               margin-right: 5px;
+                       }
+               }
+       }
+}
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss
deleted file mode 100644 (file)
index e1ef380..0000000
--- a/wcfsetup/install/files/style/layout/navigation.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-.navigation {
-       background-color: $wcfNavigationBackground;
-       color: $wcfNavigationText;
-       flex: 0 0 auto;
-       padding: 5px 0;
-       z-index: 25;
-       
-       > div {
-               align-items: center;
-               display: flex;
-               justify-content: flex-end;
-               height: 30px;
-       }
-       
-       .icon {
-               color: $wcfNavigationText;
-       }
-       
-       a {
-               color: $wcfNavigationLink;
-               
-               &:hover {
-                       color: $wcfNavigationLinkActive;
-               }
-       }
-}
-
-.navigationIcons {
-       display: flex;
-       flex: 0 0 auto;
-       flex-direction: row-reverse;
-       
-       > li {
-               flex: 0 0 auto;
-               
-               &:not(:last-child) {
-                       margin-left: 10px;
-               }
-               
-               > a {
-                       > .icon {
-                               color: $wcfHeaderLink;
-                       }
-                       
-                       &:hover > .icon {
-                               color: $wcfHeaderLinkActive;
-                       }
-               }
-       }
-}
-
-.contentNavigation {
-       align-items: center;
-       display: flex;
-       
-       // align <nav> to the right side
-       justify-content: flex-end;
-       
-       &:not(:first-child) {
-               margin-top: 30px;
-       }
-       
-       &:not(:last-child) {
-               margin-bottom: 30px;
-       }
-       
-       > nav {
-               flex: 0 0 auto;
-               order: 3;
-               
-               &.pageNavigation {
-                       order: 1;
-                       
-                       // use up maximum space, causing it to stick to the left while all other
-                       // <nav> elements will still be aligned to the right side
-                       flex: 1 1 auto;
-               }
-               
-               &.jsClipboardEditor {
-                       margin-right: 5px;
-                       order: 2;
-               }
-               
-               & + nav {
-                       flex: 0 0 auto;
-               }
-               
-               &:not(.pageNavigation) {
-                       text-align: right;
-               }
-       }
-       
-       ul {
-               display: inline-flex;
-               
-               > li {
-                       flex: 0 0 auto;
-                       
-                       &:not(:last-child) {
-                               margin-right: 5px;
-                       }
-               }
-       }
-}
-
-.pageNavigation > ul {
-       display: inline-flex;
-       
-       > li {
-               display: flex;
-               flex: 0 0 auto;
-               
-               > .invisible {
-                       display: none;
-               }
-               
-               > a,
-               > span {
-                       color: $wcfContentText;
-                       padding: 1px 8px;
-               }
-               
-               &.disabled > span {
-                       color: $wcfContentDimmedText;
-               }
-               
-               &.active > a,
-               &.active > span,
-               > a:hover {
-                       background-color: $wcfButtonBackgroundActive;
-                       color: $wcfButtonTextActive;
-               }
-               
-               > .icon {
-                       height: auto;
-                       line-height: inherit;
-                       width: auto;
-               }
-               
-               &:not(:last-child) {
-                       margin-right: 1px;
-               }
-       }
-}
-/*@todo
-.pageNavigation.small > ul > li {
-       > a,
-       > span:not(.invisible) {
-               padding: 1px 5px;
-       }
-}*/

diff --git a/wcfsetup/install/files/style/layout/pageNavigation.scss b/wcfsetup/install/files/style/layout/pageNavigation.scss
new file mode 100644 (file)
index 0000000..48388cd
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageNavigation.scss
@@ -0,0 +1,50 @@
+.pageNavigation {
+       background-color: $wcfNavigationBackground;
+       color: $wcfNavigationText;
+       flex: 0 0 auto;
+       padding: 5px 0;
+       z-index: 25;
+       
+       > div {
+               align-items: center;
+               display: flex;
+               justify-content: flex-end;
+               height: 30px;
+       }
+       
+       .icon {
+               color: $wcfNavigationText;
+       }
+       
+       a {
+               color: $wcfNavigationLink;
+               
+               &:hover {
+                       color: $wcfNavigationLinkActive;
+               }
+       }
+}
+
+.pageNavigationIcons {
+       display: flex;
+       flex: 0 0 auto;
+       flex-direction: row-reverse;
+       
+       > li {
+               flex: 0 0 auto;
+               
+               &:not(:last-child) {
+                       margin-left: 10px;
+               }
+               
+               > a {
+                       > .icon {
+                               color: $wcfHeaderLink;
+                       }
+                       
+                       &:hover > .icon {
+                               color: $wcfHeaderLinkActive;
+                       }
+               }
+       }
+}

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index fbf5dcd3df44a87aa509b907c81b5477954bded8..2182b5f3a876c499dcdd6d20215a554bda9beaa3 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -451,7 +451,7 @@
                .columnSubject > .statusDisplay {
                        opacity: 1;
                        
-                       > .pageNavigation {
+                       > .pagination {
                                opacity: 1;
                        }
                }
@@ -491,7 +491,7 @@
                }
        }
        
-       .pageNavigation {
+       .pagination {
                flex: 0 0 auto;
                opacity: 0;
                

diff --git a/wcfsetup/install/files/style/ui/pagination.scss b/wcfsetup/install/files/style/ui/pagination.scss
new file mode 100644 (file)
index 0000000..e1858af
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/pagination.scss
@@ -0,0 +1,39 @@
+.pagination > ul {
+       display: inline-flex;
+       
+       > li {
+               display: flex;
+               flex: 0 0 auto;
+               
+               > .invisible {
+                       display: none;
+               }
+               
+               > a,
+               > span {
+                       color: $wcfContentText;
+                       padding: 1px 8px;
+               }
+               
+               &.disabled > span {
+                       color: $wcfContentDimmedText;
+               }
+               
+               &.active > a,
+               &.active > span,
+               > a:hover {
+                       background-color: $wcfButtonBackgroundActive;
+                       color: $wcfButtonTextActive;
+               }
+               
+               > .icon {
+                       height: auto;
+                       line-height: inherit;
+                       width: auto;
+               }
+               
+               &:not(:last-child) {
+                       margin-right: 1px;
+               }
+       }
+}

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 133bcd7544815c67847af0021ff2377545c4c3f5..cf98c85612916c43a728019790ea66d4655a61f8 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2234,7 +2234,7 @@ Fehler sind beispielsweise:
                <item name="wcf.global.name"><![CDATA[Name]]></item>
                <item name="wcf.global.objectID"><![CDATA[ID]]></item>
                <item name="wcf.global.page.next"><![CDATA[Nächste Seite]]></item>
-               <item name="wcf.global.page.pageNavigation"><![CDATA[Navigation]]></item>
+               <item name="wcf.global.page.pagination"><![CDATA[Navigation]]></item>
                <item name="wcf.global.page.previous"><![CDATA[Vorherige Seite]]></item>
                <item name="wcf.global.pageDirection"><![CDATA[ltr]]></item> <!-- system variable; do not translate -->
                <item name="wcf.global.redirect.title"><![CDATA[Weiterleitung]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 1e795cf6a407815f97c8f93534b0cb5646ad799a..cdb32b1bae342371d70ff387a3763c1c663624bf 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2238,7 +2238,7 @@ Errors are:
                <item name="wcf.global.name"><![CDATA[Name]]></item>
                <item name="wcf.global.objectID"><![CDATA[ID]]></item>
                <item name="wcf.global.page.next"><![CDATA[Next Page]]></item>
-               <item name="wcf.global.page.pageNavigation"><![CDATA[Navigation]]></item>
+               <item name="wcf.global.page.pagination"><![CDATA[Navigation]]></item>
                <item name="wcf.global.page.previous"><![CDATA[Previous Page]]></item>
                <item name="wcf.global.pageDirection"><![CDATA[ltr]]></item> <!-- system variable; do not translate -->
                <item name="wcf.global.redirect.title"><![CDATA[Redirection]]></item>