Commit 90ad6b04a9fc7986c045064456b7521c2a35a31e

Authored by Arthur Sturzbecher
1 parent f5159b93
Exists in master and in 79 other branches add_sisp_to_chef, add_super_archives_plugin, api_for_colab, automates_core_packing, backup_not_prod, changes_in_buttons_on_content_panel, colab_automated_login, colab_spb_plugin_recipe, colab_widgets_settings, design_validation, dev_env_minimal, disable_email_dev, fix_breadcrumbs_position, fix_categories_software_link, fix_edit_institution, fix_edit_software_with_another_license, fix_get_license_info, fix_gitlab_assets_permission, fix_list_style_inside_article, fix_list_style_on_folder_elements, fix_members_pagination, fix_merge_request_url, fix_models_translations, fix_no_license, fix_software_api, fix_software_block_migration, fix_software_communities_translations, fix_software_communities_unit_test, fix_style_create_institution_admin_panel, fix_superarchives_imports, fix_sym_links_noosfero, focus_search_field_theme, gov-user-refactoring, gov-user-refactoring-rails4, header_fix, institution_modal_on_rating, kalibro-conf-refactoring, kalibro-processor-package, lxc_settings, margin_fix, mezuro_cookbook, prezento, refactor_download_block, refactor_software_communities, refactor_software_for_sisp, register_page, release-process, release-process-v2, remove-unused-images, remove_broken_theme, remove_secondary_email_from_user, remove_sisp_buttons, removing_super_archives_email, review_message, scope2method, signals_user_noosfero, sisp_catalog_header, sisp_colab_config, sisp_dev, sisp_dev_master, sisp_simple_version, software_as_organization, software_catalog_style_fix, software_communities_html_refactor, software_infos_api, spb_minimal_env, spb_to_rails4, spec_refactor, stable-4.1, stable-4.2, stable-4.x, temp_soft_comm_refactoring, theme_header, theme_javascript_refactory, thread_dropdown, thread_page, update_search_by_categories, update_software_api, update_softwares_boxes

Adding popover to home page

Showing 2 changed files with 58 additions and 29 deletions   Show diff stats
css/home-page.css
... ... @@ -148,7 +148,7 @@
148 148 display:none;
149 149 }
150 150  
151   -.action-home-index #content .software-block {
  151 +.action-home-index #content .software-block {
152 152 width: 145px;
153 153 height: 218px;
154 154 margin: 0px 18px 14px 0px;
... ... @@ -236,7 +236,7 @@
236 236 /*** News block - display content block **/
237 237  
238 238 .action-home-index #content .display-content-block .block-title {
239   - margin: 0px;
  239 + margin: 0px;
240 240 border-top: 4px solid #643C67;
241 241 background: #eee;
242 242 color: #643C67;
... ... @@ -302,8 +302,8 @@
302 302 font: 15px/1.3em arial;
303 303 }
304 304  
305   -.action-home-index #content .display-content-block .lead a:visited,
306   -.action-home-index #content .lead a:visited,
  305 +.action-home-index #content .display-content-block .lead a:visited,
  306 +.action-home-index #content .lead a:visited,
307 307 .action-home-index #content .lead dl.portlet a:visited {
308 308 color: #172738;
309 309 }
... ... @@ -371,7 +371,7 @@
371 371  
372 372 .action-home-index #content .highlights-border {
373 373 border: 1px solid #c0c1c1;
374   - border-radius: 8px 8px 8px 8px;
  374 + border-radius: 8px;
375 375 width: auto;
376 376 height: 248px;
377 377 max-height: 250px;
... ... @@ -384,15 +384,15 @@
384 384 }
385 385  
386 386 .action-home-index #content .highlights-container {
387   - border-radius: 8px 8px 8px 8px;
  387 + border-radius: 8px;
388 388 border-width: 0px 0px 1px 0px;
389 389 border-bottom: none;
390   - padding: 0px 0px 0px 0px;
  390 + padding: 0;
