From 214898ae602691614c07d8d6b9c72d0d1752e071 Mon Sep 17 00:00:00 2001 From: Joseph Cohen Date: Mon, 5 Jan 2015 02:23:34 -0600 Subject: [PATCH] Fix resposive mobile PR --- app/assets/js/start.js | 5 + app/assets/sass/partials/_base.scss | 42 +++++++ app/assets/sass/partials/_content.scss | 57 +++++++--- app/assets/sass/partials/_sidebar.scss | 104 +++++++++++++----- .../dashboard/components/add-group.blade.php | 3 + app/views/dashboard/components/add.blade.php | 3 + app/views/dashboard/components/edit.blade.php | 3 + .../dashboard/components/index.blade.php | 78 ++++++------- app/views/dashboard/groups.blade.php | 55 ++++----- app/views/dashboard/incidents/add.blade.php | 3 + app/views/dashboard/incidents/edit.blade.php | 97 ++++++++-------- .../incidents/incident-template.blade.php | 3 + app/views/dashboard/incidents/index.blade.php | 5 +- app/views/dashboard/index.blade.php | 5 +- app/views/dashboard/metrics/index.blade.php | 3 + .../dashboard/notifications/index.blade.php | 3 + .../dashboard/settings/app-setup.blade.php | 11 +- .../dashboard/settings/security.blade.php | 11 +- .../dashboard/settings/stylesheet.blade.php | 11 +- app/views/dashboard/settings/theme.blade.php | 11 +- app/views/dashboard/team/edit.blade.php | 3 + app/views/dashboard/team/index.blade.php | 5 +- app/views/dashboard/team/new.blade.php | 3 + app/views/dashboard/user/index.blade.php | 3 + app/views/layout/dashboard.blade.php | 2 +- .../partials/dashboard/sidebar.blade.php | 5 +- .../partials/dashboard/sub-sidebar.blade.php | 3 + 27 files changed, 344 insertions(+), 193 deletions(-) diff --git a/app/assets/js/start.js b/app/assets/js/start.js index 25eb231b..fe167967 100644 --- a/app/assets/js/start.js +++ b/app/assets/js/start.js @@ -53,6 +53,11 @@ $(function() { }; }; + $(".sidebar-toggler").click(function(e) { + e.preventDefault(); + $(".wrapper").toggleClass("toggled"); + }); + $('.color-code').minicolors({ control: 'hue', defaultValue: $(this).val() || '', diff --git a/app/assets/sass/partials/_base.scss b/app/assets/sass/partials/_base.scss index 8bcb190c..9d50c626 100644 --- a/app/assets/sass/partials/_base.scss +++ b/app/assets/sass/partials/_base.scss @@ -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; + } + } } diff --git a/app/assets/sass/partials/_content.scss b/app/assets/sass/partials/_content.scss index 87412d08..42f4b986 100644 --- a/app/assets/sass/partials/_content.scss +++ b/app/assets/sass/partials/_content.scss @@ -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; + } + } + } + } diff --git a/app/assets/sass/partials/_sidebar.scss b/app/assets/sass/partials/_sidebar.scss index a2e86939..d2c29766 100644 --- a/app/assets/sass/partials/_sidebar.scss +++ b/app/assets/sass/partials/_sidebar.scss @@ -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%; } } } diff --git a/app/views/dashboard/components/add-group.blade.php b/app/views/dashboard/components/add-group.blade.php index ee609021..f09911ee 100644 --- a/app/views/dashboard/components/add-group.blade.php +++ b/app/views/dashboard/components/add-group.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.components') }} diff --git a/app/views/dashboard/components/add.blade.php b/app/views/dashboard/components/add.blade.php index 332776a2..622add57 100644 --- a/app/views/dashboard/components/add.blade.php +++ b/app/views/dashboard/components/add.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.components') }} diff --git a/app/views/dashboard/components/edit.blade.php b/app/views/dashboard/components/edit.blade.php index 89fb9107..b816df59 100644 --- a/app/views/dashboard/components/edit.blade.php +++ b/app/views/dashboard/components/edit.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.components') }} diff --git a/app/views/dashboard/components/index.blade.php b/app/views/dashboard/components/index.blade.php index 31b4ccb4..0d5def3f 100644 --- a/app/views/dashboard/components/index.blade.php +++ b/app/views/dashboard/components/index.blade.php @@ -1,48 +1,48 @@ @extends('layout.dashboard') @section('content') -@if(isset($subMenu)) -@include('partials.dashboard.sub-sidebar') -@endif -
-
- - {{ trans('cachet.dashboard.components') }} - - - {{ trans('cachet.dashboard.component-add') }} - -
-
-
-
-
-
- @forelse($components as $component) -
-
-

- @if($components->count() > 1) - +
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif +
+
+ + {{ trans('cachet.dashboard.components') }} + + + {{ trans('cachet.dashboard.component-add') }} + +
+
+
+ +
+ @forelse($components as $component) +
+
+

