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

Merge pull request #4673 from Flaburgan/drawer-scrollable

Browse source 
New menu for the mobile version
This commit is contained in:
Jonne Haß 2014-02-09 18:05:51 +01:00
commit 11b3fe7df4
14 changed files with 293 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -18,6 +18,7 @@
## Features
* You can report a single post by clicking the correct icon in the controler section [#4517](https://github.com/diaspora/diaspora/pull/4517)
* Add permalinks for comments [#4577](https://github.com/diaspora/diaspora/pull/4577)
* New menu for the mobile version [#4673](https://github.com/diaspora/diaspora/pull/4673)
# 0.3.0.1

BIN
app/assets/images/icons/asterisk_white_mobile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
app/assets/images/icons/compose_mobile.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
app/assets/images/icons/mail_white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 992 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 262 B

BIN
app/assets/images/icons/notifications_white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

@ -26,6 +26,18 @@ $(document).ready(function(){
.toggleClass('inactive');
};
/* Drawer menu */
$('#menu_badge').bind("tap click", function(evt){
evt.preventDefault();
$("#app").toggleClass('draw');
});
/* Show / hide aspects in the drawer */
$('#all_aspects').bind("tap click", function(evt){
evt.preventDefault();
$("#all_aspects + li").toggleClass('hide');
});
/* Heart toggle */
$(".like_action", ".stream").bind("tap click", function(evt){
evt.preventDefault();
@ -270,7 +282,7 @@ $(document).ready(function(){
);
}
});
$("#submit_new_message").bind("tap click", function(evt){
evt.preventDefault();
$("#new_status_message").submit();

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

@ -17,7 +17,12 @@ body {
/* scale background image down for iOS retina display */
size: 200px;
}
padding-top: 55px;
padding-left: 0px;
padding-right: 0px;
}
#main.container {
margin: 55px 10px 0px 10px;
}
h3 {
@ -28,6 +33,146 @@ h3 {
clear: both;
}
#main {
position: relative;
}
#main_nav, #main {
-moz-transition:left 0.35s;
-webkit-transition:left 0.35s;
-o-transition:left 0.35s;
transition:left 0.35s;
left: 0;
}
#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;
-webkit-box-shadow: -2px 0px 2px 1px #333;
-moz-box-shadow: -2px 0px 2px 1px #333;
box-shadow: -2px 0px 2px 1px #333;
header {
position: static;
height: 45px;
border-radius: 0;
#global_search {
margin-right: 20px;
margin-left: 10px;
position: relative;
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; }
}
}
}
}
nav {
position: absolute;
top: 45px;
bottom: 0px;
overflow: auto;
width: 100%;
li {
font-size: 25px;
line-height: 25px;
font-weight: bold;
color: $light-grey;
border-bottom: solid rgb(53, 53, 53) 2px;
}
.no_border {
padding: 0px;
border-bottom: 0px;
> ul > li > a {
font-size: 14px;
padding: 8px 42px;
}
}
.hide {
display: none;
}
.avatar {
height: 35px;
width: 35px;
margin: -2px 5px;
}
}
a {
display: block;
color: $light-grey;
text-decoration: none;
padding: 12px 25px;
}
ul {
list-style: none;
margin: 0px;
}
}
#app.draw {
/* Turn the main content to fixed to avoid it to be scrollable, so to have only
* one scroll when the height of nav in the drawer is bigger than the screen
*/
#main_nav,
#main {
position: fixed;
left: -80%;
}
#drawer {
left: 20%;
}
}
.message {
padding-left: 2px;
}
@ -78,7 +223,7 @@ h3 {
.timeago {
font: {
weight: normal; }; }
padding: 0 !important;
padding: 0 !important;
}
.shield{
padding: 10px;
@ -174,8 +319,6 @@ h3 {
#main_stream {
margin-left: -10px;
margin-right: -10px;
.from {
white-space: nowrap;
overflow: hidden;
@ -241,9 +384,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 +416,7 @@ h3 {
shadow: 0 1px 2px #333;
decoration: none; };
padding: 0;
position: fixed;
position: fixed;
bottom: 10%;
z-index: 1;
height: 50px;
@ -299,7 +442,7 @@ h3 {
margin-right: 10px;
float: left;
}
.content {
padding-left: 100px;
}
@ -324,65 +467,55 @@ h3 {
header {
position: fixed;
height: 45px;
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;
width: 30px;
height: 30px;
padding: 7px;
}
#header_title { display: inline-block; }
#nav_badges {
float: right;
margin: 4px 12px;
margin: 7px 0px;
display: inline-block;
.badge {
display: inline;
margin-left: 3px;
padding: 8px 3px;
padding-bottom: 9px;
margin: 0px 4px;
padding: 10px 6px;
font-weight: bold;
font-size: smaller;
width: 28px;
background-color: #333333;
img {
height: 30px;
width: 30px;
}
}
.badge_count {
@include border-radius(2px);
z-index: 3;
position: absolute;
top: 3px;
padding: 1px 3px;
background-color: $red;
margin-left: -8px;
}
.badge:hover .badge_count {
background-color: #bd0902;
#conversation_icon {
height: 18px;
}
a {
padding: 5px 0px;
}
}
.badge_count {
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
z-index: 3;
position: absolute;
top: 1px;
padding: 0 2px;
padding-bottom: 1px;
background-color: $red;
line-height: 12px;
color: white;
font-size: smaller;
}
#notification {
right: 140px;
}
#conversation {
right: 110px;
}
.badge-inverse {
background-color: #333333 !important;
}
}
@ -548,12 +681,7 @@ footer {
}
#new_status_message {
text-align: left;
position: absolute;
left: 0;
top: 40px;
width: 100%;
min-height: 250px;
margin: 0px;
fieldset {
padding: 10px;
@ -567,26 +695,19 @@ footer {
}
}
#message_container {
@include box-shadow(0, 2px, 3px, #999);
background-color: #fff;
padding: 5px;
border: {
bottom: 1px solid $border-dark-grey;
}
.counter {
font-size: 14px;
}
.counter {
font-size: 14px;
}
textarea {
@include border-radius(0);
left: 0;
@include box-shadow(0, 2px, 3px, #999);
border: none;
margin: 10px 0;
border-bottom: 1px solid $border-dark-grey;
width: 96%;
padding: 2%;
margin: 0px;
font-size: 14px;
padding: 0;
min-width: 100%;
}
}
@ -660,12 +781,6 @@ select {
}
}
.compose_icon {
height: 28px;
width: 28px;
margin-left: 10px;
}
.navbar-inner .right {
position: absolute;
right: 12px;
@ -696,28 +811,6 @@ select {
margin-bottom: 5px;
}
#header-nav {
font-weight: bold;
height: 100%;
margin-right: 5px;
margin-top: 3px;
display: inline-block;
}
#header-nav a {
padding: 0 10px;
width: 100%;
color: $text-grey;
}
#header-nav > div {
display: inline;
font-weight: bold;
margin: 0 2px;
position: relative;
width: 28px;
}
.message_count {
border-radius: 2px 2px 2px 2px;
float: right;
@ -806,18 +899,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 +999,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 +1040,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 +1063,7 @@ input#user_password, #user_username, #user_password_confirmation, #user_email {
}
h1.session {
font-size: 40px;
font-size: 40px;
font-weight: 200;
}
@ -1006,7 +1099,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 +1206,7 @@ select#aspect_ids_ {
float: left;
padding: 3px 12px;
cursor: pointer;
&:hover img {
@include opacity(0.4);
}
@ -1169,11 +1262,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 +1280,7 @@ select#aspect_ids_ {
max-height: 20px;
border: 1px solid #fff;
}
.x {
z-index: 2;
position: absolute;
@ -1264,7 +1357,7 @@ select#aspect_ids_ {
h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
h2, #awesome_button {
margin-top: 30px;
}

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

