1
Download as
Browse Code »

Commit 7b948eb95ae640fb57e02887a5de2c5a546ec481

Authored by Arthur Sturzbecher
1 parent b3c92cdd

Creating popover in software highlights block 

adding bootstrap.min.js and bootstrap popover
style to theme

Signed-off-by: ArthurJahn <stutrzbecher@gmail.com>
Signed-off-by: Álvaro Fernando <alvarofernandoms@gmail.com>
Showing 4 changed files with 200 additions and 5 deletions   Show diff stats
css/popover.css 0 → 100644
  Diff comments   View file @7b948eb
... ... @@ -0,0 +1,178 @@
  1 +.popover {
  2 + position: absolute;
  3 + top: 0;
  4 + left: 0;
  5 + z-index: 1060;
  6 + display: none;
  7 + max-width: 276px;
  8 + padding: 1px;
  9 + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  10 + font-size: 14px;
  11 + font-style: normal;
  12 + font-weight: normal;
  13 + line-height: 1.42857143;
  14 + text-align: left;
  15 + text-align: start;
  16 + text-decoration: none;
  17 + text-shadow: none;
  18 + text-transform: none;
  19 + letter-spacing: normal;
  20 + word-break: normal;
  21 + word-spacing: normal;
  22 + word-wrap: normal;
  23 + white-space: normal;
  24 + background-color: #fff;
  25 + -webkit-background-clip: padding-box;
  26 + background-clip: padding-box;
  27 + border: 1px solid #ccc;
  28 + border: 1px solid rgba(0, 0, 0, .2);
  29 + border-radius: 6px;
  30 + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  31 + box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  32 +
  33 + line-break: auto;
  34 +}
  35 +.popover.top {
  36 + margin-top: -10px;
  37 +}
  38 +.popover.right {
  39 + margin-left: 10px;
  40 +}
  41 +.popover.bottom {
  42 + margin-top: 10px;
  43 +}
  44 +.popover.left {
  45 + margin-left: -10px;
  46 +}
  47 +.popover-title {
  48 + padding: 8px 14px;
  49 + margin: 0;
  50 + font-size: 14px;
  51 + background-color: #f7f7f7;
  52 + border-bottom: 1px solid #ebebeb;
  53 + border-radius: 5px 5px 0 0;
  54 +}
  55 +.popover-content {
  56 + padding: 9px 14px;
  57 +}
  58 +.popover > .arrow,
  59 +.popover > .arrow:after {
  60 + position: absolute;
  61 + display: block;
  62 + width: 0;
  63 + height: 0;
  64 + border-color: transparent;
  65 + border-style: solid;
  66 +}
  67 +.popover > .arrow {
  68 + border-width: 11px;
  69 +}
  70 +.popover > .arrow:after {
  71 + content: "";
  72 + border-width: 10px;
  73 +}
  74 +.popover.top > .arrow {
  75 + bottom: -11px;
  76 + left: 50%;
  77 + margin-left: -11px;
  78 + border-top-color: #999;
  79 + border-top-color: rgba(0, 0, 0, .25);
  80 + border-bottom-width: 0;
  81 +}
  82 +.popover.top > .arrow:after {
  83 + bottom: 1px;
  84 + margin-left: -10px;
  85 + content: " ";
  86 + border-top-color: #fff;
  87 + border-bottom-width: 0;
  88 +}
  89 +.popover.right > .arrow {
  90 + top: 50%;
  91 + left: -11px;
  92 + margin-top: -11px;
  93 + border-right-color: #999;
  94 + border-right-color: rgba(0, 0, 0, .25);
  95 + border-left-width: 0;
  96 +}
  97 +.popover.right > .arrow:after {
  98 + bottom: -10px;
  99 + left: 1px;
  100 + content: " ";
  101 + border-right-color: #fff;
  102 + border-left-width: 0;
  103 +}
  104 +.popover.bottom > .arrow {
  105 + top: -11px;
  106 + left: 50%;
  107 + margin-left: -11px;
  108 + border-top-width: 0;
  109 + border-bottom-color: #999;
  110 + border-bottom-color: rgba(0, 0, 0, .25);
  111 +}
  112 +.popover.bottom > .arrow:after {
  113 + top: 1px;
  114 + margin-left: -10px;
  115 + content: " ";
  116 + border-top-width: 0;
  117 + border-bottom-color: #fff;
  118 +}
  119 +.popover.left > .arrow {
  120 + top: 50%;
  121 + right: -11px;
  122 + margin-top: -11px;
  123 + border-right-width: 0;
  124 + border-left-color: #999;
  125 + border-left-color: rgba(0, 0, 0, .25);
  126 +}
  127 +.popover.left > .arrow:after {
  128 + right: 1px;
  129 + bottom: -10px;
  130 + content: " ";
  131 + border-right-width: 0;
  132 + border-left-color: #fff;
  133 +}
  134 +
  135 +.highlights-popover {
  136 + width: 300px;
  137 + padding: 8px 6px;
  138 + background: #172638;
  139 + color: #FFFFFF;
  140 +}
  141 +
  142 +.highlights-popover p {
  143 + font-size: 14px;
  144 +}
  145 +
  146 +.highlights-popover span {
  147 + font-weight: bold;
  148 + border-bottom: 2px dotted #FFFFFF;
  149 +}
  150 +
  151 +#content .highlights-popover a,
  152 +#content .highlights-popover a:visited,
  153 +#content .highlights-popover a:hover {
  154 + font-weight: bold;
  155 + color: #FFFFFF;
  156 +}
  157 +
  158 +.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;
  167 +}
  168 +
  169 +.highlights-popover .popover-content {
  170 + padding: 9px 12px;
  171 +}
  172 +
  173 +.highlights-popover.top > .arrow:after,
  174 +.highlights-popover.right > .arrow:after,
  175 +.highlights-popover.bottom > .arrow:after,
  176 +.highlights-popover.left > .arrow:after {
  177 + border-top-color: #172638;
  178 +}
... ...
footer.html.erb
  Diff comments   View file @7b948eb
... ... @@ -120,4 +120,4 @@
120 120  
121 121 <!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal -->
122 122 <script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript>&nbsp;<!-- item para fins de acessibilidade --></noscript>
123   -
  123 + <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
... ...
style.css
  Diff comments   View file @7b948eb
... ... @@ -19,11 +19,11 @@
19 19 @import url(css/article-page.css);
20 20 @import url(css/software-pages.css);
21 21 @import url(css/community-pages.css);
22   -@import url(css/use-report.css);
23 22 @import url(css/news-page.css);
24 23 @import url(css/search-pages.css);
25 24 @import url(css/software-catalog-page.css);
26 25 @import url(css/tooltip.css);
  26 +@import url(css/popover.css);
27 27  
28 28 @font-face{
29 29 font-weight: normal;
... ...
theme.js
  Diff comments   View file @7b948eb
... ... @@ -250,11 +250,29 @@ $(&#39;#link-buscar&#39;).click(function(e) {
250 250 });
251 251 }
252 252  
253   - $(document).ready(function(){
  253 + function add_popovers() {
  254 + var span = $('span[data-toggle="popover"]');
  255 + var place = span.attr("data-placement");
  256 + var elementClass = span.attr("data-class");
  257 + span.popover({
  258 + html:true,
  259 + placement: place,
  260 + content: function() {
  261 + return $(this).next().html();
  262 + }
  263 + })
  264 + .data('bs.popover')
  265 + .tip()
  266 + .addClass(elementClass);
  267 + $('a.toggle-popover').on("click",function() {
  268 + span.trigger("click");
  269 + });
  270 + }
254 271  
  272 + $(document).ready(function(){
  273 + add_popovers();
255 274 add_top_tooltips();
256 275 move_article_buttons();
257   - add_link_to_article_div();
258 276 insert_notice_div();
259 277 set_uploaded_files_names();
260 278 set_tooltip_content();
... ... @@ -267,4 +285,3 @@ $(&#39;#link-buscar&#39;).click(function(e) {
267 285  
268 286 });
269 287 })(jQuery);
270   -
... ...