diff --git a/app/views/albums/show.html.haml b/app/views/albums/show.html.haml index 8fdce2d77..79a46315d 100644 --- a/app/views/albums/show.html.haml +++ b/app/views/albums/show.html.haml @@ -6,7 +6,7 @@ -if mine? @album .button.right#add_photos_button - = link_to 'add photos', '#' + = link_to 'Add Photos', '#' #add_photo_box.contextual_pane = render "photos/new_photo", :photo => @photo, :album => @album @@ -15,12 +15,15 @@ ="last updated: #{how_long_ago(@album)}" -unless mine? @album - %h4= 'by ' + @album.person.real_name + %h4= "by #{@album.person.real_name}" - for photo in @album_photos = link_to (image_tag photo.image.url(:thumb_medium)), object_path(photo) --if mine? @album - %p - = link_to "Delete Album", @album, :confirm => 'Are you sure?', :method => :delete +#content_bottom + .back + = link_to "⇧ albums", albums_path + -if mine? @album + .button.right + = link_to 'Delete Album', @album, :confirm => 'Are you sure?', :method => :delete diff --git a/app/views/photos/show.html.haml b/app/views/photos/show.html.haml index 2ae325c2b..d7ca04b6a 100644 --- a/app/views/photos/show.html.haml +++ b/app/views/photos/show.html.haml @@ -14,11 +14,12 @@ = linked_scaled_photo @photo, @album = link_to_next @photo, @album - -if mine?(@photo) - %p - = link_to "Destroy", @photo, :confirm => 'Are you sure?', :method => :delete - %p - = link_to "⇧ #{@album.name}", album_path(@album) + #content_bottom + .back + = link_to "⇧ #{@album.name}", album_path(@album) + -if mine? @album + .button.right + = link_to 'Delete Album', @album, :confirm => 'Are you sure?', :method => :delete %h4{:class => "show_post_comments"} = "comments (#{@photo.comments.count})" diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 707746327..c2ed05d18 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -238,8 +238,11 @@ ul.comment_set { .request_buttons > li:first-child { margin-right: 1em; } -#show_photo img { - max-width: 100%; } +#show_photo { + text-align: center; + min-height: 200px; } + #show_photo img { + max-width: 100%; } #debug_info { margin-top: 20px; } @@ -345,34 +348,29 @@ ul#publisher_content_pickers li { width: 85%; display: inline; } -.button { - font-size: 12px; - line-height: 100%; - text-shadow: 0 1px 0 white; - color: #666666; - background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#fafafa), to(#e0e0e0)); - background: -moz-linear-gradient(top, #fafafa, #e0e0e0); - padding: 5px; - height: 14px; - display: inline; - border: 1px solid #cccccc; - border-bottom: 1px solid #666666; - border-left: 1px solid #999999; - border-right: 1px solid #999999; - border-radius: 3px; - box-shadow: 0 1px 1px #cccccc; - -webkit-box-shadow: 0 1px 1px #cccccc; - -moz-box-shadow: 0 1px 1px #cccccc; - cursor: pointer; } - .button:active { - box-shadow: 0 0px 2px black; - -webkit-box-shadow: 0 0px 2px black; - -moz-box-shadow: 0 0px 2px black; - color: #555555; } - .button a { - display: block; - color: #444444; } +h1.big_text { + position: relative; + line-height: auto; + border-top: 2px solid #666666; + border-bottom: 1px solid #666666; + text-align: center; } .right { float: right; margin-top: 6px; } + +.back { + position: absolute; + font-size: 12px; } + +#content_bottom { + position: relative; + line-height: 36px; + margin-top: 25px; + margin-bottom: 25px; + min-height: 36px; + border-top: 1px solid #999999; + border-bottom: 2px solid #eeeeee; } + +.show_post_comments ul.comment_set { + width: 100%; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index a13516de9..e293bfdfc 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -287,6 +287,8 @@ ul.comment_set :margin-right 1em #show_photo + :text-align center + :min-height 200px img :max-width 100% @@ -424,56 +426,41 @@ ul#publisher_content_pickers li :width 85% :display inline -.button - :font - :size 12px - - :line-height 100% - - :text - :shadow 0 1px 0 #fff - - :color #666 - - :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#FAFAFA), to(#E0E0E0)) - :background -moz-linear-gradient(top, #FAFAFA, #E0E0E0) - - - :padding 5px - :height 14px - - :display inline - - :border 1px solid #ccc +h1.big_text + :position relative + :line-height auto + :border + :top 2px solid #666 :bottom 1px solid #666 - :left 1px solid #999 - :right 1px solid #999 - :radius 3px - - :box-shadow 0 1px 1px #ccc - :-webkit-box-shadow 0 1px 1px #ccc - :-moz-box-shadow 0 1px 1px #ccc - - :cursor pointer - - &:active - :box-shadow 0 0px 2px #000 - :-webkit-box-shadow 0 0px 2px #000 - :-moz-box-shadow 0 0px 2px #000 - - :color #555 - - a - :display block - :color #444 - + :text + :align center .right :float right :margin :top 6px - +.back + :position absolute + :font + :size 12px + +#content_bottom + :position relative + :line-height 36px + + :margin + :top 25px + :bottom 25px + + :min-height 36px + + :border + :top 1px solid #999 + :bottom 2px solid #eee + +.show_post_comments ul.comment_set + :width 100% diff --git a/public/stylesheets/ui.css b/public/stylesheets/ui.css index f1c75e4e5..c760a1b0f 100644 --- a/public/stylesheets/ui.css +++ b/public/stylesheets/ui.css @@ -5,8 +5,8 @@ font-size: 12px; line-height: 100%; text-shadow: 0 1px 0 white; - padding: 5px; min-height: 14px; + background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#fafafa), to(#e0e0e0)); border: 1px solid #cccccc; border-bottom: 1px solid #666666; border-left: 1px solid #999999; @@ -14,39 +14,42 @@ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; - cursor: pointer; } + cursor: pointer; + box-shadow: 0 1px 1px #cccccc; + -webkit-box-shadow: 0 1px 1px #cccccc; + -moz-box-shadow: 0 1px 1px #cccccc; } .button a, .button_set a { font-weight: normal; color: #777777; } .button { - background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#fafafa), to(#e0e0e0)); - box-shadow: 0 1px 1px #cccccc; - -webkit-box-shadow: 0 1px 1px #cccccc; - -moz-box-shadow: 0 1px 1px #cccccc; } + padding: 5px; } .button:active { box-shadow: 0 0px 2px black; -webkit-box-shadow: 0 0px 2px black; -moz-box-shadow: 0 0px 2px black; color: #555555; } -ul.button_set > li { - display: inline; - height: 100%; - margin-right: -3px; - padding: 5px 10px; - border-left: 1px solid #cccccc; - border-right: 1px solid #eeeeee; } - ul.button_set > li:first-child { - border-left: none; - padding-left: 5px; } - ul.button_set > li:last-child { - border-right: none; - margin-right: 0; - padding-right: 5px; } +ul.button_set { + padding: 5px 0; } + ul.button_set > li { + padding: 5px; + display: inline; + height: 100%; + border-left: 1px solid #cccccc; + border-right: 1px solid white; + margin-left: -3px; + margin-right: -3px; } + ul.button_set > li:first-child { + margin-left: 0; + border-left: none; } + ul.button_set > li:last-child { + margin-right: 0; + border-right: none; } -.selected { - background-color: #999999; } +.button .selected, .button_set .selected { + background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#e0e0e0), to(#fafafa)); + border-top: 1px solid #aaaaaa; } .right { position: absolute; @@ -66,10 +69,14 @@ ul.button_set > li { color: #999999; font-size: 12px; font-weight: normal; - line-height: auto; - padding: 10px; } + line-height: auto; } .contextual_pane form { margin: 0; + padding: 10px; color: #999999; } - .contextual_pane form input { + .contextual_pane form input[type='text'] { + width: 80%; display: block; } + .contextual_pane form p { + padding: 10px; + display: inline; }