adding breadcrumb on top & widgets bar

8 files changed, 159 insertions, 5 deletions

diff --git a/app/assets/javascripts/widget_bar.coffee b/app/assets/javascripts/widget_bar.coffee
new file mode 100644
index 000000000..b06d574ed
--- /dev/null
+++ b/app/assets/javascripts/widget_bar.coffee
@@ -0,0 +1,6 @@
+@widget_bar = ->
+  $('#widget_bar').each ->
+    $(this).on 'click', '.toggleWidgets', (e) ->
+      $(this).parent().toggleClass 'open'
+
+$(document).on 'ready turbolinks:load', widget_bar
diff --git a/app/assets/stylesheets/new/components/_main_nav.sass b/app/assets/stylesheets/new/components/_main_nav.sass
index 3cb0128ce..f766f197d 100644
--- a/app/assets/stylesheets/new/components/_main_nav.sass
+++ b/app/assets/stylesheets/new/components/_main_nav.sass
@@ -97,6 +97,7 @@
   // Details of menu-content list items
   .menu-content
     .brand
+      display: block
       padding: 15px
       border-bottom: 1px solid darken(#fafafa, 10%)
 
@@ -123,3 +124,9 @@
           + *
             display: inline-block
             margin-top: 0.5em
+
+#main_nav .breadcrumb
+  padding: 0
+  margin: 0
+  background-color: transparent
+  border-radius: none
diff --git a/app/assets/stylesheets/new/components/_widget_bar.sass b/app/assets/stylesheets/new/components/_widget_bar.sass
new file mode 100644
index 000000000..3cef0af17
--- /dev/null
+++ b/app/assets/stylesheets/new/components/_widget_bar.sass
@@ -0,0 +1,104 @@
+#widget_bar
+  .toggleWidgets
+    display: inline-block
+    position: fixed
+    z-index: 997
+    top: 65px
+    right: 15px
+    padding: 8px
+    transform: rotate(0deg)
+    transition: 0.3s
+    font: normal normal normal 14px/1 FontAwesome
+    text-rendering: auto
+    -webkit-font-smoothing: antialiased
+    font-size: 1em
+    color: #fff
+    background-color: #3c3c3c
+    border-radius: 50%
+    cursor: pointer
+
+    &:before
+      content: '\f0ae'
+
+  .widget-list
+    display: block
+    margin: 0 -280px 0 0
+    padding: 0
+    width: 280px
+    position: fixed
+    z-index: 996
+    top: 110px
+    right: 0
+    bottom: 0
+    transition: 0.3s
+
+    > li
+      display: block
+
+  &.open
+    .toggleWidgets
+      transform: rotate(-90deg)
+
+    .widget-list
+      margin-right: 0
+
+    + .container-fluid
+      padding-right: 295px
+      transition: 0.3s
+
+#widget_bar .widget-list
+  margin-bottom: 0
+  background-color: #3c3c3c
+  color: #fff
+
+  .panel, .panel.panel-default
+    border-radius: 0
+    border: none
+    background-color: transparent
+    color: inherit
+    box-shadow: none
+
+    + .panel
+      margin-top: 0
+
+    > .panel-heading
+      border-radius: 0
+      border: 0
+      border-bottom: 1px solid lighten(#3c3c3c, 10%)
+      background-color: darken(#3c3c3c, 10%)
+      color: inherit
+      padding: 0
+
+      .panel-title
+        font-weight: bold
+
+        > a
+          display: block
+          position: relative
+          padding: 15px
+
+          &:hover, &:focus
+            text-decoration: none
+
+          &:after
+            content: '\f078'
+            display: inline-block
+            transform: rotate(180deg)
+            transition: 0.3s
+            font: normal normal normal 14px/1 FontAwesome
+            text-rendering: auto
+            -webkit-font-smoothing: antialiased
+            font-size: 1.3333em
+            list-style: 0.75em
+            visibility: -15%
+            position: absolute
+            right: 15px
+
+          &.collapsed, &[aria-expanded='false']
+            &:after
+              transform: rotate(0deg)
+
+
+    .panel-body
+      padding: 15px
+      border: 0
diff --git a/app/views/layouts/application_new.html.slim b/app/views/layouts/application_new.html.slim
index 8b0cc0286..643fbbff7 100644
--- a/app/views/layouts/application_new.html.slim
+++ b/app/views/layouts/application_new.html.slim
@@ -16,6 +16,7 @@ html lang=I18n.locale
 
   body
     = render 'layouts/new/main_nav'
+    = render 'layouts/new/widget_bar'
     
     .container-fluid
       .row
@@ -25,8 +26,6 @@ html lang=I18n.locale
       .row
         .col-lg-12
           #workspace class=("#{controller_name} #{action_name}") 
-            = render 'shared/breadcrumb'
-
             = yield
 
           #sidebar class=("#{content_for?(:sidebar) ? 'col-md-3' : ''}") 
diff --git a/app/views/layouts/new/_breadcrumb.html.slim b/app/views/layouts/new/_breadcrumb.html.slim
new file mode 100644
index 000000000..a101098fe
--- /dev/null
+++ b/app/views/layouts/new/_breadcrumb.html.slim
@@ -0,0 +1,2 @@
+- if @breadcrumbs.present?
+  = render_breadcrumbs builder: BootstrapBreadcrumbsBuilder, tag: :li, separator: ''
diff --git a/app/views/layouts/new/_main_nav.html.slim b/app/views/layouts/new/_main_nav.html.slim
index 9b4cbfb2b..51ee0e84e 100644
--- a/app/views/layouts/new/_main_nav.html.slim
+++ b/app/views/layouts/new/_main_nav.html.slim
@@ -5,7 +5,7 @@ nav#main_nav
     ul.menu-content
       li.brand
         span.brandname Stif BOIV
-      
+
       li
         = link_to '#', class: 'mc-item' do
           span.mci-icon
@@ -32,7 +32,7 @@ nav#main_nav
             h4 = "Portail"
 
   div
-    |Breadcrumb to go
+    = render 'layouts/new/breadcrumb'
 
   ul.nav-right
     li
diff --git a/app/views/layouts/new/_widget_bar.html.slim b/app/views/layouts/new/_widget_bar.html.slim
new file mode 100644
index 000000000..8de50722f
--- /dev/null
+++ b/app/views/layouts/new/_widget_bar.html.slim
@@ -0,0 +1,36 @@
+#widget_bar
+  .toggleWidgets title='Toggle widget bar'
+
+  #widgets.panel-group.widget-list
+    .panel.panel-default
+      .panel-heading
+        h4.panel-title
+          = link_to '#widgetOne', data: { toggle: 'collapse', parent: '#widgets' }, 'aria-expanded' => 'true' do
+            |Item #1
+
+      #widgetOne.panel-collapse.collapse.in
+        .panel-body
+          p
+            |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+    .panel.panel-default
+      .panel-heading
+        h4.panel-title
+          = link_to '#widgetTwo', data: { toggle: 'collapse', parent: '#widgets' }, 'aria-expanded' => 'false' do
+            |Item #2
+
+      #widgetTwo.panel-collapse.collapse
+        .panel-body
+          p
+            |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+    .panel.panel-default
+      .panel-heading
+        h4.panel-title
+          = link_to '#widgetThree', data: { toggle: 'collapse', parent: '#widgets' }, 'aria-expanded' => 'false' do
+            |Item #3
+
+      #widgetThree.panel-collapse.collapse
+        .panel-body
+          p
+            |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/app/views/shared/_breadcrumb.html.slim b/app/views/shared/_breadcrumb.html.slim
index f668db52b..a101098fe 100644
--- a/app/views/shared/_breadcrumb.html.slim
+++ b/app/views/shared/_breadcrumb.html.slim
@@ -1,2 +1,2 @@
 - if @breadcrumbs.present?
-  = render_breadcrumbs builder: BootstrapBreadcrumbsBuilder, tag: :li, separator: ""
\ No newline at end of file
+  = render_breadcrumbs builder: BootstrapBreadcrumbsBuilder, tag: :li, separator: ''