@ -46,35 +46,73 @@
= 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
- if user_signed_in?
#nav_badges
-# Notifications
= link_to notifications_path, class: "badge", id: "notification_badge" do
= image_tag('icons/notifications_white.png')
- if current_user.unread_notifications.size > 0
%span.badge_count{id: "notification"}
= current_user.unread_notifications.size
-# Conversations
= link_to conversations_path, class: "badge", id: "conversations_badge" do
= image_tag('icons/mail_white.png', id: 'conversation_icon')
- if current_user.unread_message_count > 0
%span.badge_count{id: "conversation"}
= current_user.unread_message_count
-# Composition
= link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge", id: "compose_badge")
-# Menu
= link_to(image_tag('icons/menu.png'), "#", id: "menu_badge", class: "badge")
= link_to(image_tag('icons/asterisk_white_mobile.png'), stream_path, id: 'header_title')
#main.container{:role => "main"}
- 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
#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"
- if user_signed_in?
= render :partial =>'shared/footer'
.container
%nav
%ul
%li
= link_to t("streams.activity.title"), activity_stream_path
%li
= link_to t("streams.mentions.title"), mentioned_stream_path
%li#all_aspects
= link_to t('streams.aspects.title'), "#"
%li.no_border.hide
%ul
- current_user.aspects.each do |aspect|
%li
= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id])
%li
= link_to user_profile_path(current_user.username) do
= t('layouts.header.profile')
= person_image_tag(current_user)
%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

5
app/views/shared/_publisher.mobile.haml
View file

@ -9,9 +9,8 @@
= include_gon
= form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
#message_container
= status.hidden_field :provider_display_name, :value => 'mobile'
= status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus"
= status.hidden_field :provider_display_name, :value => 'mobile'
= status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus"
%fieldset
%span#publisher_service_icons

6
features/mobile/activity_stream.feature
View file

@ -11,12 +11,14 @@ Feature: Viewing my activity on the steam mobile page
And I toggle the mobile view
Scenario: Show my activity empty
When I click on selector "img.my_activity"
When I open the drawer
And I follow "My Activity"
Then I should see "My Activity"
And I should not see "Hello! i am #newhere"
Scenario: Show post on my activity
When I click on selector "a.image_link.like_action.inactive"
And I click on selector "img.my_activity"
And I open the drawer
And I follow "My Activity"
Then I should see "My Activity"
And I should see "Hello! i am #newhere" within ".ltr"

2
features/mobile/multiphoto.feature
View file

@ -9,7 +9,7 @@ Feature: viewing photos on the mobile main page
When I sign in as "bob@bob.bob"
And I toggle the mobile view
And I click on selector "img.compose_icon"
And I click on selector "#compose_badge"
Scenario: view full size image
Given I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"

4
features/step_definitions/mobile_steps.rb
View file

@ -25,3 +25,7 @@ end
When /^I visit the mobile search page$/ do
visit('/people.mobile')
end
When /^I open the drawer$/ do
find('#menu_badge').click
end