Commit 2b336381 authored by Megan McDermott's avatar Megan McDermott
Browse files

Re-run gulpfile after merge.

parents c465b59f 72087527
# FDSU Responsive Theme # UW FDSU theme responsive (uw_fdsu_theme_resp)
## Node - Gulp - Sass Installation The homepage theme using a combination of:
* [Node](https://www.npmjs.com/)
* currently version 12.16.1
* [gulp](https://gulpjs.com/)
* currently version 4.0.2
## Docker ## Installing tools to compile theme
- Need Nodejs version 6, npm 2.11.2 and gulp version 3.9.1
- Run inside theme directory
```
node --version
npm install -g gulp-cli@1.0.0
apt-get remove nodejs
curl -sL https://deb.nodesource.com/setup_6.x | bash -
apt-get install nodejs=6.14.1-1nodesource1
npm install -g npm@2.11.2
npm install -g gulp@3.9.1
npm install
```
- Check versions
```
node --version
npm --version
gulp --version
```
- Then run `gulp watch`
## Vagrant To install the tools required to compile the theme, ensure that you are in the theme (uw_home_theme) directory:
### Installing sass and compass npm install
- `sudo apt-get install ruby-sass ruby-compass`
### Installing nodejs Once all the modules are installed, and you are still in theme directory, compile the files by running:
- `sudo apt-get install nodejs`
This needs to be 0.10.35 or above.
If you on Ubuntu Server, first do this: gulp
- `sudo apt-get install python-software-properties`
Then, do this: This will also watch the directory for any changes and re-compile as soon as a change is detected.
- `sudo add-apt-repository ppa:chris-lea/node.js` \ No newline at end of file
- `sudo apt-get update`
- `sudo apt-get install nodejs`
Note: if you install `chris-lea/node.js` repo, then it installs npm version
1.4.28 (which you need to upgrade)
### Install npm
- Check if you have npm install by doing `npm -v`
- Install npm 2.1.5+
- It has be know to work on 2.11.2
- `sudo apt-get install npm`
- check version by typing `npm -v`
- once you have npm install, to upgrade run `sudo npm install -g npm@2.11.2`
- you may substitute 2.11.2 with any version #, or `latest`
### Install gulp command line
- `sudo npm install -g gulp`
## Gulp package setup
- inside the theme's root directory run `npm install`. This will install all
dependencies and gulp. You should not need to run this command as sudoer
## Using Gulp
- Using gulpfile.js controls when gulp will do
- The common command to use with SASS is `gulp watch`. This will watch your SASS
folder for any changes. When you save your scss files, gulp will compile 2
files in the css directory. One will be a clean uncompressed stylesheet, the
other one will be compressed
## Using SASS
*Do not edit the css folder. Make all changes inside your SASS folder*
## Troubleshooting
- When setting up the gulp packages, make sure you remove the `node_modules`
folder. If you have this folder then nodejs will think it has downloaded all
of the dependencies already
- Make sure you have the correct permission inside your ~/.npm folder. This is
where nodejs install all of its libraries.
- If you made a mistake and installed something with sudo when you weren't
supposed to, run `sudo chown -R $(whoami) $HOME/.npm` and then `npm cache
clear` before running `npm install` again.
This diff is collapsed.
No preview for this file type
This diff is collapsed.
No preview for this file type
No preview for this file type
...@@ -6,14 +6,54 @@ ...@@ -6,14 +6,54 @@
"use strict"; "use strict";
Drupal.behaviors.fdsuTheme = { Drupal.behaviors.fdsuTheme = {
attach: function (context, settings) { attach: function (context, settings) {
// Prvent scrolling on Body when menu is open. // Prevent scrolling on Body when menu is open.
$('button.rmc-nav__navigation-button').on('click', function () { $('button.rmc-nav__navigation-button').once('uw_home_theme-toggle-no-scroll').on('click', function () {
$('body').toggleClass('no-scroll'); $('html').toggleClass('no-scroll');
}); });
} }
}; };
}(jQuery)); }(jQuery));
(function menuCheck($, window, document) {
'use strict';
$(document).ready(handleDocumentReady);
function handleDocumentReady() {
// apply timeout to the to event firing
// so it fires at end of event.
function debouncer( func ) {
var timeoutID ,
timeout = 200;
return function () {
var scope = this ,
args = arguments;
clearTimeout( timeoutID );
timeoutID = setTimeout( function () {
func.apply( scope , Array.prototype.slice.call( args ) );
} , timeout );
};
}
// Check the width of the screen and
// force the button click if wider that 767px.
function menuCheckWidth() {
// Set screenWidth var
var screenWidth = $(window).width();
if (screenWidth > 767 ) {
if($('html').hasClass('no-scroll')){
$('button.rmc-nav__navigation-button').click();
}
}
}
// Listen to event resize and apply the debouncer
// to the menuCheckWidth function.
$(window).resize(
debouncer( function () {
menuCheckWidth();
}
)
);
}
})(window.jQuery, window, window.document);
// Window height. // Window height.
(function windowHeightAssign($, window) { (function windowHeightAssign($, window) {
'use strict'; 'use strict';
......
This diff is collapsed.
...@@ -7,7 +7,19 @@ ...@@ -7,7 +7,19 @@
* uw_fdsu_theme/css/colors.css * uw_fdsu_theme/css/colors.css
*/ */
$faculties: org_default $uw-black $uw-black $dark-gray url("../images/rwd-home/chevrons-yellow.png") $medium-gray org_default_bg $uw-gold #fffaaa #e4b429 #fdd54f #e4b429, org_ahs $uw-ahs $uw-ahs-light darken($uw-ahs, 9%) url("../images/rwd-home/chevrons-teal.png") $uw-ahs org_ahs_bg #fff #97DFEF #00BED0 #0098A5 #005963, org_art $uw-arts $uw-arts-light darken($uw-arts, 5%) url("../images/rwd-home/chevrons-orange.png") $uw-arts org_art_bg #fff #FFD5A5 #FBAF00 #E78100 #D93F00, org_eng $uw-engineering $uw-engineering-light darken($uw-engineering, 5%) url("../images/rwd-home/chevrons-purple.png") #fff org_eng_bg $uw-engineering-light #D0B4EF #BE33DA #8100B4 #57058B, org_env $uw-environment $uw-environment-light darken($uw-environment, 5%) url("../images/rwd-home/chevrons-green.png") #fff org_env_bg $uw-environment-light #DAF582 #BED500 #B4BE00 #607000, org_mat $uw-math $uw-math-light darken($uw-math, 5%) url("../images/rwd-home/chevrons-pink.png") $uw-math org_mat_bg #fff #FFBEEF #FF63AA #DF2498 #C60078, org_sci $uw-science $uw-science-light darken($uw-science, 5%) url("../images/rwd-home/chevrons-blue.png") $uw-science org_sci_bg #fff #B4D5FF #63A0FF #0073CE #0033BE, org_school $uw-school $uw-schools-light darken($uw-school, 5%) url("../images/rwd-home/chevrons-red.png") $uw-school org_school_bg #fff #FFA5AA #E41740 #B71233 #80001F, org_cgc $uw-cgc $uw-conrad-light darken($uw-cgc, 5%) url("../images/rwd-home/chevrons-cgc.png") $uw-cgc org_cgc_bg #fff #FFA5AA #E41740 #B71233 #80001F, org_ren $uw-ren $uw-renison-light darken($uw-ren, 5%) url("../images/rwd-home/chevrons-ren.png") $uw-ren org_ren_bg #fff #FFA5AA #E41740 #B71233 #80001F, org_stj $uw-stj $uw-st-jeromes-light darken($uw-stj, 5%) url("../images/rwd-home/chevrons-stj.png") $uw-stj org_stj_bg #fff #FFA5AA #E41740 #B71233 #80001F, org_stp $uw-stp $uw-st-pauls-light darken($uw-stp, 5%) url("../images/rwd-home/chevrons-stp.png") $uw-stp org_stp_bg #fff #FFA5AA #E41740 #B71233 #80001F; $faculties:
org_default $uw-black $uw-black $dark-gray url("../images/rwd-home/chevrons-yellow.png") $medium-gray org_default_bg $uw-gold #fffaaa #e4b429 #fdd54f #e4b429,
org_ahs $uw-ahs $uw-ahs-light darken($uw-ahs, 9%) url("../images/rwd-home/chevrons-teal.png") $uw-ahs org_ahs_bg #fff #97DFEF #00BED0 #0098A5 #005963,
org_art $uw-arts $uw-arts-light darken($uw-arts, 5%) url("../images/rwd-home/chevrons-orange.png") $uw-arts org_art_bg #fff #FFD5A5 #FBAF00 #E78100 #D93F00,
org_eng $uw-engineering $uw-engineering-light darken($uw-engineering, 5%) url("../images/rwd-home/chevrons-purple.png") #fff org_eng_bg #fff #D0B4EF #BE33DA #8100B4 #57058B,
org_env $uw-environment $uw-environment-light darken($uw-environment, 5%) url("../images/rwd-home/chevrons-green.png") #fff org_env_bg #fff #DAF582 #BED500 #B4BE00 #607000,
org_mat $uw-math $uw-math-light darken($uw-math, 5%) url("../images/rwd-home/chevrons-pink.png") $uw-math org_mat_bg #fff #FFBEEF #FF63AA #DF2498 #C60078,
org_sci $uw-science $uw-science-light darken($uw-science, 5%) url("../images/rwd-home/chevrons-blue.png") $uw-science org_sci_bg #fff #B4D5FF #63A0FF #0073CE #0033BE,
org_school $uw-school $uw-schools-light darken($uw-school, 5%) url("../images/rwd-home/chevrons-red.png") $uw-school org_school_bg #fff #FFA5AA #E41740 #B71233 #80001F,
org_cgc $uw-cgc $uw-conrad-light darken($uw-cgc, 5%) url("../images/rwd-home/chevrons-cgc.png") $uw-cgc org_cgc_bg #fff #FFA5AA #E41740 #B71233 #80001F,
org_ren $uw-ren $uw-renison-light darken($uw-ren, 5%) url("../images/rwd-home/chevrons-ren.png") $uw-ren org_ren_bg #fff #FFA5AA #E41740 #B71233 #80001F,
org_stj $uw-stj $uw-st-jeromes-light darken($uw-stj, 5%) url("../images/rwd-home/chevrons-stj.png") $uw-stj org_stj_bg #fff #FFA5AA #E41740 #B71233 #80001F,
org_stp $uw-stp $uw-st-pauls-light darken($uw-stp, 5%) url("../images/rwd-home/chevrons-stp.png") $uw-stp org_stp_bg #fff #FFA5AA #E41740 #B71233 #80001F;
body { body {
@each $faculty in $faculties { @each $faculty in $faculties {
...@@ -152,55 +164,48 @@ body { ...@@ -152,55 +164,48 @@ body {
} }
} }
} }
.expandable h2:first-child div[role="button"] ,
.expandable h2:first-child button,
.expandable-controls button { .expandable-controls button {
color: nth($faculty, 8); color: nth($faculty, 8);
background-color: nth($faculty, 2); background-color: nth($faculty, 2);
border:2px solid nth($faculty, 2);
&:after {
color: nth($faculty, 8);
}
&:hover,&:focus{
background-color:$white;
border:2px solid #fafafa;
&:hover,
&:focus {
background-color: nth($faculty, 8);
color: nth($faculty, 2); color: nth($faculty, 2);
&:after {
a {
color: nth($faculty, 2); color: nth($faculty, 2);
} }
a {
&:after {
color: nth($faculty, 2); color: nth($faculty, 2);
&:hover,
&:focus{
color: nth($faculty, 2);
text-decoration:none!important;
}
}
&[aria-expanded="true"]
{
border-bottom:2px solid transparent;
} }
} }
&:after {
color: nth($faculty, 8);
}
}
.expandable h2:first-child button,
.expandable-controls button {
a { a {
color: nth($faculty, 8); color: nth($faculty, 8);
text-decoration:underline!important;
@include uw-transition($delay: 0s, $duration:200ms, $timing:'linear', $property: (color, background-color,border-color,opacity));
&:hover { &:hover {
color: nth($faculty, 2); color: nth($faculty, 8);
text-decoration:none;
} }
&:focus { &:focus {
color: nth($faculty, 8); color: nth($faculty, 8);
} text-decoration:none;
}
}
.expandable > h2 {
&:first-child {
button {
&:hover,
&:focus {
&:after {
color: nth($faculty, 2);
}
}
} }
} }
} }
......
...@@ -787,6 +787,7 @@ ...@@ -787,6 +787,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 3.563rem; min-height: 3.563rem;
table-layout: fixed;
button, div[role="button"] { button, div[role="button"] {
padding: 0.75rem; padding: 0.75rem;
...@@ -795,6 +796,12 @@ ...@@ -795,6 +796,12 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
user-select: text; user-select: text;
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
padding-right: 3rem;
&:after { &:after {
position: absolute; position: absolute;
...@@ -816,7 +823,7 @@ ...@@ -816,7 +823,7 @@
transform: scale(1, 1) rotate(90deg); transform: scale(1, 1) rotate(90deg);
text-align: center; text-align: center;
@include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform)); @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (transform));
} }
&:hover {} &:hover {}
...@@ -831,7 +838,7 @@ ...@@ -831,7 +838,7 @@
&:hover, &:hover,
&:focus { &:focus {
&:after { &:after {
color: $white; //color: $white;
} }
} }
...@@ -883,7 +890,7 @@ ...@@ -883,7 +890,7 @@
-ms-transform: scale(1, -1) rotate(90deg); -ms-transform: scale(1, -1) rotate(90deg);
transform: scale(1, -1) rotate(90deg); transform: scale(1, -1) rotate(90deg);
@include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform)); @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (transform));
} }
} }
} }
...@@ -1687,10 +1694,10 @@ ...@@ -1687,10 +1694,10 @@
} }
// expand collapse overwrite // expand collapse overwrite
body.org_cgc .expandable h2:first-child [role="button"], body.org_cgc .expandable-controls button, body.org_cgc .expandable h2:first-child div[role="button"], body.org_cgc .expandable-controls button,
body.org_ren .expandable h2:first-child [role="button"], body.org_ren .expandable-controls button, body.org_ren .expandable h2:first-child div[role="button"], body.org_ren .expandable-controls button,
body.org_stj .expandable h2:first-child [role="button"], body.org_stj .expandable-controls button, body.org_stj .expandable h2:first-child div[role="button"], body.org_stj .expandable-controls button,
body.org_stp .expandable h2:first-child [role="button"], body.org_stp .expandable-controls button { body.org_stp .expandable h2:first-child div[role="button"], body.org_stp .expandable-controls button {
&:hover, &:hover,
&:focus { &:focus {
color: $lighter-gray; color: $lighter-gray;
...@@ -1714,13 +1721,18 @@ body.org_stp .expandable h2:first-child [role="button"], body.org_stp .expandabl ...@@ -1714,13 +1721,18 @@ body.org_stp .expandable h2:first-child [role="button"], body.org_stp .expandabl
} }
} }
body.org_default .expandable h2:first-child [role="button"], body.org_default .expandable-controls button { body.org_default .expandable h2:first-child div[role="button"],
body.org_default .expandable-controls button {
background-color: $lighter-gray; background-color: $lighter-gray;
color: $dark-gray; color: $dark-gray;
border:none !important;
&:hover, &:focus { &:hover, &:focus {
color: $lighter-gray; color: $lighter-gray;
background-color: $dark-gray; background-color: $dark-gray;
border:none !important;
&:after {
color: $white;
}
} }
&:after { &:after {
...@@ -1728,8 +1740,9 @@ body.org_default .expandable h2:first-child [role="button"], body.org_default .e ...@@ -1728,8 +1740,9 @@ body.org_default .expandable h2:first-child [role="button"], body.org_default .e
} }
} }
body.org_default .expandable h2:first-child [role="button"], body.org_default .expandable h2:first-child div[role="button"],
body.org_default .expandable-controls button { body.org_default .expandable-controls button {
border:none !important;
a { a {
color: $dark-gray; color: $dark-gray;
......
...@@ -136,12 +136,14 @@ fieldset { ...@@ -136,12 +136,14 @@ fieldset {
> legend { > legend {
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
padding-top: 1rem; padding-top: 1rem;
} }
} }
> legend { > legend {
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
padding-top: 1rem; padding-top: 1rem;
font-weight:400;
} }
} }
......
...@@ -3,7 +3,7 @@ ol { ...@@ -3,7 +3,7 @@ ol {
list-style: disc outside none; list-style: disc outside none;
padding-left: 2rem; padding-left: 2rem;
margin-left: 1rem; margin-left: 1rem;
//overflow: hidden; overflow: hidden;
zoom: 1; zoom: 1;
li { li {
......
body.no-scroll { html.no-scroll {
position: fixed; position: fixed;
overflow: hidden; overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
;
} }
body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__content-wrapper { body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__content-wrapper {
top: 6.8rem; top:inherit;
} }
.uw-header--global .rmc-nav { .uw-header--global .rmc-nav {
@include media($medium-screen) { @include media($medium-screen) {
display: none; display: none;
} }
...@@ -27,6 +34,7 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co ...@@ -27,6 +34,7 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co
.navigation-button[aria-expanded=true] ~ .rmc-nav__content-wrapper { .navigation-button[aria-expanded=true] ~ .rmc-nav__content-wrapper {
transform: translate(100vw, 0); transform: translate(100vw, 0);
overflow-x: hidden; overflow-x: hidden;
} }
.toggle-sub[aria-expanded=true]:before { .toggle-sub[aria-expanded=true]:before {
transform: rotate(180deg); transform: rotate(180deg);
...@@ -182,7 +190,7 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co ...@@ -182,7 +190,7 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co
.toggle { .toggle {
position: absolute; position: absolute;
right: 0.6em; right: 0.6rem;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
} }
...@@ -222,35 +230,52 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co ...@@ -222,35 +230,52 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co
} }
ul { ul {
background: $uw-black; background: $uw-black;
line-height: 2.75rem; line-height: 2.75rem;
text-decoration: none; text-decoration: none;
padding: 0 0 9.67rem 0; padding: 0 0 9.67rem 0;
list-style: none; list-style: none;
} /* Ensure the is no overflow at play on the list. */
overflow:inherit;
li a { }
li a {
margin-right: 0; margin-right: 0;
line-height: 1.5rem; line-height: 1.5rem;
text-decoration: none; text-decoration: none;
} padding-right:2rem;
li a:hover, }
li a:focus, /* Adding padding to push away from the expand arrow.*/
a.active, li.expanded{
.toggle-sub:hover { a{
background: $uw-primary-colour; padding-right:4.25rem;
color: $uw-white }
}
/* Adding the 2rem of padding to back last instance */
li.expanded.sub-nav-parent-view{
li:last-child.first.last.leaf{
a{
padding-right:2rem;
}
} }
.toggle-sub { }
font-family: fdsu-rwd; li a:hover,
font-weight: 700; li a:focus,
padding: 1rem 2rem .95rem 1rem; a.active,
right: 1rem; .toggle-sub:hover {
&:before { background: $uw-primary-colour;
content: "\e908"; color: $uw-white
padding: 0; }
.toggle-sub {
font-family: fdsu-rwd;
font-weight: 700;
padding: 1rem 2rem .95rem 1rem;
right: 1rem;
height: 100%;
&:before {
content: "\e908";
padding: 0;
} }
} }
} }
...@@ -272,3 +297,4 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co ...@@ -272,3 +297,4 @@ body.navbar-administration .navigation-button[aria-expanded=true] ~ .rmc-nav__co
} }
!function(i){"use strict";Drupal.behaviors.fdsuTheme={attach:function(t,e){i("button.rmc-nav__navigation-button").on("click",function(){i("body").toggleClass("no-scroll")})}}}(jQuery),function(e,i){"use strict";e(i).load(function(){e(i);var t=e(i).innerHeight()/2;e(".uw-site--main").css("min-height",t)})}(window.jQuery,window),function(t,e){"use strict";t(e).ready(function(){t("body").hasClass("front")&&t("#site-sidebar-wrapper").clone().appendTo("#block-system-main")})}(window.jQuery,(window,window.document)),function(t,s){"use strict";t(s).load(function(){var t=s.navigator.userAgent,e=t.indexOf("MSIE "),i=t.indexOf("Trident/");if(-1<e||-1<i)return!0})}(window.jQuery,window),function(t,e){"use strict";t(e).load(function(){return"ontouchstart"in e||"onmsgesturechange"in e})}(window.jQuery,window),function(t,e){"use strict";t(e).ready(function(){t.browser