Add drawer menu to mobile version
- Added basic drawer menu with JS code working on /stream
This commit is contained in:
Erwan Guyader
flaburgan
parent
4a3869cda8
commit
1e159a027e
3 changed files with 151 additions and 53 deletions
|
|
@ -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();
|
||||
|
|
@ -270,7 +287,7 @@ $(document).ready(function(){
|
|||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#submit_new_message").bind("tap click", function(evt){
|
||||
evt.preventDefault();
|
||||
$("#new_status_message").submit();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -78,7 +151,7 @@ h3 {
|
|||
.timeago {
|
||||
font: {
|
||||
weight: normal; }; }
|
||||
padding: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.shield{
|
||||
padding: 10px;
|
||||
|
|
@ -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;
|
||||
|
|
@ -241,9 +314,9 @@ h3 {
|
|||
|
||||
.photo {
|
||||
text-align: center;
|
||||
background-color: #FFFFFF;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
background-color: #FFFFFF;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
border-color: #DDDDDD #BBBBBB #AAAAAA;
|
||||
border-bottom-width: 0px;
|
||||
|
|
@ -273,7 +346,7 @@ h3 {
|
|||
shadow: 0 1px 2px #333;
|
||||
decoration: none; };
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
|
|
@ -299,7 +372,7 @@ h3 {
|
|||
margin-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
|
@ -327,18 +400,19 @@ 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);
|
||||
border-bottom: 1px solid #222;
|
||||
border-bottom: 1px solid #222;
|
||||
|
||||
#header_title { display: inline-block; }
|
||||
|
||||
|
||||
#nav_badges {
|
||||
float: right;
|
||||
margin: 4px 12px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
margin-left: 3px;
|
||||
|
|
@ -348,11 +422,11 @@ header {
|
|||
font-size: smaller;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
|
||||
.badge:hover .badge_count {
|
||||
background-color: #bd0902;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
|
@ -806,18 +880,18 @@ form#new_conversation.new_conversation {
|
|||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.span-10 {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
margin: 5px 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.span-10 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -906,7 +980,7 @@ textarea#conversation_text {
|
|||
.registrations_error,
|
||||
.registrations_notice {
|
||||
color: #DF0101;
|
||||
text-shadow: 1px 1px 5px #666;
|
||||
text-shadow: 1px 1px 5px #666;
|
||||
}
|
||||
|
||||
.registrations {
|
||||
|
|
@ -947,7 +1021,7 @@ form#new_user.new_user input.btn {
|
|||
input#user_password, #user_username, #user_password_confirmation, #user_email {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
#flash_notice,
|
||||
#flash_alert,
|
||||
#flash_error {
|
||||
|
|
@ -970,7 +1044,7 @@ input#user_password, #user_username, #user_password_confirmation, #user_email {
|
|||
}
|
||||
|
||||
h1.session {
|
||||
font-size: 40px;
|
||||
font-size: 40px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
|
@ -1006,7 +1080,7 @@ form p.checkbox_select {
|
|||
img {
|
||||
@include border-radius(5px);
|
||||
@include box-shadow(0,1px,2px,#666);
|
||||
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100px;
|
||||
|
|
@ -1113,7 +1187,7 @@ select#aspect_ids_ {
|
|||
float: left;
|
||||
padding: 3px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover img {
|
||||
@include opacity(0.4);
|
||||
}
|
||||
|
|
@ -1169,11 +1243,11 @@ select#aspect_ids_ {
|
|||
li {
|
||||
display: table-cell;
|
||||
padding-right: 4px;
|
||||
|
||||
|
||||
img {
|
||||
max-height: 55px;
|
||||
}
|
||||
|
||||
|
||||
.circle {
|
||||
@include border-radius(20px);
|
||||
z-index: 1;
|
||||
|
|
@ -1187,7 +1261,7 @@ select#aspect_ids_ {
|
|||
max-height: 20px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
.x {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
|
|
@ -1264,7 +1338,7 @@ select#aspect_ids_ {
|
|||
h1 { font-size: 25px; }
|
||||
h2 { font-size: 20px; }
|
||||
h3 { font-size: 15px; }
|
||||
|
||||
|
||||
h2, #awesome_button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue