mirror of
https://github.com/flarum/framework.git
synced 2024-12-12 06:03:39 +08:00
Remove footer and move language selection to header
This commit is contained in:
Toby Zerner
parent
dd7bfb17ed
commit
dfdfae7b6d
|
|
@ -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 (
|
||||
<ul className="Footer-controls">
|
||||
{listItems(this.items().toArray())}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build an item list for the controls.
|
||||
*
|
||||
* @return {ItemList}
|
||||
*/
|
||||
items() {
|
||||
const items = new ItemList();
|
||||
|
||||
// TODO: add forum statistics
|
||||
|
||||
return items;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<ul className="Footer-controls">
|
||||
{listItems(this.items().toArray())}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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', (
|
||||
<a href="http://flarum.org?r=forum" target="_blank">
|
||||
{app.trans('core.powered_by_flarum')}
|
||||
</a>
|
||||
));
|
||||
|
||||
return items;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,8 @@
|
|||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
&.focus,
|
||||
.open > &.Dropdown-toggle {
|
||||
background: transparent !important;
|
||||
.box-shadow(none);
|
||||
color: @link-color;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,6 @@
|
|||
* - #home-link
|
||||
* - #header-primary
|
||||
* - #header-secondary
|
||||
* - #footer
|
||||
* - #footer-primary
|
||||
* - #footer-secondary
|
||||
* - #content
|
||||
* - #composer
|
||||
*/
|
||||
|
|
@ -43,13 +40,6 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<footer id="footer" class="App-footer">
|
||||
<div class="container">
|
||||
<div id="footer-primary" class="Footer-primary"></div>
|
||||
<div id="footer-secondary" class="Footer-secondary"></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<main class="App-content">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user