Ajustes de estilo

izamith · Apr 19, 2021 · fd20b98 · fd20b98
1 parent 0d2ceb9
commit fd20b98
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/data/dados.csv b/data/dados.csv
@@ -1,6 +1,5 @@
 estado, perfil
 Rio de Janeiro,@patinanju
-Rio de Janeiro,@discostreetz_
 Rio de Janeiro,@haoleskater
 Rio de Janeiro,@lulu_rolls
 Rio de Janeiro,@daniela.orocha
@@ -11,6 +10,7 @@ Rio de Janeiro,@gabilly54
 Rio de Janeiro,@kika__cordova
 Rio de Janeiro,@4na.m.machado
 Rio de Janeiro,@analumnsr
+Rio de Janeiro,@discostreetz_
 Rio de Janeiro,@sophi_guimaraes
 Rio de Janeiro,@cleo.bicho
 Rio de Janeiro,@lanes0104

diff --git a/index.html b/index.html
@@ -101,16 +101,17 @@
         </div>
 
 
-        <div style ="display: none;" class ="row" id="box-info">
+        <div class ="row" id="box-info">
             <div class="col-12 infoTitulo">
                 <img src="assets/minas.png" style="margin-bottom: 10px;">
-                <p class="caveat"> EM <span id="estadoExib">ESTADO</span></p>  
+                <p class="caveat"> EM <span id="estadoExib">ESTADO</span></p>
+                <p class="infoFooter">Clique sobre o nome para ser redirecionada para o instagram</p>  
             </div>
             <hr class="col-12 divisoria">
             <div class="col-12" id="infoConteudo">
                 <p id="mina1">@HAOLESKATER</p>
             </div>
-            <p class="infoFooter">Clique sobre o nome para ser redirecionada para o instagram</p>
+
         </div>
 
 

diff --git a/scripts/map.js b/scripts/map.js
@@ -83,7 +83,8 @@ map.on('load', function () {
       //desenhar o popup 
       document.getElementById('infoConteudo').innerHTML=''
       document.getElementById('estadoExib').innerHTML=aFeatures[0].properties.lugar.toUpperCase()
-      document.getElementById('box-info').style.display="inline-block"
+      document.getElementById('box-info').style.height= '400px';
+      document.getElementById('box-info').style.opacity= 1;
       var caixa = document.getElementById('infoConteudo')
 
 
@@ -117,21 +118,29 @@ map.on('load', function () {
         map.on('click', function(e) {
           if (e.defaultPrevented === false) {
             console.log('hide taskbar');
-            document.getElementById('box-info').style.display="none"
+            document.getElementById('box-info').style.height= '0';
+            document.getElementById('box-info').style.opacity= 0;
           }
         });
 
 
     //bolinhas sozinhas :(
     map.on('click', 'unclustered-point', function (e) {
+      map.on('mouseenter', 'unclustered-point', function () {
+        map.getCanvas().style.cursor = 'pointer';
+        });
+        map.on('mouseleave', 'unclustered-point', function () {
+        map.getCanvas().style.cursor = '';
+        });
       var perfilEmInfo = e.features[0].properties.mag;
       var onde = e.features[0].properties.lugar;
       console.log(perfilEmInfo,onde)
 
       //desenhar o popup 
       document.getElementById('infoConteudo').innerHTML=''
       document.getElementById('estadoExib').innerHTML=onde.toUpperCase()
-      document.getElementById('box-info').style.display="inline-block"
+      document.getElementById('box-info').style.height= '400px';
+      document.getElementById('box-info').style.opacity= 1;
       var caixa = document.getElementById('infoConteudo')
 
         var link = 'https://www.instagram.com/'+ perfilEmInfo.substr(1)+'/';

diff --git a/style.css b/style.css
@@ -107,6 +107,9 @@ body {
    font-size: 15px;
    text-align: center;
    padding-top: 30px;
+   height: 0;
+   opacity: 0;
+   transition: height 0.5s, opacity 0.5s linear;
 }
 
 .infoTitulo p {
@@ -129,13 +132,19 @@ body {
     color: rgba(200, 189, 164, 0.25);
 }
 
+#infoConteudo {
+    padding-bottom: 50px;
+    min-height: 300px;
+    max-height: 300px;
+    overflow: auto;
+}
+
 #infoConteudo a {
     color: #C14B34;
     font-size: 15px;
     text-align: center;
 }
 
-
 .infoFooter {
     color: rgba(35, 45, 24, 0.47);
     font-size: 13px;