Merge pull request #11 from kylekirkby/theme_updates

Changes to the universal navbar
linaro-marketing · Dec 15, 2020 · d221f10 · d221f10
2 parents b418212 + 3ee7ce2
commit d221f10
Show file tree

Hide file tree

Showing 15 changed files with 434 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,18 @@ This project adheres to [Semantic Versioning](http://semver.org/) and [Keep a Ch
 ### Breaks
 
 
+## 4.3.0 - (2020-12-15)
+---
+
+### New
+* Added OFI.js polyfill for object-fit css property
+* Added new universal nav design
+  * Social media icons can be included in the nav now.
+  * 
+### Fixes
+* Fixed object-fit issues in IE
+
+
 ## 4.2.0 - (2020-11-23)
 ---
 

diff --git a/_data/picture.yml b/_data/picture.yml
@@ -73,91 +73,115 @@ markup_presets:
       img: 'class="lazyload img-fluid blog_content_image "'
     formats: [webp, original]
     widths: [400, 800, 1200]
+    fallback_format: original
+    fallback_width: 1200
   members_image:
     markup: data_picture
     attributes:
       img: 'class="lazyload img-fluid members_image "'
     formats: [webp, original]
     widths: [100, 200, 300, 400]
+    fallback_format: original
+    fallback_width: 400
   header_image:
     markup: data_auto
     attributes:
       img: 'class="lazyload header_background_image"'
     formats: [webp, original]
     widths: [576, 768, 992, 1200]
-    fallback_format: webp
-    fallback_width: 1920
+    fallback_format: original
+    fallback_width: 1200
   content_image:
     markup: data_auto
     attributes:
       img: 'class="lazyload img-fluid content_image"'
     formats: [webp, original]
     widths: [576, 768, 992, 1200]
-    fallback_format: webp
-    fallback_width: 1920
+    fallback_format: original
+    fallback_width: 992
   header_slider_image:
     markup: data_picture
     attributes:
       source: 'class="owl-lazy"'
       img: 'class="owl-lazy header_background_image"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 1200
     widths: [400, 800, 1200, 1920]
   card_block_image:
     markup: data_picture
     attributes:
       img: 'class="lazyload card-img-top"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 600
     widths: [400, 600]
   feature_block_image:
     markup: data_picture
     attributes:
       img: 'class="lazyload img-fluid"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 900
     widths: [400, 600, 900, 1400]
   featured_blog_image:
     markup: data_picture
     attributes:
       img: 'class="lazyload img-fluid post_index_header_image"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 900
     widths: [400, 600, 900, 1400]
   slider_block_image:
     markup: data_picture
     attributes:
       img: 'class="lazyload img-fluid"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 900
     widths: [400, 600, 900, 1400]
   youtube_poster_image:
     markup: direct_url
     attributes:
       img: 'class="lazyload img-fluid"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 900
     widths: [400, 600, 900, 1400]
   author_thumbnail:
     markup: data_picture
     attributes:
       img: 'class="lazyload rounded-circle"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 100
     widths: [50, 100]
   author_thumbnail_small:
     markup: data_picture
     attributes:
       img: 'class="lazyload rounded-circle small"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 100
     widths: [50, 100]
   post_thumb:
     markup: data_picture
     attributes:
       img: 'class="lazyload mr-3 img-thumbnail suggested_post_thumb"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 400
     widths: [50, 100, 400]
   post_thumb_src_only:
     markup: direct_url
-    fallback_format: webp
+    fallback_format: original
     fallback_width: 400
     widths: [400]
   breadcrumb_banner:
     markup: data_picture
     attributes:
       img: 'class="lazyload breadcrumb_image"'
     formats: [webp, original]
+    fallback_format: original
+    fallback_width: 1200
     widths: [1000, 1200, 2000]
diff --git a/_data/universal_nav.yml b/_data/universal_nav.yml
@@ -1,22 +1,35 @@
 items:
   - active: true
     title: Linaro
-    url: 'https://www.linaro.org/'
+    url: "https://www.linaro.org/"
   - title: Connect
-    url: 'https://connect.linaro.org'
+    url: "https://connect.linaro.org"
   - title: 96Boards
-    url: 'https://www.96boards.org'
-  - title: Developer Cloud
-    url: 'https://linaro.cloud'
+    url: "https://www.96boards.org"
+  - title: Twitter
+    icon: icon-twitter
+    url: "https://twitter.com/LinaroOrg"
+  - title: Facebook
+    icon: icon-facebook
+    url: "http://facebook.com/LinaroOrg"
+  - title: LinkedIn
+    icon: icon-linkedin
+    url: "https://www.linkedin.com/company/1026961"
+  - title: YouTube
+    icon: icon-youtube
+    url: "https://www.youtube.com/LinaroOrg"
   - options:
       - title: 96Boards.ai
-        url: 'https://www.96boards.ai'
+        url: "https://www.96boards.ai"
+      - title: Developer Cloud
+        url: "https://linaro.cloud"
       - title: devicetree.org
-        url: 'https://www.devicetree.org'
+        url: "https://www.devicetree.org"
       - title: OpenAMP
-        url: 'https://www.openampproject.org'
+        url: "https://www.openampproject.org"
       - title: OP-TEE
-        url: 'https://www.op-tee.org'
+        url: "https://www.op-tee.org"
       - title: Trusted Firmware
-        url: 'https://www.trustedfirmware.org/'
+        url: "https://www.trustedfirmware.org/"
+    hamburger_toggle: true
     title: Projects
diff --git a/_includes/js_bundles/vendor.html b/_includes/js_bundles/vendor.html
@@ -2,6 +2,7 @@
 - /assets/js/vendor/jquery.js
 - /assets/js/vendor/_popper.js
 - /assets/js/vendor/bootstrap.js
+- /assets/js/vendor/ofi.js
 - /assets/js/vendor/jquery.cookie.js
 - /assets/js/vendor/jquery.ihavecookies.js
 - /assets/js/vendor/lazysizes.js

diff --git a/_includes/nav/universal_nav.html b/_includes/nav/universal_nav.html
@@ -1,6 +1,6 @@
 {% assign nav_expand_point = site.nav_expand_breakpoint %}
 <!-- Universal NavBar-->
-<nav class="navbar navbar-expand-{{nav_expand_point}} navbar-dark {% if site.hover_nav_dropdowns %}hover_animated{% endif %}" id="universal_nav">
+<nav class="navbar navbar-expand-{{nav_expand_point}} navbar-dark" id="universal_nav">
     <div class="container">
         <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -14,23 +14,52 @@
             <ul class="navbar-nav ml-auto">
                 {% for item in site.data.universal_nav.items %}
                     {% if item.options %}
-                        <li class="nav-item dropdown {% for project-site in item.options %}{% if project-site.active %}active{% break %}{% endif %}{% endfor %}">
-                            <a class="nav-link dropdown-toggle" target="_self" href="#" id="universalNavbarDropdown" aria-label="Toggle unviersal navigation" role="button" data-toggle="dropdown"
+                        <li class="nav-item dropdown {% if item.hamburger_toggle %}dropdown_hamburger{% endif %} {% for project-site in item.options %}{% if project-site.active %}active{% break %}{% endif %}{% endfor %}">
+                                {% if item.hamburger_toggle %}
+                                <button class="ml-auto mt-1 d-none d-{{nav_expand_point}}-block" type="button" role="button" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false" aria-label="Toggle {{item.title}} Dropdown">
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                    <span class="sr-only d-none">Toggle navigation</span>
+                                </button>
+                                <a class="nav-link dropdown-toggle d-block d-{{nav_expand_point}}-none" target="_self" href="#" id="universalNavbarDropdown" aria-label="Toggle unviersal navigation" role="button" data-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false">
-                                {{item.title}}
-                            </a>
-                            <div class="dropdown-menu {% if site.nav_dropdowns_animation_class %}{{site.nav_dropdowns_animation_class}}{% endif %}" aria-labelledby="universalNavbarDropdown">
+                                    {{item.title}}
+                                </a>
+                                {% else %}
+                                    <a class="nav-link dropdown-toggle" target="_self" href="#" id="universalNavbarDropdown" aria-label="Toggle unviersal navigation" role="button" data-toggle="dropdown"
+                                    aria-haspopup="true" aria-expanded="false">
+                                        {{item.title}}
+                                    </a>
+                                {% endif %}
+                            <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="universalNavbarDropdown">
                                 {% for project-site in item.options %}
                                     <a class="dropdown-item {% if project-site.active %}active{% endif%}" href="{{project-site.url}}">{{project-site.title}}</a>
                                 {% endfor %}
                             </div>
                         </li>
                     {% else %}
-                        <li class="nav-item {% if item.active %}active{% endif %}">
-                            <a target="_self" class="nav-link" href="{{item.url}}">{{item.title}} <span class="sr-only">(current)</span></a>
+                        <li class="nav-item {% if item.icon %}nav-item-icon d-none d-{{nav_expand_point}}-block{% endif %} {% if item.active %}active{% endif %}">
+                            <a target="_self" class="nav-link" href="{{item.url}}">
+                                {% if item.icon %}
+                                    <span class="{{item.icon}}"></span>
+                                {% else %}
+                                    {{item.title}}
+                                {% endif %}
+                                <span class="sr-only">(current)</span></a>
                         </li>
                     {% endif %}
                 {% endfor %}
+                <li class="nav-item nav-item-icon d-block d-{{nav_expand_point}}-none">
+                    {% for item in site.data.universal_nav.items %}
+                        {% if item.icon %}
+                        <a target="_blank" class="nav-link" href="{{item.url}}">
+                            <span class="{{item.icon}}"></span>
+                        </a>
+                        {% endif %}
+                    {% endfor %}
+                </li>
             </ul>
         </div>
     </div>

diff --git a/_sass/app/overrides.scss b/_sass/app/overrides.scss
@@ -8,8 +8,12 @@ $theme-colors: (
 );
 // Universal Navbar
 $universal_navbar_height_padding: 0px;
-$universal_navbar_text_color: #fff;
+$universal_navbar_text_color: #000;
+$universal_navbar_active_text_hover_color: #fff;
+$universal_navbar_icon_color: #fff;
 $universal_navbar_bg_color: $primary;
+$universal_navbar_active_text_color: #fff;
+$universal_navbar_active_bg_color: #000;
 // Main Navbar
 $navbar_height_padding: 5px;
 $navbar_text_color: #575757;

diff --git a/_sass/core/blog.scss b/_sass/core/blog.scss
@@ -10,6 +10,7 @@
         max-height: 400px;
         height: 100%;
         object-fit: cover;
+        font-family: "object-fit: cover;";
       }
     }
   }
