Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-16 08:15:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3658 from scossar/admin-settings-slideout-menu

Browse Source 
FEATURE: Add slide-out menu for small screens on admin settings page
This commit is contained in:
Sam 2015-08-17 11:19:05 +10:00
commit 6dc8dda7b6
3 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/admin/controllers/admin-site-settings.js.es6
View File

@ -64,6 +64,10 @@ export default Ember.ArrayController.extend({
filter: '', filter: '',
onlyOverridden: false onlyOverridden: false
}); });
},
toggleMenu() {
$('.admin-detail').toggleClass('mobile-closed mobile-open');
} }
} }

3
app/assets/javascripts/admin/templates/site-settings.hbs
View File

@ -6,6 +6,7 @@
</label> </label>
</div> </div>
<div class='controls'> <div class='controls'>
<button {{action "toggleMenu"}} class="menu-toggle">{{fa-icon "bars"}}</button>
{{text-field value=filter placeholderKey="type_to_filter" class="no-blur"}} {{text-field value=filter placeholderKey="type_to_filter" class="no-blur"}}
<button {{action "clearFilter"}} class="btn">{{i18n 'admin.site_settings.clear_filter'}}</button> <button {{action "clearFilter"}} class="btn">{{i18n 'admin.site_settings.clear_filter'}}</button>
</div> </div>
@ -26,7 +27,7 @@
</ul> </ul>
</div> </div>
<div class="admin-detail pull-left"> <div class="admin-detail pull-left mobile-closed">
{{outlet}} {{outlet}}
</div> </div>

59
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -21,6 +21,12 @@ $mobile-breakpoint: 700px;
} }
} }
.admin-contents {
position: relative;
margin-left: -10px;
margin-right: -10px;
}
.admin-contents table { .admin-contents table {
width: 100%; width: 100%;
tr {text-align: left;} tr {text-align: left;}
@ -145,6 +151,24 @@ td.flaggers td {
.controls { .controls {
margin-left: 10px; margin-left: 10px;
} }
.controls .menu-toggle {
display: none;
float: left;
font-size: 24px;
padding: 3px 6px;
margin-right: 32px;
border: 1px solid lighten($primary, 40%);
border-radius: 3px;
background: transparent;
color: $primary;
&:hover {
background-color: lighten($primary, 60%);
}
@media (max-width: $mobile-breakpoint) {
display: inline-block;
}
}
button { button {
margin-right: 5px; margin-right: 5px;
@ -214,12 +238,19 @@ td.flaggers td {
.admin-nav { .admin-nav {
width: 18.018%; width: 18.018%;
position: relative;
// The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
width: 33%; position: absolute;
z-index: 0;
width: 50%;
} }
margin-top: 30px; margin-top: 30px;
.nav-stacked { .nav-stacked {
border-right: none; border-right: none;
@media (max-width: $mobile-breakpoint) {
//margin-right: 10px;
}
} }
li a.active { li a.active {
color: $secondary; color: $secondary;
@ -230,18 +261,38 @@ td.flaggers td {
.admin-detail { .admin-detail {
width: 76.5765%; width: 76.5765%;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
width: 67%; z-index: 10;
width: 100%;
} }
min-height: 800px; background-color: $secondary;
// Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
margin-left: 0; margin-left: 0;
border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%); border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
padding: 30px 0 30px 16px; padding: 30px 0;
border: none;
}
}
.admin-detail.mobile-open {
@media (max-width: $mobile-breakpoint) {
transition: transform 0.3s ease;
transform: (translateX(50%));
}
}
.admin-detail.mobile-closed {
@media (max-width: $mobile-breakpoint) {
transition: transform 0.3s ease;
transform: (translateX(0));
} }
} }
.settings { .settings {
margin-left: 10px;
margin-right: 10px;
.setting { .setting {
padding-bottom: 20px; padding-bottom: 20px;