Merge pull request #4593 from Flaburgan/improve-mobile-design

Improve notifications and conversations views design on mobile

Changelog.md

@@ -13,6 +13,7 @@
 * Refactor ConversationsController#create, move more stuff to User model [#4551](https://github.com/diaspora/diaspora/pull/4551)
 * Refactor MessagesController#create, move stuff to User model [#4556](https://github.com/diaspora/diaspora/pull/4556)
 * Reorder the left bar side menu to put the stream first [#4569](https://github.com/diaspora/diaspora/pull/4569)
+* Improve notifications and conversations views design on mobile [#4593](https://github.com/diaspora/diaspora/pull/4593)
 
 ## Bug fixes
 * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

app/assets/stylesheets/mobile.css.scss

@@ -7,8 +7,7 @@
 
 a {
   color: #2489ce;
-  text: {
-    decoration: none; };
+  text-decoration: none;
 }
 
 body {
@@ -21,9 +20,12 @@ body {
   padding-top: 55px;
 }
 
+h3 {
+  margin-top: 0px;
+}
+
 .message {
-  padding: {
-    left: 2px; };
+  padding-left: 2px;
 }
 
 .stream_element,
@@ -676,6 +678,12 @@ select {
 
 .notifications {
   list-style: none;
+  margin: 0px;
+  clear: right;
+}
+
+.notifications_for_day {
+  margin-left: 12px;
 }
 
 .notification_day_header {
@@ -704,10 +712,6 @@ display: inline-block;
     width: 28px;
 }
 
-#conversation_inbox {
-  margin: 10px 0 0 10px;
-}
-
 .message_count {
   border-radius: 2px 2px 2px 2px;
   float: right;
@@ -792,7 +796,6 @@ form#new_conversation.new_conversation {
   border-bottom: 1px solid $border-dark-grey;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
-  margin: 5px 0 5px 15px;
   padding: 5px 10px;
   h4 {
     font-size: 14px;

app/views/layouts/application.mobile.haml

@@ -68,11 +68,10 @@
             = 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'

app/views/notifications/index.mobile.haml

@@ -1,10 +1,10 @@
-.right
-  = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => 'btn'
-
 %h3
   = t('.notifications')
 
-%ul.stream.notifications
+.right
+  = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => 'btn'
+
+%ul.notifications
   - @group_days.each do |day, notes|
     %li
       .notification_day_header

features/mobile/multiphoto.feature

@@ -17,7 +17,7 @@ Feature: viewing photos on the mobile main page
     When I press "Share"
     And I click on selector "img.stream-photo"
     Then I should see a "img" within "#show_content"
-    And I should not see a "#right" within ".row"
+    And I should not see a "#right" within "#main"
 
   Scenario: view multiphoto post
     Given I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"