Download as
Browse Code »

Commit a83e415ddbe74dfb64bbcb9d0a8589652e4df23f

Authored by Aurélio A. Heckert
1 parent 72889f54
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

Product Catalog and Product Categories Block styles 

ActionItem896
Showing 3 changed files with 123 additions and 153 deletions   Show diff stats
app/views/catalog/index.rhtml
  Diff comments   View file @a83e415
1 1 <% extra_content = [] %>
2 2 <% extra_content_list = [] %>
3 3  
  4 +<div id="product-catalog">
  5 +
4 6 <h1><%= _('Products/Services') %></h1>
5 7  
6 8 <%= breadcrumb(@category) if params[:level] %>
7 9  
8   -<ul id="product-list" class="l-sidebar-left-content">
  10 +<ul id="product-list">
9 11 <% @products.each do |product| %>
10 12 <% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { |content| instance_eval(&content) } %>
11 13 <% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { |content| instance_eval(&content) } %>
... ... @@ -113,10 +115,11 @@
113 115 </ul>
114 116 </li>
115 117 <% end %>
116   -</ul>
  118 +</ul><!-- end id="product-list" -->
117 119  
118 120 <%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %>
119 121  
120 122 <%= add_zoom_to_images %>
121 123  
122 124 <br style="clear:both"/>
  125 +</div><!-- end id="product-catalog" -->
... ...
public/designs/themes/base/style.css
  Diff comments   View file @a83e415
... ... @@ -699,6 +699,110 @@ div#notice {
699 699 filter:alpha(opacity=50);
700 700 }
701 701  
  702 +
  703 +/********************* Product Categories Block **********************/
  704 +
  705 +.product-categories-block .catalog-home-link {
  706 + display: block;
  707 + background: rgba(0,0,0,0.08);
  708 + font-weight: bold;
  709 + text-align: center;
  710 + border-radius: 5px;
  711 + padding: 0px;
  712 + line-height: 200%;
  713 + text-decoration: none;
  714 + color: #000;
  715 +}
  716 +.product-categories-block .catalog-home-link:hover {
  717 + background: rgba(0,0,0,0.6);
  718 + color: #FFF;
  719 + text-decoration: none;
  720 +}
  721 +
  722 +.product-categories-block .catalog-categories-list {
  723 + margin-top: 0.5em;
  724 +}
  725 +
  726 +.product-categories-block ul {
  727 + list-style-type: none;
  728 + margin: 0px;
  729 + padding: 0px;
  730 + border-radius: 5px;
  731 + color: rgba(0,0,0,0.4);
  732 +}
  733 +
  734 +.product-categories-block li {
  735 + margin: 0;
  736 + padding: 0;
  737 + white-space: nowrap;
  738 +}
  739 +
  740 +.product-categories-block li li div {
  741 + padding: 0 0 0 1.5em;
  742 +}
  743 +
  744 +.product-categories-block .catalog-categories-list a {
  745 + text-decoration: none;
  746 + font-size: 120%;
  747 + line-height: 150%;
  748 + color: #333;
  749 + overflow: hidden;
  750 + text-overflow: ellipsis;
  751 + display: inline-block;
  752 + padding: 0 0.3em 0 0.5em;
  753 + border-radius: 5px;
  754 + max-width: 80%;
  755 + vertical-align: middle;
  756 +}
  757 +.product-categories-block .catalog-categories-list ul a {
  758 + text-decoration: none;
  759 + font-size: 110%;
  760 + line-height: 163.6%;
  761 +}
  762 +.product-categories-block .catalog-categories-list div:hover a:hover {
  763 + background: rgba(0,0,0,0.6);
  764 + color: #FFF;
  765 + text-decoration: none;
  766 +}
  767 +
  768 +.product-categories-block .catalog-categories-list div:hover a,
  769 +.product-categories-block .catalog-categories-list div:hover .count {
  770 + background: rgba(0,0,0,0.08);
  771 +}
  772 +
  773 +.block.product-categories-block .catalog-categories-list a {
  774 + font-weight: bold;
  775 +}
  776 +
  777 +.block.product-categories-block .catalog-categories-list ul a {
  778 + font-weight: normal;
  779 +}
  780 +
  781 +.product-categories-block a:hover {
  782 + text-decoration: underline;
  783 +}
  784 +
  785 +.product-categories-block .count {
  786 + display: inline-block;
  787 + vertical-align: middle;
  788 + margin-left: -0.2em;
  789 + padding: 0 0.2em;
  790 + line-height: 180%;
  791 + border-radius: 5px;
  792 +}
  793 +
  794 +.block.product-categories-block .count:before {
  795 + content: "(";
  796 +}
  797 +.block.product-categories-block .count:after {
  798 + content: ")";
  799 +}
  800 +
  801 +.catalog-categories-notice {
  802 + color: rgba(0,0,0,0.3);
  803 + padding: 0.5em 1em;
  804 +}
  805 +
