Merge pull request #343 from marcom-unimelb/intranet-components

Intranet components and wide/stacked nav block listing

Procfile

@@ -1 +1 @@
-web: RACK_ENV=production VERSION=v3.0 bundle exec thin start -p $PORT
+web: RACK_ENV=production VERSION=v3.2 bundle exec thin start -p $PORT

assets/targets/components/index.scss

@@ -46,6 +46,7 @@ body {
 @import './gallery/index';
 @import './article/index';
 @import './notices/index';
+@import './intranet/index';
 
 // ///* Print */
 @import './print';

assets/targets/components/intranet/_short-header.scss

@@ -0,0 +1,85 @@
+.uomcontent {
+
+  .page-header.short {
+      @include rem(min-height, 90px);
+      background-image: url(/assets/headers/header_light.jpg);
+      background-position: center center;
+      background-size: cover;
+      position: relative;
+
+    .page-header-home {
+      @include flexbox((
+        display: box,
+        align-items: center
+      ), $version: 1);
+      @include flexbox((
+        display: flexbox,
+        align-items: center
+      ), $version: 2);
+      @include flexbox((
+        display: flex,
+        align-items: center
+      ));
+      @include rem(height, 60px);
+      @include rem(max-width, 110px);
+      @include rem(width, 110px);
+    }
+
+    @include breakpoint(desktop) {
+      @include rem(min-height, 250px);
+
+      .page-header-logo {
+        @include rem(height, 120px);
+        @include rem(margin-left, 45px);
+        @include rem(margin-top, 70px);
+        @include rem(width, 120px);
+      }
+
+      .page-header-home {
+        @include adjust-font-size-to(24px);
+        @include rem(height, 120px);
+        @include rem(margin-top, 70px);
+        @include rem(max-width, 300px);
+        @include rem(width, 300px);
+      }
+
+      .page-header-tools {
+        @include rem(margin-top, 90px);
+      }
+    }
+  }
+}
+
+.uomcontent .page-header.short + .page-inner {
+    padding-top: 0;
+
+  .floating {
+    display: none;
+  }
+
+  [role="main"] > *:first-child {
+    padding-top: 0;
+  }
+
+  .tabbed-nav > .full-width {
+    // background-color: $tabcolor;
+
+    nav a[data-current]::after {
+      // border-top-color: $tabcolor;
+    }
+  }
+
+  .filtered-listing-wrapper.light {
+    // background-color: $paleblue;
+
+    form.filtered-listing-select,
+    form.filtered-listing-select .left legend,
+    form.filtered-listing-select .left input[type="checkbox"]+label span,
+    form.filtered-listing-select .left .category-a input[type="checkbox"]+label span,
+    form.filtered-listing-select .left .category-b input[type="checkbox"]+label span,
+    form.filtered-listing-select .left .category-c input[type="checkbox"]+label span {
+      // color: $black;
+
+    }
+  }
+}

assets/targets/components/intranet/_staff-dial.scss

@@ -0,0 +1,81 @@
+.uomcontent [role="main"] {
+
+  .staff-dial {
+    @include rem(max-width, $w-mid);
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+
+    li {
+      @include rem(margin, 10px 10px);
+      @include rem(width, 70px);
+      display: inline-block;
+      list-style-type: none;
+      padding: 0;
+      vertical-align: top;
+
+      @include breakpoint(desktop) {
+        @include rem(margin, 10px 28px);
+      }
+    }
+
+    a {
+      @include adjust-font-size-to(13px);
+      @include rem(border-radius, 4px);
+      @include rem(height, 70px);
+      @include rem(padding-top, 8px);
+      @include transition(transform 0.15s);
+      background-color: $highlight;
+      color: $white;
+      display: block;
+      text-align: center;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 100%;
+
+      &.c1 {
+        background-color: #9c27b0;
+      }
+
+      &.c2 {
+        background-color: #673ab7;
+      }
+
+      &.c3 {
+        background-color: #2196f3;
+      }
+
+      &.c4 {
+        background-color: #009688;
+      }
+
+      &.c5 {
+        background-color: #009688;
+      }
+
+      &.c6 {
+        background-color: #ff9800;
+      }
+
+      &.c7 {
+        background-color: #607d8b;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+
+        svg {
+          fill: $white;
+        }
+
+        .icon-label {
+          color: $white;
+        }
+      }
+
+      & > div.small {
+        width: 100%;
+      }
+    }
+  }
+}

assets/targets/components/intranet/index.scss

@@ -0,0 +1,2 @@
+@import 'short-header';
+@import 'staff-dial';

assets/targets/components/listings/13-wide-navigational-block-listing-with-text.slim

@@ -0,0 +1,22 @@
+section.navigation-block-listing
+  ul.wide
+    li
+      a href="#" title="Lorum ipsum dolor sit amet" 
+        h3 Main heading
+        p Lorem ipsum dolor sit amet, consectetur  enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut o consequat.
+    li
+      a href="#" title="Lorum ipsum dolor sit amet" 
+        h3 Main heading consequat
+        p Lorem ipsum dolor sit amet, consectetdipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.im ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    li
+      a href="#" title="Lorum ipsum dolor sit amet" 
+        h3 Main heading
+        p Lectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    li
+      a href="#" title="Lorum ipsum dolor sit amet" 
+        h3 Main heading nostrud exercitation
+        p Lorem ipsum dolor sit amet, ing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    li
+      a href="#" title="Lorum ipsum dolor sit amet" 
+        h3 Main heading
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

assets/targets/components/listings/15-stacked-navigational-block-listing-with-text.slim

@@ -0,0 +1,26 @@
+section.navigation-block-listing.stacked
+  ul
+    li
+      a href="/pages/staff-hub/human-resources/salary-benefits-leave/" title=("Salary benefits and leave")
+        h3 Salary, benefits and leave
+        p Find out when you get paid, learn what is required to take leave and check your super arrangements.
+    li
+      a href="#" title=("Nothing here")
+        h3 Career development and training
+        p Professional skills, leadership, performance development, motoring, networks, training in OH&S, fairness and diversity.
+    li
+      a href="#" title=("Nothing here")
+        h3 Career transitions
+        p Career planning, support, job applications, applying for internal positions and changing or ceasing your employment.
+    li
+      a href="/pages/staff-hub/human-resources/recruiting/" title=("Recruiting and hiring staff") 
+        h3 Recruiting and hiring staff
+        p Compiling a position description, advertising, shortlisting and interviewing, making an offer, appointment, set-up, commencement and indigenous recruitment.
+    li
+      a href="#" title=("Nothing here")
+        h3 Managing staff
+        p Learn how to effectively manage staff and change, recognise staff achievements at a local to university wide level, and conduct workforce planning.
+    li
+      a href="#" title=("Nothing here")
+        h3 Get HR advice
+        p Find out where to go for HR advice and support.

assets/targets/components/listings/_nav_block.scss

@@ -20,11 +20,14 @@
     display: block;
   }
 