+ @if($components->count() > 1) + + @endif + {{ $component->name }} {{ $component->humanStatus }} +

+ @if($component->description) +

{{ $component->description }}

@endif - {{ $component->name }} {{ $component->humanStatus }} -

- @if($component->description) -

{{ $component->description }}

- @endif +
+
+ Edit + Delete +
+
-
- Edit - Delete -
- + @empty +
You should add a component.
+ @endforelse
- @empty -
You should add a component.
- @endforelse -
- + +
-
@stop diff --git a/app/views/dashboard/groups.blade.php b/app/views/dashboard/groups.blade.php index 68b66d4f..76b5c637 100644 --- a/app/views/dashboard/groups.blade.php +++ b/app/views/dashboard/groups.blade.php @@ -1,35 +1,36 @@ @extends('layout.dashboard') @section('content') -@if(isset($subMenu)) -@include('partials.dashboard.sub-sidebar') -@endif -
-
- - {{ trans('cachet.dashboard.component-groups') }} - - - {{ trans('cachet.dashboard.component-groups-add') }} - -
-
-
-
-
- @forelse($groups as $group) -
-
- {{ $group->name }} -
-
- Edit - Delete +
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif +
+
+ + {{ trans('cachet.dashboard.component-groups') }} + + + {{ trans('cachet.dashboard.component-groups-add') }} + +
+
+
+
+ @forelse($groups as $group) +
+
+ {{ $group->name }} +
+
+ Edit + Delete +
+ @empty +
You should add a component.
+ @endforelse
- @empty -
You should add a component.
- @endforelse
diff --git a/app/views/dashboard/incidents/add.blade.php b/app/views/dashboard/incidents/add.blade.php index dc80e091..cc4f4246 100644 --- a/app/views/dashboard/incidents/add.blade.php +++ b/app/views/dashboard/incidents/add.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.incident-add') }} diff --git a/app/views/dashboard/incidents/edit.blade.php b/app/views/dashboard/incidents/edit.blade.php index 1c1644d8..5605e304 100644 --- a/app/views/dashboard/incidents/edit.blade.php +++ b/app/views/dashboard/incidents/edit.blade.php @@ -1,57 +1,60 @@ @extends('layout.dashboard') @section('content') -
+
+
+ +
{{ trans('cachet.dashboard.incident-add') }} - > Edit an Incident -
-
-
-
- {{ Form::open(['name' => 'IncidentForm', 'class' => 'form-vertical', 'role' => 'form']) }} -
-
- - name}} /> -
-
-
- - - - -
-
- - - You may also use Markdown. -
-
+ > Edit an Incident +
+
+
+
+ {{ Form::open(['name' => 'IncidentForm', 'class' => 'form-vertical', 'role' => 'form']) }} +
+
+ + name}} /> +
+
+
+ + + + +
+
+ + + You may also use Markdown. +
+
- - id}} /> - - Cancel - {{ Form::close() }} + + id}} /> + + Cancel + {{ Form::close() }} +
-
@stop diff --git a/app/views/dashboard/incidents/incident-template.blade.php b/app/views/dashboard/incidents/incident-template.blade.php index ef50abc9..26216adf 100644 --- a/app/views/dashboard/incidents/incident-template.blade.php +++ b/app/views/dashboard/incidents/incident-template.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.incident-add') }} diff --git a/app/views/dashboard/incidents/index.blade.php b/app/views/dashboard/incidents/index.blade.php index 71abc134..0be72462 100644 --- a/app/views/dashboard/incidents/index.blade.php +++ b/app/views/dashboard/incidents/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.incidents') }} @@ -10,7 +13,7 @@
-
+

{{ trans_choice('cachet.dashboard.logged_incidents', $incidents->count(), ['count' => $incidents->count()]) }}

diff --git a/app/views/dashboard/index.blade.php b/app/views/dashboard/index.blade.php index 73828d70..0730a7e2 100644 --- a/app/views/dashboard/index.blade.php +++ b/app/views/dashboard/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.dashboard') }} @@ -17,7 +20,7 @@ {{ Form::open(['class' => 'component-inline form-horizontal', 'data-messenger' => 'Component updated.']) }}
- {{ $component->name }} +

{{ $component->name }}

