Merge pull request #234 from ontoportal-lirmm/feature/update-footer-d…

…esign

Feature: Update footer design

app/assets/stylesheets/footer.scss

@@ -1,3 +1,55 @@
-.legal-text {
-	font-size: 0.9rem;
-}
+.footer-container{
+    display: flex;
+    justify-content: center;
+    background-color: var(--primary-color);
+}
+footer{
+    width: 1280px;
+    background-color: var(--primary-color);
+    padding: 40px 100px;
+}
+
+.footer-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+}
+.footer-logo{
+    color: white;
+    display: flex;
+    align-items: center;
+}
+.footer-logo p{
+    margin-bottom: 0;
+    font-weight: 700;
+    font-size: 18px;
+    margin-left: 20px;
+}
+.footer-social-media-links a{
+    margin-left: 20px;
+}
+.footer-nav-links{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.footer-nav-links div h2{
+    font-size: 21px;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 10px;
+}
+.footer-nav-links div div{
+    display:flex;
+    flex-direction: column;
+}
+.footer-nav-links div a{
+    font-size: 16px;
+    font-weight: 400;
+    color: white !important;
+    margin-bottom: 10px;
+    opacity: 60%;
+}
+.footer-nav-links div a:hover{
+    opacity: 100%;
+}

app/assets/stylesheets/themes/lirmm/main.scss

@@ -241,22 +241,3 @@ div.logos a {
   }
 }
 
-/************************************
- * FOOTER
-************************************/
-footer, .footer {
-  background-color: $color-secondary !important;
-  position: relative !important;
-}
-
-footer img {
-  height: 32px;
-}
-
-footer a.logo.connect img {
-  margin-right: 10px;
-}
-
-.legal-text {
-  font-size: 0.9rem;
-}

app/views/annotator/index.html.haml

@@ -3,7 +3,7 @@
 %head
   = javascript_include_tag "bp_annotator"
 
-%div.container-fluid
+%div.container-fluid.flex-grow-1
   %div.row
     %div.col
       %h2.mt-3 Annotator

app/views/annotatorplus/index.html.haml

@@ -3,7 +3,7 @@
 %head
   = javascript_include_tag "bp_annotatorplus"
 
-%div.container-fluid
+%div.container-fluid.flex-grow-1
   %div.row
     %div.col
       %h2.mt-3 Annotator +

app/views/layouts/_footer.html.haml

@@ -1,33 +1,32 @@
 </div>
 </div>
 
-%footer.footer.pt-4.mt-5
-  %div.container
-    %div.row
-      - $FOOTER_LINKS.to_h[:top].to_a.each do |footer_links_block|
-        %div.col-6.col-md
-          %h6= footer_links_block[:column_header]
-          %ul.list-unstyled
-            - footer_links_block[:links].each do |footer_links_row|
-              %li
-                - footer_links_row.each do |footer_link|
-                  = render_footer_link footer_link
-    %div.row.legal-text
-      %div.col
-        = t('.grant_html', site: $SITE)
-    %div.row.pt-2
-      - $FOOTER_LINKS.to_h[:bottom].to_a.each do |footer_links_block|
-        %div.col-6.col-md
-          - if footer_links_block[:column_header].present?
-            %h6= footer_links_block[:column_header]
-          %ul.list-inline
-            - footer_links_block[:links].each do |footer_links_row|
-              - footer_links_row.each_with_index do |footer_link, i|
-                %li.list-inline-item
-                  = render_footer_link footer_link
-                - unless i >= footer_links_row.size - 1
-                  %li.list-inline-item
-                    = raw(footer_links_block[:separator])
+%br
+%br/
+.footer-container
+  %footer
+    .footer-header
+      .footer-logo
+        %img{:src => "#{asset_path("logos/ontoportal.svg")}"}
+        - logo = $UI_THEME.to_s.capitalize
+        - logo.sub! 'portal' , 'Portal'
+        %p
+          = logo
+      .footer-social-media-links
+        - $FOOTER_LINKS[:social].each do |link|
+          %a{:href => link[:link], :target => "_blank"}
+            %img{:src => "#{asset_path(link[:logo])}"}/
+    .footer-nav-links
+      - $FOOTER_LINKS[:sections].each do |key, section_links|
+        %div
+          %h2
+            = t("layout.footer."+key.to_s)
+          %div
+            - section_links.each do |section , link|
+              %a{:href => link, :target => "_blank"}
+                = t("layout.footer."+section.to_s)
+
+
 
 
 = javascript_include_tag "application"

app/views/layouts/_header.html.erb

@@ -43,5 +43,5 @@
 <body class="<%= controller_name %> <%= action_name %>">
   <%=render partial: 'layouts/topnav'%>
 
-  <div class="container-fluid">
+  <div class="container-fluid flex-grow-1">
     <%=render partial: 'layouts/notices'%>

app/views/layouts/appliance.html.haml

@@ -28,7 +28,7 @@
   %body{:class => "#{controller_name} #{action_name}"}
     = render partial: "layouts/topnav"
 
-    %div.container-fluid
+    %div.container-fluid.flex-grow-1
       = render partial: "layouts/notices"
       = render TurboModalComponent.new(id: 'application_modal')
       = yield

app/views/mappings/index.html.haml

@@ -1,5 +1,5 @@
 - @title = "Mappings"
-%div#mappings_container.container-fluid.py-4
+%div#mappings_container.container-fluid.py-4.flex-grow-1
   %h1.my-1 Mappings
 
   %div#mappings_uploader.my-2

app/views/ncbo_annotatorplus/index.html.haml

@@ -3,7 +3,7 @@
 %head
   = javascript_include_tag "bp_annotator"
 
-%div.container-fluid.annotator
+%div.container-fluid.annotator.flex-grow-1
   %div.row
     %div.col
       %h2.mt-3 NCBO Annotator +