Merge pull request #4604 from Flaburgan/refactor-mobile-publisher

Refactor mobile publisher

Changelog.md

@@ -14,6 +14,7 @@
 * 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)
+* Slight redesign of mobile publisher [#4604](https://github.com/diaspora/diaspora/pull/4604)
 
 ## 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

@@ -24,6 +24,10 @@ h3 {
   margin-top: 0px;
 }
 
+.clear {
+  clear: both;
+}
+
 .message {
   padding-left: 2px;
 }
@@ -152,9 +156,11 @@ h3 {
 .stream_element div.img img.avatar {
   margin: 10px;
 }
+
 .stream_element .bd {
   padding-top: 10px;
 }
+
 .photo_attachments {
   position: relative;
   left: 0;
@@ -1069,14 +1075,6 @@ select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ {
   padding: 3px;
 }
 
-select#aspect_ids_ {
-  width: auto !important;
-}
-
-#file-upload-spinner {
-  top: 0px;
-}
-
 .hero-unit-mobile {
   padding: 10px;
   font-size: 14px;
@@ -1097,39 +1095,37 @@ input#q.search {
   margin-bottom: 20px;
 }
 
+select#aspect_ids_ {
+  width: auto !important;
+  float: right;
+  margin: 0px;
+}
+
+#file-upload-spinner {
+  top: 0px;
+}
+
+#publisher_mobile {
+  float: right;
+}
+
 #file-upload-publisher {
-  bottom: 0px !important;
+  float: left;
-  display: inline-block;
   padding: 3px 12px;
-  position: absolute !important;
-  left: 20px;
   cursor: pointer;
-    img {
+  
-      @include opacity(1);
+  &:hover img {
-      vertical-align: bottom;
+      @include opacity(0.4);
-    }
+  }
-    &:hover {
-      color: $text-dark-grey;
-      cursor: pointer;
-
-      img {
-        @include opacity(0.4);
-      }
-    }
-    &:active {
-      color: #444;
-      text-shadow: 0 1px 0 $highlight-white;
-
-      img  {
-        @include opacity(1);
-      }
-    }
-    &.loading {
-      @include opacity(1);
-    }
 }
 
 #publisher_textarea_wrapper {
+  @include border-radius(2px);
+  margin: 12px 0px;
+  background: #fff;
+  position: relative;
+  padding-right: 10px;
+
   #hide_publisher  {
     @include opacity(0.3);
     z-index: 5;
@@ -1143,15 +1139,9 @@ input#q.search {
     }
   }
 
-  @include border-radius(2px);
-
-  background: #fff;
-
   &.active {
     border: 1px solid $border-dark-grey;
   }
-  position: relative;
-  padding-right: 10px;
 
   textarea {
     z-index: 2;
@@ -1179,26 +1169,26 @@ input#q.search {
     li {
       display: table-cell;
       padding-right: 4px;
-        img {
+      
-          max-height: 55px;
+      img {
-        }
+        max-height: 55px;
-        .circle {
+      }
-          @include border-radius(20px);
+      
-          display: none;
+      .circle {
-          z-index: 1;
+        @include border-radius(20px);
-          position: absolute;
+        z-index: 1;
-          right: -7px;
+        position: absolute;
-          top: -5px;
+        right: -7px;
-          background-color: #333;
+        top: -5px;
-          width: 20px;
+        background-color: #333;
-          max-width: 20px;
+        width: 20px;
-          height: 20px;
+        max-width: 20px;
-          max-height: 20px;
+        height: 20px;
-
+        max-height: 20px;
-          border: 1px solid #fff;
+        border: 1px solid #fff;
-        }
+      }
+      
       .x  {
-        display: none;
         z-index: 2;
         position: absolute;
         top: -4px;
@@ -1206,16 +1196,7 @@ input#q.search {
         font-size: small;
         font-weight: bold;
         color: #FFFFFF;
-      }
+        cursor: pointer;
-
-      &:hover {
-        cursor: default;
-        .circle {
-          display: block;
-        }
-        .x {
-          display: block;
-        }
       }
     }
   }
@@ -1224,10 +1205,7 @@ input#q.search {
 #fileInfo-publisher {
   font-size: small;
   margin: 5px 2px;
-  position: absolute;
-  right: 10px;
   text-align: right;
-  bottom: 25px;
 }
 
 .my_activity {

app/views/shared/_publisher.mobile.haml

@@ -8,16 +8,10 @@
   = load_javascript_locales
   = include_gon
 
-- content_for :custom_css do
-  :css
-    body {
-      background-color: #eee;
-    }
-
 = 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'), :style => "width:300px", :rows => 4, :autofocus => "autofocus"
+    = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus"
 
   %fieldset
     %span#publisher_service_icons
@@ -25,7 +19,7 @@
         - for service in current_user.services
           = image_tag "social_media_logos/#{service.provider}-32x32.png", :title => service.provider.titleize, :class => "service_icon dim", :id =>"#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}"
 
-    %select{:id => "aspect_ids_", :name => "aspect_ids[]", :style => "float:right;"}
+    %select{:id => "aspect_ids_", :name => "aspect_ids[]"}
       %option{:value => 'public'}
         = t('public')
 
@@ -35,17 +29,15 @@
       - current_user.aspects.each do |aspect|
         %option{:value => aspect.id}
           = "· #{aspect.name}"
-
-    %br
-    %br
     
-    #fileInfo-publisher
+    .clear
     #publisher_textarea_wrapper
       %ul#photodropzone
+    #fileInfo-publisher
 
     #file-upload-publisher{:title => t('.upload_photos'), :class => 'btn'}
-      = image_tag 'icons/camera.png', :style => "height: 14px; width: 19px;", :alt => t('.upload_photos').titleize
+      = image_tag 'icons/camera.png', alt: t('.upload_photos').titleize
     #publisher_mobile
-      = submit_tag t('.share'), :class => 'btn primary', :id => "submit_new_message", :style => "position: absolute; right: 20px; bottom: 0px"
+      = submit_tag t('.share'), :class => 'btn primary', :id => "submit_new_message"
 
     #publisher_photo_upload