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

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

@ -26,6 +26,23 @@ $(document).ready(function(){
.toggleClass('inactive'); .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 */ /* Heart toggle */
$(".like_action", ".stream").bind("tap click", function(evt){ $(".like_action", ".stream").bind("tap click", function(evt){
evt.preventDefault(); evt.preventDefault();
@ -270,7 +287,7 @@ $(document).ready(function(){
); );
} }
}); });
$("#submit_new_message").bind("tap click", function(evt){ $("#submit_new_message").bind("tap click", function(evt){
evt.preventDefault(); evt.preventDefault();
$("#new_status_message").submit(); $("#new_status_message").submit();

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

@ -17,6 +17,11 @@ body {
/* scale background image down for iOS retina display */ /* scale background image down for iOS retina display */
size: 200px; size: 200px;
} }
padding-left: 0px;
padding-right: 0px;
}
#main.container {
padding-top: 55px; padding-top: 55px;
} }
@ -28,6 +33,74 @@ h3 {
clear: both; 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 { .message {
padding-left: 2px; padding-left: 2px;
} }
@ -78,7 +151,7 @@ h3 {
.timeago { .timeago {
font: { font: {
weight: normal; }; } weight: normal; }; }
padding: 0 !important; padding: 0 !important;
} }
.shield{ .shield{
padding: 10px; padding: 10px;
@ -174,8 +247,8 @@ h3 {
#main_stream { #main_stream {
margin-left: -10px; margin-left: 10px;
margin-right: -10px; margin-right: 10px;
.from { .from {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -241,9 +314,9 @@ h3 {
.photo { .photo {
text-align: center; text-align: center;
background-color: #FFFFFF; background-color: #FFFFFF;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-color: #DDDDDD #BBBBBB #AAAAAA; border-color: #DDDDDD #BBBBBB #AAAAAA;
border-bottom-width: 0px; border-bottom-width: 0px;
@ -273,7 +346,7 @@ h3 {
shadow: 0 1px 2px #333; shadow: 0 1px 2px #333;
decoration: none; }; decoration: none; };
padding: 0; padding: 0;
position: fixed; position: fixed;
bottom: 10%; bottom: 10%;
z-index: 1; z-index: 1;
height: 50px; height: 50px;
@ -299,7 +372,7 @@ h3 {
margin-right: 10px; margin-right: 10px;
float: left; float: left;
} }
.content { .content {
padding-left: 100px; padding-left: 100px;
} }
@ -327,18 +400,19 @@ header {
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
min-width: 250px; width: 100%;
z-index: 10; z-index: 10;
background: url("header-bg-long.jpg") rgb(40,35,35); background: url("header-bg-long.jpg") rgb(40,35,35);
@include box-shadow(0, 1px, 2px, #333); @include box-shadow(0, 1px, 2px, #333);
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
#header_title { display: inline-block; } #header_title { display: inline-block; }
#nav_badges { #nav_badges {
float: right; float: right;
margin: 4px 12px; margin: 4px 12px;
display: inline-block;
.badge { .badge {
display: inline; display: inline;
margin-left: 3px; margin-left: 3px;
@ -348,11 +422,11 @@ header {
font-size: smaller; font-size: smaller;
width: 28px; width: 28px;
} }
.badge:hover .badge_count { .badge:hover .badge_count {
background-color: #bd0902; background-color: #bd0902;
} }
a { a {
padding: 5px 0px; padding: 5px 0px;
} }
@ -806,18 +880,18 @@ form#new_conversation.new_conversation {
h4 { h4 {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
} }
.span-10 { .span-10 {
margin: 5px; margin: 5px;
} }
} }
.span-2 { .span-2 {
margin: 5px 5px; margin: 5px 5px;
text-transform: uppercase; text-transform: uppercase;
} }
.span-10 { .span-10 {
width: 100%; width: 100%;
} }
@ -906,7 +980,7 @@ textarea#conversation_text {
.registrations_error, .registrations_error,
.registrations_notice { .registrations_notice {
color: #DF0101; color: #DF0101;
text-shadow: 1px 1px 5px #666; text-shadow: 1px 1px 5px #666;
} }
.registrations { .registrations {
@ -947,7 +1021,7 @@ form#new_user.new_user input.btn {
input#user_password, #user_username, #user_password_confirmation, #user_email { input#user_password, #user_username, #user_password_confirmation, #user_email {
height: 30px; height: 30px;
} }
#flash_notice, #flash_notice,
#flash_alert, #flash_alert,
#flash_error { #flash_error {
@ -970,7 +1044,7 @@ input#user_password, #user_username, #user_password_confirmation, #user_email {
} }
h1.session { h1.session {
font-size: 40px; font-size: 40px;
font-weight: 200; font-weight: 200;
} }
@ -1006,7 +1080,7 @@ form p.checkbox_select {
img { img {
@include border-radius(5px); @include border-radius(5px);
@include box-shadow(0,1px,2px,#666); @include box-shadow(0,1px,2px,#666);
position: absolute; position: absolute;
left: 0; left: 0;
height: 100px; height: 100px;
@ -1113,7 +1187,7 @@ select#aspect_ids_ {
float: left; float: left;
padding: 3px 12px; padding: 3px 12px;
cursor: pointer; cursor: pointer;
&:hover img { &:hover img {
@include opacity(0.4); @include opacity(0.4);
} }
@ -1169,11 +1243,11 @@ select#aspect_ids_ {
li { li {
display: table-cell; display: table-cell;
padding-right: 4px; padding-right: 4px;
img { img {
max-height: 55px; max-height: 55px;
} }
.circle { .circle {
@include border-radius(20px); @include border-radius(20px);
z-index: 1; z-index: 1;
@ -1187,7 +1261,7 @@ select#aspect_ids_ {
max-height: 20px; max-height: 20px;
border: 1px solid #fff; border: 1px solid #fff;
} }
.x { .x {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
@ -1264,7 +1338,7 @@ select#aspect_ids_ {
h1 { font-size: 25px; } h1 { font-size: 25px; }
h2 { font-size: 20px; } h2 { font-size: 20px; }
h3 { font-size: 15px; } h3 { font-size: 15px; }
h2, #awesome_button { h2, #awesome_button {
margin-top: 30px; margin-top: 30px;
} }

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

@ -46,35 +46,42 @@
= yield(:head) = yield(:head)
%body %body
%header #app
= link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title') %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? - if user_signed_in?
#nav_badges = render :partial =>'shared/footer'
= 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"} #drawer
- if current_page?(:activity_stream) .navbar
%h3 .navbar-inner
= t('streams.activity.title')
= yield
- if user_signed_in?
= render :partial =>'shared/footer'
/ javascripts at the bottom / javascripts at the bottom
= jquery_include_tag = jquery_include_tag