@@ -18,8 +19,10 @@
     height: 200px;
     overflow: hidden;
     object-fit: cover;
-    .header_background_image.lazyloaded {
+    font-family: "object-fit: cover;";
+    .header_background_image {
       object-fit: cover;
+      font-family: "object-fit: cover;";
       object-position: 50% 50% !important;
       height: 200px;
       width: 100vw;
@@ -169,6 +172,7 @@
     height: 100px;
     transition: all 100ms ease-out;
     object-fit: cover;
+    font-family: "object-fit: cover;";
     &:hover {
       transform: rotate(-5deg);
       -webkit-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
@@ -212,6 +216,7 @@
       height: 150px;
       width: 100%;
       object-fit: cover;
+      font-family: "object-fit: cover;";
     }
     &:after {
       content: "";

diff --git a/_sass/core/breadcrumb.scss b/_sass/core/breadcrumb.scss
@@ -8,6 +8,7 @@
         height: 100%;
         width: 100%;
         object-fit: cover;
+        font-family: "object-fit: cover;";
         filter: brightness(0.8);
         z-index: 0;
       }

diff --git a/_sass/core/flow.scss b/_sass/core/flow.scss
@@ -31,6 +31,7 @@
       .header_background_image {
         position: absolute;
         object-fit: cover;
+        font-family: "object-fit: cover;";
         height: 100%;
         width: 100%;
         filter: brightness(0.4);
@@ -55,6 +56,7 @@
           height: 100%;
           width: auto;
           object-fit: cover;
+          font-family: "object-fit: cover;";
         }
       }
     }
@@ -66,6 +68,7 @@
           height: 100%;
           width: auto;
           object-fit: cover;
+          font-family: "object-fit: cover;";
           @include media-breakpoint-down(sm) {
             margin: auto;
           }
@@ -77,6 +80,7 @@
     img.members_image {
       height: 100px;
       object-fit: contain;
+      font-family: "object-fit: contain;";
       width: 100%;
       padding: 15px;
     }
@@ -108,6 +112,7 @@
         height: 150px;
         width: 100%;
         object-fit: cover;
+        font-family: "object-fit: cover;";
       }
     }
   }