Skip to content
Browse files

Tooltip, darker font, image caption, lower limit

  • Loading branch information...
1 parent f0fe984 commit 290bdc880fb32cbffe81e5ebd3d373f085c29043 @fred committed Feb 6, 2012
Showing with 260 additions and 49 deletions.
  1. +7 −0 CHANGELOG
  2. +1 −1 app/admin/attachment.rb
  3. +1 −0 app/assets/javascripts/application.js
  4. +67 −0 app/assets/javascripts/easyTooltip.js
  5. +59 −14 app/assets/stylesheets/custom.css.erb
  6. +36 −1 app/assets/stylesheets/grid.css.erb
  7. +9 −0 app/helpers/items_helper.rb
  8. +21 −0 app/views/admin/attachments/_form.html.erb
  9. +1 −3 app/views/admin/attachments/_show.html.erb
  10. +12 −7 app/views/admin/items/_form.html.erb
  11. +24 −7 app/views/categories/index.html.erb
  12. +9 −2 app/views/items/show.html.erb
  13. +1 −1 app/views/shared/_sidebar.html.erb
  14. +6 −7 app/views/shared/_sidebar_account.html.erb
  15. BIN public/assets/active_admin-9c2a82e1be2ef40cd5df551a6a86ffd7.css.gz
  16. BIN public/assets/active_admin-ec9b787681289ac9528879344ac0295e.js.gz
  17. BIN public/assets/active_admin.css.gz
  18. BIN public/assets/active_admin.js.gz
  19. BIN public/assets/active_admin/application-a05b0bf250576440ff9842e74764d8de.js.gz
  20. BIN public/assets/active_admin/application.js.gz
  21. +1 −1 ...lication-100ae1ee30ae815f20dc72893f56f220.css → application-10da4b2647ac2b11257bddf1fbe46d45.css}
  22. BIN ...on-100ae1ee30ae815f20dc72893f56f220.css.gz → application-10da4b2647ac2b11257bddf1fbe46d45.css.gz}
  23. +1 −1 ...pplication-8dce22f7470abc905031956080862552.js → application-efe72e3e9dd2f75c61388f55a01bd06a.js}
  24. BIN ...tion-8dce22f7470abc905031956080862552.js.gz → application-efe72e3e9dd2f75c61388f55a01bd06a.js.gz}
  25. +1 −1 public/assets/application.css
  26. BIN public/assets/application.css.gz
  27. +1 −1 public/assets/application.js
  28. BIN public/assets/application.js.gz
  29. BIN public/assets/idc-4d51d33480385ebc1350e8eba314152e.css.gz
  30. BIN public/assets/idc.css.gz
  31. +2 −2 public/assets/manifest.yml
  32. BIN public/assets/rss-7e4f3aea3ffa634359cd8e84001e6124.css.gz
  33. BIN public/assets/rss.css.gz
  34. BIN public/assets/tinymce-067c1b43c1330f57f35f319f0f9ea31b.css.gz
  35. BIN public/assets/tinymce.css.gz
  36. BIN public/assets/tinymce/jquery-tinymce-eb8c5b5261ce68887ce9bf9769ae61f2.js.gz
  37. BIN public/assets/tinymce/jquery-tinymce.js.gz
  38. BIN public/assets/tinymce/preinit-f82938e8d4595b10e8eb62fe2e7e7ae2.js.gz
  39. BIN public/assets/tinymce/preinit.js.gz
  40. BIN public/assets/tinymce/tiny_mce-fb1cddc8ba6bca541c517c95099c8e34.js.gz
  41. BIN public/assets/tinymce/tiny_mce.js.gz
  42. BIN public/assets/tinymce/tiny_mce_jquery-06e0e44bde34159bfb07bfbf9058fcf1.js.gz
  43. BIN public/assets/tinymce/tiny_mce_jquery.js.gz
