From 770d9e5b7c5ac8c20f1dccc22643d1170ee11770 Mon Sep 17 00:00:00 2001 From: psychobunny Date: Wed, 28 Aug 2013 02:19:59 +0800 Subject: [PATCH] removed mobile menu markup + css, more cleanup --- public/css/account.less | 55 ++++++ public/css/header.less | 98 ++++++++++- public/css/home.less | 23 +++ public/css/nodebb.less | 4 +- public/css/search.less | 14 ++ public/css/style.less | 341 ++---------------------------------- public/css/unread.less | 4 + public/templates/header.tpl | 3 - 8 files changed, 213 insertions(+), 329 deletions(-) create mode 100644 public/css/search.less create mode 100644 public/css/unread.less diff --git a/public/css/account.less b/public/css/account.less index 70be837f82..8791302abb 100644 --- a/public/css/account.less +++ b/public/css/account.less @@ -11,3 +11,58 @@ margin-bottom: 10px; } } + + +.account-username-box{ + border-bottom:1px solid #e3e3e3; + margin-bottom:10px; +} + +.account-sub-links a{ + margin-left:10px; +} + + +.account-block { + div { + padding-bottom:10px; + } +} + +.account-picture-block{ + display:inline-block; + vertical-align:top; +} + +.account-online-status { + .icon-circle-blank { + color:red; + } + .icon-circle { + color:green; + } +} + +.user-profile-picture { + width:128px; +} + +.user-picture-label { + font-size:20px; +} + +.account-bio-block{ + display:inline-block; + vertical-align:top; +} + +.account-bio-label{ + display:inline-block; + width:100px; +} + + +.account-username{ + font-size:20px; + font-weight:bold; +} diff --git a/public/css/header.less b/public/css/header.less index 5f8dc5291b..2a50a6725a 100644 --- a/public/css/header.less +++ b/public/css/header.less @@ -29,4 +29,100 @@ padding-top: 5px; font-size: 15px; display: none; -} \ No newline at end of file +} + + +.taskbar { + display: none; + -moz-opacity: 0.5; + opacity: 0.5; + margin-top: 0; + -webkit-transition: opacity 250ms ease-in; + -moz-transition: opacity 250ms ease-in; + -ms-transition: opacity 250ms ease-in; + -o-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + + &[data-active="1"] { + display: block; + } + + &:hover { + -moz-opacity: 1; + opacity: 1; + } + + li { + a > span { + .inline-block; + max-width: 200px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + img { + max-width: 24px; + max-height: 24px; + margin-right: 1em; + } + + &.pulse { + -webkit-animation: pulsate 2500ms linear; + -webkit-animation-iteration-count: infinite; + } + + @-webkit-keyframes pulsate { + 0% { background: none; } + 50% { background: #e5e5e5; } + 100% { background: none; } + } + } +} + +#notif-list { + li { + font-size: 12px; + width: 300px; + text-align: left; + + a { + white-space: normal; + } + + &.unread { + background: #eceff5; + } + } +} + + + +.dropdown-toggle { + i { + font-size: 12px; + + @-webkit-keyframes glow + { + from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} + 50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;} + to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} + } + @keyframes glow + { + from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} + 50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;} + to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} + } + + + &.active { + color: #558; + + text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf; + -webkit-animation:glow 1.5s infinite linear; + animation:glow 1.5s infinite linear; + } + + } +} diff --git a/public/css/home.less b/public/css/home.less index cf176c8680..4ebc7335bf 100644 --- a/public/css/home.less +++ b/public/css/home.less @@ -66,6 +66,7 @@ background: lighten(@color, 10%); } } + .category-orange { @color: #FF7A4D; color: white; @@ -76,6 +77,28 @@ } } + +.category-box { + height:90px; + + .post-preview { + padding-left:10px; + padding-right:10px; + text-align:left; + img { + width:60px; + height:60px; + padding-right:5px; + } + + p { + overflow: hidden; + text-overflow:ellipsis; + height:60px; + } + } +} + @-webkit-keyframes scroll-2 /* Safari and Chrome */ { 0% {top: 0px;} diff --git a/public/css/nodebb.less b/public/css/nodebb.less index d5f2c2ce82..fd88bf3dc9 100644 --- a/public/css/nodebb.less +++ b/public/css/nodebb.less @@ -5,4 +5,6 @@ @import "noscript"; @import "home"; @import "header"; -@import "account"; \ No newline at end of file +@import "account"; +@import "search"; +@import "unread"; \ No newline at end of file diff --git a/public/css/search.less b/public/css/search.less new file mode 100644 index 0000000000..8d7473ae3b --- /dev/null +++ b/public/css/search.less @@ -0,0 +1,14 @@ + +.search-result-post { + width: 100%; + line-height: 16px; + padding: 5px; + overflow:hidden; + img { + display: block; + float: left; + width:48px; + height:48px; + padding-right:10px; + } +} \ No newline at end of file diff --git a/public/css/style.less b/public/css/style.less index 8bba9737dd..858bc13265 100644 --- a/public/css/style.less +++ b/public/css/style.less @@ -116,62 +116,10 @@ footer.footer { } } -.account-username-box{ - border-bottom:1px solid #e3e3e3; - margin-bottom:10px; -} - -.account-sub-links a{ - margin-left:10px; -} - -.account-username{ - font-size:20px; - font-weight:bold; -} - .bold { font-weight: bold; } -.account-block { - div { - padding-bottom:10px; - } -} - -.account-picture-block{ - display:inline-block; - vertical-align:top; -} - -.account-online-status { - .icon-circle-blank { - color:red; - } - .icon-circle { - color:green; - } -} - -.user-profile-picture { - width:128px; -} - -.user-picture-label { - font-size:20px; -} - -.account-bio-block{ - display:inline-block; - vertical-align:top; -} - -.account-bio-label{ - display:inline-block; - width:100px; -} - .user-recent-posts { div { color: #333; @@ -200,27 +148,27 @@ footer.footer { padding: 0; } .users-box{ - display: inline-block; - margin-top: 20px; - text-align: center; - vertical-align: top; - max-width: 104px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - - img { - width:80px; - height:80px; - } + display: inline-block; + margin-top: 20px; + text-align: center; + vertical-align: top; + max-width: 104px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; - a { - margin:5px; - } + img { + width:80px; + height:80px; + } + + a { + margin:5px; + } } a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus { - text-decoration:none; + text-decoration:none; } .formatting-bar { @@ -292,100 +240,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus { } -.dropdown-toggle { - i { - font-size: 12px; - - @-webkit-keyframes glow - { - from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} - 50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;} - to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} - } - @keyframes glow - { - from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} - 50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;} - to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;} - } - - - &.active { - color: #558; - - text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf; - -webkit-animation:glow 1.5s infinite linear; - animation:glow 1.5s infinite linear; - } - - } -} - -#notif-list { - li { - font-size: 12px; - width: 300px; - text-align: left; - - a { - white-space: normal; - } - - &.unread { - background: #eceff5; - } - } -} - -.taskbar { - display: none; - -moz-opacity: 0.5; - opacity: 0.5; - margin-top: 0; - -webkit-transition: opacity 250ms ease-in; - -moz-transition: opacity 250ms ease-in; - -ms-transition: opacity 250ms ease-in; - -o-transition: opacity 250ms ease-in; - transition: opacity 250ms ease-in; - - &[data-active="1"] { - display: block; - } - - &:hover { - -moz-opacity: 1; - opacity: 1; - } - - li { - a > span { - .inline-block; - max-width: 200px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - img { - max-width: 24px; - max-height: 24px; - margin-right: 1em; - } - - &.pulse { - -webkit-animation: pulsate 2500ms linear; - -webkit-animation-iteration-count: infinite; - } - - @-webkit-keyframes pulsate { - 0% { background: none; } - 50% { background: #e5e5e5; } - 100% { background: none; } - } - } -} - - /* START: post-window needs to go in its own plugin area */ .post-window { position: fixed; @@ -494,167 +348,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus { - - -.btn-none, -.btn-none:active, -.btn-none[disabled] { - background-color: transparent; - background-image: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} - -.btn-none { - .pointer; - border-color: transparent; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.btn-none:hover, -.btn-none:focus { - text-decoration: none; - background-color: transparent; -} - -.btn-none[disabled]:hover, -.btn-none[disabled]:focus { - text-decoration: none; -} - -.btn-none { - .icon-white { - color: white; - } -} - - -#mobile-menu { - position: fixed; - bottom: 0px; - height: 50px; - background: #333; - width: 100%; - left: 0px; - button { - color: #eee; - padding: 10px; - text-shadow: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); - } -} - -#mobile-menu, #mobile-menu-overlay { - z-index: 999; - - @media (min-width: 979px) - { - display: none !important; - } -} - -#mobile-menu-overlay { - background: rgba(0, 0, 0, 0.85); - position: fixed; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - //margin-top: 50px; - padding-top: 20px; - opacity: 0; - - -webkit-transition: opacity 150ms ease; - -moz-transition: opacity 150ms ease; - -ms-transition: opacity 150ms ease; - -o-transition: opacity 150ms ease; - transition: opacity 150ms ease; - z-index: -1; - &.menu-visible { - z-index: 99; - opacity: 1; - } - - .mobile-menu-icon { - color: white; - width: 20%; - min-width: 85px; - height: auto; - text-align: center; - padding: 10px; - display: inline-block; - .pointer; - -webkit-tap-highlight-color: rgba(0,0,0,0); - - -webkit-transition: margin-top 250ms ease; - -moz-transition: margin-top 250ms ease; - -ms-transition: margin-top 250ms ease; - -o-transition: margin-top 250ms ease; - transition: margin-top 250ms ease; - - margin-top: 20%; - - - &.menu-visible { - margin-top: 0%; - } - - i { - width: 100%; - } - - } -} - - -.category-box { - height:90px; - - .post-preview { - padding-left:10px; - padding-right:10px; - text-align:left; - img { - width:60px; - height:60px; - padding-right:5px; - } - - p { - overflow: hidden; - text-overflow:ellipsis; - height:60px; - } - } -} - -#mark-allread-btn { - margin-bottom:15px; -} - -// go into header - -.search-result-post { - width: 100%; - line-height: 16px; - padding: 5px; - overflow:hidden; - img { - display: block; - float: left; - width:48px; - height:48px; - padding-right:10px; - } - -} - - - - //START: FIXES FOR BS3, may need to remove these when we get out of the RC releases @media (max-width: 979px) { .hidden-mobile { diff --git a/public/css/unread.less b/public/css/unread.less new file mode 100644 index 0000000000..754fbf84ab --- /dev/null +++ b/public/css/unread.less @@ -0,0 +1,4 @@ + +#mark-allread-btn { + margin-bottom:15px; +} \ No newline at end of file diff --git a/public/templates/header.tpl b/public/templates/header.tpl index 69e89eba67..c40ae52c36 100644 --- a/public/templates/header.tpl +++ b/public/templates/header.tpl @@ -31,9 +31,6 @@ - -