github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-23 23:29:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make mobile header smaller

Browse Source
This commit is contained in:
Toby Zerner
2015-03-04 09:48:56 +10:30
parent c55dbe68cb
commit ac2116deea
4 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ember/app/styles/bootstrap/variables.less
View File

@ -74,6 +74,8 @@
@drawer-width: 270px; @drawer-width: 270px;
@index-pane-width: 400px; @index-pane-width: 400px;
@header-height: 56px;
@mobile-header-height: 46px;
// --------------------------------- // ---------------------------------
// BOOTSTRAP // BOOTSTRAP

2
ember/app/styles/flarum/composer.less
View File

@ -65,7 +65,7 @@
z-index: @zindex-composer; z-index: @zindex-composer;
background: @fl-body-bg; background: @fl-body-bg;
height: 100vh !important; height: 100vh !important;
padding-top: 56px; padding-top: @mobile-header-height;
&:before { &:before {
content: " "; content: " ";

31
ember/app/styles/flarum/layout.less
View File

@ -16,7 +16,6 @@ body {
.toolbar() { .toolbar() {
background: fade(@fl-hdr-bg, 98%); background: fade(@fl-hdr-bg, 98%);
transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
height: 56px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -24,6 +23,13 @@ body {
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
border-bottom: 1px solid @fl-body-control-bg; border-bottom: 1px solid @fl-body-control-bg;
.transition(~"box-shadow 0.2s, left 0.2s"); .transition(~"box-shadow 0.2s, left 0.2s");
@media @phone {
height: @mobile-header-height;
}
@media @tablet, @desktop, @desktop-hd {
height: @header-height;
}
} }
// Fix a solid white box to the top of the viewport. This toolbar's contents // Fix a solid white box to the top of the viewport. This toolbar's contents
@ -54,7 +60,7 @@ body {
.primary-control, .title-control, .back-control { .primary-control, .title-control, .back-control {
position: fixed; position: fixed;
z-index: @zindex-navbar-fixed + 1; z-index: @zindex-navbar-fixed + 1;
top: 10px; top: 5px;
margin: 0; margin: 0;
& .btn { & .btn {
@ -69,7 +75,7 @@ body {
} }
.primary-control { .primary-control {
width: auto; width: auto;
right: 10px; right: 5px;
.transition(right 0.2s); .transition(right 0.2s);
.drawer-open .global-page & { .drawer-open .global-page & {
@ -117,7 +123,7 @@ body {
} }
} }
.back-control { .back-control {
left: 10px; left: 5px;
.transition(left 0.2s); .transition(left 0.2s);
.drawer-open .global-page & { .drawer-open .global-page & {
@ -210,7 +216,7 @@ body {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
line-height: 56px; line-height: @mobile-header-height;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
} }
@ -231,7 +237,7 @@ body {
@media @tablet, @desktop, @desktop-hd { @media @tablet, @desktop, @desktop-hd {
.global-header { .global-header {
padding: 10px; padding: 10px;
height: 56px; height: @header-height;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -308,10 +314,6 @@ body {
// ------------------------------------ // ------------------------------------
// Content Area // Content Area
.global-content {
padding-top: 56px;
}
// On phones, the content area overlays the drawer, so we must give it a // On phones, the content area overlays the drawer, so we must give it a
// background and min-height so it cannot be seen through. When the drawer is // background and min-height so it cannot be seen through. When the drawer is
// meant to be open, we slide the content to the right to reveal the drawer. // meant to be open, we slide the content to the right to reveal the drawer.
@ -322,8 +324,9 @@ body {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
padding-bottom: 15px; padding-bottom: 15px;
.transition(margin-left 0.2s); padding-top: @mobile-header-height;
.box-shadow(0 0 6px @fl-shadow-color); .box-shadow(0 0 6px @fl-shadow-color);
.transition(margin-left 0.2s);
.drawer-open & { .drawer-open & {
margin-left: @drawer-width; margin-left: @drawer-width;
@ -331,6 +334,12 @@ body {
} }
} }
@media @tablet, @desktop, @desktop-hd {
.global-content {
padding-top: @header-height;
}
}
// ------------------------------------ // ------------------------------------
// Footer // Footer

2
ember/app/styles/flarum/modals.less
View File

@ -84,7 +84,7 @@
border-radius: 0; border-radius: 0;
border: 0; border: 0;
min-height: 100vh; min-height: 100vh;
padding-top: 56px; padding-top: @mobile-header-height;
.box-shadow(none); .box-shadow(none);
} }
.modal-header { .modal-header {