From dbc8f0112e862521912124b19e3e49a0e7dd4e85 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Tue, 27 Jul 2010 12:12:25 -0700
Subject: [PATCH] some misc design cleanup. album page toggle pending.
---
app/views/albums/_new_album.haml | 2 +-
app/views/albums/index.html.haml | 13 ++---
app/views/albums/show.html.haml | 23 ++++-----
app/views/layouts/application.html.haml | 6 +--
app/views/photos/_new_photo.haml | 32 +++++-------
app/views/photos/show.html.haml | 20 ++++----
public/javascripts/view.js | 18 +++++--
public/stylesheets/application.css | 53 ++++++++-----------
public/stylesheets/sass/application.sass | 65 ++++++++----------------
9 files changed, 102 insertions(+), 130 deletions(-)
diff --git a/app/views/albums/_new_album.haml b/app/views/albums/_new_album.haml
index 3c94179cbe..4b433c5247 100644
--- a/app/views/albums/_new_album.haml
+++ b/app/views/albums/_new_album.haml
@@ -1,4 +1,4 @@
-= form_for Album.new, :remote => true do |f|
+= form_for Album.new do |f|
= f.error_messages
%p
= f.text_field :name, :value => "tell me something good"
diff --git a/app/views/albums/index.html.haml b/app/views/albums/index.html.haml
index bdafab4bad..0ed095f110 100644
--- a/app/views/albums/index.html.haml
+++ b/app/views/albums/index.html.haml
@@ -1,12 +1,13 @@
%h1.big_text
- = friends_albums_link
- \/
- =your_albums_link
-
- .button.right
- = link_to 'new album', new_album_path
+ %ul.button_set
+ %li.selected= friends_albums_link
+ %li= your_albums_link
+ .button.right#add_album_button
+ = link_to 'new album', "#"
+ #add_album_box.contextual_pane
+ = render "albums/new_album"
%ul#stream
- for album in @albums
diff --git a/app/views/albums/show.html.haml b/app/views/albums/show.html.haml
index 0d1f070f16..8fdce2d778 100644
--- a/app/views/albums/show.html.haml
+++ b/app/views/albums/show.html.haml
@@ -1,24 +1,23 @@
%h1.big_text
- = link_to 'albums', albums_path
- >>
+ .back
+ = link_to '⇧ albums', albums_path
+
= @album.name
- .button.right{ :id => "add_photos_button" }
- = link_to 'add photos', '#'
+ -if mine? @album
+ .button.right#add_photos_button
+ = link_to 'add photos', '#'
+
+ #add_photo_box.contextual_pane
+ = render "photos/new_photo", :photo => @photo, :album => @album
-%h4= "last updated: #{how_long_ago(@album)}"
+.sub_header
+ ="last updated: #{how_long_ago(@album)}"
-unless mine? @album
%h4= 'by ' + @album.person.real_name
-
--if mine? @album
- #add_photo_box{ :style => "display:none;" }
- = render "photos/new_photo", :photo => @photo, :album => @album
-
-
-
- for photo in @album_photos
= link_to (image_tag photo.image.url(:thumb_medium)), object_path(photo)
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 948d38e67d..9af745c158 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -7,7 +7,7 @@
%meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
= stylesheet_link_tag "blueprint/screen", :media => 'screen'
- = stylesheet_link_tag "application"
+ = stylesheet_link_tag "application", "ui"
/= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
= javascript_include_tag 'jquery142', 'rails', 'google'
= javascript_include_tag 'tiny_mce/tiny_mce', 'jquery.infieldlabel'
@@ -52,9 +52,9 @@
.container
.span-24.last
- .span-18.append-3.last
+ .span-19.append-1.last
= yield
- .span-3.last
+ .span-4.last
= link_to(person_image_tag(current_user), root_path)
= link_to "Edit your profile", edit_user_path(current_user)
%br
diff --git a/app/views/photos/_new_photo.haml b/app/views/photos/_new_photo.haml
index fce844d2b2..23e4ad68c2 100644
--- a/app/views/photos/_new_photo.haml
+++ b/app/views/photos/_new_photo.haml
@@ -5,22 +5,23 @@
url: "/photos?album_id=#{album.id}",
sendBoundary: window.FormData || $.browser.mozilla,
onStart: function(event, total) {
- return confirm("You are trying to upload " + total + " files. Are you sure?");
+ return confirm("You are about to upload " + total + " photos. Are you sure?");
},
setName: function(text) {
- $("#progress_report_name").text(text);
+ $("#progress_report_name").text(text);
},
setStatus: function(text) {
$("#progress_report_status").text(text);
},
setProgress: function(val) {
- $("#progress_report_bar").css('width', Math.ceil(val*100)+"%");
+ //$("#progress_report_bar").css('width', Math.ceil(val*100)+"%");
},
onFinishOne: function(event, response, name, number, total) {
//alert(response);
},
onFinish: function(event, total){
$("#progress_report").delay(600).slideUp(200);
+ $("#add_photo_box").delay(600).fadeOut(200);
},
onStart: function(event, total){
$("#progress_report").slideDown(600);
@@ -30,25 +31,18 @@
});
:css
- #progress_report_bar {
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
+ #progress_report, #progress_report_name, #progress_report_status{
+ font-size: 12px;
+ padding: 0;
+ line-height: auto;
}
-
-
-
= form_for photo, :html => {:multipart => true} do |f|
= f.error_messages
-
= f.hidden_field :album_id, :value => album.id
+ = f.file_field :image, :multiple => 'multiple'
- %p
- = f.file_field :image, :multiple => 'multiple'
-
- #progress_report{ :style => "display:none;" }
- #progress_report_name
- #progress_report_status{ :style => "font-style: italic;" }
- #progress_report_bar_container{ :style => "width: 90%; height: 15px;" }
- #progress_report_bar{ :style => "background-color: #0A516D; width: 0; height: 100%;" }
+ #progress_report{ :style => "display:none;" }
+ = image_tag "loader.gif"
+ #progress_report_name
+ #progress_report_status{ :style => "font-style: italic;" }
diff --git a/app/views/photos/show.html.haml b/app/views/photos/show.html.haml
index ccc0687f30..3d7cb268ca 100644
--- a/app/views/photos/show.html.haml
+++ b/app/views/photos/show.html.haml
@@ -1,24 +1,22 @@
-%h3
- viewing photos from album
- = link_to @album.name, album_path(@album)
+%h1.big_text
+ .back
+ = link_to "⇧ #{@album.name}", album_path(@album)
+ = @photo.image
-%div{:id => @photo.id}
+ .button.right
+ = link_to 'edit', '#'
+%div{:id => @photo.id}
= link_to "full size", @photo.image.url
#show_photo
+ = link_to_prev @photo, @album
= linked_scaled_photo @photo, @album
-
- #photo_pagination
- %center
- = link_to_prev @photo, @album
- |
- = link_to_next @photo, @album
+ = link_to_next @photo, @album
-if mine?(@photo)
%p
= link_to "Destroy", @photo, :confirm => 'Are you sure?', :method => :delete
-
%p
= link_to "<< back to album", album_path(@album)
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index 21a71b9c5f..92de871034 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -88,9 +88,21 @@ $(document).ready(function(){
speed: 3000
});
+ //buttons//////
+ $("#add_photos_button").toggle(
+ function(){
+ $("#add_photo_box").fadeIn(300);
+ },function(){
+ $("#add_photo_box").fadeOut(200);
+ }
+ );
- $("#add_photos_button").click(function(){
- $("#add_photo_box").fadeIn(300);
- });
+ $("#add_album_button").toggle(
+ function(){
+ $("#add_album_box").fadeIn(300);
+ },function(){
+ $("#add_album_box").fadeOut(200);
+ }
+ );
});//end document ready
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index c1a4ea7d15..1d6438bec2 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -237,8 +237,10 @@ ul.comment_set {
.request_buttons > li:first-child {
margin-right: 1em; }
-#show_photo img {
- max-width: 100%; }
+#show_photo {
+ text-align: center; }
+ #show_photo img {
+ max-width: 100%; }
#debug_info {
margin-top: 20px; }
@@ -344,33 +346,20 @@ 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));
- 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; }
-
-.right {
- float: right;
- margin-top: 6px; }
+h1.big_text {
+ border-top: 2px solid #666666;
+ border-bottom: 1px solid #666666;
+ text-align: center; }
+
+.back {
+ position: absolute;
+ left: 0;
+ font-size: 12px; }
+
+.sub_header {
+ font-size: 1em;
+ font-style: italic;
+ color: #999999;
+ margin-top: -5px;
+ margin-bottom: 1em;
+ text-align: center; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 018a55c8b9..6affc418e1 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -285,11 +285,14 @@ ul.comment_set
:margin-right 1em
#show_photo
+ :text
+ :align center
img
:max-width 100%
+
#debug_info
:margin-top 20px
@@ -422,54 +425,30 @@ 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))
-
- :padding 5px
- :height 14px
- :display inline
-
- :border 1px solid #ccc
+h1.big_text
+ :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
+ :text
+ :align center
- :color #555
- a
- :display block
- :color #444
+.back
+ :position absolute
+ :left 0
+ :font
+ :size 12px
+.sub_header
+ :font
+ :size 1em
+ :style italic
+ :color #999
-.right
- :float right
:margin
- :top 6px
-
-
-
-
+ :top -5px
+ :bottom 1em
+ :text
+ :align center
--
GitLab