View
7 CHANGELOG
@@ -1,5 +1,12 @@
CHANGELOG
+== Feb 6, 2012
+* Added Tooltip for items on main page boxes.
+* wrap text and make items fill the boxes.
+* darker font
+* added image caption and using <figure> tag for main item image
+* Main item image now shows on Safari Reader
+
== Feb 5, 2012
* Implemented Roles, 75% completed.
* Treat Admin Users as users on front end
View
2 app/admin/attachment.rb
@@ -15,7 +15,6 @@
)
end
h4 auto_link(attachment.title)
- h4 auto_link(attachment.description)
link_to(
"Delete",
admin_attachment_path(attachment),
@@ -28,4 +27,5 @@
show do
render "show"
end
+ form :partial => "form"
end
View
1 app/assets/javascripts/application.js
@@ -9,3 +9,4 @@
//= require twitter/bootstrap
//= require jquery-ui
//= require css3-mediaqueries
+//= require easyTooltip
View
67 app/assets/javascripts/easyTooltip.js
@@ -0,0 +1,67 @@
+/*
+ * Easy Tooltip 1.0 - jQuery plugin
+ * written by Alen Grakalic
+ * http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
+ *
+ * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * Built for jQuery library
+ * http://jquery.com
+ *
+ */
+
+(function($) {
+
+ $.fn.easyTooltip = function(options){
+
+ // default configuration properties
+ var defaults = {
+ xOffset: 10,
+ yOffset: 25,
+ tooltipId: "easyTooltip",
+ clickRemove: false,
+ content: "",
+ useElement: ""
+ };
+
+ var options = $.extend(defaults, options);
+ var content;
+
+ this.each(function() {
+ var title = $(this).attr("title");
+ $(this).hover(function(e){
+ content = (options.content != "") ? options.content : title;
+ content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
+ $(this).attr("title","");
+ if (content != "" && content != undefined){
+ $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
+ $("#" + options.tooltipId)
+ .css("position","absolute")
+ .css("top",(e.pageY - options.yOffset) + "px")
+ .css("left",(e.pageX + options.xOffset) + "px")
+ .css("display","none")
+ .fadeIn("fast")
+ }
+ },
+ function(){
+ $("#" + options.tooltipId).remove();
+ $(this).attr("title",title);
+ });
+ $(this).mousemove(function(e){
+ $("#" + options.tooltipId)
+ .css("top",(e.pageY - options.yOffset) + "px")
+ .css("left",(e.pageX + options.xOffset) + "px")
+ });
+ if(options.clickRemove){
+ $(this).mousedown(function(e){
+ $("#" + options.tooltipId).remove();
+ $(this).attr("title",title);
+ });
+ }
+ });
+
+ };
+
+})(jQuery);
View
73 app/assets/stylesheets/custom.css.erb
@@ -2,6 +2,10 @@ body {
padding-top: 60px;
background: #EEE url(<%= asset_path "bg_texture.jpg" %>) repeat-x scroll 0px 0px;
}
+figure {
+ margin: 0;
+ padding: 0;
+}
.pull-right {
color: #777;
}
@@ -155,7 +159,7 @@ article h4 {
font-size: 16px;
}
article span.date {
- color: #666;
+ color: #555;
font-style: italic;
font-size: 13px;
padding: 2px 4px 2px 0;
@@ -180,7 +184,7 @@ article header h3 a:hover {
article header h1 a,
article header h2 a,
article header h3 a {
- color: #666;
+ color: #555;
text-decoration: none;
}
@@ -205,7 +209,7 @@ section ul.tags li,
article footer ul.tags li {
display: inline;
padding: 0 5px;
- border-right: 1px solid #888;
+ border-right: 1px solid #777;
}
footer ul.footer_menu li:last-child,
section ul.tags li:last-child,
@@ -233,9 +237,9 @@ article footer div.share a {
box-shadow: 0px 0px 4px #ddd;
padding: 3px 5px 5px 1px;
margin-bottom: 20px;
- height: 420px;
+ height: 432px;
overflow: hidden;
- color: #666;
+ color: #444;
background-color: #FFF;
border: 1px solid #DDDDDD;
-webkit-border-radius: 4px;
@@ -271,7 +275,7 @@ article footer div.share a {
}
.categories .box ul li.list_item span.abstract {
display: block;
- color: #666;
+ color: #444;
}
.categories .box ul li.list_item img.list_item_image {
@@ -306,7 +310,7 @@ article footer div.share a {
text-align: left;
font-size: 13px;
margin-bottom: 2px;
- color: #666;
+ color: #444;
}
#main_highlights.box ul li.featured_item span.title {
float: left;
@@ -335,8 +339,8 @@ article footer div.share a {
#highlights.box ul li.list_item img {
box-shadow: 0px 0px 6px #ccc;
border: 1px solid #ddd;
- padding: 1px;
- margin-bottom: 12px;
+ padding: 1px;
+ margin-bottom: 20px;
}
.categories .box h2 {
@@ -347,14 +351,14 @@ article footer div.share a {
}
#main_highlights.box {
- height: 420px;
+ height: 422px;
}
#highlights.box {
- height: 420px;
+ height: 422px;
}
#highlights.box ul li.list_item {
- margin-top: 2px;
- margin-bottom: 2px;
+ margin-top: 4px;
+ margin-bottom: 4px;
}
.content article img.show_item_image {
@@ -387,7 +391,7 @@ blockquote {
span.more a {
float: left;
margin-left: 10px;
- color: #888;
+ color: #777;
font-style: italic;
font-size: 0.9em;
}
@@ -451,4 +455,45 @@ ul.feed_list li {
.field_with_errors input {
border-color: pink;
+}
+
+.hidden {
+ display: none;
+}
+
+figure {
+ float: left;
+}
+figure figcaption {
+ float: left;
+ display: block;
+ clear: both;
+ margin: 0px 2px 10px 0px;
+ color: #777;
+ min-width: 160px;
+ max-width: 220px;
+ border-bottom: 1px solid #DDD;
+}
+
+span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#easyTooltip{
+ padding:5px;
+ background: #f1f1f1;
+ border-radius: 6px;
+ border: 4px solid #AAA;
+ max-width: 360px;
+ font-size: 14px;
+}
+
+img.tooltip_image {
+ float: left;
+ margin-right: 5px;
+ border: 1px solid #fff;
+ padding: 1px;
}
View
37 app/assets/stylesheets/grid.css.erb
@@ -26,6 +26,12 @@
/*width: 130px;*/
margin-bottom: 12px;
}
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ }
}
@media only screen and (min-width: 940px) {
body {
@@ -55,6 +61,12 @@
/*width: 130px;*/
margin-bottom: 10px;
}
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ }
}
@media only screen and (min-width: 640px) {
@@ -86,6 +98,12 @@
/*width: 130px;*/
margin-bottom: 10px;
}
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ }
}
@@ -146,7 +164,12 @@
width: 130px;
margin-bottom: 6px;
}
-
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: normal;
+ overflow: visible;
+ }
}
@@ -174,6 +197,12 @@
width: 130px;
margin-bottom: 6px;
}
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: normal;
+ overflow: visible;
+ }
}
/* Lowend Mobile */
@@ -255,4 +284,10 @@
ul.nav li#home_link {
display:none;
}
+ span.noroll {
+ text-overflow: ellipsis;
+ display: block;
+ white-space: normal;
+ overflow: visible;
+ }
}
View
9 app/helpers/items_helper.rb
@@ -1,5 +1,14 @@
module ItemsHelper
+ def item_title(item)
+ str = ""
+ str += "#{image_tag(item.attachments.first.image.thumb, :class => "tooltip_image")}" if item.has_image?
+ str += "<strong>#{item.title}</strong>"
+ str += "<br/>"
+ str += "#{item.abstract}"
+ str
+ end
+
def twitter_link
"https://twitter.com/#/worldmathaba"
end
View
21 app/views/admin/attachments/_form.html.erb
@@ -0,0 +1,21 @@
+<%= semantic_form_for [:admin, @attachment], :html => { :enctype => "multipart/form-data" } do |f| %>
+
+ <%= f.inputs :name => "Required Main Information" do %>
+ <%= f.input :title, :label => "Image Caption" %>
+ <%= f.input :image, :as => "file",
+ :label => "Choose Image to upload",
+ :hint => "New Image will overwrite curret image (old image will be deleted)" %>
+ <% end %>
+
+ <%= f.buttons :commit %>
+<% end %>
+
+
+
+<script type="text/javascript">
+ $("#attachment_title").counter({
+ count: 'up',
+ goal: 36
+ });
+</script>
+
View
4 app/views/admin/attachments/_show.html.erb
@@ -2,9 +2,7 @@
<h3>Image Details</h3>
<div class="panel_contents">
<div class="attributes_table image">
- <p>Title: <b><%= @attachment.title %></b></p>
- <p>Description: <b><%= @attachment.description %></b></p>
-
+ <p>Image Caption: <b><%= @attachment.title %></b></p>
<% if @attachment.attachable && @attachment.attachable.user %>
<p>Uploaded by: <b><%= link_to(@attachment.attachable.user.email, admin_user_path(@attachment.attachable.user)) %></b></p>
<% end %>
View
19 app/views/admin/items/_form.html.erb
@@ -20,10 +20,10 @@
<%= f.input :title,
:label => "Headline",
:required => true,
- :hint => "Required, ideal 60-80 characters" %>
+ :hint => "Required, ideal 60 characters. Max 100." %>
<%= f.input :abstract,
- :hint => "Required, use a single paragraph. 80-120 characters for long headline, 120-160 for short headline",
+ :hint => "Required, ideal 80 characters. Max 120.",
:required => true,
:input_html => { :rows => 2 }
%>
@@ -103,7 +103,7 @@
<%= f.inputs :name => "Main Image", :multipart => true do %>
<%= f.semantic_fields_for :attachments do |attachment| %>
<% if attachment.object.new_record? %>
- <%= attachment.input :description, :as => "string", :label => "Image Caption" %>
+ <%= attachment.input :title, :as => "string", :label => "Image Caption" %>
<%= attachment.input :image, :as => "file", :label => "Choose File to upload" %>
<% else %>
<h3>Current Images: </h3>
@@ -182,12 +182,17 @@
);
$("#item_abstract").counter({
- count: 'up',
- goal: 250
+ count: 'up',
+ goal: 120
});
$("#item_title").counter({
- count: 'up',
- goal: 200
+ count: 'up',
+ goal: 100
+ });
+
+ $("#item_attachments_attributes_0_title").counter({
+ count: 'up',
+ goal: 36
});
// $(document).ready(function(){
View
31 app/views/categories/index.html.erb
@@ -15,8 +15,8 @@
:title => item.abstract
)
%>
- <span class="title"><%= link_to item.title.to_s.truncate(120), item, :title => item.abstract %></span>
- <span class="abstract"><%= item.abstract.to_s.truncate(145) %></span>
+ <span class="title"><%= link_to item.title.to_s.truncate(100), item, :title => item.abstract %></span>
+ <span class="abstract"><%= item.abstract.to_s.truncate(120) %></span>
<% end %>
</li>
</ul>
@@ -44,7 +44,7 @@
<div class="span6 box" id="<%= category.slug %>">
<h1><%= link_to category.title, category %></h1>
<ul>
- <% category.top_items(8).each_with_index do |item,index|%>
+ <% category.top_items(13).each_with_index do |item,index|%>
<li class="list_item" id="item_<%=item.id%>">
<% if index==0 && !item.attachments.empty? %>
<%= link_to(
@@ -53,15 +53,32 @@
:title => item.abstract
)
%>
- <%= link_to item.title.to_s.truncate(100), item, :title => item.abstract %>
+ <%= link_to item.title.to_s.truncate(100), item,
+ :title => "<strong>#{item.title}</strong> <br/> #{item.abstract}"
+ %>
<span class="abstract"><%= item.abstract.to_s.truncate(100) %></span>
<% else %>
- <%= link_to item.title.to_s.truncate(160), item, :title => item.abstract %>
+ <span class="noroll">
+ <%= link_to item.title.to_s.truncate(100), item,
+ :title => item_title(item)
+ %>
+ </span>
<% end %>
</li>
<% end %>
</ul>
- <span class="more"><%= link_to "more...", category %></span>
+ <span class="more"><%= link_to "more...", category, :title => "Read more articles in this category" %></span>
</div>
<% end %>
-</div>
+</div>
+
+<%= content_for :scripts do %>
+ <script>
+ $(document).ready(function(){
+ $("a").easyTooltip({
+ yOffset: 0,
+ xOffset: 40
+ });
+ });
+ </script>
+<% end %>
View
11 app/views/items/show.html.erb
@@ -33,8 +33,15 @@
</span>
<section>
- <% if @item.has_image?%>
- <%= image_tag(@item.attachments.first.image.medium, :class => "show_item_image") %>
+ <% if @item.has_image? %>
+ <figure>
+ <%= image_tag(@item.attachments.first.image.medium, :class => "show_item_image") %>
+ <% if @item.attachments.first.title %>
+ <figcaption>
+ <%= @item.attachments.first.title.to_s.truncate(32) %>
+ </figcaption>
+ <% end %>
+ </figure>
<% end %>
<p><i><%= @item.highlight %></i></p>
<%= @item.body.html_safe %>
View
2 app/views/shared/_sidebar.html.erb
@@ -58,7 +58,7 @@
<% end %>
</ul>
- <h4>Sections</h4>
+ <h4>Useful Pages</h4>
<ul>
<% Page.order("priority ASC").all.each do |page| %>
<li><%= link_to page.title, page %></li>
View
13 app/views/shared/_sidebar_account.html.erb
@@ -44,13 +44,12 @@
<% end -%>
<% end -%>
</ul>
- <h5>Help</h5>
- <ul>
- <li><%= link_to "Help", "/pages/help" %></li>
- <li><%= link_to "Contact us", "/messages/new" %></li>
- <li><%= link_to "Privacy Policy", "/pages/policy" %></li>
- </ul>
-
<% end %>
+ <h5>Useful Pages</h5>
+ <ul>
+ <% Page.order("priority ASC").all.each do |page| %>
+ <li><%= link_to page.title, page %></li>
+ <% end %>
+ </ul>
</div>
</div>
View
BIN public/assets/active_admin-9c2a82e1be2ef40cd5df551a6a86ffd7.css.gz
Binary file not shown.
View
BIN public/assets/active_admin-ec9b787681289ac9528879344ac0295e.js.gz
Binary file not shown.
View
BIN public/assets/active_admin.css.gz
Binary file not shown.
View
BIN public/assets/active_admin.js.gz
Binary file not shown.
View
BIN public/assets/active_admin/application-a05b0bf250576440ff9842e74764d8de.js.gz
Binary file not shown.
View
BIN public/assets/active_admin/application.js.gz
Binary file not shown.
View
2 ...tion-100ae1ee30ae815f20dc72893f56f220.css → ...tion-10da4b2647ac2b11257bddf1fbe46d45.css
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN ...n-100ae1ee30ae815f20dc72893f56f220.css.gz → ...n-10da4b2647ac2b11257bddf1fbe46d45.css.gz
Binary file not shown.
View
2 ...ation-8dce22f7470abc905031956080862552.js → ...ation-efe72e3e9dd2f75c61388f55a01bd06a.js
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN ...on-8dce22f7470abc905031956080862552.js.gz → ...on-efe72e3e9dd2f75c61388f55a01bd06a.js.gz
Binary file not shown.
View
2 public/assets/application.css
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN public/assets/application.css.gz
Binary file not shown.
View
2 public/assets/application.js
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN public/assets/application.js.gz
Binary file not shown.
View
BIN public/assets/idc-4d51d33480385ebc1350e8eba314152e.css.gz
Binary file not shown.
View
BIN public/assets/idc.css.gz
Binary file not shown.
View
4 public/assets/manifest.yml
@@ -177,9 +177,9 @@ rss_blue_16.png: rss_blue_16-622abb7c9eb0da3a54ddb9b6b4ee81a1.png
rss_blue_32.png: rss_blue_32-6674ae4c66b6e2b4c2f16eef361d4f94.png
rss_icon_glass_blue64.png: rss_icon_glass_blue64-c55d00cda381c076b65e270902e601d8.png
active_admin.js: active_admin-ec9b787681289ac9528879344ac0295e.js
-application.js: application-8dce22f7470abc905031956080862552.js
+application.js: application-efe72e3e9dd2f75c61388f55a01bd06a.js
active_admin.css: active_admin-9c2a82e1be2ef40cd5df551a6a86ffd7.css
-application.css: application-100ae1ee30ae815f20dc72893f56f220.css
+application.css: application-10da4b2647ac2b11257bddf1fbe46d45.css
idc.css: idc-4d51d33480385ebc1350e8eba314152e.css
rss.css: rss-7e4f3aea3ffa634359cd8e84001e6124.css
tinymce.css: tinymce-067c1b43c1330f57f35f319f0f9ea31b.css
View
BIN public/assets/rss-7e4f3aea3ffa634359cd8e84001e6124.css.gz
Binary file not shown.
View
BIN public/assets/rss.css.gz
Binary file not shown.
View
BIN public/assets/tinymce-067c1b43c1330f57f35f319f0f9ea31b.css.gz
Binary file not shown.
View
BIN public/assets/tinymce.css.gz
Binary file not shown.
View
BIN public/assets/tinymce/jquery-tinymce-eb8c5b5261ce68887ce9bf9769ae61f2.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/jquery-tinymce.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/preinit-f82938e8d4595b10e8eb62fe2e7e7ae2.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/preinit.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/tiny_mce-fb1cddc8ba6bca541c517c95099c8e34.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/tiny_mce.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/tiny_mce_jquery-06e0e44bde34159bfb07bfbf9058fcf1.js.gz
Binary file not shown.
View
BIN public/assets/tinymce/tiny_mce_jquery.js.gz
Binary file not shown.

0 comments on commit 290bdc8

Please sign in to comment.
Something went wrong with that request. Please try again.