From f7cc01ceb2ebd50ece3ad47e2a74d1fda41937d3 Mon Sep 17 00:00:00 2001 From: maxwell Date: Tue, 9 Nov 2010 01:06:37 -0800 Subject: [PATCH] more work done. much more to go --- app/views/aspects/index.mobile.haml | 1 + app/views/layouts/application.mobile.haml | 5 +- app/views/shared/_publisher.mobile.haml | 16 -- app/views/shared/_stream_element.mobile.haml | 18 +-- .../status_messages/_status_message.haml | 5 + public/stylesheets/mobile.css | 103 ++++++++++++ public/stylesheets/sass/mobile.sass | 152 ++++++++++++++++++ 7 files changed, 273 insertions(+), 27 deletions(-) create mode 100644 app/views/status_messages/_status_message.haml diff --git a/app/views/aspects/index.mobile.haml b/app/views/aspects/index.mobile.haml index 54dae983f..15b710e51 100644 --- a/app/views/aspects/index.mobile.haml +++ b/app/views/aspects/index.mobile.haml @@ -1,6 +1,7 @@ %div{:data => {:role => 'content'}} %div{:data => {:role => 'fieldcontain'}} =render 'shared/publisher', :aspect => @aspect + = render 'shared/stream', :posts => @posts %div{:data => {:role => 'footer', :id => 'footer-toolbar', :position => 'fixed'}} diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index 7e6b8fe46..3f53c2988 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -23,9 +23,10 @@ %h1 = person_image_tag (current_user.person) = current_user.real_name - + %div{:data => {:role => 'fieldcontain'}} + =select_tag "aspects", options_from_collection_for_select(@aspects, "id", "name") - = yield + = yield %div{:data => {:role => 'fieldcontain'}} = form_tag(people_path, :method => 'get') do diff --git a/app/views/shared/_publisher.mobile.haml b/app/views/shared/_publisher.mobile.haml index e883ad531..b7f01fc8e 100644 --- a/app/views/shared/_publisher.mobile.haml +++ b/app/views/shared/_publisher.mobile.haml @@ -3,22 +3,6 @@ -# the COPYRIGHT file. -- content_for :head do - :javascript - $("div.public_toggle input").live("click", function(evt){ - if($(this).attr('checked') == true){ - $(".question_mark").click(); - }; - }); - - $("#publisher textarea, #publisher input").live("focus", function(evt){ - $("#publisher .options_and_submit").fadeIn(50); - }); - - $("#publisher form").live("submit", function(evt){ - $("#publisher .options_and_submit").hide(); - }); - #publisher = form_for StatusMessage.new, :remote => true do |status| %p diff --git a/app/views/shared/_stream_element.mobile.haml b/app/views/shared/_stream_element.mobile.haml index 16687083e..e211e2edb 100644 --- a/app/views/shared/_stream_element.mobile.haml +++ b/app/views/shared/_stream_element.mobile.haml @@ -3,7 +3,6 @@ -# the COPYRIGHT file. %li.message{:data=>{:guid=>post.id}} - = person_image_link(post.person) .content @@ -11,12 +10,10 @@ = link_to post.person.real_name, post.person .aspect ➔ - %ul - - if post.public? - %li= t('.the_world') - - else - - for aspect in current_user.aspects_with_post( post.id ) - %li= link_to aspect.name, aspect + - if post.public? + = t('.the_world') + - else + = current_user.aspects_with_post( post.id ).join(', ') - if current_user.owns?(post) .right @@ -26,7 +23,10 @@ .info %span.time= link_to(how_long_ago(post), object_path(post)) - = link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments" + /= link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments" - = render "comments/comments", :post => post + - if current_user.owns?(post) + .right + = link_to t('delete'), photo_path(post), :confirm => t('are_you_sure'), :method => :delete, :remote => true, :class => "delete" + /= render "comments/comments", :post => post diff --git a/app/views/status_messages/_status_message.haml b/app/views/status_messages/_status_message.haml new file mode 100644 index 000000000..85fd62688 --- /dev/null +++ b/app/views/status_messages/_status_message.haml @@ -0,0 +1,5 @@ +-# Copyright (c) 2010, Diaspora Inc. This file is +-# licensed under the Affero General Public License version 3 or later. See +-# the COPYRIGHT file. + += markdownify(post.message) diff --git a/public/stylesheets/mobile.css b/public/stylesheets/mobile.css index ecf3b9920..05c2a3216 100644 --- a/public/stylesheets/mobile.css +++ b/public/stylesheets/mobile.css @@ -1,4 +1,107 @@ +ul { + list-style: none; } + .avatar { width: 50px; height: 50px; padding: 0; } + +li.message { + width: 90%; + position: relative; + margin-top: 1em; + padding-bottom: 1.5em; + border-bottom: 1px #eeeeee solid; + line-height: 19px; + font-family: "Arial", "Helvetica", sans-serif; + color: #777777; } + li.message .avatar { + float: left; + margin-right: 15px; } + li.message .content { + margin-top: 0; + padding-left: 65px; + color: #444444; + font-weight: normal; + font-size: 14px; } + li.message .content .stream_photo { + float: left; + margin-top: 6px; } + li.message .content .photo_description { + margin-top: 6px; + padding-left: 220px; + min-height: 185px; + color: #888888; + font-style: italic; } + li.message .content .small_text { + font-size: 10px; } + li.message .content div.info { + color: #999999; + font-size: smaller; } + li.message .content div.info a { + color: #cccccc; } + li.message .content div.info .time { + font-weight: bold; + margin-right: 5px; } + li.message .content div.info .time a { + color: #bbbbbb; } + li.message:hover div.info a, li.message:hover .time a { + color: #107fc9; } + li.message:hover div.info a:hover, li.message:hover .time a:hover { + color: #22aae0; } + li.message:hover div.info a:active, li.message:hover .time a:active { + color: #005d9c; } + +.right .reshare_pane .reshare_button a.inactive { + color: #cccccc; + cursor: default; } + .right .reshare_pane .reshare_button a.inactive:hover { + text-decoration: none; } + +.right .reshare_pane .reshare_button { + padding: 5px; } + .right .reshare_pane .reshare_button.active { + background-color: #333333; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } + .right .reshare_pane .reshare_button.active a { + color: white; + text-shadow: none; } + +.right .reshare_pane { + margin-left: 5px; + margin-right: 5px; + display: inline; + position: relative; } + .right .reshare_pane ul.reshare_box { + width: 150px; + display: none; + z-index: 10; + position: absolute; + margin-top: 0; + padding: 0; + background-color: #fafafa; + list-style: none; + border: 5px solid #333333; + text-shadow: 0 2px white; + color: black; } + .right .reshare_pane ul.reshare_box > li { + font-weight: bold; + color: #cccccc; + border-top: 1px solid white; + border-bottom: 1px solid #cccccc; } + .right .reshare_pane ul.reshare_box > li:first-child { + border-top: none; } + .right .reshare_pane ul.reshare_box > li:last-child { + border-bottom: none; } + .right .reshare_pane ul.reshare_box > li a { + display: block; + height: 100%; + padding: 2px 5px; + cursor: default; } + .right .reshare_pane ul.reshare_box > li a:hover { + background-color: #eeeeee; + text-decoration: none; } + .right .reshare_pane ul.reshare_box > li a:active { + background-color: #cccccc; } diff --git a/public/stylesheets/sass/mobile.sass b/public/stylesheets/sass/mobile.sass index f28eb1014..142a2f41f 100644 --- a/public/stylesheets/sass/mobile.sass +++ b/public/stylesheets/sass/mobile.sass @@ -1,6 +1,158 @@ +ul + :list-style none .avatar :width 50px :height 50px :padding 0 +li.message + :width 90% + :position relative + :margin + :top 1em + :padding + :bottom 1.5em + :border + :bottom 1px #eee solid + :line-height 19px + :font + :family 'Arial', 'Helvetica', sans-serif + :color #777 + + .avatar + :float left + :margin + :right 15px + + .content + :margin + :top 0 + :padding + :left 65px + + + :color #444 + :font + :weight normal + :size 14px + + .stream_photo + :float left + :margin + :top 6px + + .photo_description + :margin + :top 6px + :padding + :left 220px + :min-height 185px + :color #888 + :font + :style italic + + .small_text + :font + :size 10px + + div.info + :color #999 + :font-size smaller + a + :color #ccc + .time + a + :color #bbb + :font + :weight bold + :margin + :right 5px + + &:hover + div.info, .time + a + :color #107FC9 + &:hover + :color #22AAE0 + &:active + :color #005D9C + + +.right .reshare_pane .reshare_button a.inactive + :color #ccc + &:hover + :text + :decoration none + :cursor default + +.right .reshare_pane .reshare_button + :padding 5px + &.active + :background + :color #333 + + :-webkit-border-radius 5px 5px 0 0 + :-moz-border-radius 5px 5px 0 0 + :border-radius 5px 5px 0 0 + + a + :color #fff + :text-shadow none + +.right .reshare_pane + :margin + :left 5px + :right 5px + :display inline + :position relative + + + ul.reshare_box + :width 150px + :display none + :z-index 10 + :position absolute + :margin + :top 0 + :padding 0 + + :background + :color #fafafa + + :list + :style none + + :border 5px solid #333 + + :text-shadow 0 2px #fff + :color #000 + + > li + :font + :weight bold + :color #ccc + :border + :top 1px solid #fff + :bottom 1px solid #ccc + + &:first-child + :border + :top none + &:last-child + :border + :bottom none + a + :display block + :height 100% + :padding 2px 5px + :cursor default + + &:hover + :background + :color #eee + :text + :decoration none + &:active + :background + :color #ccc