New mobile header

Add job pages
More news button on home page links to news page
Small mobile fixes for new page and other pages

resources/assets/js/functions/loadMoreNews.js

@@ -3,13 +3,13 @@
    * @param {object} _options
    */
   $.fn.loadMoreNews = function (_options) {
-    var nextPage = 2;
     var isLoading = false;
     var page = 1;
     var options = {
       loadingElementId: '#loading',
       container: '',
-      url: document.location.pathname
+      url: document.location.pathname,
+      nextPage: 2
     };
 
     $.extend(options, _options);
@@ -26,7 +26,7 @@
         var $container = $(options.container)
 
         // Fire request for the next page
-        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
           .always(function () {
             // Whether success or failure, update the UI again
             isLoading = 0;
@@ -45,7 +45,7 @@
               var id = this.toString();
               $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
             });
-            ++nextPage;
+            ++options.nextPage;
           });
       }
     });

resources/assets/sass/base/_container.scss

@@ -19,8 +19,10 @@ body {
 .header_container  {
   @include container;
 }
-.grey_background {
-  background-color: #f9f9f9;
+@media (min-width: 768px) {
+  .grey_background {
+    background-color: #f9f9f9;
+  }
 }
 .content_container {
   padding-right: 50px;

resources/assets/sass/components/_blog.scss

@@ -6,7 +6,9 @@
 
   .post {
     margin-bottom: 27px;
-    height: 90px;
+    &:not(.auto_height) {
+      height: 90px;
+    }
 
     img {
       width: 100%;

resources/assets/sass/components/_box.scss

@@ -28,20 +28,33 @@
 .box {
   display: inline-block;
   width: auto;
-  padding: 30px 23px 30px 30px;
-  border-radius: 3px;
-  box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
   background-color: $element-bg;
   margin-bottom: 50px;
 
+  @media (min-width: 768px) {
+    border-radius: 3px;
+    box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+    padding: 30px 23px 30px 30px;
+  }
+  @media (max-width: 768px) {
+    padding: 10px 10px 10px 10px;
+  }
+
   &.full-width {
-    width: CALC(100% - 60px);
+    @media (min-width: 768px) {
+      width: CALC(100% - 60px);
+    }
+    @media (max-width: 768px) {
+      width: CALC(100% - 20px);
+    }
   }
   &.full-height {
     height: CALC(100% - 103px);
   }
-  &.margin_top {
-    margin-top: 80px;
+  @media (min-width: 768px) {
+    &.md_margin_top {
+      margin-top: 77px;
+    }
   }
 }
 .tabs {

resources/assets/sass/components/_bread_crumb.scss

@@ -19,5 +19,11 @@
     i {
       font-size: 8px;
     }
+
+    @media (max-width: 768px) {
+      &:nth-last-child(-n+2) {
+        display: none;
+      }
+    }
   }
 }

resources/assets/sass/components/_button.scss

@@ -16,6 +16,10 @@
   text-decoration: none;
   text-transform: uppercase;
 
+  &:hover, &:active {
+    color: $text-inverted-color;
+  }
+
   &.auto_width {
     width: fit-content;
     margin: 0 auto;

resources/assets/sass/components/_menu.scss

@@ -183,16 +183,14 @@
   }
 }
 .menu_mobile_container {
-  height: 30px;
+  height: 46px;
   padding: 12px 0;
+  background-color: #10229c;
   .mobile_menu_button a {
     display: block;
     width: 20px;
     height: 21px;
     padding: 4px 10px 4px 11px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    background-color: #10229c;
     margin-right: 12px;
     i {
       color: white;
@@ -213,9 +211,18 @@
     flex-grow: 1;
     ul.right_menu {
       li {
-        padding: 5px 19px;
+        padding: 0 10px;
         margin: 0;
 
+        a.with_svg_icon {
+          margin-right: 10px;
+        }
+        a {
+          svg {
+            position: static;
+          }
+        }
+
         .search_form {
           height: 25px;
           .search_input {

resources/assets/sass/components/_page_title.scss

@@ -3,7 +3,10 @@
 .page_title {
   margin: 17px 0;
   font-family: Montserrat, serif;
-  font-size: 40px;
+  font-size: 30px;
+  @media (min-width: 768px) {
+    font-size: 40px;
+  }
   font-weight: 600;
   line-height: 1.15;
   text-align: left;

resources/assets/sass/components/_post.scss

@@ -3,7 +3,9 @@
 
 .post_container {
   @include container;
-  padding: 32px 0;
+  @media (min-width: 768px) {
+    padding: 32px 0;
+  }
 
   > .col-8 {
     width: CALC(66.66666667% - 20px);

resources/assets/sass/layout/_index.scss

@@ -1,6 +1,6 @@
 @forward 'header';
 @forward 'home';
-@forward 'news_post';
+@forward 'news';
 @forward 'post';
 @forward 'gids';
 @forward 'program';

resources/assets/sass/layout/_news.scss

@@ -0,0 +1,7 @@
+@use "../components/news_post";
+
+.news {
+  .blog .post {
+    height: 115px;
+  }
+}

resources/assets/sass/layout/_news_post.scss

@@ -1 +0,0 @@
-@use "../components/news_post";