more work done. much more to go

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'}}

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

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

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?
-          - if post.public?
+          = t('.the_world')
-            %li= t('.the_world')
+        - else
-          - else
+          = current_user.aspects_with_post( post.id ).join(', ')
-            - for aspect in current_user.aspects_with_post( post.id )
-              %li= link_to aspect.name, aspect
 
       - 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
 

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)

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; }

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