@foreach(trans('cachet.component.status') as $statusID => $status) diff --git a/app/views/dashboard/metrics/index.blade.php b/app/views/dashboard/metrics/index.blade.php index a6a1f42e..b5effc73 100644 --- a/app/views/dashboard/metrics/index.blade.php +++ b/app/views/dashboard/metrics/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.metrics') }}
diff --git a/app/views/dashboard/notifications/index.blade.php b/app/views/dashboard/notifications/index.blade.php index f94ee5ac..8bf6ab55 100644 --- a/app/views/dashboard/notifications/index.blade.php +++ b/app/views/dashboard/notifications/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.notifications') }}
diff --git a/app/views/dashboard/settings/app-setup.blade.php b/app/views/dashboard/settings/app-setup.blade.php index 6ac4a0e4..0283b152 100644 --- a/app/views/dashboard/settings/app-setup.blade.php +++ b/app/views/dashboard/settings/app-setup.blade.php @@ -1,15 +1,10 @@ @extends('layout.dashboard') @section('content') - @if(isset($subMenu)) - @include('partials.dashboard.sub-sidebar') - @endif
-
- - {{ trans('cachet.dashboard.settings') }} - -
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif
diff --git a/app/views/dashboard/settings/security.blade.php b/app/views/dashboard/settings/security.blade.php index ffba91a0..80ab0cc8 100644 --- a/app/views/dashboard/settings/security.blade.php +++ b/app/views/dashboard/settings/security.blade.php @@ -1,15 +1,10 @@ @extends('layout.dashboard') @section('content') - @if(isset($subMenu)) - @include('partials.dashboard.sub-sidebar') - @endif
-
- - {{ trans('cachet.dashboard.settings') }} - -
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif
diff --git a/app/views/dashboard/settings/stylesheet.blade.php b/app/views/dashboard/settings/stylesheet.blade.php index 49b42bac..f57480d9 100644 --- a/app/views/dashboard/settings/stylesheet.blade.php +++ b/app/views/dashboard/settings/stylesheet.blade.php @@ -1,15 +1,10 @@ @extends('layout.dashboard') @section('content') - @if(isset($subMenu)) - @include('partials.dashboard.sub-sidebar') - @endif
-
- - {{ trans('cachet.dashboard.settings') }} - -
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif
diff --git a/app/views/dashboard/settings/theme.blade.php b/app/views/dashboard/settings/theme.blade.php index 1e1e5249..03bade3e 100644 --- a/app/views/dashboard/settings/theme.blade.php +++ b/app/views/dashboard/settings/theme.blade.php @@ -1,15 +1,10 @@ @extends('layout.dashboard') @section('content') - @if(isset($subMenu)) - @include('partials.dashboard.sub-sidebar') - @endif
-
- - {{ trans('cachet.dashboard.settings') }} - -
+ @if(isset($subMenu)) + @include('partials.dashboard.sub-sidebar') + @endif
diff --git a/app/views/dashboard/team/edit.blade.php b/app/views/dashboard/team/edit.blade.php index 086db972..f64c81ad 100644 --- a/app/views/dashboard/team/edit.blade.php +++ b/app/views/dashboard/team/edit.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.user') }} diff --git a/app/views/dashboard/team/index.blade.php b/app/views/dashboard/team/index.blade.php index 73dfd121..14196255 100644 --- a/app/views/dashboard/team/index.blade.php +++ b/app/views/dashboard/team/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.team') }} @@ -10,7 +13,7 @@
-
+

Team Members will be able to add, modify & edit components and incidents.

diff --git a/app/views/dashboard/team/new.blade.php b/app/views/dashboard/team/new.blade.php index 359e20d8..7d9f5fc1 100644 --- a/app/views/dashboard/team/new.blade.php +++ b/app/views/dashboard/team/new.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.user') }} diff --git a/app/views/dashboard/user/index.blade.php b/app/views/dashboard/user/index.blade.php index 80794231..19c33b3f 100644 --- a/app/views/dashboard/user/index.blade.php +++ b/app/views/dashboard/user/index.blade.php @@ -2,6 +2,9 @@ @section('content')
+
+ +
{{ trans('cachet.dashboard.user') }} diff --git a/app/views/layout/dashboard.blade.php b/app/views/layout/dashboard.blade.php index cca99f2d..eea0113f 100644 --- a/app/views/layout/dashboard.blade.php +++ b/app/views/layout/dashboard.blade.php @@ -5,7 +5,7 @@
@include('partials.dashboard.sidebar') -
+
@yield('content')
diff --git a/app/views/partials/dashboard/sidebar.blade.php b/app/views/partials/dashboard/sidebar.blade.php index 0eed7075..1bc40fc2 100644 --- a/app/views/partials/dashboard/sidebar.blade.php +++ b/app/views/partials/dashboard/sidebar.blade.php @@ -10,7 +10,7 @@
-
+
{{ Auth::user()->username }}
@@ -50,7 +50,8 @@
  • - {{ trans('cachet.dashboard.team') }} + + {{ trans('cachet.dashboard.team') }}
    • {{--
  • diff --git a/app/views/partials/dashboard/sub-sidebar.blade.php b/app/views/partials/dashboard/sub-sidebar.blade.php index c606ab48..9e83fd50 100644 --- a/app/views/partials/dashboard/sub-sidebar.blade.php +++ b/app/views/partials/dashboard/sub-sidebar.blade.php @@ -1,4 +1,7 @@
    +
    + +

    {{ $subTitle }}

      @foreach($subMenu as $key => $item)