702 806 /********************* Environment Statistics ************************/
703 807  
704 808 #content .environment-statistics-block ul {
... ...
public/stylesheets/application.css
  Diff comments   View file @a83e415
... ... @@ -2509,7 +2509,13 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2509 2509 /* ==> @import url('products.css'); <== */
2510 2510 /* * * Products catalog * * * * * * * * * * * * */
2511 2511  
  2512 +#product-catalog {
  2513 + text-align: center;
  2514 +}
  2515 +
2512 2516 #product-list {
  2517 + display: inline-block;
  2518 + text-align: left;
2513 2519 line-height: 20px;
2514 2520 margin: 0px;
2515 2521 padding: 0px;
... ... @@ -2521,11 +2527,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2521 2527 list-style: none;
2522 2528 }
2523 2529 #product-list li.product {
  2530 + display: inline-block;
2524 2531 width: 200px;
2525 2532 min-height: 280px;
2526   - padding: 10px 30px 10px 0;
  2533 + padding: 10px 15px;
2527 2534 margin-bottom: 10px;
2528   - display: inline-block;
2529 2535 vertical-align: top;
2530 2536 }
2531 2537 #product-list .expand-box:hover {
... ... @@ -2735,132 +2741,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2735 2741 margin-top: -15px;
2736 2742 }
2737 2743  
2738   -.l-sidebar-right-bar ul {
2739   - list-style-type: none;
2740   - margin-left: 0;
2741   - padding: 1em 1em 0.5em 1em;
2742   -}
2743   -
2744   -.l-sidebar-right-bar ul ul {
2745   - padding-left: 1em;
2746   - margin-top: 3px;
2747   -}
2748   -
2749   -.l-sidebar-right-bar li {
2750   - margin: 3px 0px;
2751   - padding: 0px;
2752   -}
2753   -
2754   -.l-sidebar-right-bar a {
2755   - text-decoration: none;
2756   - font-size: 120%;
2757   -}
2758   -
2759   -.l-sidebar-right-bar a:hover {
2760   - text-decoration: underline;
2761   -}
2762   -
2763   -/* * * Product Categories Block * * * * * * */
2764   -
2765   -.product-categories-block .catalog-home-link {
2766   - display: block;
2767   - background: rgba(0,0,0,0.08);
2768   - font-weight: bold;
2769   - text-align: center;
2770   - border-radius: 5px;
2771   - padding: 0px;
2772   - line-height: 200%;
2773   - text-decoration: none;
2774   - color: #000;
2775   -}
2776   -.product-categories-block .catalog-home-link:hover {
2777   - background: rgba(0,0,0,0.6);
2778   - color: #FFF;
2779   - text-decoration: none;
2780   -}
2781   -
2782   -.product-categories-block .catalog-categories-list {
2783   - margin-top: 0.5em;
2784   -}
2785   -
2786   -.product-categories-block ul {
2787   - list-style-type: none;
2788   - margin: 0px;
2789   - padding: 0px;
2790   - border-radius: 5px;
2791   - color: rgba(0,0,0,0.4);
2792   -}
2793   -
2794   -.product-categories-block li {
2795   - margin: 0;
2796   - padding: 0;
2797   - white-space: nowrap;
2798   -}
2799   -
2800   -.product-categories-block li li div {
2801   - padding: 0 0 0 1.5em;
2802   -}
2803   -
2804   -.product-categories-block .catalog-categories-list a {
2805   - text-decoration: none;
2806   - font-size: 120%;
2807   - line-height: 150%;
2808   - color: #333;
2809   - overflow: hidden;
2810   - text-overflow: ellipsis;
2811   - display: inline-block;
2812   - padding: 0 0.3em 0 0.5em;
2813   - border-radius: 5px;
2814   - max-width: 80%;
2815   - vertical-align: middle;
2816   -}
2817   -.product-categories-block .catalog-categories-list ul a {
2818   - text-decoration: none;
2819   - font-size: 110%;
2820   - line-height: 163.6%;
2821   -}
2822   -.product-categories-block .catalog-categories-list div:hover a:hover {
2823   - background: rgba(0,0,0,0.6);
2824   - color: #FFF;
2825   - text-decoration: none;
2826   -}
2827   -
2828   -.product-categories-block .catalog-categories-list div:hover a,
2829   -.product-categories-block .catalog-categories-list div:hover .count {
2830   - background: rgba(0,0,0,0.08);
2831   -}
2832   -
2833   -.block.product-categories-block .catalog-categories-list a {
2834   - font-weight: bold;
2835   -}
2836   -
2837   -.block.product-categories-block .catalog-categories-list ul a {
2838   - font-weight: normal;
2839   -}
2840   -
2841   -.product-categories-block a:hover {
2842   - text-decoration: underline;
2843   -}
2844   -
2845   -.product-categories-block .count {
2846   - display: inline-block;
2847   - vertical-align: middle;
2848   - margin-left: -0.2em;
2849   - padding: 0 0.2em;
2850   - line-height: 180%;
2851   - border-radius: 5px;
2852   -}
2853   -
2854   -.block.product-categories-block .count:before {
2855   - content: "(";
2856   -}
2857   -.block.product-categories-block .count:after {
2858   - content: ")";
2859   -}
2860   -
2861   -.catalog-categories-notice {
2862   - color: rgba(0,0,0,0.3);
2863   - padding: 0.5em 1em;
  2744 +#product-list .highlighted img.star {
  2745 + position: absolute;
  2746 + top: 2px;
  2747 + right: 2px;
  2748 + z-index: 1;
2864 2749 }
2865 2750  
2866 2751 /* * * Show Product * * * * * * * * * * * * */
... ... @@ -6290,28 +6175,12 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6290 6175 line-height: 1.5;
6291 6176 }
6292 6177  
6293   -/* Sidebar Layout */
6294   -
6295   -.l-sidebar-left-content {
6296   - float: right;
6297   - width: 78%;
6298   -}
6299   -
6300   -.l-sidebar-right-bar {
6301   - float: right;
6302   - width: 20%;
6303   -}
6304   -
6305   -.l-sidebar-right-content {
6306   - float: left;
6307   - width: 78%;
6308   -}
6309   -
6310 6178 /* Breadcrumb */
6311 6179  
6312 6180 #breadcrumb {
6313 6181 font-size: 16px;
6314 6182 margin: 15px 0;
  6183 + text-align: left;
6315 6184 }
6316 6185  
6317 6186 .controller-profile_editor #profile-data {
... ... @@ -6363,9 +6232,3 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6363 6232 text-align: center;
6364 6233 }
6365 6234  
6366   -#product-list .highlighted img.star {
6367   - position: absolute;
6368   - top: 2px;
6369   - right: 2px;
6370   - z-index: 1;
6371   -}
... ...