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

Add drawer menu to mobile version

Browse source 
- Added basic drawer menu with JS code working on /stream
This commit is contained in:
Erwan Guyader 2013-11-09 02:21:30 -08:00 committed by flaburgan
parent 4a3869cda8
commit 1e159a027e
3 changed files with 151 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,6 +26,23 @@ $(document).ready(function(){
.toggleClass('inactive');
};
/* Drawer menu */
$('#menu_badge').click(function(evt){
evt.preventDefault();
toggleDrawerMenu();
});
var toggleDrawerMenu = function(){
var app = $("#app");
if (app.hasClass('draw')){
app.removeClass('draw');
}
else {
app.addClass('draw');
}
};
/* Heart toggle */
$(".like_action", ".stream").bind("tap click", function(evt){
evt.preventDefault();

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

@ -17,6 +17,11 @@ body {
/* scale background image down for iOS retina display */
size: 200px;
}
padding-left: 0px;
padding-right: 0px;
}
#main.container {
padding-top: 55px;
}
@ -28,6 +33,74 @@ h3 {
clear: both;
}
#menu_badge {
float: right;
display: inline-block;
padding: 0px 10px 0px 12px;
img.menu {
height: 40px;
}
}
#app {
position: relative;
left: 0;
-moz-transition:left 0.35s;
-webkit-transition:left 0.35s;
-o-transition:left 0.35s;
transition:left 0.35s;
}
#main_nav {
-moz-transition:left 0.35s;
-webkit-transition:left 0.35s;
-o-transition:left 0.35s;
transition:left 0.35s;
height: 45px;
}
#drawer {
position: fixed;
top: 0;
bottom: 0;
width: 80%;
left: 100%;
background-color: #444;
-moz-transition:left 0.35s;
-webkit-transition:left 0.35s;
-o-transition:left 0.35s;
transition:left 0.35s;
.navbar {
.navbar-inner {
height: 45px;
border: none;
border-radius: 0;
@include box-shadow(0,1px,2px,#333);
background: {
image: image-url("header-bg-long.jpg");
}
width: 100%;
}
}
}
#app.draw {
left: -80%;
#main_nav {
left: -80%;
}
#drawer {
left: 20%;
}
}
.message {
padding-left: 2px;
}
@ -174,8 +247,8 @@ h3 {
#main_stream {
margin-left: -10px;
margin-right: -10px;
margin-left: 10px;
margin-right: 10px;
.from {
white-space: nowrap;
overflow: hidden;
@ -327,7 +400,7 @@ header {
top: 0px;
left: 0px;
right: 0px;
min-width: 250px;
width: 100%;
z-index: 10;
background: url("header-bg-long.jpg") rgb(40,35,35);
@include box-shadow(0, 1px, 2px, #333);
@ -338,6 +411,7 @@ header {
#nav_badges {
float: right;
margin: 4px 12px;
display: inline-block;
.badge {
display: inline;

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

@ -46,35 +46,42 @@
= yield(:head)
%body
%header
= link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
#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?
#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"}
= current_user.unread_notifications.count
= link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
- 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 user_signed_in?
#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"}
= current_user.unread_notifications.count
= link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
- 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)
= render :partial =>'shared/footer'
#main.container{:role => "main"}
- if current_page?(:activity_stream)
%h3
= t('streams.activity.title')
= yield
- if user_signed_in?
= render :partial =>'shared/footer'
#drawer
.navbar
.navbar-inner
/ javascripts at the bottom
= jquery_include_tag