-  & > ul > li > a {
-    text-decoration: none;
+  & > ul > li {
+    & > a,
+    & > .with-dropdown > a {
+      text-decoration: none;
 
-    h3 {
-      text-decoration: underline;
+      h3 {
+        text-decoration: underline;
+      }
     }
   }
 
@@ -62,10 +65,12 @@
     }
 
     @include breakpoint(tablet) {
+      h3,
       p {
         margin: 0;
         width: 88%;
       }
+
       li {
         display: inline-block;
         vertical-align: top;
@@ -99,16 +104,13 @@
     }
   }
 
+  ul.wide,
   ul.narrow {
     @include padding-leader(1);
-    @include rem(max-width, $w-mid);
-    margin-left: auto;
-    margin-right: auto;
 
     li {
       @include padding-trailer(1);
       @include trailer(1);
-      // border-bottom: 1px solid $lightergray;
     }
 
     a {
@@ -118,16 +120,73 @@
     p {
       @include padding-trailer(0);
     }
-
+    
     @include breakpoint(desktop) {
       li {
         width: 32%;
       }
     }
   }
+
+  ul.wide {
+    li.with-dropdown {
+      .styled-select {
+        @include margin-leader(1);
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      @include breakpoint(tablet) {
+        .styled-select {
+          width: 88%;
+        }
+      }
+
+      @include breakpoint(desktop) {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  ul.narrow {
+    @include rem(max-width, $w-mid);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.stacked {
+    @include rem(max-width, $w-sml);
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+    width: 94%;
+
+    @include breakpoint(desktop) {
+      width: 100%;
+    }
+
+    ul {
+      h3,
+      p {
+        width: 100%;
+      }
+
+      li {
+        display: block;
+        max-width: none;
+        width: 100%;
+
+        p {
+          @include rem(font-size, $base-font-size);
+          line-height: inherit;
+        }
+      }
+    }
+  }
 }
 
 %navigation-block-listing-fallback {
+  @extend %clearfix;
   margin: 0 auto;
 
   ul li {

assets/targets/injection/header/index.es6

@@ -46,11 +46,19 @@ InjectHeader.prototype.renderPageHeader = function() {
   </svg>
 </a>
 `;
+
+      // Copy over the `floating`, `reverse` and `short` classes
       this.props.header.addClass('floating');
-      if (document.querySelector('.page-inner > .floating').hasClass('reverse')) {
+
+      var floating = document.querySelector('.page-inner > .floating');
+      if (floating.hasClass('reverse')) {
         this.props.header.addClass('reverse');
       }
 
+      if (floating.hasClass('short')) {
+        this.props.header.addClass('short');
+      }
+
       // Add any customisations
       for (var nodes=document.querySelector('.floating').childNodes, i=nodes.length - 1; i >= 0; i--) {
         this.props.header.appendChild(nodes[i]);

assets/targets/injection/icons/iconset.es6

@@ -60,6 +60,9 @@ IconSet.prototype.addSymbols = function() {
 <symbol id="icon-zoom-out" viewBox="0 0 48 48"><path d="M32.6,29.2 L30.8,29.2 L30.2,28.6 C32.4,26 33.8,22.6 33.8,18.9 C33.8,10.7 27.1,4 18.9,4 C10.7,4 4,10.7 4,18.9 C4,27.1 10.7,33.8 18.9,33.8 C22.6,33.8 26,32.5 28.6,30.2 L29.2,30.8 L29.2,32.6 L40.6,44 L44,40.6 L32.6,29.2 L32.6,29.2 Z M18.9,29.2 C13.2,29.2 8.6,24.6 8.6,18.9 C8.6,13.2 13.2,8.6 18.9,8.6 C24.6,8.6 29.2,13.2 29.2,18.9 C29.2,24.6 24.6,29.2 18.9,29.2 L18.9,29.2 Z M13.2,17.8 L24.6,17.8 L24.6,20.1 L13.2,20.1 L13.2,17.8 L13.2,17.8 Z"/></symbol>
 <symbol id="icon-north-south" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 24l-8-8h16l-8 8z"/></symbol>
 <symbol id="icon-jobs" viewBox="0 0 48 48"><path d="M40,13 L32,13 L32,9 C32,6.78 30.22,5 28,5 L20,5 C17.78,5 16,6.78 16,9 L16,13 L8,13 C5.78,13 4.02,14.78 4.02,17 L4,39 C4,41.22 5.78,43 8,43 L40,43 C42.22,43 44,41.22 44,39 L44,17 C44,14.78 42.22,13 40,13 L40,13 Z M28,13 L20,13 L20,9 L28,9 L28,13 L28,13 Z"/></symbol>
+<symbol id="icon-videofile" viewBox="0 0 48 48"><path d="M40.3636364,8 L7.63636364,8 C5.61818182,8 4,9.61818182 4,11.6363636 L4,33.4545455 C4,35.4545455 5.61818182,37.0909091 7.63636364,37.0909091 L16.7272727,37.0909091 L16.7272727,40.7272727 L31.2727273,40.7272727 L31.2727273,37.0909091 L40.3636364,37.0909091 C42.3636364,37.0909091 43.9818182,35.4545455 43.9818182,33.4545455 L44,11.6363636 C44,9.61818182 42.3636364,8 40.3636364,8 L40.3636364,8 Z M40.3636364,33.4545455 L7.63636364,33.4545455 L7.63636364,11.6363636 L40.3636364,11.6363636 L40.3636364,33.4545455 L40.3636364,33.4545455 Z M31.2727273,22.5454545 L18.5454545,29.8181818 L18.5454545,15.2727273 L31.2727273,22.5454545 Z"></path></symbol>
+<symbol id="icon-group" viewBox="0 0 48 48"><path d="M32,22 C35.31,22 37.98,19.31 37.98,16 C37.98,12.69 35.31,10 32,10 C28.69,10 26,12.69 26,16 C26,19.31 28.69,22 32,22 L32,22 Z M16,22 C19.31,22 21.98,19.31 21.98,16 C21.98,12.69 19.31,10 16,10 C12.69,10 10,12.69 10,16 C10,19.31 12.69,22 16,22 L16,22 Z M16,26 C11.33,26 2,28.34 2,33 L2,38 L30,38 L30,33 C30,28.34 20.67,26 16,26 L16,26 Z M32,26 C31.42,26 30.77,26.04 30.07,26.11 C32.39,27.78 34,30.03 34,33 L34,38 L46,38 L46,33 C46,28.34 36.67,26 32,26 L32,26 Z"></path></symbol>
+<symbol id="icon-computer" viewBox="0 0 48 48"><path d="M40,36 C42.21,36 43.98,34.21 43.98,32 L44,12 C44,9.79 42.21,8 40,8 L8,8 C5.79,8 4,9.79 4,12 L4,32 C4,34.21 5.79,36 8,36 L0,36 L0,40 L48,40 L48,36 L40,36 L40,36 Z M8,12 L40,12 L40,32 L8,32 L8,12 L8,12 Z"></path></symbol>
 `;
 };