增加手机侧边栏。

yunchuan10 · Aug 1, 2014 · cf8ab7a · cf8ab7a
1 parent 383aa7e
commit cf8ab7a
Show file tree

Hide file tree

Showing 22 changed files with 356 additions and 68 deletions.
diff --git a/app/index.html b/app/index.html
@@ -2,7 +2,7 @@
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" ng-app="mifan" ng-controller="globalCtrl"> <!--<![endif]-->
   <head>
     <meta charset="utf-8">
     <title>米饭</title>
@@ -17,16 +17,20 @@
     <link rel="stylesheet" href="styles/background.css">
     <!-- endbuild -->
   </head>
-  <body ng-app="mifan" ng-controller="globalCtrl">
+  <body>
     <!--[if lt IE 7]>
       <p class="browsehappy">你的浏览器版本<strong>太低</strong> browser. 去<a href="http://browsehappy.com/">升级</a>吧！</p>
     <![endif]-->
 
-    <div class="root" ng-controller="rootCtrl" ng-class="{ios: IsIOS, android: IsAndroid, iphone: IsIPhone, ipad: IsIPad, chrome: IsChrome, weixin: IsWeixin, mobile: IsMobile, ie: IsIE, 'ie-mobile': IsIEMobile}">
+    <div class="root" ng-controller="rootCtrl" ng-class="{'m-menu-open': isMMenuOpen, ios: IsIOS, android: IsAndroid, iphone: IsIPhone, ipad: IsIPad, chrome: IsChrome, weixin: IsWeixin, mobile: IsMobile, ie: IsIE, 'ie-mobile': IsIEMobile}" ng-style="{'min-height': rootHeight}">
 
-        <div ng-include="'views/head.html'"></div>
-        <div ng-view class="main-view"></div>
-        <div ng-include="'views/foot.html'"></div>
+        <div ng-include="'views/m-menu.html'" class="m-menu"></div>
+
+        <div class="m-body" ng-style="{'min-height': clientHeight}">
+            <div ng-include="'views/head.html'"></div>
+            <div ng-view class="main-view"></div>
+            <div ng-include="'views/foot.html'"></div>
+        </div>
 
     </div>
 

diff --git a/app/scripts/controllers.js b/app/scripts/controllers.js
diff --git a/app/scripts/controllers/global.coffee b/app/scripts/controllers/global.coffee
@@ -7,6 +7,7 @@ Mifan.controller "globalCtrl", ($scope) ->
 
   DOC = document
   WIN = window
+  BODY = DOC['body']
 
   ###
   设备是否支持触摸事件
@@ -41,6 +42,7 @@ Mifan.controller "globalCtrl", ($scope) ->
 
   $scope.WIN = WIN
   $scope.DOC = DOC
+  $scope.BODY = BODY
 
 
   # 设备
@@ -57,4 +59,10 @@ Mifan.controller "globalCtrl", ($scope) ->
   $scope.IsTouch = $scope.IsMobile = IsTouch
 
   $scope.IsChrome = IsChrome
-  $scope.IsIE = IsIE
+  $scope.IsIE = IsIE
+
+
+
+
+
+
diff --git a/app/scripts/controllers/global.js b/app/scripts/controllers/global.js
diff --git a/app/scripts/controllers/head.coffee b/app/scripts/controllers/head.coffee
@@ -24,4 +24,4 @@ Mifan.controller "headCtrl", ($scope) ->
       else
         $scope.arrowNav = left: 0, hide: yes
 
-  no
+  $scope.toggleMMenu = -> $scope.$emit "toggleMMenu"
diff --git a/app/scripts/controllers/head.js b/app/scripts/controllers/head.js
diff --git a/app/scripts/controllers/m_menu.coffee b/app/scripts/controllers/m_menu.coffee
@@ -0,0 +1,4 @@
+
+Mifan.controller "mMenuCtrl", ($scope) ->
+
+	$scope.hideMMenu = -> $scope.$emit "toggleMMenu"
diff --git a/app/scripts/controllers/m_menu.js b/app/scripts/controllers/m_menu.js
diff --git a/app/scripts/controllers/root.coffee b/app/scripts/controllers/root.coffee
@@ -13,4 +13,18 @@ Mifan.controller "rootCtrl", ($scope) ->
   # 设置当前页面
   $scope.$on "pageChange", (e, msg) -> $scope.page = msg
 
