diff --git a/Changelog.md b/Changelog.md index 5866a4f7e..bddff4358 100644 --- a/Changelog.md +++ b/Changelog.md @@ -30,6 +30,7 @@ * Add the ability to upload photos from the mobile site. [#4004](https://github.com/diaspora/diaspora/issues/4004) * Show timestamp when hovering on comment time-ago string. [#4042](https://github.com/diaspora/diaspora/issues/4042) * If sharing a post with photos to Facebook, always include URL to post [#3706](https://github.com/diaspora/diaspora/issues/3706) +* Add multiphoto for mobile post. [#4065](https://github.com/diaspora/diaspora/issues/4065) # 0.0.3.4 diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index 5cf5fa554..1d3498b36 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -217,47 +217,68 @@ body { margin: { top: -2px; }; } -#show_content { - padding: 12px; - padding-bottom: 24px; - border: { - bottom: 1px solid #bbb; }; - background: { - color: #fff; }; +.photo_mobile { + border-radius: 0px 0px 5px 5px !important; + font-size: 14px; +} - font: { - size: larger; }; +#show_content { + padding-bottom: 24px; + border-bottom: 1px solid #bbb; + font-size: larger; + text-align: center; img { - max-width: 100%; } + max-width: 100%; + } .photo { - text-align: center; } + text-align: center; + 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; + margin-top: 12px; + min-height: 100px; + line-height: 5; + } .controls { font: { size: smaller; }; } - &.photo { - background: { - color: #000; }; + &.photos { + border-bottom: 0px !important; } } #photo_controls { - margin: { - bottom: -42px; }; + margin-bottom: 5px; } .arrow { color: white !important; - font: { - size: 26pt; }; + font-size: 26pt; text: { shadow: 0 1px 2px #333; decoration: none; }; padding: 0; + position: fixed; + bottom: 10%; + z-index: 1; + height: 50px; + width: 50px; +} + +#left.arrow { + left: 5%; +} + +#right.arrow{ + right: 5%; } #author_info { diff --git a/app/helpers/mobile_helper.rb b/app/helpers/mobile_helper.rb index 82ef76308..41bae57c2 100644 --- a/app/helpers/mobile_helper.rb +++ b/app/helpers/mobile_helper.rb @@ -39,4 +39,23 @@ module MobileHelper html << "" end end + + def additional_photos + if photo.status_message_guid? + @additional_photos ||= photo.status_message.photos + end + end + + def next_photo + @next_photo ||= additional_photos[additional_photos.index(photo)+1] + @next_photo ||= additional_photos.first + end + + def previous_photo + @previous_photo ||= additional_photos[additional_photos.index(photo)-1] + end + + def photo + @photo ||= current_user.find_visible_shareable_by_id(Photo, params[:id]) + end end diff --git a/app/views/photos/show.mobile.haml b/app/views/photos/show.mobile.haml new file mode 100644 index 000000000..aa5a0af5f --- /dev/null +++ b/app/views/photos/show.mobile.haml @@ -0,0 +1,30 @@ +-# Copyright (c) 2010-2011, Diaspora Inc. This file is +-# licensed under the Affero General Public License version 3 or later. See +-# the COPYRIGHT file. + +:css + footer{display: none;} + +#show_content.photos + .photo + = image_tag photo.url(:scaled_full) + .stream_element{:class => "photo_mobile"} + .content + .from + = person_image_link(photo.author, :size => :thumb_small) + = person_link(photo.author) + .info + %span.time{:integer => photo.created_at.to_i} + = link_to(t('ago', :time => time_ago_in_words(photo.created_at)), post_path(photo)) + +-if additional_photos && additional_photos.length > 1 + #photo_controls + %table + %tr + %td + - if previous_photo != additional_photos.last + = link_to(image_tag('arrow-left.png', :id => 'arrow-left'), previous_photo, :rel => 'prefetch', :class => 'arrow', :id => 'left') + %td{:width => '100%'} + %td + - if next_photo == additional_photos[additional_photos.index(photo)+1] + = link_to(image_tag('arrow-right.png', :id => 'arrow-right'), next_photo, :rel => 'prefetch', :class => 'arrow', :id => 'right') diff --git a/app/views/shared/_photo_area.mobile.haml b/app/views/shared/_photo_area.mobile.haml index ea5c4bf79..d920fc5d0 100644 --- a/app/views/shared/_photo_area.mobile.haml +++ b/app/views/shared/_photo_area.mobile.haml @@ -9,7 +9,7 @@ - if post.photos.size > 1 .additional_photo_count = "+ #{post.photos.size-1}" - = image_tag post.first_photo_url(:thumb_large), :class => "stream-photo big-stream-photo" + = link_to (image_tag post.photos.first.url(:thumb_large), :class => "stream-photo big-stream-photo"), photo_path(post.photos.first), :class => "stream-photo-link" - elsif post.activity_streams? = image_tag post.image_url diff --git a/features/multiphoto_mobile.feature b/features/multiphoto_mobile.feature new file mode 100644 index 000000000..c52bab1fe --- /dev/null +++ b/features/multiphoto_mobile.feature @@ -0,0 +1,34 @@ +@javascript +Feature: viewing photos on the mobile main page + In order to navigate Diaspora* + As a mobile user + I want to view some photos + + Background: + Given a user with username "bob" + When I sign in as "bob@bob.bob" + And I toggle the mobile view + And I click on selector "img.compose_icon" + + Scenario: view full size image + Given I attach the file "spec/fixtures/button.png" to hidden element "file" within "#file-upload-publisher" + And I wait for the ajax to finish + When I press "Share" + And I wait for the ajax to finish + 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" + + Scenario: view multiphoto post + Given I attach the file "spec/fixtures/button.png" to hidden element "file" within "#file-upload-publisher" + And I wait for the ajax to finish + And I attach the file "spec/fixtures/button.gif" to hidden element "file" within "#file-upload-publisher" + And I wait for the ajax to finish + When I press "Share" + And I wait for the ajax to finish + And I should see "+ 1" within ".additional_photo_count" + And I click on selector "img.stream-photo" + Then I should see a "#right" within "tbody" + And I click on selector "img#arrow-right" + And I should see a "#left" within "tbody" + And I should not see a "#right" within "tbody"