From cf8ab7af0f2e4b09938dcfc08f58dd7e9e427adb Mon Sep 17 00:00:00 2001 From: binnng Date: Sat, 2 Aug 2014 01:02:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=89=8B=E6=9C=BA=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index.html | 16 +-- app/scripts/controllers.js | 25 ++++- app/scripts/controllers/global.coffee | 10 +- app/scripts/controllers/global.js | 4 +- app/scripts/controllers/head.coffee | 2 +- app/scripts/controllers/head.js | 4 +- app/scripts/controllers/m_menu.coffee | 4 + app/scripts/controllers/m_menu.js | 6 ++ app/scripts/controllers/root.coffee | 16 ++- app/scripts/controllers/root.js | 10 +- app/styles/background.css | 14 ++- app/styles/imports/common.scss | 18 +++- app/styles/imports/foot.scss | 6 ++ app/styles/imports/head.scss | 132 ++++++++++++++++-------- app/styles/imports/home.scss | 6 +- app/styles/imports/log-reg.scss | 11 +- app/styles/imports/m-menu.scss | 98 ++++++++++++++++++ app/styles/imports/reset-bootstrap.scss | 4 + app/styles/imports/var.scss | 5 +- app/styles/main.scss | 3 +- app/views/head.html | 9 +- app/views/m-menu.html | 21 ++++ 22 files changed, 356 insertions(+), 68 deletions(-) create mode 100644 app/scripts/controllers/m_menu.coffee create mode 100644 app/scripts/controllers/m_menu.js create mode 100644 app/styles/imports/m-menu.scss create mode 100644 app/views/m-menu.html diff --git a/app/index.html b/app/index.html index adfaad3..0008bb4 100644 --- a/app/index.html +++ b/app/index.html @@ -2,7 +2,7 @@ - + 米饭 @@ -17,16 +17,20 @@ - + -
+
-
-
-
+
+ +
+
+
+
+
diff --git a/app/scripts/controllers.js b/app/scripts/controllers.js index fc341f7..1406c51 100644 --- a/app/scripts/controllers.js +++ b/app/scripts/controllers.js @@ -11,9 +11,10 @@ Mifan.controller("404Ctrl", function($scope) { // Generated by CoffeeScript 1.7.1 "use strict"; Mifan.controller("globalCtrl", function($scope) { - var DOC, IsAndroid, IsBlackBerry, IsChrome, IsIE, IsIEMobile, IsIOS, IsIPad, IsIPhone, IsTouch, IsWeixin, IsWindowsPhone, NA, NG, UA, WIN; + var BODY, DOC, IsAndroid, IsBlackBerry, IsChrome, IsIE, IsIEMobile, IsIOS, IsIPad, IsIPhone, IsTouch, IsWeixin, IsWindowsPhone, NA, NG, UA, WIN; DOC = document; WIN = window; + BODY = DOC['body']; /* 设备是否支持触摸事件 @@ -36,6 +37,7 @@ Mifan.controller("globalCtrl", function($scope) { NG = WIN['angular']; $scope.WIN = WIN; $scope.DOC = DOC; + $scope.BODY = BODY; $scope.IsIPhone = IsIPhone; $scope.IsIPad = IsIPad; $scope.IsIOS = IsIOS; @@ -87,7 +89,9 @@ Mifan.controller("headCtrl", function($scope) { }; } }); - return false; + return $scope.toggleMMenu = function() { + return $scope.$emit("toggleMMenu"); + }; }); // Generated by CoffeeScript 1.7.1 @@ -194,6 +198,13 @@ Mifan.controller("loginCtrl", function($scope) { }; }); +// Generated by CoffeeScript 1.7.1 +Mifan.controller("mMenuCtrl", function($scope) { + return $scope.hideMMenu = function() { + return $scope.$emit("toggleMMenu"); + }; +}); + // Generated by CoffeeScript 1.7.1 "use strict"; Mifan.controller("meCtrl", function($scope) { @@ -230,13 +241,21 @@ Mifan.controller("registerCtrl", function($scope) { // Generated by CoffeeScript 1.7.1 "use strict"; Mifan.controller("rootCtrl", function($scope) { + var clientHeight; $scope.page = "home"; $scope.username = ""; $scope.supportNum = "1万"; $scope.$on("pageChange", function(e, msg) { return $scope.page = msg; }); - return false; + clientHeight = $scope.WIN.screen.availHeight; + $scope.clientHeight = "" + clientHeight + "px"; + $scope.rootHeight = 'auto'; + $scope.isMMenuOpen = false; + return $scope.$on("toggleMMenu", function() { + $scope.isMMenuOpen = !$scope.isMMenuOpen; + return $scope.rootHeight = $scope.isMMenuOpen ? "" + rootHeight + "px" : "auto"; + }); }); // Generated by CoffeeScript 1.7.1 diff --git a/app/scripts/controllers/global.coffee b/app/scripts/controllers/global.coffee index f47dbdd..636757c 100644 --- 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 \ No newline at end of file + $scope.IsIE = IsIE + + + + + + diff --git a/app/scripts/controllers/global.js b/app/scripts/controllers/global.js index 6fdb5ce..126361a 100644 --- a/app/scripts/controllers/global.js +++ b/app/scripts/controllers/global.js @@ -1,9 +1,10 @@ // Generated by CoffeeScript 1.7.1 "use strict"; Mifan.controller("globalCtrl", function($scope) { - var DOC, IsAndroid, IsBlackBerry, IsChrome, IsIE, IsIEMobile, IsIOS, IsIPad, IsIPhone, IsTouch, IsWeixin, IsWindowsPhone, NA, NG, UA, WIN; + var BODY, DOC, IsAndroid, IsBlackBerry, IsChrome, IsIE, IsIEMobile, IsIOS, IsIPad, IsIPhone, IsTouch, IsWeixin, IsWindowsPhone, NA, NG, UA, WIN; DOC = document; WIN = window; + BODY = DOC['body']; /* 设备是否支持触摸事件 @@ -26,6 +27,7 @@ Mifan.controller("globalCtrl", function($scope) { NG = WIN['angular']; $scope.WIN = WIN; $scope.DOC = DOC; + $scope.BODY = BODY; $scope.IsIPhone = IsIPhone; $scope.IsIPad = IsIPad; $scope.IsIOS = IsIOS; diff --git a/app/scripts/controllers/head.coffee b/app/scripts/controllers/head.coffee index 0ec65c4..93debb0 100644 --- 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 index dc54018..6d252c2 100644 --- a/app/scripts/controllers/head.js +++ b/app/scripts/controllers/head.js @@ -38,5 +38,7 @@ Mifan.controller("headCtrl", function($scope) { }; } }); - return false; + return $scope.toggleMMenu = function() { + return $scope.$emit("toggleMMenu"); + }; }); diff --git a/app/scripts/controllers/m_menu.coffee b/app/scripts/controllers/m_menu.coffee new file mode 100644 index 0000000..8fc695f --- /dev/null +++ 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 new file mode 100644 index 0000000..0c2d413 --- /dev/null +++ b/app/scripts/controllers/m_menu.js @@ -0,0 +1,6 @@ +// Generated by CoffeeScript 1.7.1 +Mifan.controller("mMenuCtrl", function($scope) { + return $scope.hideMMenu = function() { + return $scope.$emit("toggleMMenu"); + }; +}); diff --git a/app/scripts/controllers/root.coffee b/app/scripts/controllers/root.coffee index bbc4c84..2c27e81 100644 --- 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 index 5d49f05..084f587 100644 --- a/app/scripts/controllers/root.js +++ b/app/scripts/controllers/root.js @@ -1,11 +1,19 @@ // Generated by CoffeeScript 1.7.1 "use strict"; Mifan.controller("rootCtrl", function($scope) { + var clientHeight; $scope.page = "home"; $scope.username = ""; $scope.supportNum = "1万"; $scope.$on("pageChange", function(e, msg) { return $scope.page = msg; }); - return false; + clientHeight = $scope.WIN.screen.availHeight; + $scope.clientHeight = "" + clientHeight + "px"; + $scope.rootHeight = 'auto'; + $scope.isMMenuOpen = false; + return $scope.$on("toggleMMenu", function() { + $scope.isMMenuOpen = !$scope.isMMenuOpen; + return $scope.rootHeight = $scope.isMMenuOpen ? "" + rootHeight + "px" : "auto"; + }); }); diff --git a/app/styles/background.css b/app/styles/background.css index 5405fda..bcecad5 100644 --- 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%); -};*/ \ No newline at end of file +};*/ + +/* 头部 */ +.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); +} \ No newline at end of file diff --git a/app/styles/imports/common.scss b/app/styles/imports/common.scss index 41ed058..a78735a 100644 --- 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 index bff4896..b9921bb 100644 --- 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; + } } \ No newline at end of file diff --git a/app/styles/imports/head.scss b/app/styles/imports/head.scss index dba7352..ea75cc5 100644 --- a/app/styles/imports/head.scss +++ b/app/styles/imports/head.scss @@ -1,17 +1,16 @@ $header-height: 50px; .header{ - //border-bottom: 1px solid #ddd; + border-bottom: 1px solid #ccc; margin-top: 0; margin-bottom: 0; background: #eee; - line-height: $header-height; position: fixed; left: 0; width: 100%; top: 0; z-index: 88; - + opacity: .95; .container{ position: relative; padding: 0; @@ -23,7 +22,7 @@ $header-height: 50px; .logo{ font-size: 1.4em; margin: 0; - background-color: $tone; + //background-color: $tone; //width: 100px; //height: 100px; line-height: $header-height; @@ -34,7 +33,7 @@ $header-height: 50px; z-index: 88; //@include box-shadow(0, 0, 10px); a{ - color: $white; + color: $tone; display: block; height: 100%; padding: 0 1em; @@ -42,7 +41,7 @@ $header-height: 50px; &:active, &:visited{ text-decoration: none; - color: $white; + color: $tone; } } small{ @@ -66,27 +65,27 @@ $header-height: 50px; vertical-align: bottom; margin-left: 100px; position: relative; + margin-top: 10px; li{ margin: 0 6px; a{ - padding: 0 1em; + padding: 6px 1em; } a, a:visited{ color: $gray; - background: transparent; } a:hover, a:active, - a.active, a:focus{ - background: transparent; color: $tone; + background-color: #ddd; } &.active{ a{ - color: $tone; + background-color: $tone; + color: $white; } } } @@ -95,20 +94,20 @@ $header-height: 50px; // 在移动设备（Mobile）和chrome浏览器中设置transform偏移 -webkit // 在其他情况中设置left值偏移 // 动画中transform性能优于left - .arrow{ - color: $bg; - font-size: 26px; - position: absolute; - left: 20px; - top: 45px; - left: 0; - border-color: transparent transparent $bg; - border-style: solid; - border-width: 0 6px 6px; - display: none !important; - @include transition(all, .3s, $easeOutCirc); - @include box-shadow(0, 0, 1px, rgba(#000, .2), inset); - } + // .arrow{ + // color: $bg; + // font-size: 26px; + // position: absolute; + // left: 20px; + // top: 45px; + // left: 0; + // border-color: transparent transparent $bg; + // border-style: solid; + // border-width: 0 6px 6px; + // display: none !important; + // @include transition(all, .3s, $easeOutCirc); + // @include box-shadow(0, 0, 1px, rgba(#000, .2), inset); + // } } .login, @@ -116,6 +115,7 @@ $header-height: 50px; margin-right: 1.6em; position: relative; z-index: 88; + line-height: $header-height; } .login{ @@ -124,10 +124,6 @@ $header-height: 50px; margin: 0 10px; } } - .xs-user{ - font-size: 1.2em; - display: none; - } } .username{ @@ -164,13 +160,21 @@ $header-height: 50px; } } } - &:after { - content: ""; - display: block; - height: 1px; - background-color: $light-gray; + + + .user-m-menu{ + font-size: 1.2em; + display: none; + padding: 0 .6em; } + // &:after { + // content: ""; + // display: block; + // height: 1px; + // background-color: $light-gray; + // } + } @@ -182,8 +186,9 @@ $header-height: 50px; @media (max-width: $screen-xs-max) { .header{ - background-color: $tone; + background-color: $white; line-height: 40px; + border-bottom: none; .container{ } @@ -194,31 +199,74 @@ $header-height: 50px; .nav{ margin-left: 0; - background-color: $white; + background-color: $tone; margin-top: 40px; display: block; padding: 0 .4em; - @include box-shadow(0 1px 3px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.2)); li{ + margin: 0 2px; a{ padding: 0 .4em; + color: $white !important; + margin: 8px 0; + padding: 0 10px; + line-height: 2.2; + } + + a:hover, + a:active, + a:focus{ + background-color: $dark-tone; + } + + &.active{ + a{ + + background-color: $dark-tone; + } } } } - .login{ + .login, + .username{ + position: absolute; top: 0; right: 0; + margin-right: 1em; + } + + .login{ .sm-user{ display: none; } - .xs-user{ - display: block; - line-height: 40px; - color: $white; + } + + + .username{ + .dropdown, + .dropdown-label, + .dropdown-menu, + .caret{ + display: none; } } + + + .user-m-menu{ + display: block; + line-height: 30px; + color: $gray; + + border-radius: 2px; + margin-top: 4px; + + //&:hover, + &:active{ + background-color: $light-gray; + } + } } } diff --git a/app/styles/imports/home.scss b/app/styles/imports/home.scss index 8f8bdd8..34dff41 100644 --- a/app/styles/imports/home.scss +++ b/app/styles/imports/home.scss @@ -294,7 +294,7 @@ @media (max-width: $screen-sm-max) and (min-width: $screen-xs-max) { .home-page{ .side{ - margin-left: 1.4em; + margin-left: .6em; } .every-day-ask{ @@ -324,6 +324,10 @@ margin-top: 2em; max-width: 600px; } + + .feed-wrap{ + margin-top: 10px; + } } } @media (max-width: $screen-xs) { diff --git a/app/styles/imports/log-reg.scss b/app/styles/imports/log-reg.scss index 589a7b0..546c25b 100644 --- a/app/styles/imports/log-reg.scss +++ b/app/styles/imports/log-reg.scss @@ -1,7 +1,8 @@ .login-page, .register-page{ - padding: 3em 0; + padding-top: 3em; + padding-bottom: 3em; max-width: 800px !important; _width: 800px !important; margin-left: auto; @@ -95,4 +96,12 @@ .btn[type="submit"]{ width: 100%; } +} + +@media (max-width: $screen-xs-max) { + .login-page, + .register-page{ + + padding-top: 0; + } } \ No newline at end of file diff --git a/app/styles/imports/m-menu.scss b/app/styles/imports/m-menu.scss new file mode 100644 index 0000000..2f8bce6 --- /dev/null +++ b/app/styles/imports/m-menu.scss @@ -0,0 +1,98 @@ +.m-menu-open{ + + overflow: hidden; + color: $white; + + .m-body{ + //padding-top: 0; + @include transform(translate(-160px, 0)); + @include box-shadow(2px, 0, 8px, rgba($black, .9)); + } + + + .m-menu{ + //display: block; + @include transform(translate(0, 0)); + } + + .header{ + .user-m-menu{ + background-color: $light-gray; + + } + } + +} + +.m-menu{ + background-color: $dark-gray; + position: absolute; + width: 160px; + //display: none; + //height: 800px; + top: 0; + right: 0; + + padding-top: 16px; + + //@include transform(translate(160px, 0)); + + + .log-reg{ + text-align: center; + a{ + //display: inline-block; + padding: .4em 0; + margin: .4em .8em; + font-size: 1.1em; + } } + + .user{ + + } + + + + .reg-logo, + .user-avatar{ + display: block; + width: 80px; + height: 80px; + margin: 10px auto 30px auto; + border-radius: 999px; + background-color: $tone; + font-size: 3em; + line-height: 80px; + } + + .user-avatar{ + text-indent: -999em; + } + + .user-menu{ + padding: 0 1.4em; + li{ + padding: 6px; + margin: 2px 0; + //border-bottom: 1px $black solid; + .glyphicon{ + margin-right: 4px; + } + + border-radius: 2px; + + &:active{ + + background-color: $light-black; + + } + } + } + +} + +.m-body, +.m-menu{ + + @include transition(all, .2s, ease-in-out); +} \ No newline at end of file diff --git a/app/styles/imports/reset-bootstrap.scss b/app/styles/imports/reset-bootstrap.scss index 93a744f..10cc47b 100644 --- a/app/styles/imports/reset-bootstrap.scss +++ b/app/styles/imports/reset-bootstrap.scss @@ -43,6 +43,10 @@ input:focus, margin-right: 0; } +.nav-pills > li > a{ + border-radius: 2px; +} + @media (max-width: $screen-xs) { .container{ diff --git a/app/styles/imports/var.scss b/app/styles/imports/var.scss index deb0ebd..6e8b94b 100644 --- a/app/styles/imports/var.scss +++ b/app/styles/imports/var.scss @@ -40,4 +40,7 @@ $bg: #e6e6e6; $bg: $white; -$light-gray: #ddd; \ No newline at end of file +$dark-tone: darken($tone, 10%); + +$light-gray: #ddd; +$dark-gray: darken($gray, 40%); \ No newline at end of file diff --git a/app/styles/main.scss b/app/styles/main.scss index 55a31ee..787dd4f 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -12,4 +12,5 @@ @import "imports/foot"; @import "imports/404"; @import "imports/log-reg"; -@import "imports/welcome"; \ No newline at end of file +@import "imports/welcome"; +@import "imports/m-menu"; \ No newline at end of file diff --git a/app/views/head.html b/app/views/head.html index 04c47ce..e2af9cc 100644 --- a/app/views/head.html +++ b/app/views/head.html @@ -3,10 +3,12 @@
- {{username}} + {{username}} + + +