@@ -62,11 +62,11 @@ class SitesController < ApplicationController
def create_contact_form_email
# would be nice to move these to a non-AR model
if params[:sender_name].blank? || params[:email].blank? || params[:message].blank?
- flash[:error] = "All fields are required"
+ flash.now[:error] = "All fields are required"
render 'new_contact_form_email'
else
SiteMailer.deliver_contact_form_email(params[:sender_name], params[:email], params[:message])
- flash[:notice] = "Email sent"
+ flash.now[:notice] = "Email sent"
redirect_to root_path
end
end
app/controllers/sites_controller.rb
@@ -13,4 +13,8 @@ module ApplicationHelper
def article_eligible_for_comments?(article)
article.published? && (Time.now < (article.created_at + 3.months))
end
+
+ def admin_comment?(comment)
+ return true if comment.email == website.owner_email
+ end
end
app/helpers/application_helper.rb
@@ -12,7 +12,7 @@
%h3= pluralize @article.comments.size, 'comment'
#comments= render :partial => 'comments/comment', :collection => @article.comments
- if article_eligible_for_comments?(@article)
- %h3= 'Leave a comment'
+ %h3.leave_comment= 'Leave a comment'
%div= render 'comments/form', {:article => @article, :comment => @article.comments.build}
- else
%div= "Comments are closed."
app/views/articles/show.html.haml
@@ -1,8 +1,8 @@
-- div_for comment do
+- div_for comment, :class => "#{'admin' if admin_comment?(comment)}" do
- if admin?
%strong= comment.article.title
%p.author-line
- = "<span class='name'>#{h(comment.name)}</span> wrote on #{comment.created_at}"
+ = "<span class='name'>#{h(comment.name)}</span> wrote #{time_ago_in_words comment.created_at} ago"
%p=h comment.body
- if admin?
%p.admin-links
app/views/comments/_comment.html.haml
@@ -1,5 +1,2 @@
-- title "New Comment"
-
-%p= "Leave comment for article #{@article.title}"
-
+- title "New Comment", false
= render 'form', {:article => @article, :comment => @comment}
app/views/comments/new.html.haml
@@ -69,7 +69,7 @@
= yield(:sidebar)
.clear
#footer
- .wrap
+ #links
#page-list
%h4= t(:pages)
%ul
@@ -92,7 +92,8 @@
%ul
%li.flickr= link_to website.flickr_username, "http://flickr.com/photos/#{website.flickr_username}" if website.flickr_username
%li.twitter= link_to website.twitter_username, "http://twitter.com/#{website.twitter_username}" if website.twitter_username
- .clear
+ .clear
+ .wrap
#copyright= "#{website.name} © #{Time.now.year} #{website.owner_name}"
#powered-by= "<em>#{t(:powered_by)}</em> #{link_to 'rehash', 'http://github.com/webandy/rehash'}"
- if !website.google_analytics_code.blank?
app/views/layouts/application.html.haml
@@ -13,7 +13,7 @@ Feature: App should send email
And I fill in "Email" with "Visitor email"
And I fill in "Message" with "I would like to contact you"
And I press "Send"
- Then I should see "Email sent"
+ Then I should not see "Error"
And I should not see "All fields are required"
Scenario: Contact form should prevent incomplete postings
features/email.feature
@@ -9,6 +9,6 @@ $(function() {
// trigger focus on login page
if($('.new_session #password').length > 0) {
$('.new_session #password').focus();
- $('.new_session #password').css('background', '#FAEBD7');
+ $('.new_session #password').css('background', '#ffd');
}
});
public/javascripts/admin.js
@@ -47,8 +47,12 @@ a.cancel {
background-color: #FFF6BF;
border: solid 1px #FFD324; }
-.fieldWithErrors {
+.fieldWithErrors, .form .fieldWithErrors {
display: inline; }
+ .fieldWithErrors input[type=text], .fieldWithErrors textarea, .form .fieldWithErrors input[type=text], .form .fieldWithErrors textarea {
+ border: 1px solid #cf0000; }
+ .fieldWithErrors label, .form .fieldWithErrors label {
+ color: #cf0000; }
#errorExplanation {
width: 400px;
@@ -108,15 +112,18 @@ form p {
position: relative;
left: -4px; }
.tags a, .tags a:visited {
- font-size: 20px;
+ font-size: 14px;
color: #555;
margin: 5px;
padding: 4px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
background: #f0f0f0;
- border: 1px solid #ddd;
- text-shadow: 0 -1px 0 #fff; }
+ border: 1px solid #bbb;
+ text-shadow: 1px 1px 0 #fff;
+ opacity: 0.8; }
+ .tags a:hover, .tags a:visited:hover {
+ opacity: 1; }
.images {
padding: 0 0 10px 0;
@@ -179,13 +186,17 @@ form p {
color: #aaa; }
.back {
- padding: 20px 0; }
+ padding: 20px 0;
+ font-family: Arial;
+ font-size: 13px; }
+ .back a:hover {
+ text-decoration: underline; }
.change_password {
color: #000; }
.article p {
- line-height: 16px;
+ line-height: 20px;
margin: 15px 0; }
.article .body ul {
padding: 10px 20px; }
@@ -202,9 +213,6 @@ form p {
.article .body h1 {
font-size: 25px; }
-#new_comment input#comment_submit {
- margin: 10px 0; }
-
.page .body p {
line-height: 16px;
padding: 5px 0; }
@@ -231,16 +239,15 @@ form p {
padding: 20px 0; }
.admin-links a {
padding: 10px;
- background: #000;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
- -moz-box-shadow: #555 1px 1px 1px;
- -webkit-box-shadow: #555 1px 1px 1px;
- text-shadow: 1px 0px 1px #aaa; }
+ -moz-box-shadow: #555 1px 1px 0;
+ -webkit-box-shadow: #555 1px 1px 0;
+ opacity: 0.8;
+ background: #000; }
.admin-links a:hover {
- background: #222;
- text-shadow: none;
+ opacity: 1;
text-decoration: none; }
.index .project .images {
@@ -297,9 +304,6 @@ form p {
#header #navigation a {
padding: 3px 4px 6px 6px;
margin-right: 8px; }
- #header #navigation a:hover {
- position: relative;
- top: 1px; }
.wrap {
width: 960px;
@@ -341,19 +345,18 @@ form p {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #ddd; }
- #footer #page-list, #footer #tag-list, #footer #project-list, #footer #service-list {
- float: left;
- padding: 20px 0;
- width: 200px; }
- #footer #page-list h4, #footer #tag-list h4, #footer #project-list h4, #footer #service-list h4 {
+ #footer #links {
+ width: 960px;
+ margin: 0 auto; }
+ #footer #links h4 {
font-weight: normal;
padding-bottom: 4px; }
- #footer #page-list a:hover, #footer #tag-list a:hover, #footer #project-list a:hover, #footer #service-list a:hover {
- text-decoration: underline; }
- #footer #page-list ul li, #footer #tag-list ul li, #footer #project-list ul li, #footer #service-list ul li {
- margin: 2px 0; }
- #footer #tag-list, #footer #project-list {
- width: 300px; }
+ #footer #links #page-list, #footer #links #tag-list, #footer #links #project-list, #footer #links #service-list {
+ float: left;
+ padding: 20px 0 20px 40px;
+ width: 200px; }
+ #footer #links #page-list ul li, #footer #links #tag-list ul li, #footer #links #project-list ul li, #footer #links #service-list ul li {
+ margin: 2px 0; }
#footer #copyright {
font-size: 12px;
float: left; }
@@ -361,21 +364,24 @@ form p {
font-size: 12px;
float: right;
text-align: right; }
+ #footer #powered-by a {
+ opacity: 0.8; }
+ #footer #powered-by a:hover {
+ opacity: 1; }
#footer #service-list {
- float: right;
- text-align: right;
- padding: 20px 0;
- width: 150px; }
+ float: left;
+ padding: 20px 0; }
#footer #service-list .twitter {
- background: url(/images/services/twitter.png) no-repeat top right; }
+ background: url(/images/services/twitter.png) no-repeat top left; }
#footer #service-list .flickr {
- background: url(/images/services/flickr.png) no-repeat top right; }
+ background: url(/images/services/flickr.png) no-repeat top left; }
#footer #service-list a {
position: relative;
- right: 20px; }
+ left: 20px; }
.required {
- color: #aaa; }
+ color: #555;
+ padding: 3px 0; }
.quiet {
color: #999;
@@ -389,5 +395,21 @@ form p {
.articles_form .tags li {
display: inline; }
+.contact_form label {
+ line-height: 20px;
+ font-size: 14px; }
.contact_form textarea {
width: 400px; }
+
+.comment .author-line {
+ margin: 5px 0; }
+
+.comment.admin {
+ background: #ffc;
+ border-bottom: 1px solid #ff0; }
+
+.new_comment label {
+ line-height: 20px;
+ font-size: 14px; }
+.new_comment div {
+ margin: 5px 0; }
public/stylesheets/application.css
@@ -1,19 +1,26 @@
-label {
- color: #555; }
-
-.form input[type=text], .form input[type=password] {
- font-size: 1.3em;
- width: 250px;
- border: 1px solid #ccc;
- margin: 2px 0; }
- .form input[type=text]:focus, .form input[type=password]:focus {
- border: 1px solid #888; }
-.form textarea {
- height: 200px;
- font-size: 1.3em;
- border: 1px solid #ccc; }
- .form textarea:focus {
- border: 1px solid #666; }
+.form {
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
+ .form label {
+ color: #666; }
+ .form input[type=text], .form input[type=password] {
+ font-size: 16px;
+ width: 250px;
+ border: 1px solid #ccc;
+ margin: 2px 0;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px; }
+ .form input[type=text]:focus, .form input[type=password]:focus {
+ border: 1px solid #888;
+ background: #ffe; }
+ .form textarea {
+ height: 150px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px; }
+ .form textarea:focus {
+ border: 1px solid #666;
+ background: #ffe; }
.article .body, .page .body {
padding: 20px 0; }
@@ -52,23 +59,24 @@ label {
border-bottom: 1px solid #ddd;
padding: 15px 0; }
-#new_comment p {
- line-height: 20px; }
-
.comment {
background: #f0f0f0;
border-bottom: 1px solid #ddd;
margin: 12px 0;
padding: 20px; }
.comment .author-line {
- color: #555; }
+ font-size: 14px;
+ color: #666; }
.comment .author-line .name {
- color: #000;
- font-weight: bold;
- font-size: 1.2em; }
+ color: #444; }
+
+.new_comment {
+ padding-left: 18px; }
-#new_comment label {
- color: #888; }
+h3.leave_comment {
+ padding: 20px 0 7px;
+ color: #444;
+ border-bottom: 1px solid #aaa; }
.pagination {
padding: 20px 0 0 200px;
@@ -81,8 +89,9 @@ label {
border: 1px solid #10306A;
color: #10306A; }
.pagination span.current {
- border: 1px solid #10306A;
- background: #10306A; }
+ text-shadow: -1px -1px 0 #777;
+ border: 1px solid #C3DEEB;
+ background: #C3DEEB; }
#header {
background: transparent url(/images/theme/blue_header.png) top left repeat-x;
@@ -90,11 +99,14 @@ label {
#header a {
color: #fff; }
#header h1 {
- text-shadow: 0 -2px 10px #000; }
+ text-shadow: 0 -1px 6px #000; }
#header h2 {
text-shadow: -1px -1px 1px #000; }
+ #header #navigation a {
+ opacity: 0.8;
+ text-shadow: 0 -1px 2px #000; }
#header #navigation a:hover {
- background: #10305f; }
+ opacity: 1; }
#footer {
background: #ccddea; }
@@ -103,11 +115,13 @@ label {
color: #10306A;
text-transform: uppercase;
font-size: 13px; }
- #footer #page-list a, #footer #tag-list a, #footer #project-list a, #footer #service-list a {
+ #footer a {
color: #3B6AA0;
- text-shadow: 1px 1px 0 #fff; }
- #footer #page-list a:hover, #footer #tag-list a:hover, #footer #project-list a:hover, #footer #service-list a:hover {
- text-decoration: none; }
+ text-shadow: 1px 1px 0 #fff;
+ opacity: 0.8; }
+ #footer a:hover {
+ text-decoration: none;
+ opacity: 1; }
#footer #copyright {
color: #3B6AA0;
text-shadow: 1px 1px 0 #fff; }
@@ -115,4 +129,6 @@ label {
color: #3B6AA0;
text-shadow: 1px 1px 0 #fff; }
#footer #powered-by a {
- color: #10306A; }
+ font-family: Arial;
+ font-weight: bold;
+ font-size: 13px; }
public/stylesheets/blue.css
@@ -38,8 +38,12 @@ a.cancel
#flash_caution
:background-color #FFF6BF
:border solid 1px #FFD324
-.fieldWithErrors
+.fieldWithErrors, .form .fieldWithErrors
:display inline
+ input[type=text], textarea
+ :border 1px solid #cf0000
+ label
+ :color #cf0000
#errorExplanation
:width 400px
:border 2px solid #CF0000
@@ -98,15 +102,18 @@ form
:position relative
:left -4px
a, a:visited
- :font-size 20px
+ :font-size 14px
:color #555
:margin 5px
:padding 4px
- :-webkit-border-radius 4px
- :-moz-border-radius 4px
+ :-webkit-border-radius 3px
+ :-moz-border-radius 3px
:background #f0f0f0
- :border 1px solid #ddd
- :text-shadow 0 -1px 0 #fff
+ :border 1px solid #bbb
+ :text-shadow 1px 1px 0 #fff
+ :opacity 0.8
+ &:hover
+ :opacity 1
// lists of thumbnails
.images
@@ -176,6 +183,11 @@ form
:color #aaa
.back
:padding 20px 0
+ :font-family Arial
+ :font-size 13px
+ a
+ &:hover
+ :text-decoration underline
.change_password
:color #000
@@ -183,7 +195,7 @@ form
//styles that exist across all themes
.article
p
- :line-height 16px
+ :line-height 20px
:margin 15px 0
.body
ul
@@ -201,11 +213,6 @@ form
h1
:font-size 25px
-#new_comment
- input#comment_submit
- :margin 10px 0
-
-
.page
.body
p
@@ -231,16 +238,15 @@ form
:padding 20px 0
a
:padding 10px
- :background #000
:color #fff
:-webkit-border-radius 4px
:-moz-border-radius 4px
- :-moz-box-shadow #555 1px 1px 1px
- :-webkit-box-shadow #555 1px 1px 1px
- :text-shadow 1px 0px 1px #aaa
+ :-moz-box-shadow #555 1px 1px 0
+ :-webkit-box-shadow #555 1px 1px 0
+ :opacity 0.8
+ :background #000
&:hover
- :background #222
- :text-shadow none
+ :opacity 1
:text-decoration none
.index
.project
@@ -297,9 +303,6 @@ form
a
:padding 3px 4px 6px 6px
:margin-right 8px
- a:hover
- :position relative
- :top 1px
.wrap
:width 960px
:margin 0 auto
@@ -339,20 +342,19 @@ form
:border-top 1px solid #ccc
:border-bottom 1px solid #ccc
:background #ddd
- #page-list, #tag-list, #project-list, #service-list
+ #links
+ :width 960px
+ :margin 0 auto
h4
:font-weight normal
:padding-bottom 4px
- :float left
- :padding 20px 0
- :width 200px
- a:hover
- :text-decoration underline
- ul
- li
- :margin 2px 0
- #tag-list, #project-list
- :width 300px
+ #page-list, #tag-list, #project-list, #service-list
+ :float left
+ :padding 20px 0 20px 40px
+ :width 200px
+ ul
+ li
+ :margin 2px 0
#copyright
:font-size 12px
:float left
@@ -360,20 +362,24 @@ form
:font-size 12px
:float right
:text-align right
- #service-list
- :float right
- :text-align right
+ a
+ :opacity 0.8
+ &:hover
+ :opacity 1
+ #service-list
+ h4
+ :float left
:padding 20px 0
- :width 150px
.twitter
- :background url(/images/services/twitter.png) no-repeat top right
+ :background url(/images/services/twitter.png) no-repeat top left
.flickr
- :background url(/images/services/flickr.png) no-repeat top right
+ :background url(/images/services/flickr.png) no-repeat top left
a
:position relative
- :right 20px
+ :left 20px
.required
- :color #aaa
+ :color #555
+ :padding 3px 0
.quiet
:color #999
:font-size 11px
@@ -388,5 +394,22 @@ form
li
:display inline
.contact_form
+ label
+ :line-height 20px
+ :font-size 14px
textarea
- :width 400px
\ No newline at end of file
+ :width 400px
+
+.comment
+ .author-line
+ :margin 5px 0
+.comment.admin
+ :background #ffc
+ :border-bottom 1px solid #ff0
+
+.new_comment
+ label
+ :line-height 20px
+ :font-size 14px
+ div
+ :margin 5px 0
\ No newline at end of file
public/stylesheets/sass/application.sass
@@ -1,19 +1,26 @@
-label
- :color #555
.form
+ :font-family "Helvetica Neue",Helvetica,Arial,sans-serif
+ label
+ :color #666
input[type=text],input[type=password]
- :font-size 1.3em
+ :font-size 16px
:width 250px
:border 1px solid #ccc
:margin 2px 0
+ :-moz-border-radius 2px
+ :-webkit-border-radius 2px
&:focus
:border 1px solid #888
+ :background #ffe
textarea
- :height 200px
- :font-size 1.3em
+ :height 150px
+ :font-size 16px
:border 1px solid #ccc
+ :-moz-border-radius 2px
+ :-webkit-border-radius 2px
&:focus
:border 1px solid #666
+ :background #ffe
.article,.page
.body
@@ -53,24 +60,22 @@ label
:border-bottom 1px solid #ddd
:padding 15px 0
-#new_comment
- p
- :line-height 20px
.comment
:background #f0f0f0
:border-bottom 1px solid #ddd
:margin 12px 0
:padding 20px
.author-line
- :color #555
+ :font-size 14px
+ :color #666
.name
- :color #000
- :font-weight bold
- :font-size 1.2em
-
-#new_comment
- label
- :color #888
+ :color #444
+.new_comment
+ :padding-left 18px
+h3.leave_comment
+ :padding 20px 0 7px
+ :color #444
+ :border-bottom 1px solid #aaa
.pagination
:padding 20px 0 0 200px
@@ -83,8 +88,9 @@ label
:border 1px solid #10306A
:color #10306A
span.current
- :border 1px solid #10306A
- :background #10306A
+ :text-shadow -1px -1px 0 #777
+ :border 1px solid #C3DEEB
+ :background #C3DEEB
#header
:background transparent url(/images/theme/blue_header.png) top left repeat-x
@@ -92,12 +98,15 @@ label
a
:color #fff
h1
- :text-shadow 0 -2px 10px #000
+ :text-shadow 0 -1px 6px #000
h2
:text-shadow -1px -1px 1px #000
#navigation
+ a
+ :opacity 0.8
+ :text-shadow 0 -1px 2px #000
a:hover
- :background #10305f
+ :opacity 1
#footer
:background #ccddea
#page-list, #tag-list, #project-list, #service-list
@@ -106,11 +115,13 @@ label
:color #10306A
:text-transform uppercase
:font-size 13px
- a
- :color #3B6AA0
- :text-shadow 1px 1px 0 #fff
- &:hover
- :text-decoration none
+ a
+ :color #3B6AA0
+ :text-shadow 1px 1px 0 #fff
+ :opacity 0.8
+ &:hover
+ :text-decoration none
+ :opacity 1
#copyright
:color #3B6AA0
:text-shadow 1px 1px 0 #fff
@@ -118,4 +129,6 @@ label
:color #3B6AA0
:text-shadow 1px 1px 0 #fff
a
- :color #10306A
\ No newline at end of file
+ :font-family Arial
+ :font-weight bold
+ :font-size 13px
\ No newline at end of file
public/stylesheets/sass/blue.sass
b5c9c01e3d1cd26ca96e09bb64f7e746c821c518
Andy Atkinson
andy@webandy.com
http://github.com/webandy/rehash/commit/bbbd19dc3e21ae372dbbfed7c7949bd1d0d964ad
bbbd19dc3e21ae372dbbfed7c7949bd1d0d964ad
2009-10-28T18:28:42-07:00
2009-10-28T16:52:10-07:00
Improve some blue theme styles and resolve minor style issues
subtle form enhancements
Style tweaks for footer links
more style tweaks and prevent flash message for contact form from sticking around
80e50b34334199935882fd0f20aea75f3d0fd0bd
Andy Atkinson
andy@webandy.com