fix map z-indez and links scroll in Information and in Events

Author: AmandaKhol

apps/commons/static/commons/css/base.scss

@@ -26,6 +26,7 @@ body {
 .header-page {
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
   background-color: $header-bg;
+  z-index: 99;
 }
 
 .content-page {
@@ -51,7 +52,7 @@ body {
     max-width: 47rem;
   }
 }
-/
+
 
 .footer-page {
   background-color: $footer-bg;
@@ -95,6 +96,7 @@ body {
   width: 100%;
   z-index: 1;
 
+
   & .notification {
     width: $notification-width;
     margin-left: auto;
@@ -103,6 +105,9 @@ body {
     margin-bottom: 0;
   }
 }
+.message {
+  scroll-margin-top:  $header-height + 1rem;
+}
 
 .container {
   padding-top: 2rem;

apps/commons/static/commons/css/variables.scss

@@ -38,6 +38,8 @@ $content-heading-weight: 500;
 $radius: 0.15rem;
 $navbar-height: 4.3rem;
 
+$section-title-margin-bottom: 2.1rem;
+
 $box-radius: $radius;
 $box-padding: 1.5rem;
 $box-shadow: $default-box-shadow;

apps/events/static/events/css/event/general.scss

@@ -8,7 +8,7 @@
   .section-title {
     color: $blue-text;
     text-align: center;
-    margin-bottom: 2.1rem;
+    margin-bottom: $section-title-margin-bottom;
   }
 
   .section-detail {

apps/events/static/events/css/event/venue.scss

@@ -52,4 +52,11 @@
   .venue-youtube {
     text-align: center;
   }
+  #event-map{
+    z-index: 0;
+  }
+}
+
+.anchor {
+  scroll-margin-top: 2.1rem;
 }

apps/events/templates/events/event.html

@@ -69,7 +69,7 @@ <h1 class="title is-1">{{ event.name }}</h1>
   </section>
 
 
-  <section id="speakers" class="section speakers">
+  <section id="speakers" class="section speakers anchor">
     <div class="container">
       <h1 class="title section-title dyn-anchor-heading">
         Ponentes
@@ -106,7 +106,7 @@ <h2 class="speaker-name">{{ speaker.name }} {{ speaker.surname }}</h2>
   </section>
 
 
-  <section id="schedule" class="section schedule has-background-white">
+  <section id="schedule" class="section schedule has-background-white anchor">
     <div class="container">
       <h1 class="title section-title dyn-anchor-heading">
         <p>
@@ -144,7 +144,7 @@ <h1 class="title section-title dyn-anchor-heading">
   </section>
 
 
-  <section id="venue" class="section venue">
+  <section id="venue" class="section venue anchor">
     <div class="container">
       <h1 class="title section-title dyn-anchor-heading">
         Localización
@@ -155,7 +155,7 @@ <h1 class="title section-title dyn-anchor-heading">
           {% if event.venue %}
             <div class="column is-12-tablet is-6-desktop">
             {% if event.venue.is_online %}
-              <div class="venue-youtube">
+              <div class="venue-youtube map-section">
                 <img src="{{ assets|get_asset_key:'events/img/youtube-logo.png' }}">
               </div>
             {% else %}
@@ -214,7 +214,7 @@ <h1 class="title section-title dyn-anchor-heading">
   </section>
 
 
-  <section id="sponsors" class="section sponsors has-background-white">
+  <section id="sponsors" class="section sponsors has-background-white anchor">
     <div class="container">
       <h1 class="title section-title dyn-anchor-heading">
         Entidades
@@ -247,7 +247,7 @@ <h2 class="category-title subtitle is-5 has-text-centered">{{ category.display_n
     </div>
   </section>
 
-  <section id="past-events" class="section past-events">
+  <section id="past-events" class="section past-events anchor">
     <div class="container">
       <h1 class="title section-title dyn-anchor-heading">
         Eventos pasados