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>

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>
Arthur Sturzbecher
1 parent 98988042
Showing 4 changed files with 200 additions and 5 deletions Show diff stats
css/popover.css
footer.html.erb
style.css
theme.js
@@ -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;
+}
@@ -120,4 +120,4 @@
  <!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal -->
    <script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript>&nbsp;<!-- item para fins de acessibilidade --></noscript>
-
+   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
@@ -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;
@@ -250,11 +250,29 @@ $(&#39;#link-buscar&#39;).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();
@@ -263,4 +281,3 @@ $(&#39;#link-buscar&#39;).click(function(e) {
     setEvents();
     });
 })(jQuery);
-
@@ -0,0 +1,178 @@		@@ -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	+}
	@@ -120,4 +120,4 @@		@@ -120,4 +120,4 @@
120		120
121	<!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal -->	121	<!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal -->
122	<script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript> <!-- item para fins de acessibilidade --></noscript>	122	<script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript> <!-- item para fins de acessibilidade --></noscript>
123	-	123	+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	@@ -250,11 +250,29 @@ $('#link-buscar').click(function(e) {		@@ -250,11 +250,29 @@ $('#link-buscar').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	add_top_tooltips();	274	add_top_tooltips();
256	move_article_buttons();	275	move_article_buttons();
257	- add_link_to_article_div();
258	insert_notice_div();	276	insert_notice_div();
259	set_uploaded_files_names();	277	set_uploaded_files_names();
260	set_tooltip_content();	278	set_tooltip_content();
	@@ -263,4 +281,3 @@ $('#link-buscar').click(function(e) {		@@ -263,4 +281,3 @@ $('#link-buscar').click(function(e) {
263	setEvents();	281	setEvents();
264	});	282	});
265	})(jQuery);	283	})(jQuery);
266	-