yummy mockups for newest items progress bars
This commit is contained in:
parent
7c6e607612
commit
85e1973f55
2 changed files with 56 additions and 67 deletions
|
|
@ -136,63 +136,52 @@ 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%
|
||||||
|
margin: 0
|
||||||
|
position: relative
|
||||||
|
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
|
img
|
||||||
|
border: 1px solid $module-border-color
|
||||||
|
border-radius: 6px 0 6px 6px
|
||||||
height: 80px
|
height: 80px
|
||||||
width: 80px
|
width: 80px
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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'
|
|
||||||
%ul
|
|
||||||
- @newest_items.each do |item|
|
- @newest_items.each do |item|
|
||||||
= link_to image_tag(item.thumbnail_url), item
|
%li
|
||||||
|
= link_to image_tag(item.thumbnail_url), item, :class => 'image-link'
|
||||||
|
= 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'}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue