From 7b948eb95ae640fb57e02887a5de2c5a546ec481 Mon Sep 17 00:00:00 2001 From: ArthurJahn Date: Tue, 1 Sep 2015 11:55:48 -0300 Subject: [PATCH] Creating popover in software highlights block --- css/popover.css | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ footer.html.erb | 2 +- style.css | 2 +- theme.js | 23 ++++++++++++++++++++--- 4 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 css/popover.css diff --git a/css/popover.css b/css/popover.css new file mode 100644 index 0000000..f6f86f8 --- /dev/null +++ b/css/popover.css @@ -0,0 +1,178 @@ +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 1px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: normal; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + white-space: normal; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + + line-break: auto; +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + content: ""; + border-width: 10px; +} +.popover.top > .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, .25); + border-bottom-width: 0; +} +.popover.top > .arrow:after { + bottom: 1px; + margin-left: -10px; + content: " "; + border-top-color: #fff; + border-bottom-width: 0; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, .25); + border-left-width: 0; +} +.popover.right > .arrow:after { + bottom: -10px; + left: 1px; + content: " "; + border-right-color: #fff; + border-left-width: 0; +} +.popover.bottom > .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, .25); +} +.popover.bottom > .arrow:after { + top: 1px; + margin-left: -10px; + content: " "; + border-top-width: 0; + border-bottom-color: #fff; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, .25); +} +.popover.left > .arrow:after { + right: 1px; + bottom: -10px; + content: " "; + border-right-width: 0; + border-left-color: #fff; +} + +.highlights-popover { + width: 300px; + padding: 8px 6px; + background: #172638; + color: #FFFFFF; +} + +.highlights-popover p { + font-size: 14px; +} + +.highlights-popover span { + font-weight: bold; + border-bottom: 2px dotted #FFFFFF; +} + +#content .highlights-popover a, +#content .highlights-popover a:visited, +#content .highlights-popover a:hover { + font-weight: bold; + color: #FFFFFF; +} + +.highlights-popover a:before { + content: ""; + background: + linear-gradient( to bottom, + transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%), + linear-gradient( to right, + transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%); + margin: 5px; + padding: 0 8px; +} + +.highlights-popover .popover-content { + padding: 9px 12px; +} + +.highlights-popover.top > .arrow:after, +.highlights-popover.right > .arrow:after, +.highlights-popover.bottom > .arrow:after, +.highlights-popover.left > .arrow:after { + border-top-color: #172638; +} diff --git a/footer.html.erb b/footer.html.erb index 0798d25..f52ff84 100644 --- a/footer.html.erb +++ b/footer.html.erb @@ -120,4 +120,4 @@ - + diff --git a/style.css b/style.css index 88be576..6c84af7 100644 --- a/style.css +++ b/style.css @@ -19,11 +19,11 @@ @import url(css/article-page.css); @import url(css/software-pages.css); @import url(css/community-pages.css); -@import url(css/use-report.css); @import url(css/news-page.css); @import url(css/search-pages.css); @import url(css/software-catalog-page.css); @import url(css/tooltip.css); +@import url(css/popover.css); @font-face{ font-weight: normal; diff --git a/theme.js b/theme.js index 18c6845..f25ea15 100644 --- a/theme.js +++ b/theme.js @@ -250,11 +250,29 @@ $('#link-buscar').click(function(e) { }); } - $(document).ready(function(){ + function add_popovers() { + var span = $('span[data-toggle="popover"]'); + var place = span.attr("data-placement"); + var elementClass = span.attr("data-class"); + span.popover({ + html:true, + placement: place, + content: function() { + return $(this).next().html(); + } + }) + .data('bs.popover') + .tip() + .addClass(elementClass); + $('a.toggle-popover').on("click",function() { + span.trigger("click"); + }); + } + $(document).ready(function(){ + add_popovers(); add_top_tooltips(); move_article_buttons(); - add_link_to_article_div(); insert_notice_div(); set_uploaded_files_names(); set_tooltip_content(); @@ -267,4 +285,3 @@ $('#link-buscar').click(function(e) { }); })(jQuery); - -- libgit2 0.21.2