yummy mockups for newest items progress bars

This commit is contained in:
Emi Matchu 2013-12-13 20:54:02 -06:00
parent 7c6e607612
commit 85e1973f55
2 changed files with 56 additions and 67 deletions

View file

@ -136,65 +136,54 @@ body.outfits-new
p p
min-height: 4.5em min-height: 4.5em
$container-width: 800px
$blog-preview-outer-width: $container-width * (2 / 3)
$newest-items-outer-width: $container-width * (1 / 3)
$whats-new-height: 300px
$whats-new-gutter: 12px
#whats-new #whats-new
+clearfix
height: 300px
margin-bottom: 1em margin-bottom: 1em
$blog-preview-border-width: 1px
$blog-preview-padding: 12px
$blog-preview-inner-width: $blog-preview-outer-width - (2 * $blog-preview-border-width) - (2 * $blog-preview-padding) - $whats-new-gutter
$blog-preview-inner-height: $whats-new-height - (2 * $blog-preview-border-width) - (2 * $blog-preview-padding)
#blog-preview
background: $module-bg-color
border: $blog-preview-border-width solid $module-border-color
display: none
float: left
height: $blog-preview-inner-height
margin-right: $whats-new-gutter
padding: $blog-preview-padding
width: $blog-preview-inner-width
> h2
font-size: 150%
> div, > a
font-size: 85%
> div
height: 200px
margin-bottom: .75em
overflow: auto
position: relative
ul, ol
margin-bottom: 1em
padding: 0 1.5em
#blog-preview-linkback
float: left
#blog-preview-comments
float: right
font-size: 85%
margin-left: 1em
#newest-items #newest-items
float: right list-style: none
text-align: center
width: $newest-items-outer-width li
+clearfix
a.header
background: $module-bg-color
border: 1px solid $module-border-color
border-left: 0
border-radius: 0 6px 6px 0
color: white
display: block
margin-left: 81px
padding: .5em .75em
position: relative
text-decoration: none
text-shadow: $text-color 1px 1px 2px
a.header:hover, .image-link:hover + a.header
text-decoration: underline
h2 h2
font-size: 150% font-family: $main-font
font-size: 120%
img margin: 0
height: 80px position: relative
width: 80px z-index: 2
.meter
background: desaturate(lighten($module-border-color, 25%), 60%)
display: block
height: 100%
left: 0
position: absolute
top: 0
z-index: 1
.image-link
float: left
img
border: 1px solid $module-border-color
border-radius: 6px 0 6px 6px
height: 80px
width: 80px
#latest-contribution #latest-contribution
+subtle-banner +subtle-banner

View file

@ -60,7 +60,7 @@
%div %div
%h4= t '.modeling_hub.tagline' %h4= t '.modeling_hub.tagline'
%p= t '.modeling_hub.description' %p= t '.modeling_hub.description'
= form_tag remote_load_pet_path, method: 'GET' do = form_tag remote_load_pet_path, method: 'POST' do
= hidden_field_tag 'redirect', "#{root_url}\#{q}" = hidden_field_tag 'redirect', "#{root_url}\#{q}"
= pet_name_tag :placeholder => t('.modeling_hub.load_pet.placeholder') = pet_name_tag :placeholder => t('.modeling_hub.load_pet.placeholder')
= submit_tag t('.modeling_hub.load_pet.submit') = submit_tag t('.modeling_hub.load_pet.submit')
@ -73,19 +73,19 @@
#whats-new #whats-new
- localized_cache :action_suffix => 'blog_preview' do -# TODO: remove newest_items.header i18n key?
#blog-preview
%h2
%div
%a#blog-preview-linkback{:href => 'http://blog.openneo.net/'}
= t '.blog.link'
- localized_cache 'outfits#new newest_items' do - localized_cache 'outfits#new newest_items' do
#newest-items %ul#newest-items
%h2= t '.newest_items.header' - @newest_items.each do |item|
%ul %li
- @newest_items.each do |item| = link_to image_tag(item.thumbnail_url), item, :class => 'image-link'
= link_to image_tag(item.thumbnail_url), item = link_to item, :class => 'header' do
- lolremove = rand(54)
-# TODO: i18n
%h2= item.name
-#: we need #{lolremove} more models
%span.meter{style: "width: #{100-lolremove/0.54}%"}
- localized_cache :action_suffix => 'templates' do - localized_cache :action_suffix => 'templates' do
%script#pet-query-notice-template{:type => 'text/x-jquery-tmpl'} %script#pet-query-notice-template{:type => 'text/x-jquery-tmpl'}