nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add drawer to mobile

Browse source 
- Functional drawer with menu icon
This commit is contained in:
Erwan Guyader 2013-11-13 16:56:18 -08:00 committed by flaburgan
parent 1e159a027e
commit 754bd8178d
5 changed files with 112 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/icons/menu.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
app/assets/javascripts/mobile.js
View file

@ -27,7 +27,7 @@ $(document).ready(function(){
};
/* Drawer menu */
$('#menu_badge').click(function(evt){
$('#menu_badge').bind("tap click", function(evt){
evt.preventDefault();
toggleDrawerMenu();
});

87
app/assets/stylesheets/mobile.css.scss
View file

@ -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 {

48
app/views/layouts/application.mobile.haml
View file

@ -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

3
app/views/shared/_footer.mobile.haml
View file

@ -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