Fix resposive mobile PR

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

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() || '',

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;
}
}
}

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;
}
}
}
}

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 {
top: 0;
position: relative;
width: 78%;
margin-left: 22%;
padding: 24px 50px;
padding-bottom: 80px;
.sidebar-toggler {
position: absolute;
top: 3px;
left: 20px;
font-size: 36px;
cursor: pointer;
}
@media (max-width: $screen-sm-max) {
+ .content-wrapper {
top: 0;
position: relative;
margin-left: 25%;
padding-right: 20px !important;
}
}
// 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%;
}
}
}

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>

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>

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>

View File

@ -1,48 +1,48 @@
@extends('layout.dashboard')
@section('content')
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>
<a class="btn btn-sm btn-success pull-right" href="{{ route('dashboard.components.add') }}">
{{ trans('cachet.dashboard.component-add') }}
</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'>
@forelse($components as $component)
<div class='row striped-list-item'>
<div class='col-md-8'>
<h4>
@if($components->count() > 1)
<span class='drag-handle'><i class='ion-drag'></i></span>
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class="content-wrapper">
<div class="header sub-header">
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
</span>
<a class="btn btn-sm btn-success pull-right" href="{{ route('dashboard.components.add') }}">
{{ trans('cachet.dashboard.component-add') }}
</a>
<div class="clearfix"></div>
</div>
<div class="row">
<form name='componentList'>
<div class="col-sm-12 striped-list" id='component-list'>
@forelse($components as $component)
<div class='row striped-list-item'>
<div class='col-md-8'>
<h4>
@if($components->count() > 1)
<span class='drag-handle'><i class='ion-drag'></i></span>
@endif
{{ $component->name }} <small>{{ $component->humanStatus }}</small>
</h4>
@if($component->description)
<p><small>{{ $component->description }}</small></p>
@endif
{{ $component->name }} <small>{{ $component->humanStatus }}</small>
</h4>
@if($component->description)
<p><small>{{ $component->description }}</small></p>
@endif
</div>
<div class='col-md-4 text-right'>
<a href='/dashboard/components/{{ $component->id }}/edit' class='btn btn-default'>Edit</a>
<a href='/dashboard/components/{{ $component->id }}/delete' class='btn btn-danger'>Delete</a>
</div>
<input type='hidden' rel='order' name='component[{{ $component->id }}]' value='{{ $component->order }}' />
</div>
<div class='col-md-4 text-right'>
<a href='/dashboard/components/{{ $component->id }}/edit' class='btn btn-default'>Edit</a>
<a href='/dashboard/components/{{ $component->id }}/delete' class='btn btn-danger'>Delete</a>
</div>
<input type='hidden' rel='order' name='component[{{ $component->id }}]' value='{{ $component->order }}' />
@empty
<div class='list-group-item text-danger'>You should add a component.</div>
@endforelse
</div>
@empty
<div class='list-group-item text-danger'>You should add a component.</div>
@endforelse
</div>
</form>
</form>
</div>
</div>
</div>
</div>
@stop

View File

@ -1,35 +1,36 @@
@extends('layout.dashboard')
@section('content')
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class='content-panel'>
<div class="header">
<span class="uppercase">
<i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.component-groups') }}
</span>
<a class="btn btn-sm btn-success pull-right" href="{{ route('dashboard.components.groups.add') }}">
{{ trans('cachet.dashboard.component-groups-add') }}
</a>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12 striped-list">
@forelse($groups as $group)
<div class='row striped-list-item'>
<div class='col-md-8'>
<strong>{{ $group->name }}</strong>
</div>
<div class='col-md-4 text-right'>
<a href='#' class='btn btn-default'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
<div class='content-panel'>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<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>
<a class="btn btn-sm btn-success pull-right" href="{{ route('dashboard.components.groups.add') }}">
{{ trans('cachet.dashboard.component-groups-add') }}
</a>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-sm-12 striped-list">
@forelse($groups as $group)
<div class='row striped-list-item'>
<div class='col-md-8'>
<strong>{{ $group->name }}</strong>
</div>
<div class='col-md-4 text-right'>
<a href='#' class='btn btn-default'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
</div>
</div>
@empty
<div class='list-group-item text-danger'>You should add a component.</div>
@endforelse
</div>
@empty
<div class='list-group-item text-danger'>You should add a component.</div>
@endforelse
</div>
</div>
</div>

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>

View File

@ -1,57 +1,60 @@
@extends('layout.dashboard')
@section('content')
<div class="header">
<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>
> <small>Edit an Incident</small>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-md-12">
{{ Form::open(['name' => 'IncidentForm', 'class' => 'form-vertical', 'role' => 'form']) }}
<fieldset>
<div class="form-group">
<label for="incident-name">Incident Name</label>
<input type="text" class='form-control' name='incident[name]' id='incident-name' required value={{$incident->name}} />
</div>
<div class="form-group">
<label for="incident-name">Incident Status</label><br />
<label class="radio-inline">
<input type="radio" name="incident[status]" value="1" {{ ($incident->status == 1) ? "checked=checked" : "" }} />
<i class="icon ion-flag"></i>
{{ trans('cachet.incident.status')[1] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="2" {{ ($incident->status == 2) ? "checked=checked" : "" }}/>
<i class="icon ion-alert-circled"></i>
{{ trans('cachet.incident.status')[2] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="3" {{ ($incident->status == 3) ? "checked=checked" : "" }}/>
<i class="icon ion-eye"></i>
{{ trans('cachet.incident.status')[3] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="4" {{ ($incident->status == 4) ? "checked=checked" : "" }}/>
<i class="icon ion-checkmark"></i>
{{ trans('cachet.incident.status')[4] }}
</label>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="incident[message]" class="form-control" rows="5">{{$incident->message}}</textarea>
<span class='help-block'>You may also use Markdown.</span>
</div>
</fieldset>
> <small>Edit an Incident</small>
</div>
<div class="content-wrapper">
<div class="row">
<div class="col-md-12">
{{ Form::open(['name' => 'IncidentForm', 'class' => 'form-vertical', 'role' => 'form']) }}
<fieldset>
<div class="form-group">
<label for="incident-name">Incident Name</label>
<input type="text" class='form-control' name='incident[name]' id='incident-name' required value={{$incident->name}} />
</div>
<div class="form-group">
<label for="incident-name">Incident Status</label><br />
<label class="radio-inline">
<input type="radio" name="incident[status]" value="1" {{ ($incident->status == 1) ? "checked=checked" : "" }} />
<i class="icon ion-flag"></i>
{{ trans('cachet.incident.status')[1] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="2" {{ ($incident->status == 2) ? "checked=checked" : "" }}/>
<i class="icon ion-alert-circled"></i>
{{ trans('cachet.incident.status')[2] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="3" {{ ($incident->status == 3) ? "checked=checked" : "" }}/>
<i class="icon ion-eye"></i>
{{ trans('cachet.incident.status')[3] }}
</label>
<label class="radio-inline">
<input type="radio" name="incident[status]" value="4" {{ ($incident->status == 4) ? "checked=checked" : "" }}/>
<i class="icon ion-checkmark"></i>
{{ trans('cachet.incident.status')[4] }}
</label>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="incident[message]" class="form-control" rows="5">{{$incident->message}}</textarea>
<span class='help-block'>You may also use Markdown.</span>
</div>
</fieldset>
<input type="hidden" name="incident[user_id]" value="{{ Auth::user()->id }}" />
<input type="hidden" name="incident[id]" value={{$incident->id}} />
<button type="submit" class="btn btn-success">Save Incident</button>
<a class="btn btn-default" href="{{ route('dashboard.incidents') }}">Cancel</a>
{{ Form::close() }}
<input type="hidden" name="incident[user_id]" value="{{ Auth::user()->id }}" />
<input type="hidden" name="incident[id]" value={{$incident->id}} />
<button type="submit" class="btn btn-success">Save Incident</button>
<a class="btn btn-default" href="{{ route('dashboard.incidents') }}">Cancel</a>
{{ Form::close() }}
</div>
</div>
</div>
</div>
@stop

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>

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>

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)

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">

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">

View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
@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>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
@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>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
@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>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

View File

@ -1,15 +1,10 @@
@extends('layout.dashboard')
@section('content')
@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>
@if(isset($subMenu))
@include('partials.dashboard.sub-sidebar')
@endif
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">

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>

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>

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>

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>

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>

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') }}>

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)