Issue 5740 - Implemented new abp.org footer styles

templates/default.tmpl

 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-present eyeo GmbH
  #
  # Adblock Plus is free software: you can redistribute it and/or modify
  # it under the terms of the GNU General Public License version 3 as
  # published by the Free Software Foundation.
  #
  # Adblock Plus is distributed in the hope that it will be useful,
  # but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 137 matching lines @@
             {{toc(toclist)}}
           </div>
         {% endif %}
       {% endif %}
 
       {% block body %}
       {{body|safe}}
       {% endblock %}
     </div>
 
-    <footer id="footer-main">
-      <div id="footer-content">
-        <nav>
-          <section class="first">
-            <h1>{{get_string("resources", "menu")}}</h1>
+    <footer id="site-footer" class="content">

[juliandoucette, 2017/10/11 13:12:08]

Note: I'm going to change this to just "footer" for consistency with the
#navbar. But I may change both of these separately.

[ire, 2017/10/11 16:28:32]

Acknowledged.

+      <div class="container">
+        <div class="row">
+          <nav class="column one-fourth">
+            <h5>{{ get_string("resources", "menu") }}</h5>
             <ul>
-              {% for name in ["acceptable-ads", "documentation", "deployments", "terms", "privacy", "impressum"] %}
-                {{pageitem(name)}}
+              {% for name in ["acceptable-ads", "documentation", "deployments"] %}
+                {{ pageitem(name) }}

[juliandoucette, 2017/10/11 13:12:09]

Note: I'm going to refactor away pageitem so that I can remove it later.

[ire, 2017/10/11 16:28:31]

Acknowledged.

               {% endfor %}
             </ul>
-          </section>
-
-          <section>
-            <h1>{{get_string("community", "menu")}}</h1>
+          </nav>
+          <nav class="column one-fourth">
+            <h5>{{ get_string("community", "menu") }}</h5>
             <ul>
               <li><a href="/releases/" hreflang="en">{{get_string("releases", "menu")}}</a></li>
               <li><a href="/blog/" hreflang="en">{{get_string("blog", "menu")}}</a></li>
               <li><a href="/forum/" hreflang="en">{{get_string("forum", "menu")}}</a></li>
-              {{pageitem("development-builds")}}
+              {{ pageitem("development-builds") }}
             </ul>
-          </section>
-
-          <section>
-            <h1>{{get_string("development", "menu")}}</h1>
+          </nav>
+          <nav class="column one-fourth">
+            <h5>{{get_string("development", "menu")}}</h5>
             <ul>
-              {{pageitem("source")}}
-              <li><a href="https://issues.adblockplus.org/report/13" hreflang="en">{{get_string("roadmap", "menu")}}</a></li>
-              {{pageitem("tools")}}
-              <li><a href="https://eyeo.com/jobs/" hreflang="en">{{get_string("jobs", "menu")}}</a></li>
+              {{ pageitem("source") }}
+              <li><a href="https://issues.adblockplus.org/report/13" hreflang="en">{{ get_string("roadmap", "menu") }}</a></li>
+              {{ pageitem("tools") }}
+              <li><a href="https://eyeo.com/jobs/" hreflang="en">{{ get_string("jobs", "menu") }}</a></li>
             </ul>
-          </section>
-        </nav>
-
-        <section id="social">
-          <h1>{{get_string("follow-us", "menu")}}</h1>
-          <ul id="social-list">
-            <li class="social-entry">
-              <a rel="nofollow" id="social-facebook" class="sprite" href="https://www.facebook.com/adblockplus"></a>
-            </li>
-            <li class="social-entry">
-              <a rel="nofollow" id="social-twitter" class="sprite" href="https://twitter.com/adblockplus"></a>
-            </li>
-            <li class="social-entry">
-              <a rel="nofollow" id="social-gplus" class="sprite" href="https://plus.google.com/110020691898167279887"></a>
-            </li>
+          </nav>
+          <nav id="social-list" class="column one-fourth">
+            <h5>{{get_string("follow-us", "menu")}}</h5>
+            <ul>
+              <li>
+                <a rel="nofollow" href="https://twitter.com/AdblockPlus" target="_blank">
+                  <img
+                    src="/img/footer-twitter-glyphicon.png"
+                    alt="{{ "Twitter" | translate("twitter-alt", "Twitter glyphicon alt text")}}">
+                </a>
+              </li>
+              <li>
+                <a rel="nofollow" href="https://www.youtube.com/user/AdblockPlusOfficial" target="_blank">
+                  <img
+                    src="/img/footer-youtube-glyphicon.png"
+                    alt="{{ "YouTube" | translate("youtube-alt", "YouTube glyphicon alt text")}}">
+                </a>
+              </li>
+              <li>
+                <a rel="nofollow" href="https://www.facebook.com/adblockplus" target="_blank">
+                  <img
+                    src="/img/footer-facebook-glyphicon.png"
+                    alt="{{ "Facebook" | translate("facebook-alt", "Facebook glyphicon alt text")}}">

[juliandoucette, 2017/10/11 13:12:09]

Note: I'm going to remove these alts and add them separately

[ire, 2017/10/11 16:28:31]

Acknowledged.

+                </a>
+              </li>
+              <li>
+                <a rel="nofollow" href="https://www.instagram.com/adblockplus/" target="_blank">
+                  <img
+                    src="/img/footer-instagram-glyphicon.png"
+                    alt="{{ "Instagram" | translate("instagram-alt", "Instagram glyphicon alt text")}}">
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div><!-- .row -->
+        <div id="footer-legal">
+          <p id="copyright-notice">{{ "Copyright © 2017 All rights reserved. Adblock Plus® is a registered trademark of <a href='https://eyeo.com'>eyeo GmbH</a>." | translate("copyright-notice", "Footer copyright notice") }}</p>
+          <ul id="legal-list">
+            {% for pagename in ["terms", "privacy", "impressum"] %}
+              {{ pageitem(pagename) }}
+            {% endfor %}
           </ul>
-        </section>
-      </div>
+        </div>
+      </div><!-- .container -->

[juliandoucette, 2017/10/11 13:12:09]

Note: I changed the comments to {# #} so that they don't show up in the
generated HTML

[ire, 2017/10/11 16:28:31]

Acknowledged.

     </footer>
 
     <script src="/js/main.js"></script>
   </body>
 </html>