diff --git a/app/assets/images/icons/menu.png b/app/assets/images/icons/menu.png new file mode 100755 index 000000000..d63e735af Binary files /dev/null and b/app/assets/images/icons/menu.png differ diff --git a/app/assets/javascripts/mobile.js b/app/assets/javascripts/mobile.js index 2c1cc46cb..538c35337 100644 --- a/app/assets/javascripts/mobile.js +++ b/app/assets/javascripts/mobile.js @@ -27,7 +27,7 @@ $(document).ready(function(){ }; /* Drawer menu */ - $('#menu_badge').click(function(evt){ + $('#menu_badge').bind("tap click", function(evt){ evt.preventDefault(); toggleDrawerMenu(); }); diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index 7083fccca..40f38c34b 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -37,6 +37,7 @@ h3 { float: right; display: inline-block; padding: 0px 10px 0px 12px; + margin-top: 3px; img.menu { height: 40px; @@ -73,21 +74,77 @@ h3 { -o-transition:left 0.35s; transition:left 0.35s; - .navbar { - .navbar-inner { - height: 45px; - border: none; - border-radius: 0; + header { + position: static; + height: 45px; + border-radius: 0; - @include box-shadow(0,1px,2px,#333); + #global_search { + margin-right: 20px; + margin-left: 10px; + position: relative; - background: { - image: image-url("header-bg-long.jpg"); + form { + position: absolute; + width: 100%; + margin-right: 20px; + + input { + @include box-shadow(0, 1px, 1px, #444); + @include border-radius(15px); + @include transition(width); + width: 100%; + margin-top: 7px; + background-color: #444; + border: 1px solid #222; + font-size: 13px; + padding: 4px; + + color: black; + + &.active { + background-color: $highlight-white; + background-color: rgba(160,160,160,0.6); + } + + &:focus { + outline: none; + background-color: white; + } + + &::-webkit-input-placeholder { text-shadow: none; } + &:-moz-placeholder { text-shadow: none; } + } } - - width: 100%; } } + + li { + font-size: 25px; + line-height: 25px; + font-weight: bold; + color: $light-grey; + padding: 12px 25px; + border-bottom: solid rgb(53, 53, 53) 2px; + } + + // Aspects + li > ul > li { + font-size: 14px; + font-weight: normal; + color: $text-dark-grey; + border-bottom: none; + } + + a { + color: $light-grey; + text-decoration: none; + } + + ul { + list-style: none; + margin: 0px; + } } #app.draw { @@ -98,9 +155,17 @@ h3 { } #drawer { left: 20%; + + -webkit-box-shadow: -2px 0px 2px 1px #333; + -moz-box-shadow: -2px 0px 2px 1px #333; + box-shadow: -2px 0px 2px 1px #333; } } +.row { + margin-left: 20px !important; +} + .message { padding-left: 2px; } @@ -410,7 +475,7 @@ header { #nav_badges { float: right; - margin: 4px 12px; + margin: 7px 12px; display: inline-block; .badge { diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index e3e0ed0b8..1eeae2c54 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -49,11 +49,10 @@ #app %header#main_nav = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title') - = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge") - - if user_signed_in? + = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge") + #nav_badges - = link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge") = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge") - if current_user.unread_notifications.count > 0 .badge_count{id: "notification"} @@ -62,26 +61,49 @@ - if current_user.unread_message_count > 0 .badge_count{id: "conversation"} = current_user.unread_message_count - = link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge") - = link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge") - if yield(:header_action).present? = yield(:header_action) - else = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path) #main.container{:role => "main"} - .row - - if current_page?(:activity_stream) - %h3 - = t('streams.activity.title') - = yield + - if current_page?(:activity_stream) + %h3 + = t('streams.activity.title') + = yield - if user_signed_in? = render :partial =>'shared/footer' - #drawer - .navbar - .navbar-inner + #drawer + %header + #global_search + = form_tag('/search', method: 'get', class: 'search_form', "accept-charset" => "UTF-8") do + %div + = hidden_field_tag "utf8", "✓" + = search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input" + + .container + %nav + %ul + %li + = link_to t("streams.activity.title"), activity_stream_path + %li + = t('streams.aspects.title') + %li + %ul#aspects_list + %li + = "One Aspect" + %li + = link_to(t('layouts.header.profile'), user_profile_path(current_user.username)) + %li + = link_to(t('_contacts'), contacts_path) + %li + = link_to t('layouts.header.settings'), users_edit_path + %li + = link_to t('layouts.application.toggle'), toggle_mobile_path + %li + = link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete / javascripts at the bottom = jquery_include_tag diff --git a/app/views/shared/_footer.mobile.haml b/app/views/shared/_footer.mobile.haml index a6cb9e83f..c822686d5 100644 --- a/app/views/shared/_footer.mobile.haml +++ b/app/views/shared/_footer.mobile.haml @@ -1,6 +1,3 @@ %footer %strong = link_to current_user.name, current_user.person - = link_to t('layouts.header.settings'), users_edit_path - = link_to t('layouts.application.toggle'), toggle_mobile_path - = link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete