Proposta pop-up de informações no portal IAHX

bireme · Aug 30, 2022 · 06c5f96 · 06c5f96
1 parent 16f77f3
commit 06c5f96
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 4 deletions.
diff --git a/iahx/colunaFilter.php b/iahx/colunaFilter.php
@@ -113,19 +113,19 @@
 		<div class="box2 collapse show" id="bases">
 			<div class="boxCheck">
 				<div class="inputCheck1"><input type="checkbox" id="check6"></div>
-				<label class="labelCheck1" for="check6">MEDILNE	(26390999)</label>
+				<label class="labelCheck1" for="check6">MEDILNE	(26390999)</label></label><i class="fa fa-info-circle icon-info"></i>
 			</div>
 			<div class="boxCheck">
 				<div class="inputCheck1"><input type="checkbox" id="check7"></div>
-				<label class="labelCheck1" for="check7">LILACS (849813)</label>
+				<label class="labelCheck1" for="check7">LILACS (849813)</label></label><i class="fa fa-info-circle icon-info"></i>
 			</div>
 			<div class="boxCheck">
 				<div class="inputCheck1"><input type="checkbox" id="check8"></div>
-				<label class="labelCheck1" for="check8">IBECS (171950)</label>
+				<label class="labelCheck1" for="check8">IBECS (171950)</label></label><i class="fa fa-info-circle icon-info"></i>
 			</div>
 			<div class="boxCheck">
 				<div class="inputCheck1"><input type="checkbox" id="check9"></div>
-				<label class="labelCheck1" for="check9">Lorem ipsum dolor.</label>
+				<label class="labelCheck1" for="check9">Lorem ipsum dolor.</label></label><i class="fa fa-info-circle icon-info"></i>
 			</div>
 		</div>
 	</div>

diff --git a/iahx/index.php b/iahx/index.php
@@ -20,6 +20,7 @@
 	<?php include 'topAcessibility.php'?>
 	<?php include 'sidebar.php'?>
 	<?php include 'header.php' ?>
+	<?php include 'info.php' ?>
 	<section class="">
 		<div class="container">
 			<div class="row">

diff --git a/iahx/info.php b/iahx/info.php
@@ -0,0 +1,37 @@
+<div id="info-box" class="alert info-box">
+	<button type="button" class="close" id="close-info">
+		<span aria-hidden="true">&times;</span>
+	</button>
+	<b>Covid-19 Database Case reports</b>
+	<hr>
+	<b>Sobre a busca</b>
+	
+	<b>Responsible</b><br>
+	BIREME/PAHO/WHO <br>
+
+	<b>Descrição</b><br>
+	Filter for Type of Study applied in the database WHO-COVID-19 <br>
+
+	<b>Assuntos principais</b><br>
+	Case Reports <br>
+
+	<b>Resultado da busca</b> <br>
+	Case report
+	<hr>
+	<b>Estratégia de busca para iAHx</b><br><br>
+
+	
+	<form>
+		<div class="form-row align-items-center">
+			<div class="col-10">
+				<input class="form-control mr-sm-2" disabled type="search" value="pt:'case reports'">
+			</div>
+			<div class="col-2">
+				<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
+			</div>
+		</div>
+	</form>
+</div>
+<div id="info-closed">
+	
+</div>
diff --git a/iahx/js/main.js b/iahx/js/main.js
@@ -111,4 +111,17 @@ $('.bc3').click(function(){
 $('.disclaimerTransparente').click(function(){
   $(this).parent().find(".fa-angle-down").toggleClass("fa-angle-up");
   $('#disclaimer').toggleClass("disclaimer");
+})
+
+$('.icon-info').click(function(){
+    $('#info-box').toggleClass('icon-info-active');
+    $('#info-closed').toggle();
+})
+$('#close-info').click(function(){
+    $('#info-box').toggleClass('icon-info-active');
+    $('#info-closed').toggle();
+})
+$('#info-closed').click(function(){
+    $('#info-box').toggleClass('icon-info-active');
+    $('#info-closed').toggle();
 })
diff --git a/iahx/style.css b/iahx/style.css
@@ -386,6 +386,42 @@ body{background: #f5f5f5;font-family: 'Source Sans Pro', sans-serif; font-weight
 #affiliations{
 	cursor:pointer;
 }
+.icon-info{
+	float:right;
+	padding: 10px 0 0 10px;
+	color: #999;
+	cursor: pointer;
+}
+.icon-info:hover{
+	color: #30348d;
+	z-index: ;
+}
+.info-box{
+	padding: 30px;
+	background: #fff;
+	position: fixed;
+	top: 0;
+	left: -600px;
+	width: 600px;
+	height: 100%;
+	z-index: 9999;
+	transition: left 0.1s ease;
+}
+.icon-info-active{
+	left: 0px;
+	transition: left 0.1s ease;
+}
+#info-closed{
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.7);
+	cursor: pointer;
+	z-index: 9998;
+	display: none;
+}
 /******************** Breakpoints *******************/
 @media (max-width: 1200px){
 	#resumo, #tabResumo{width: 90%;}