Permalink
Browse files

511 - Project Design Carried to Convo - Add Title / Front End Design

This is a combination of 4 commits.
UX83 - Added placeholder for project banner in opportunity header
UX83 - Revised project banner per updated design
511 - Project Design Carried to Convo - Add Title / Front End Design
511 - Applied changes from other commit to use img tag on the banner.
  • Loading branch information...
1 parent 2e81e37 commit e4a3c003b29cf8a17019080a7332735185b38e1f @bdielman bdielman committed with Apr 13, 2012
View
@@ -15,6 +15,7 @@
* [CKEditor Indicator of Upload Status](https://agilezen.com/project/18091/story/508)
* [Remove Strikethru button on CKEditor Reflection/Action](https://agilezen.com/project/18091/story/499)
* [Default CKEditor linking to "open in new window" currently takes you off our site](https://agilezen.com/project/18091/story/501)
+ * [Project Design Carried to Convo - Add Title / Front End Design](https://agilezen.com/project/18091/story/511)
### Bug Fixes
* [Allow Issues to be Edited in Admin Screen](https://agilezen.com/project/18091/story/505)
@@ -41,6 +41,7 @@ def top_level_contributions
belongs_to :person, :foreign_key => "owner"
delegate :name, :to => :person, :prefix => true
delegate :standard_issue, :to => :issues
+ delegate :managed_issue, :to => :issues
has_attached_file :image,
:styles => {
View
@@ -51,7 +51,7 @@ class Issue < ActiveRecord::Base
has_attached_file(:standard_banner_image,
:styles => {
- :normal => "480x300#",
+ :normal => '940x100#',
:panel => "198x130#" },
:storage => :s3,
:s3_credentials => S3Config.credential_file,
@@ -50,13 +50,16 @@
<fieldset class="form-field">
<legend>Standard Banner Image</legend>
<% if @issue.standard_banner_image.exists? %>
- <%= image_tag @issue.standard_banner_image.url(:normal) %>
+ <%= image_tag @issue.standard_banner_image.url(:normal), :width => '100%' %>
<% end %>
<p>
- <%= f.label :standard_banner_image, "Attach an Image (looks best at 3:2 ratio)" %>
+ <%= f.label :standard_banner_image, "Attach an Image (looks best with 940x100 dimension) " %>
<br />
<%= f.file_field :standard_banner_image %>
</p>
+ <%= f.label :standard_banner_image_title, "Banner image title (Will be displayed if there is a banner image)" %>
+ <br />
+ <%= f.text_field :standard_banner_image_title %>
</fieldset>
<fieldset class="form-field">
@@ -2,18 +2,27 @@
<div class="wrapper">
<div class="content-container">
- <div class="main-content">
-
- <div class='main-content-left'>
- <img src='<%= @conversation.image.url(:panel) %>' width='120' height='80' alt='<%= @conversation.title %>' class='featured main-img'\>
- </div>
- <div class='main-content-right'>
- <h1><%= @conversation.title %></h1>
- <p class="subtitle">Started on <%= @conversation.created_at.strftime('%b %d, %Y') %> by <%= text_profile(@conversation.owner) %></p>
- <%= render :partial => '/layouts/social_links', :locals => {conversation_title: @conversation.title} %>
+ <% @managed_issue = @conversation.managed_issue.first %>
+ <% if @managed_issue && @managed_issue.standard_banner_image.exists? %>
+ <div class="mod project-banner">
+ <%= image_tag @managed_issue.standard_banner_image.url(:normal), :class => 'project-banner-img' %>
+ <div class="project-banner-titlebar">
+ <p class="project-banner-title"><%= @managed_issue.standard_banner_image_title %><%= link_to raw("Explore the whole project &#10145;"),issue_url(@managed_issue), :class => 'project-banner-link'%></p>
+ </div>
</div>
-
- <div class='convo-summary'>
+ <% end %>
+ <div class="main-content">
+
+ <div class='main-content-left'>
+ <img src='<%= @conversation.image.url(:panel) %>' width='120' height='80' alt='<%= @conversation.title %>' class='featured main-img'\>
+ </div>
+ <div class='main-content-right'>
+ <h1><%= @conversation.title %></h1>
+ <p class="subtitle">Started on <%= @conversation.created_at.strftime('%b %d, %Y') %> by <%= text_profile(@conversation.owner) %></p>
+ <%= render :partial => '/layouts/social_links', :locals => {conversation_title: @conversation.title} %>
+ </div>
+
+ <div class='convo-summary'>
<p><%= raw(@conversation.summary) %></p>
</div>
@@ -0,0 +1,9 @@
+class IssueStandardBannerImageTitle < ActiveRecord::Migration
+ def self.up
+ add_column :issues, :standard_banner_image_title, :string
+ end
+
+ def self.down
+ remove_column :issues, :standard_banner_image_title
+ end
+end
View
@@ -10,7 +10,7 @@
#
# It's strongly recommended to check this file into your version control system.
-ActiveRecord::Schema.define(:version => 20120418135757) do
+ActiveRecord::Schema.define(:version => 20120424194807) do
create_table "actions", :force => true do |t|
t.integer "conversation_id"
@@ -366,6 +366,7 @@
t.string "standard_banner_image_content_type"
t.integer "standard_banner_image_file_size"
t.datetime "standard_banner_image_updated_at"
+ t.string "standard_banner_image_title"
end
add_index "issues", ["cached_slug"], :name => "index_issues_on_cached_slug", :unique => true
@@ -30,6 +30,7 @@ form#comment-form textarea {
text-align: left;
width: 620px;
}
+
.top-align input.checkbox,
.top-align button.cancel,
.top-align input.submit,
@@ -1062,50 +1062,107 @@ div.three-col-sm div.photobank img {margin: 0 0 6px 6px;}
float: left;
margin-right: 20px;
}
+
.t-img {
margin-bottom: 20px;
position: relative;
}
+
.t-img img {
display: block;
- -moz-border-radius: 4px;
-webkit-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
+ -moz-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.t-col.four {
+ margin-right: 0;
+}
+
+.t-col.one,
+.t-col.four {
+ width: 220px;
}
-.t-col.four {margin-right: 0;}
-.t-col.one, .t-col.four {width: 220px;}
-.t-col.two {width: 140px;}
-.t-col.three {width: 300px;}
-.t-col.three .sm.one, .t-col.three .sm.two {width: 140px;}
-.t-col.three .sm.one {float: left;}
-.t-col.three .sm.two {float: right;}
+
+.t-col.two {
+ width: 140px;
+}
+
+.t-col.three {
+ width: 300px;
+}
+
+.t-col.three .sm.one,
+.t-col.three .sm.two {
+ width: 140px;i
+}
+
+.t-col.three .sm.one {
+ float: left;i
+}
+
+.t-col.three .sm.two {
+ float: right;
+}
+
.t-img div {
background: rgba(0,0,0,.4);
bottom: 0;
position: absolute;
width: 100%;
- -moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
- -o-border-radius: 0 0 4px 4px;
- border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ -o-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
}
+
.t-img p {
color: #fff;
font-weight: bold;
margin-bottom: 0;
padding: 3px 6px;
text-decoration: none;
}
-.t-img a {text-decoration: none;}
-.t-img a:hover div {background: rgba(0,0,0,.6);}
-.no-rgba .t-img p {background: url(/images/t_grid_bg.png) repeat;}
-.no-rgba .t-img a:hover div {background: url(/images/t_grid_bg_hover.png) repeat;}
-.t-img.sm p {font-size: 80%;}
-.t-img.lrg p {font-size: 120%;}
-.t-img.sm img { width: 140px; height: 90px; }
-.t-img.med img { width: 220px; height: 145px; }
-.t-img.lrg img { width: 300px; height: 200px; }
+
+.t-img a {
+ text-decoration: none;
+}
+
+.t-img a:hover div {
+ background: rgba(0,0,0,.6);
+}
+
+.no-rgba .t-img p {
+ background: url(/images/t_grid_bg.png) repeat;
+}
+
+.no-rgba .t-img a:hover div {
+ background: url(/images/t_grid_bg_hover.png) repeat;
+}
+
+.t-img.sm p {
+ font-size: 80%;
+}
+
+.t-img.lrg p {
+ font-size: 120%;
+}
+
+.t-img.sm img {
+ height: 90px;
+ width: 140px;
+}
+
+.t-img.med img {
+ height: 145px;
+ width: 220px;
+}
+
+.t-img.lrg img {
+ height: 200px;
+ width: 300px;
+}
/*- ENTRY STYLES
@@ -1996,7 +2053,7 @@ a.respond.rating-button {
}
div:last-child.button-wrapper {border-bottom: 1px solid #ccc;}
-/*- Conrelativeesation Ticker ----------*/
+/*- Conversation Ticker ----------*/
.conversation-ticker {
background-color: #fff;
@@ -2399,7 +2456,84 @@ img.float {
float: left;
margin-right: 15px;
}
-div.three-col-sm div.cols.call-out p {word-wrap: break-word;}
+
+div.three-col-sm div.cols.call-out p {
+ word-wrap: break-word;
+}
+
+/*- Project Banner ----------*/
+
+.project-banner {
+ background-position: 50%;
+ background-repeat: no-repeat;
+ height: 100px;
+ position: relative;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
+ -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
+ -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
+}
+
+.project-banner-img {
+ display: block;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.project-banner-titlebar {
+ background: rgba(0,0,0,.4);
+ bottom: 0;
+ padding: 5px 0;
+ position: absolute;
+ width: 100%;
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ -o-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+}
+
+.no-rgba .project-banner-titlebar {
+ background: url(/images/t_grid_bg.png) repeat;
+}
+
+.project-banner-title {
+ color: #fff;
+ font-size: 2em;
+ font-weight: bold;
+ line-height: 1;
+ margin-bottom: 0;
+ padding: 0 20px;
+ text-decoration: none;
+}
+
+.project-banner-link {
+ color: #fff;
+ font-size: 50%;
+ font-weight: normal;
+ margin-bottom: 0;
+ padding-left: 10px;
+ text-decoration: underline;
+}
+
+.project-banner-link:hover {
+ color: #eee;
+}
+
+.sponsor-tag {
+ bottom: 5px;
+ color: #bbb;
+ font-weight: bold;
+ margin-bottom: 0;
+ position: absolute;
+ right: 10px;
+ text-transform: uppercase;
+}
/*- Empty Section ----------*/
View
@@ -453,22 +453,37 @@ def given_an_issue_with_topics
end
context "paperclip" do
- it "will have necessary db columns for paperclip" do
- should have_db_column(:image_file_name).of_type(:string)
- should have_db_column(:image_content_type).of_type(:string)
- should have_db_column(:image_file_size).of_type(:integer)
- end
+ context "image" do
+ it "will have necessary db columns for paperclip" do
+ should have_db_column(:image_file_name).of_type(:string)
+ should have_db_column(:image_content_type).of_type(:string)
+ should have_db_column(:image_file_size).of_type(:integer)
+ end
- it "will only allow image attachments" do
- # allowed image mimetypes are based on what we have seen in production
- should validate_attachment_content_type(:image).
- allowing('image/bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/x-png').
- rejecting('text/plain', 'text/xml')
- end
+ it "will only allow image attachments" do
+ # allowed image mimetypes are based on what we have seen in production
+ should validate_attachment_content_type(:image).
+ allowing('image/bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/x-png').
+ rejecting('text/plain', 'text/xml')
+ end
- it "should validate presence of attachemnt" do
- should validate_attachment_presence(:image)
+ it "should validate presence of attachemnt" do
+ should validate_attachment_presence(:image)
+ end
+
+ end
+ context "standard_banner_image" do
+ it "should have db collumns for standard_banner_image" do
+ should have_db_column(:standard_banner_image_file_name).of_type(:string)
+ should have_db_column(:standard_banner_image_content_type).of_type(:string)
+ should have_db_column(:standard_banner_image_file_size).of_type(:integer)
+
+ end
+ it "should only allow image attachements" do
+ should validate_attachment_content_type(:standard_banner_image).
+ allowing('image/bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/x-png').
+ rejecting('text/plain', 'text/xml')
+ end
end
-
end
end
Oops, something went wrong.

0 comments on commit e4a3c00

Please sign in to comment.