mirror_php/Cachet
1
0
Fork 0
mirror of https://github.com/CachetHQ/Cachet.git synced 2025-01-17 21:49:01 +01:00
Code Issues Projects Releases Wiki Activity

Fix resposive mobile PR

Browse Source
This commit is contained in:
Joseph Cohen 2015-01-05 02:23:34 -06:00
parent 1a89dde195
commit 214898ae60
27 changed files with 344 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/js/start.js
View File

@ -53,6 +53,11 @@ $(function() {
};
};
$(".sidebar-toggler").click(function(e) {
e.preventDefault();
$(".wrapper").toggleClass("toggled");
});
$('.color-code').minicolors({
control: 'hue',
defaultValue: $(this).val() || '',

42
app/assets/sass/partials/_base.scss
View File

@ -9,4 +9,46 @@ body.dashboard {
table-layout: fixed;
-webkit-font-smoothing: antialiased;
line-height: $base-line-height;
.wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.wrapper.toggled {
padding-left: $sidebar-normal-width;;
}
.wrapper.toggled .sidebar {
width: $sidebar-normal-width;;
}
.wrapper.toggled .page-content {
position: absolute;
margin-right: -$sidebar-normal-width;;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.wrapper {
padding-left: 80px;
}
}
@media(min-width: $screen-sm-max) {
.wrapper {
padding-left: $sidebar-normal-width;
}
.wrapper.toggled {
padding-left: 0;
}
.wrapper.toggled .page-content {
position: relative;
margin-right: 0;
}
}
}

57
app/assets/sass/partials/_content.scss
View File

@ -1,30 +1,33 @@
body.dashboard {
.content {
position: relative;
display: table-cell;
vertical-align: top;
.page-content {
width: 100%;
.row {
margin: 10px 0;
.content-wrapper {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
&.header-fixed {
margin-top: 60px;
}
}
.header {
position: absolute;
position: relative;
top: 0;
left: 0;
color: #333;
background-color: #fff;
padding: 22px 14px;
padding: 22px 40px;
width: 100%;
height: 70px;
font-size: 1.2em;
border-bottom: 1px solid #eee;
z-index: 99;
&.sub-header {
padding: 8px 2px;
height: 50px;
}
&.fixed {
position: fixed;
padding-left: 250px;
}
i {
// padding-right: 10px;
padding-left: 270px;
}
input, button, .btn {
position: relative;
@ -44,9 +47,6 @@ body.dashboard {
text-transform: uppercase;
}
}
.content-wrapper {
margin-top: 80px;
}
.sub-header {
font-weight: 300;
@ -79,4 +79,31 @@ body.dashboard {
}
}
}
// Header media queries
@media (max-width: $screen-xs-max) {
.page-content {
.content-wrapper {
padding-left: 20px;
padding-right: 20px;
}
.header {
padding-left: 20px;
padding-right: 20px;
&.fixed {
padding-left: 20px;
padding-right: 20px;
}
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.page-content {
.header.fixed {
padding-left: 120px;
}
}
}
}

100
app/assets/sass/partials/_sidebar.scss
View File

@ -1,15 +1,26 @@
body.dashboard {
.sidebar {
display: table-cell;
vertical-align: top;
width: $sidebar-normal-width;
position: fixed;
left: $sidebar-normal-width;
width: 0;
height: 100%;
margin-left: -$sidebar-normal-width;
overflow-y: auto;
background: $sidebar-background-color;
@include box-shadow($sidebar-border-shadow);
position: relative;
z-index: 999;
z-index: 1000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
.sidebar-inner {
position: relative;
position: absolute;
top: 0;
width: $sidebar-normal-width;
margin: 0;
padding: 0;
list-style: none;
.profile {
padding: 20px;
@ -29,7 +40,7 @@ body.dashboard {
}
}
.quick-add-incident {
@extend text-center;
@extend .text-center;
padding: 10px;
}
ul {
@ -99,15 +110,27 @@ body.dashboard {
}
// Sidebar media queries
@media (max-width: $screen-sm-max) {
@media (min-width: $screen-xs-max) {
.sidebar {
width: $sidebar-normal-width;
}
.wrapper.toggled .sidebar {
width: 0;
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sidebar {
width: 80px;
left: 150px;
margin-left: -150px;
.sidebar-inner {
width: 80px;
.profile .avatar img {
width: 40px;
}
.profile .username {
@extend .hidden-xs;
.profile .username-wrapper {
@extend .hidden-sm;
}
.quick-add-incident {
@ -115,12 +138,10 @@ body.dashboard {
padding: 3px 6px;
}
i {
@extend .visible-xs;
@extend .visible-sm;
font-size: 20px;
}
span {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
@ -130,22 +151,26 @@ body.dashboard {
font-size: 25px;
}
& > span {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
}
.bottom-menu-sidebar {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
}
// Sidebar media queries
@media (max-width: $screen-sm-max) {
.sidebar {
@extend .hidden-xs;
.sidebar-toggler {
float: left;
padding: 10px;
position: relative;
top: -15px;
left: -5px;
margin-right: 10px;
cursor: pointer;
i {
font-size: 25px;
}
}
@ -154,6 +179,7 @@ body.dashboard {
top: 0;
bottom: 0;
position: absolute;
margin-left: 228px;
width: 22%;
background: #fcfcfc;
border-right: 1px solid #E8ECF1;
@ -162,7 +188,7 @@ body.dashboard {
margin: 0;
text-align: center;
font-size: 19px;
padding: 22px 0;
padding: 30px 0;
}
ul.menu {
@ -190,17 +216,41 @@ body.dashboard {
}
}
+ .content-panel {
.sidebar-toggler {
position: absolute;
top: 3px;
left: 20px;
font-size: 36px;
cursor: pointer;
}
+ .content-wrapper {
top: 0;
position: relative;
width: 78%;
margin-left: 22%;
padding: 24px 50px;
padding-bottom: 80px;
margin-left: 25%;
padding-right: 20px !important;
}
@media (max-width: $screen-sm-max) {
}
// Sub-sidebar media queries
@media (max-width: $screen-xs-max) {
.sub-sidebar {
position: relative;
margin-left: 0;
width: 100%;
+ .content-wrapper {
margin-left: 0;
width: 100%;
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sub-sidebar {
margin-left: 80px;
width: 25%;
}
}
}

3
app/views/dashboard/components/add-group.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>

3
app/views/dashboard/components/add.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>

3
app/views/dashboard/components/edit.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>

6
app/views/dashboard/components/index.blade.php
View File

@ -1,11 +1,12 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<div class="content-wrapper">
<div class="header sub-header">
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>
@ -14,7 +15,6 @@
</a>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div class="row">
<form name='componentList'>
<div class="col-sm-12 striped-list" id='component-list'>

7
app/views/dashboard/groups.blade.php
View File

@ -1,11 +1,12 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<div class="content-wrapper">
<div class="header sub-header">
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.component-groups') }}
</span>
@ -14,7 +15,6 @@
</a>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12 striped-list">
@forelse($groups as $group)
@ -33,4 +33,5 @@
</div>
</div>
</div>
</div>
@stop

3
app/views/dashboard/incidents/add.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon icon ion-android-alert"></i> {{ trans('cachet.dashboard.incident-add') }}
</span>

3
app/views/dashboard/incidents/edit.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon icon ion-android-alert"></i> {{ trans('cachet.dashboard.incident-add') }}
</span>

3
app/views/dashboard/incidents/incident-template.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon ion-plus"></i> {{ trans('cachet.dashboard.incident-add') }}
</span>

5
app/views/dashboard/incidents/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header fixed">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon icon ion-android-alert"></i> {{ trans('cachet.dashboard.incidents') }}
</span>
@ -10,7 +13,7 @@
</a>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div class="content-wrapper header-fixed">
<div class="row">
<div class="col-sm-12">
<p class='lead'>{{ trans_choice('cachet.dashboard.logged_incidents', $incidents->count(), ['count' => $incidents->count()]) }}</p>

5
app/views/dashboard/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon ion-speedometer"></i> {{ trans('cachet.dashboard.dashboard') }}
</span>
@ -17,7 +20,7 @@
{{ Form::open(['class' => 'component-inline form-horizontal', 'data-messenger' => 'Component updated.']) }}
<div class='row striped-list-item'>
<div class='col-lg-4 col-sm-12'>
<strong>{{ $component->name }}</strong>
<h4>{{ $component->name }}</h4>
</div>
<div class='col-lg-8 col-sm-12 radio-items'>
@foreach(trans('cachet.component.status') as $statusID => $status)

3
app/views/dashboard/metrics/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<i class="ion ion-stats-bars"></i> {{ trans('cachet.dashboard.metrics') }}
</div>
<div class="row">

3
app/views/dashboard/notifications/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<i class="ion ion-email"></i> {{ trans('cachet.dashboard.notifications') }}
</div>
<div class="row">

7
app/views/dashboard/settings/app-setup.blade.php
View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
</span>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

7
app/views/dashboard/settings/security.blade.php
View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
</span>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

7
app/views/dashboard/settings/stylesheet.blade.php
View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
</span>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

7
app/views/dashboard/settings/theme.blade.php
View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
</span>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

3
app/views/dashboard/team/edit.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class='uppercase'>
<i class="ion ion-person"></i> {{ trans('cachet.dashboard.user') }}
</span>

5
app/views/dashboard/team/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header fixed">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class="uppercase">
<i class="icon icon ion-android-alert"></i> {{ trans('cachet.dashboard.team') }}
</span>
@ -10,7 +13,7 @@
</a>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div class="content-wrapper header-fixed">
<div class="row">
<div class="col-sm-12">
<p class='lead'>Team Members will be able to add, modify &amp; edit components and incidents.</p>

3
app/views/dashboard/team/new.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class='uppercase'>
<i class="ion ion-person"></i> {{ trans('cachet.dashboard.user') }}
</span>

3
app/views/dashboard/user/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<div class="header">
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<span class='uppercase'>
<i class="ion ion-person"></i> {{ trans('cachet.dashboard.user') }}
</span>

2
app/views/layout/dashboard.blade.php
View File

@ -5,7 +5,7 @@
<body class="dashboard">
<div class="wrapper">
@include('partials.dashboard.sidebar')
<div class="content">
<div class="page-content">
@yield('content')
</div>
</div>

5
app/views/partials/dashboard/sidebar.blade.php
View File

@ -10,7 +10,7 @@
</a>
</div>
</div>
<div class='col-xs-9'>
<div class='col-xs-9 username-wrapper'>
<div class="profile pull-left">
<div class="username">{{ Auth::user()->username }}</div>
</div>
@ -50,7 +50,8 @@
</li>
<li {{ set_active('dashboard/team*') }}>
<a href="{{ route('dashboard.team') }}">
<i class="icons ion-ios-people"></i> {{ trans('cachet.dashboard.team') }}
<i class="icons ion-ios-people"></i>
<span>{{ trans('cachet.dashboard.team') }}</span>
</a>
</li>
{{-- <li {{ set_active('dashboard/metrics') }}>

3
app/views/partials/dashboard/sub-sidebar.blade.php
View File

@ -1,4 +1,7 @@
<div class='sub-sidebar'>
<div class="sidebar-toggler visible-xs">
<i class="icon ion-navicon"></i>
</div>
<h3>{{ $subTitle }}</h3>
<ul class='menu'>
@foreach($subMenu as $key => $item)