-  no
+
+  # 设置手机侧边栏菜单状态
+  clientHeight = $scope.WIN.screen.availHeight
+
+  # 设置侧边栏高度
+  $scope.clientHeight = "#{clientHeight}px"
+
+  # 设置主体高度，会变化
+  $scope.rootHeight = 'auto'
+
+  $scope.isMMenuOpen = no
+
+  $scope.$on "toggleMMenu", -> 
+    $scope.isMMenuOpen = not $scope.isMMenuOpen
+    $scope.rootHeight = if $scope.isMMenuOpen then "#{rootHeight}px" else "auto"
diff --git a/app/scripts/controllers/root.js b/app/scripts/controllers/root.js
diff --git a/app/styles/background.css b/app/styles/background.css
@@ -4,4 +4,16 @@
 	background-image: -moz-linear-gradient(left,#7560df 0,#7560df 16.6%,#df42a8 16.6%,#df42a8 33.2%,#ea8b46 33.2%,#ea8b46 49.8%,#f1d13c 49.8%,#f1d13c 66.4%,#52de7f 66.4%,#52de7f 83%,#2aa6e2 83%,#2aa6e2 100%);
 	background-image: -ms-linear-gradient(left,#7560df 0,#7560df 16.6%,#df42a8 16.6%,#df42a8 33.2%,#ea8b46 33.2%,#ea8b46 49.8%,#f1d13c 49.8%,#f1d13c 66.4%,#52de7f 66.4%,#52de7f 83%,#2aa6e2 83%,#2aa6e2 100%);
 	background-image: linear-gradient(left,#7560df 0,#7560df 16.6%,#df42a8 16.6%,#df42a8 33.2%,#ea8b46 33.2%,#ea8b46 49.8%,#f1d13c 49.8%,#f1d13c 66.4%,#52de7f 66.4%,#52de7f 83%,#2aa6e2 83%,#2aa6e2 100%);
-};*/
+};*/
+
+/* 头部 */
+.head-inner,
+
+/* 手机导航 */
+.header .nav li.active a,
+
+/* 手机用户图标 */
+.m-menu-open .header .user-m-menu{
+	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.2);
+	box-shadow: inset 0 0 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.2);
+}
diff --git a/app/styles/imports/common.scss b/app/styles/imports/common.scss
@@ -37,13 +37,22 @@ body{
   background-color: $bg;
 }
 
+.m-body{
+  background-color: $white;
+  position: relative;
+  z-index: 2;
+  padding-top: 70px;
+  //@include transform(translate(0, 0));
+}
+
 .main-view{
   overflow: hidden;
-  margin-top: 70px;
+
 }
 
 .root{
-
+  width: 100%;
+  overflow-x: hidden;
 }
 
 // 动画
@@ -172,13 +181,14 @@ body{
 .sd-card{
   //@include box-shadow(0, 0, 0, rgba(#000, .3));
   border: 1px solid rgba(#000, .1);
+  border-radius: 2px;
 }
 
 
 // 响应式
 @media (max-width: $screen-xs-max) {
-  .main-view{
-    margin-top: 90px;
+  .m-body{
+    padding-top: 90px;
   }
 }
 
diff --git a/app/styles/imports/foot.scss b/app/styles/imports/foot.scss
@@ -17,4 +17,10 @@
       //color: red;
     }
   }
+}
+
+@media (max-width: $screen-xs-max) {
+  .footer{
+    padding: 10px 0;
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,4 @@ Mifan.controller "headCtrl", ($scope) -> @@
           else
             $scope.arrowNav = left: 0, hide: yes
-      no
+      $scope.toggleMMenu = -> $scope.$emit "toggleMMenu"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		Mifan.controller "mMenuCtrl", ($scope) ->

		$scope.hideMMenu = -> $scope.$emit "toggleMMenu"