From dfdfae7b6d53cfd5aea0cd529475e3112df1c13d Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Thu, 6 Aug 2015 12:16:55 +0930 Subject: [PATCH] Remove footer and move language selection to header --- .../js/forum/src/components/FooterPrimary.js | 31 ------- .../forum/src/components/FooterSecondary.js | 62 ------------- .../js/forum/src/components/HeaderPrimary.js | 31 ++++++- framework/core/less/lib/App.less | 88 +------------------ framework/core/less/lib/Button.less | 3 +- framework/core/views/forum.blade.php | 10 --- 6 files changed, 34 insertions(+), 191 deletions(-) delete mode 100644 framework/core/js/forum/src/components/FooterPrimary.js delete mode 100644 framework/core/js/forum/src/components/FooterSecondary.js diff --git a/framework/core/js/forum/src/components/FooterPrimary.js b/framework/core/js/forum/src/components/FooterPrimary.js deleted file mode 100644 index 7d7e08804..000000000 --- a/framework/core/js/forum/src/components/FooterPrimary.js +++ /dev/null @@ -1,31 +0,0 @@ -import Component from 'flarum/Component'; -import ItemList from 'flarum/utils/ItemList'; -import listItems from 'flarum/helpers/listItems'; - -/** - * The `FooterPrimary` component displays primary footer controls, such as the - * forum statistics. On the default skin, these are shown on the left side of - * the footer. - */ -export default class FooterPrimary extends Component { - view() { - return ( - - ); - } - - /** - * Build an item list for the controls. - * - * @return {ItemList} - */ - items() { - const items = new ItemList(); - - // TODO: add forum statistics - - return items; - } -} diff --git a/framework/core/js/forum/src/components/FooterSecondary.js b/framework/core/js/forum/src/components/FooterSecondary.js deleted file mode 100644 index 7c9f0966c..000000000 --- a/framework/core/js/forum/src/components/FooterSecondary.js +++ /dev/null @@ -1,62 +0,0 @@ -import Component from 'flarum/Component'; -import SelectDropdown from 'flarum/components/SelectDropdown'; -import Button from 'flarum/components/Button'; -import ItemList from 'flarum/utils/ItemList'; -import listItems from 'flarum/helpers/listItems'; - -/** - * The `FooterSecondary` component displays secondary footer controls, such as - * the 'Powered by Flarum' message. On the default skin, these are shown on the - * right side of the footer. - */ -export default class FooterSecondary extends Component { - view() { - return ( - - ); - } - - /** - * Build an item list for the controls. - * - * @return {ItemList} - */ - items() { - const items = new ItemList(); - - if (Object.keys(app.locales).length > 1) { - const locales = []; - - for (const locale in app.locales) { - locales.push(Button.component({ - active: app.locale === locale, - children: app.locales[locale], - icon: app.locale === locale ? 'check' : true, - onclick: () => { - if (app.session.user) { - app.session.user.savePreferences({locale}).then(() => window.location.reload()); - } else { - document.cookie = `locale=${locale}; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT`; - window.location.reload(); - } - } - })); - } - - items.add('locale', SelectDropdown.component({ - children: locales, - buttonClassName: 'Button Button--text' - })); - } - - items.add('poweredBy', ( - - {app.trans('core.powered_by_flarum')} - - )); - - return items; - } -} diff --git a/framework/core/js/forum/src/components/HeaderPrimary.js b/framework/core/js/forum/src/components/HeaderPrimary.js index 34ffc203c..0d8bc841a 100644 --- a/framework/core/js/forum/src/components/HeaderPrimary.js +++ b/framework/core/js/forum/src/components/HeaderPrimary.js @@ -1,6 +1,8 @@ import Component from 'flarum/Component'; import ItemList from 'flarum/utils/ItemList'; import listItems from 'flarum/helpers/listItems'; +import SelectDropdown from 'flarum/components/SelectDropdown'; +import Button from 'flarum/components/Button'; /** * The `HeaderPrimary` component displays primary header controls. On the @@ -21,6 +23,33 @@ export default class HeaderPrimary extends Component { * @return {ItemList} */ items() { - return new ItemList(); + const items = new ItemList(); + + if (Object.keys(app.locales).length > 1) { + const locales = []; + + for (const locale in app.locales) { + locales.push(Button.component({ + active: app.locale === locale, + children: app.locales[locale], + icon: app.locale === locale ? 'check' : true, + onclick: () => { + if (app.session.user) { + app.session.user.savePreferences({locale}).then(() => window.location.reload()); + } else { + document.cookie = `locale=${locale}; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT`; + window.location.reload(); + } + } + })); + } + + items.add('locale', SelectDropdown.component({ + children: locales, + buttonClassName: 'Button Button--link' + })); + } + + return items; } } diff --git a/framework/core/less/lib/App.less b/framework/core/less/lib/App.less index 369385587..b38e17efe 100755 --- a/framework/core/less/lib/App.less +++ b/framework/core/less/lib/App.less @@ -2,7 +2,6 @@ position: relative !important; padding-top: @header-height; overflow-x: hidden; - min-height: 100vh; @media @phone { padding-top: @header-height-phone; @@ -253,8 +252,8 @@ vertical-align: top; font-size: 18px; font-weight: normal; - margin: 0; - line-height: 36px; + margin: 0 15px 0 0; + line-height: 34px; } .Header-secondary { float: right; @@ -283,86 +282,3 @@ padding-bottom: 50px; } } - -// ------------------------------------ -// Footer - -.Footer-controls { - margin: 0; - padding: 0; - list-style: none; - - > li { - display: inline-block; - vertical-align: middle; - } -} - -// On phones, the footer is displayed at the bottom of the drawer. The -// footer's primary controls don't display, but the secondary ones do. -// @todo Maybe we should reverse the naming of primary/secondary then? -@media @phone { - .App-footer { - position: fixed; - left: 15px; - bottom: 15px; - width: @drawer-width; - margin: 0; - z-index: 1; - - .container { - padding: 0; - } - } - .Footer-primary { - display: none; - } - .Footer-secondary { - float: none; - - > li { - margin-right: 15px; - } - } -} - -// On other devices, we put the footer at the bottom of the page by absolutely -// positioning it, relative to the page which we pad out at the bottom. We -// show the primary controls on the left, and the secondary controls on the -// right. -@media @tablet-up { - .App { - padding-bottom: 100px; - position: relative; - } - .App-footer { - position: absolute; - bottom: 20px; - left: 0; - right: 0; - - &, a { - color: @muted-more-color; - } - a { - &:hover, - &:focus { - color: @link-color; - } - } - } - .Footer-primary { - display: inline-block; - - .Footer-controls > li { - margin-right: 15px; - } - } - .Footer-secondary { - float: right; - - .Footer-controls > li { - margin-left: 15px; - } - } -} diff --git a/framework/core/less/lib/Button.less b/framework/core/less/lib/Button.less index 86e03027b..7745d50ae 100755 --- a/framework/core/less/lib/Button.less +++ b/framework/core/less/lib/Button.less @@ -146,7 +146,8 @@ &:active, &.active, &:focus, - &.focus { + &.focus, + .open > &.Dropdown-toggle { background: transparent !important; .box-shadow(none); color: @link-color; diff --git a/framework/core/views/forum.blade.php b/framework/core/views/forum.blade.php index b88825f7f..f816ca8dc 100644 --- a/framework/core/views/forum.blade.php +++ b/framework/core/views/forum.blade.php @@ -17,9 +17,6 @@ * - #home-link * - #header-primary * - #header-secondary - * - #footer - * - #footer-primary - * - #footer-secondary * - #content * - #composer */ @@ -43,13 +40,6 @@ - -