Merge pull request #1184 from ec-europa/ISAICP-4477

ISAICP-4477: Change text and logo position in featured header

web/themes/joinup/prototype/sass/_drupal-hacks.sass

@@ -274,7 +274,7 @@ form .description
   position: absolute
   top: 10px
   right: 10px
-  z-index: 4
+  +z-index(dropdown)
   a
     text-decoration: none
   .icon

web/themes/joinup/prototype/sass/components/_featured.sass

@@ -24,13 +24,10 @@
   max-width: 1200px
   margin: 0 auto
   text-align: center
+  padding: 20px 0
   +z-index(highlight+1)
   a
     text-decoration: none
-  +breakpoint(sm-mobile, mobile)
-    padding: 40px 0 80px 0
-  +breakpoint(tablet)
-    padding: 20px 0
   @media print
     padding: 0
     padding-bottom: 20px
@@ -68,24 +65,31 @@
 
 .featured__text
   position: relative
-  margin: 0 0 30px 0
-  padding: 25px 20px
+  margin: 0 0 20px 0
+  padding: 0
   text-align: center
   letter-spacing: 2px
   color: #fff
+  font-size: $font-size-h2
   +breakpoint(mobile)
-    margin-bottom: 20px
-  &:after
-    position: absolute
-    right: 0
-    bottom: 0
-    left: 0
-    display: block
-    width: 50px
-    height: 3px
-    margin: 0 auto
-    content: ''
-    background-color: $color-blue-lighter
+    font-size: $font-size-h1
+    margin: 0
+    text-align: left
+
+.featured__logo
+  margin: 0 0 10px 0
+  +breakpoint(mobile)
+    margin: 0 20px 0 0
+
+.featured__title-wrapper
+  margin: 0
+  padding: 0
+  +breakpoint(mobile)
+    margin: 0 0 20px 0
+    padding: 0 20px
+    display: flex
+    align-items: center
+    justify-content: center
 
 .featured__text-small
   font-size: $font-size-xsmall

web/themes/joinup/prototype/sass/components/_sidebar-menu.sass

@@ -67,9 +67,9 @@
 // --------------------------------------------------
 .sidebar-menu__button--mobile
   position: absolute
-  top: -115px
+  top: -45px
   .icon
-    color: #fff
+    color: $color-base
   +breakpoint(desktop)
     display: none
 

web/themes/joinup/templates/rdf_entity/rdf-entity--collection--group-header.html.twig

@@ -8,7 +8,7 @@
   <div class="featured__overlay"></div>
   <div class="featured__inner-wrapper">
     {# @todo This is temporary, once all fields are available, it will be replaced. #}
-    <a href="{{ path('entity.rdf_entity.canonical',{'rdf_entity': rdf_entity.id()}) }}">
+    <a class="featured__title-wrapper" href="{{ path('entity.rdf_entity.canonical',{'rdf_entity': rdf_entity.id()}) }}">
       <div class="featured__logo">{{ content.field_ar_logo }}</div>
       <h1 class="featured__text">{{ label }}</h1>
     </a>

web/themes/joinup/templates/rdf_entity/rdf-entity--solution--group-header.html.twig

@@ -8,7 +8,7 @@
   <div class="featured__overlay"></div>
   <div class="featured__inner-wrapper">
     {# @todo This is temporary, once all fields are available, it will be replaced. #}
-    <a href="{{ path('entity.rdf_entity.canonical',{'rdf_entity': rdf_entity.id()}) }}">
+    <a class="featured__title-wrapper" href="{{ path('entity.rdf_entity.canonical',{'rdf_entity': rdf_entity.id()}) }}">
       <div class="featured__logo">{{ content.field_is_logo }}</div>
       <h1 class="featured__text">{{ label }}</h1>
     </a>

web/themes/joinup/templates/user/user--group-header.html.twig

@@ -30,7 +30,7 @@
   <div class="featured__overlay"></div>
   <div class="featured__inner-wrapper">
     {# @todo This is temporary, once all fields are available, it will be replaced. #}
-    <a href="{{ path('entity.user.canonical',{'user': user.id()}) }}">
+    <a class="featured__title-wrapper" href="{{ path('entity.user.canonical',{'user': user.id()}) }}">
       <div class="featured__logo">{{ content.field_user_photo }}</div>
       <div class="featured__text featured__text--double">
         <h1><span>{{ full_name }}</span></h1>