diff --git a/css/template.css b/css/template.css index 523e61e..587b64f 100644 --- a/css/template.css +++ b/css/template.css @@ -295,7 +295,12 @@ body { white-space: nowrap; } -.product .badge { +#badges{ + position: absolute; + top: 5px; + right: 5px; +} +#badges .badge { background: #E66346; background-image: -ms-linear-gradient(top, #F37054 0%, #E66346 100%); background-image: -moz-linear-gradient(top, #F37054 0%, #E66346 100%); @@ -309,10 +314,9 @@ body { font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: 300; - position: absolute; - top: 5px; - right: 5px; + display: block; } +#badges .badge + .badge{ margin-top: 3px; } .tooltip-inner { max-width: 238px; diff --git a/index.html b/index.html index bbd3f22..e7c2f78 100755 --- a/index.html +++ b/index.html @@ -10,14 +10,14 @@ - + - + @@ -102,15 +102,15 @@ - - + + diff --git a/js/application.js b/js/application.js index d77339c..43985c9 100644 --- a/js/application.js +++ b/js/application.js @@ -26,7 +26,7 @@ $.each( $products, function( key, object ) { } $productList.append( - '' + object.name + '' + object.name + '' + object.tag + '' + '' + object.name + '' + object.name + '' + get_tags(object.tag) + '' ); }); @@ -68,6 +68,21 @@ $( '.remove-btn' ).click( function() { }); +// Lets extract tags from , seperated value +function get_tags( $tags ) +{ + var arr = $tags.split(','), + span = '', + klass = ''; + + $.each( arr, function( key, val ) { + klass = val.replace(' ', ''); + span += '' + val + ''; + }); + + return span ; +} + // Let's calculate iframe height function switcher_iframe_height() { @@ -194,7 +209,7 @@ $( document ).ready( function() { } $( '.product-switcher a' ).html( - $products[ $current_product ].name + ' ' + $products[ $current_product ].tag + '' + $products[ $current_product ].name ); switcher_viewport_buttons(); @@ -227,7 +242,7 @@ $( '.product' ).click( function() { }); $( '.product-switcher a' ).html( - $products[ $current_product ].name + ' ' + $products[ $current_product ].tag + '' + $products[ $current_product ].name ); $productIframe.attr( 'src', $products[ $current_product ].url ); diff --git a/js/products.js b/js/products.js index 0ff1427..bdd3c4e 100644 --- a/js/products.js +++ b/js/products.js @@ -7,7 +7,7 @@ $products = { visia : { name : 'Visia', - tag : 'WP', + tag : 'Joomla 3.x,Joomla 2.5,Responsiv', img : 'http://i.imgur.com/hgp2v0H.jpg', url : 'http://visia.themes.pixelentity.com/', purchase : 'http://themeforest.net/item/visia-responsive-one-page-retina-wordpress-theme/5602067?ref=OriginalEXE',