From 79c7f8e90f36913abaab747d4841b79f4a23994a Mon Sep 17 00:00:00 2001 From: Harry Bomrah Date: Mon, 29 Jul 2013 18:21:07 +0800 Subject: [PATCH] new orbit bar fixed.. Conflicts: app/assets/javascripts/orbit_js_1.0.1-front-end.js app/assets/stylesheets/basic/orbit_bar.css.erb app/assets/stylesheets/orbit_bar_bootstrap.css app/views/layouts/_left_menu.html.erb app/views/layouts/_orbit_bar.html.erb app/views/layouts/_right_menu.html.erb app/views/layouts/desktop.html.erb --- app/assets/Archive/javascripts/desktop.js | 1 + .../Archive/javascripts/orbitdesktopAPI.js | 2 +- app/assets/Archive/stylesheets/desktop.css | 6 +- .../javascripts/orbit_js_1.0.1-front-end.js | 2 +- app/assets/stylesheets/basic/global.css.erb | 493 ++++++++++++++++++ .../stylesheets/orbit_bar_bootstrap.css | 2 +- app/views/layouts/_right_menu.html.erb | 1 - app/views/layouts/desktop.html.erb | 6 +- 8 files changed, 502 insertions(+), 11 deletions(-) create mode 100644 app/assets/stylesheets/basic/global.css.erb diff --git a/app/assets/Archive/javascripts/desktop.js b/app/assets/Archive/javascripts/desktop.js index 442df6de7..352f3b48f 100644 --- a/app/assets/Archive/javascripts/desktop.js +++ b/app/assets/Archive/javascripts/desktop.js @@ -12,6 +12,7 @@ //= require jquery.miniColors.min //= require select2 //= require bootstrap +//= require orbit_js_1.0.1-front-end //= require orbitdesktopAPI //= require orbitTimeline //= require orbitdesktop diff --git a/app/assets/Archive/javascripts/orbitdesktopAPI.js b/app/assets/Archive/javascripts/orbitdesktopAPI.js index 81cdb68f6..4480555b7 100644 --- a/app/assets/Archive/javascripts/orbitdesktopAPI.js +++ b/app/assets/Archive/javascripts/orbitdesktopAPI.js @@ -159,7 +159,7 @@ var orbitDesktopAPI = function(){ } } var whtml =$('
'+settings.title+'
'); - $("body").append(whtml); + $(o.contentHolder).append(whtml); var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter); var app_holder_height = parentwindow.height() - 72; var app_holder_width = parentwindow.width(); diff --git a/app/assets/Archive/stylesheets/desktop.css b/app/assets/Archive/stylesheets/desktop.css index f797b0681..2383ed45a 100644 --- a/app/assets/Archive/stylesheets/desktop.css +++ b/app/assets/Archive/stylesheets/desktop.css @@ -4,16 +4,16 @@ *the top of the compiled file, but it's generally better to create a new file per style scope. *= require desktop/desktop-font *= require bootstrap - *= require bootstrap-orbit + *= require orbit_bar_bootstrap + *= require basic/orbit_bar *= require jquery.miniColors *= require jquery.gridster *= require jquery-ui *= require font-awesome - *= require icons + *= require basic/icon *= require desktop/desktop-component *= require desktop/desktop-main *= require desktop/desktop-media *= require desktop/desktop-select2 *= require desktop/desktop-timeline - *= require orbit-bar */ diff --git a/app/assets/javascripts/orbit_js_1.0.1-front-end.js b/app/assets/javascripts/orbit_js_1.0.1-front-end.js index d437b0633..5f67d6038 100644 --- a/app/assets/javascripts/orbit_js_1.0.1-front-end.js +++ b/app/assets/javascripts/orbit_js_1.0.1-front-end.js @@ -14,7 +14,7 @@ !function ($) { $.fn.searchClear = function (param){ _defaultSettings = { - inputName: ':input', + inputName: '.search-query', inputIcon: 'inputIcon', clearBtnIcon: 'clearBtnIcon', }; diff --git a/app/assets/stylesheets/basic/global.css.erb b/app/assets/stylesheets/basic/global.css.erb new file mode 100644 index 000000000..631bcd51e --- /dev/null +++ b/app/assets/stylesheets/basic/global.css.erb @@ -0,0 +1,493 @@ +a:focus { + outline: thin dotted; +} +a:active, +a:hover { + outline: 0; +} +/**:link, +*:visited, +*:hover, +*:active, +*:focus, +.transition { + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +.dont-move, #sidebar, #main-wrap, #sidebar-menu .scroller, .sub-nav-block-list { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +}*/ +::selection { + color: white; + background: black; + text-shadow: none !important; +} +/*::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #FFF; + -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); +} +::-webkit-scrollbar-thumb { + background: #CCC; + -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2); +} +::-webkit-scrollbar-thumb:hover { + background: #AAA; +} +::-webkit-scrollbar-thumb:active { + background: #888; + -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3); +}*/ +input:focus::-webkit-input-placeholder { + color: transparent; +} +body { + background-color: #F3F3F3; + font-family: 'Chivo'; +} +body.modalBlur > nav, +body.modalBlur > section { + -webkit-filter: blur(5px); +} +.label { + font-family: 'Open Sans'; +} +.btn { + font-family: 'Varela Round'; + letter-spacing: -.4px; +} +h1, +h2, +h3, +h4, +h5, +h6, +label, +legend { + font-family: 'Raleway'; +} + + +/* Sidebar */ +#sidebar { + top: 0; + left: 0; + bottom: 0; + min-width: 61px; + z-index: 1030; + position: fixed; + background-color: #171717; + -webkit-box-shadow: inset -1px 0px 10px #000000; + -moz-box-shadow: inset -1px 0px 10px #000000; + -o-box-shadow: inset -1px 0px 10px #000000; + box-shadow: inset -1px 0px 10px #000000; +} +#sidebar #sidebar-menu { + position: absolute; + top: 88px; + bottom: 0; + z-index: 1; + display: block; + width: 61px; + /*overflow: auto;*/ +} +#sidebar .scroller { + position: absolute; + z-index:1; + /*-webkit-touch-callout:none;*/ + -webkit-tap-highlight-color:rgba(0,0,0,0); + width:100%; + padding:0; +} +#sidebar-menu .content, +#sidebar-menu .pane { + margin-top: 88px; +} +#sidebar .sidebar-nav { + margin: 0; + padding: 0; + height: 100%; + font-size: 1em; + width: 61px; + text-align: center; + list-style: none; +} +#sidebar > h2.position { + top: 40px; + margin: 0; + width: 61px; + color: #FFFFFF; + font-weight: normal; + font-size: 2.4em; + line-height: 47px; + line-height: 46px\9; + text-align: center; + position: absolute; + background-color: #08c; + background-image: -moz-linear-gradient(top, #08c, #006091); + background-image: -ms-linear-gradient(top, #08c, #006091); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#006091)); + background-image: -webkit-linear-gradient(top, #08c, #006091); + background-image: -o-linear-gradient(top, #08c, #006091); + background-image: linear-gradient(top, #08c, #006091); + -webkit-box-shadow: 0px 1px 0px #333333; + -moz-box-shadow: 0px 1px 0px #333333; + -o-box-shadow: 0px 1px 0px #333333; + box-shadow: 0px 1px 0px #333333; +} +#sidebar > h2.position:after { + left: 50%; + bottom: 0; + width: 0px; + height: 0px; + content: " "; + display: block; + margin-left: -6px; + position: absolute; + margin-bottom: -1px; + border-style: solid; + border-width: 0 6px 6px 6px; + border-color: transparent transparent #171717 transparent; +} +#sidebar > h2.position a { + color: #FFFFFF; + padding: 6px 6px 5px; + text-decoration: none; + -webkit-text-shadow: 0px -1px 0px #333333; + -moz-text-shadow: 0px -1px 0px #333333; + -o-text-shadow: 0px -1px 0px #333333; + text-shadow: 0px -1px 0px #333333; +} +#sidebar .sidebar-nav > li { + min-width: 61px; + height: 45px; +} +#sidebar .sidebar-nav > li.active { + font-size: 1.2em; +} +#sidebar .sidebar-nav > li.active .sub-nav-block { + display: block; +} +#sidebar .sidebar-nav > li.active > a > span { + color: #FFFFFF; + cursor: pointer; + -webkit-text-shadow: 0px -1px 0px #636363; + -moz-text-shadow: 0px -1px 0px #636363; + -o-text-shadow: 0px -1px 0px #636363; + text-shadow: 0px -1px 0px #636363; +} +#sidebar .sidebar-nav > li > a > span { + padding: 10px; + color: #B0B0B0; + display: block; + -webkit-text-shadow: 0px 1px 0px #000000; + -moz-text-shadow: 0px 1px 0px #000000; + -o-text-shadow: 0px 1px 0px #000000; + text-shadow: 0px 1px 0px #000000; +} +#sidebar .sidebar-nav > li > a > span > i { + font-size: 1.7em; +} +#sidebar .sub-nav-block-list { + top: 40px; + bottom: 0; + left: 61px; + position: fixed; + text-align: left; + /*overflow: hidden;*/ + -webkit-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8); + -moz-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8); + -o-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8); + box-shadow: -1px 0px 10px rgba(33, 33, 33, .8); +} +#sidebar .sub-nav-block-list .sub-nav-block { + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + position: absolute; + background-color: #0088CC; +} +#sidebar .sub-nav-block-list .sub-nav-block.show { + display: block; + overflow: hidden; +} +#sidebar .sub-nav-block-list .sub-nav-block:before { + bottom: 0px; + right: -20px; + opacity: .1; + color: #FFFFFF; + font-size: 14em; + line-height: 150px; + position: absolute; + display: none\9; /* 用IE的去死 */ +} +#sidebar .sub-nav-block-list .sub-nav-block h4 { + color: #FFFFFF; + margin-top: 15px; + font-weight: normal; + padding: 0 15px 10px; + border-bottom: 1px solid #1C9BCC; +} +#sidebar .sub-nav-block-list .sub-nav-block > ul { + position: relative; + z-index: 2; +} +#sidebar .sub-nav-block-list .sub-nav-block a { + line-height: 25px; + color: #90D0FA; + -webkit-text-shadow: none; + -moz-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; +} +#sidebar .sub-nav-block-list .sub-nav-block li.active a { + background-color: #EEEEEE; + color: #0081c2; + position: relative; +} +#sidebar .sub-nav-block-list .sub-nav-block li.active a:after { + top: 50%; + right: 10px; + width: auto; + height: auto; + display: inline; + content: "\e0d4"; + font-size: 1.3em; + position: absolute; + font-style: normal; + font-weight: normal; + margin-top: -0.75em; + font-family: 'entypo'; + text-decoration: inherit; +} +#sidebar .sub-nav-block-list .sub-nav-block a:hover { + color: #0081c2; +} +#sidebar .sub-nav-arrow { + left: 53px; + top: -10px; + width: 0px; + height: 0px; + z-index: -1; + position: absolute; + border-style: solid; + border-width: 8px 8px 8px 0; + border-color: transparent #0088CC transparent transparent; + display: none\9; /* 用IE的去死 */ +} + + +/* Vertical Scrollbar */ +#sidebar .myScrollbarV { + position: absolute; + z-index: 100; + width: 2px; + bottom: 2px; + top: 2px; + left: 1px +} + +#sidebar .myScrollbarV > div { + position: absolute; + z-index: 100; + width: 100%; + border-radius: 1px; + background-color: rgba(0, 136, 204, .3); +} + + +/* Main Wrap */ +#main-wrap { + padding-top: 40px; +} +#main-wrap .wrap-inner { + padding: 60px 20px 20px; +} +#main-wrap .wrap-inner.initial { + padding: 20px 20px 20px; +} + + +/* Member Filter */ +#member-filter.modal { + width: 80%; + margin-left: -40%; +} +#member-filter.modal.fade.in { + top: 50px; +} +#member-filter .modal-body { + max-height: 425px; +} +#member-filter .modal-body form { + margin-bottom: 0px; +} +#member-filter .modal-body form fieldset { + min-height: 360px; +} +#member-filter .modal-body .radio.inline, +#member-filter .modal-body .checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; + min-width: 100px; + margin-left: 0; +} +#member-filter .modal-body .form-actions { + margin: 20px 0 0; + padding: 10px 0 0; + background-color: transparent; + text-align: right; +} +#member-filter .modal-body .form-actions.condition { + margin: 10px 0 0 195px; +} +#member-filter .modal-body .tabs-left > .nano { + width: 160px; + min-height: 425px; + float: left; + margin-right: 10px; + padding-right: 20px; +} +#member-filter .modal-body .tabs-left > .nano .content { + right: 20px; + outline: none; +} +#member-filter .modal-body .tabs-left > .nano .pane { + right: 0px; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs { + width: 140px; + float: left; + margin-bottom: 0; + margin-right: 0; + border-right: 1px solid #ddd; + border-bottom: none; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li { + float: none; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a:hover { + border-color: #eeeeee #dddddd #eeeeee #eeeeee; +} +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs .active > a, +#member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; +} +#member-filter .member-filter-options { + float: left; + display: inline-block; + width: 175px; + min-height: 425px; + margin-right: 10px; + padding: 0 10px 0 0; +} +#member-filter .member-filter-options select { + width: 165px; +} +#member-filter .member-filter-options .btn { + display: block; +} +#member-filter .member-filter-result { + padding-left: 15px; + min-height: 370px; + width: auto; +} + +/* Search Clear */ +.searchClear { + position: relative; +} +.searchClear .icon-search { + position: absolute; + color: #A3A3A3; + top: 10px; + left: 18px; + font-size: 1.2em; +} +.searchClear #filter-input { + padding-left: 25px; + padding-right: 25px; +} +.searchClear .search-clear { + position: absolute; + color: #A3A3A3; + right: 8px; + top: 10px; + font-size: 1.2em; +} + + +/* Edit link in structure */ +.editable { + position: relative; + padding: 0px; + margin: 0px; + min-height: 50px; +} +.edit_link { + display: none; +} +.edit_link a { + position: absolute; + z-index: 10; + width: 100%; + height: 100%; + top: 0; + left: 0; + text-indent: -9999px; + background: url(<%= asset_path 'editicon.png' %>) no-repeat center center rgba(255,255,255,.8); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 1); +} +.editable:hover .edit_link { + display: block; +} + + +/* IE go die */ +:root #sidebar .sub-nav-block:before { + display: block\9; +} + + +/* Responsive */ +@media (max-width: 767px) { + body { + padding: 0; + } + #member-filter.modal { + width: auto; + margin-left: auto; + } +} + +@media (max-width: 480px) { + /* Main Wrap */ + #main-wrap .wrap-inner { + padding: 20px 0; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/orbit_bar_bootstrap.css b/app/assets/stylesheets/orbit_bar_bootstrap.css index b2e591966..809484e4e 100644 --- a/app/assets/stylesheets/orbit_bar_bootstrap.css +++ b/app/assets/stylesheets/orbit_bar_bootstrap.css @@ -224,7 +224,7 @@ #orbit-bar { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 75%; + font-size: 12px; line-height: 20px; color: #333333; background-color: #ffffff; diff --git a/app/views/layouts/_right_menu.html.erb b/app/views/layouts/_right_menu.html.erb index fba8d449d..921180c57 100644 --- a/app/views/layouts/_right_menu.html.erb +++ b/app/views/layouts/_right_menu.html.erb @@ -10,7 +10,6 @@ '> '> <%= text_field_tag 'q','', {:class => "search-query input-medium", :placeholder => t(:search_google), 'x-webkit-speech' => ''} %> - diff --git a/app/views/layouts/desktop.html.erb b/app/views/layouts/desktop.html.erb index 3e4424eed..15ca16ec3 100644 --- a/app/views/layouts/desktop.html.erb +++ b/app/views/layouts/desktop.html.erb @@ -13,10 +13,8 @@ - <%= stylesheet_link_tag "desktop/desktop" %> - <%= javascript_include_tag "desktop/desktop" %> - <%= yield :page_specific_css %> - <%= yield :page_specific_javascript %> + <%= stylesheet_link_tag "desktop" %> + <%= javascript_include_tag "desktop" %> <%= csrf_meta_tag %>