From 0cabc2eb4d2dc3a440cb56ba109a4d01b5978c7a Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Thu, 20 Mar 2014 14:22:52 +1100 Subject: [PATCH] Working sliding panel in basic form --- .../controllers/sidebar_controller.js.coffee | 6 +-- app/assets/stylesheets/darkswarm/all.scss | 2 - .../stylesheets/darkswarm/offcanvas.css | 50 +++++++++++++++++++ app/views/layouts/darkswarm.html.haml | 5 +- app/views/shared/_login_panel.html.haml | 5 +- app/views/shared/_menu.html.haml | 5 +- app/views/shared/_signed_in.html.haml | 5 ++ app/views/shared/_signed_out.html.haml | 5 ++ 8 files changed, 70 insertions(+), 13 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/offcanvas.css create mode 100644 app/views/shared/_signed_in.html.haml create mode 100644 app/views/shared/_signed_out.html.haml diff --git a/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee index 27ec2bf091..cbf7a6710a 100644 --- a/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee @@ -1,11 +1,9 @@ window.SidebarCtrl = Darkswarm.controller "SidebarCtrl", ($scope, $location) -> - $scope.active_sidebar = $location.path() - $scope.$watch -> $location.path() , -> $scope.active_sidebar = $location.path() - $scope.visible = -> - $scope.active_sidebar != null and $scope.active_sidebar != "" + $scope.active = -> + return "active" if $scope.active_sidbar != null and $scope.active_sidebar != "" diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss index aaec952184..44e8ea248c 100644 --- a/app/assets/stylesheets/darkswarm/all.scss +++ b/app/assets/stylesheets/darkswarm/all.scss @@ -7,5 +7,3 @@ *= require foundation *= require_tree . */ - - diff --git a/app/assets/stylesheets/darkswarm/offcanvas.css b/app/assets/stylesheets/darkswarm/offcanvas.css new file mode 100644 index 0000000000..d6837e3ed5 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/offcanvas.css @@ -0,0 +1,50 @@ +/* Off canvas layout CSS/JS provided by or adapted from work by Jason Weaver and Luke Wroblewski Requires globals.css grid.css */ +body.off-canvas { padding: 0; margin: 0; overflow: hidden} + +.container { width: 100%; } + +.row { overflow: hidden; } + +.row .row { overflow: visible; } + +.paneled .container { overflow: hidden; } + +.paneled .row { width: 100%; } + +[role="main"]:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; } + +[role="complementary"], [role="main"] { width: 100%; padding: 0 15px; display: block; position: relative; z-index: 1; -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; } + +.paneled [role="main"] { padding: 0; } + +.page-panel { width: 100%; padding: 0 15px; -webkit-transition: 0.3s margin ease-in-out; -moz-transition: 0.3s margin ease-in-out; -o-transition: 0.3s margin ease-in-out; transition: 0.3s margin ease-in-out; background: #fff; } + +#switchPanels { margin: 0 -15px; } + +.hide-extras [role="complementary"] { display: block; } + +[role="navigation"]#topMenu { -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; } + +[role="navigation"]#topMenu ul { margin-top: 0; } + +[role="complementary"] { margin-left: -100%; width: 400px; float: left; z-index: 2; } + +[role="main"] { margin-left: 0; float: right; z-index: 1; position: relative; } + +.paneled [role="main"] { background: #fff; width: 500%; overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.15s all ease-in; -moz-transition: 0.15s all ease-in; -o-transition: 0.15s all ease-in; transition: 0.15s all ease-in; } + +.page-panel { min-height: 400px; float: left; margin: 0; width: 20%; } + +[role="complementary"].active { margin-left: 0; } +.active + [role="main"] { margin-right: -420px; } + +.active-menu [role="navigation"]#topMenu { margin-top: 0 !important; } + +@media all and (min-width: 768px) { menu-button, .sidebar-button { display: none; } + /*[role="complementary"] { width: 20%; margin-left: 0; float: left; padding: 0 15px; }*/ + [role="main"] { width: 100%; padding: 0 15px; } + .paneled [role="main"] { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; } + .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; } + .hide-extras [role="main"] { width: 100%; } + .hide-extras [role="complementary"] { display: none; } + [role="navigation"]#topMenu { display: none; } } diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index ba66b9446a..5ceb406a58 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -16,10 +16,7 @@ = render partial: "shared/menu" = display_flash_messages - %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-show" => "visible()"} - {{ active_sidebar }} - TEST ME - %a{href: "#"} close + %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-class" => "active()"} = render partial: "shared/login_panel" = yield :sidebar diff --git a/app/views/shared/_login_panel.html.haml b/app/views/shared/_login_panel.html.haml index 8266eaf0b5..8859632fc4 100644 --- a/app/views/shared/_login_panel.html.haml +++ b/app/views/shared/_login_panel.html.haml @@ -1,5 +1,6 @@ .login-panel - #login-content.hide + %a{href: "#"} Close + #login-content = render "home/login" - #sign-up-content.hide + #sign-up-content = render "home/signup" diff --git a/app/views/shared/_menu.html.haml b/app/views/shared/_menu.html.haml index 65973942b3..1250158386 100644 --- a/app/views/shared/_menu.html.haml +++ b/app/views/shared/_menu.html.haml @@ -3,4 +3,7 @@ %ul.left %li= link_to image_tag("ofn_logo_small.png"), root_path %li.divider - = render partial: "shared/login" + - if spree_current_user.nil? + = render 'shared/signed_out' + - else + = render 'shared/signed_in' diff --git a/app/views/shared/_signed_in.html.haml b/app/views/shared/_signed_in.html.haml new file mode 100644 index 0000000000..a0137015b7 --- /dev/null +++ b/app/views/shared/_signed_in.html.haml @@ -0,0 +1,5 @@ +%li#login-link.hide= link_to "Login", "#sidebar", id: "sidebarLoginButton", class: "sidebar-button" +%li#login-name= link_to "#{spree_current_user.email}", "#" +%li.divider +%li#sign-up-link.hide= link_to "Sign Up", "#" +%li#sign-out-link= link_to "Sign Out", "/logout" diff --git a/app/views/shared/_signed_out.html.haml b/app/views/shared/_signed_out.html.haml new file mode 100644 index 0000000000..6c7c4e9d21 --- /dev/null +++ b/app/views/shared/_signed_out.html.haml @@ -0,0 +1,5 @@ +%li#login-link= link_to "Login", "#login", id: "sidebarLoginButton", class: "sidebar-button" +%li#login-name.hide +%li.divider +%li#sign-up-link= link_to "Sign Up", "#signup", id: "sidebarSignUpButton", class: "sidebar-button" +%li#sign-out-link.hide= link_to "Sign Out", "/logout"