391 391 width: 100% !important;
392 392 max-height: 230px;
393 393 background: transparent;
394 394 position: relative;
395   - top: 0px;
  395 + top: 0;
396 396 }
397 397  
398 398 .action-home-index #content .highlights-image-link {
... ... @@ -422,11 +422,9 @@
422 422 }
423 423  
424 424 .action-home-index #content .highlights-block-pager {
425   - border: 0;
426   - padding: 0px 0px 0px 0px;
427   - width: 232px;
428   - float: left;
429   - position: static;
  425 + float: none;
  426 + display: block;
  427 + text-align: center;
430 428 }
431 429  
432 430 .action-home-index #content .highlights-block-pager a {
... ... @@ -448,6 +446,24 @@
448 446 color: transparent;
449 447 }
450 448  
  449 +/*** software highlights block ***/
  450 +
  451 +.action-home-index #content a.toggle-popover,
  452 +.action-home-index #content a.toggle-popover:hover {
  453 + margin: 0 0 0 55px;
  454 + color: #3867b7;
  455 + cursor: pointer;
  456 +}
  457 +
  458 +.action-home-index #content span.popover-span {
  459 + padding: 1px 6px;
  460 + border-radius: 50%;
  461 + background-color: #3867b7;
  462 + color: #ffffff;
  463 + font-weight: bold;
  464 + cursor: pointer;
  465 +}
  466 +
451 467 /*** mais software block **/
452 468 .action-home-index #content #mais-software-block {
453 469 margin: 11px 0px;
... ...
css/popover.css
... ... @@ -33,7 +33,7 @@
33 33 line-break: auto;
34 34 }
35 35 .popover.top {
36   - margin-top: -10px;
  36 + margin-top: -12px;
37 37 }
38 38 .popover.right {
39 39 margin-left: 10px;
... ... @@ -132,42 +132,55 @@
132 132 border-left-color: #fff;
133 133 }
134 134  
  135 +/*** popover in software highlights block ***/
  136 +
135 137 .highlights-popover {
136   - width: 300px;
137   - padding: 8px 6px;
  138 + max-width: 280px;
  139 + margin: 0 0 0 -75px;
138 140 background: #172638;
139 141 color: #FFFFFF;
140 142 }
141 143  
  144 +.highlights-popover .popover-content {
  145 + padding: 0;
  146 +}
  147 +
142 148 .highlights-popover p {
  149 + padding: 13px 13px 15px;
  150 + margin: 0px;
143 151 font-size: 14px;
  152 + line-height: 20px;
144 153 }
145   -
  154 +
146 155 .highlights-popover span {
147 156 font-weight: bold;
148   - border-bottom: 2px dotted #FFFFFF;
  157 + border-bottom: 1px dotted #FFFFFF;
149 158 }
150 159  
151 160 #content .highlights-popover a,
152 161 #content .highlights-popover a:visited,
153   -#content .highlights-popover a:hover {
  162 +#content .highlights-popover a:hover,
  163 +#content .highlights-popover a:link {
154 164 font-weight: bold;
155 165 color: #FFFFFF;
  166 + display: block;
  167 + padding: 8px 15px;
  168 + border-top: 1px dotted rgba(255,255,255,0.1);
156 169 }
157 170  
158 171 .highlights-popover a:before {
159   - content: "";
160   - background:
161   - linear-gradient( to bottom,
162   - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%),
163   - linear-gradient( to right,
164   - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%);
165   - margin: 5px;
166   - padding: 0 8px;
  172 + font-family: "FontAwesome";
  173 + content: "\f067";
  174 + vertical-align: middle;
  175 + color: #ff0066;
  176 + padding: 0 5px 0 0;
167 177 }
168 178  
169   -.highlights-popover .popover-content {
170   - padding: 9px 12px;
  179 +.highlights-popover.top > .arrow,
  180 +.highlights-popover.right > .arrow,
  181 +.highlights-popover.bottom > .arrow,
  182 +.highlights-popover.left > .arrow {
  183 + margin-left: 64px;
171 184 }
172 185  
173 186 .highlights-popover.top > .arrow:after,
... ...