Commit 90049112 authored by m26lebla's avatar m26lebla
Browse files

bringing branch to 7.x-1.x and applying my changes on top

parent 103cd075
# 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
- 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`
## Installing tools to compile theme
## 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
- `sudo apt-get install ruby-sass ruby-compass`
npm install
### Installing nodejs
- `sudo apt-get install nodejs`
This needs to be 0.10.35 or above.
Once all the modules are installed, and you are still in theme directory, compile the files by running:
If you on Ubuntu Server, first do this:
- `sudo apt-get install python-software-properties`
gulp
Then, do this:
- `sudo add-apt-repository ppa:chris-lea/node.js`
- `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 will also watch the directory for any changes and re-compile as soon as a change is detected.
\ No newline at end of file
This diff is collapsed.
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 @@
"use strict";
Drupal.behaviors.fdsuTheme = {
attach: function (context, settings) {
// Prvent scrolling on Body when menu is open.
$('button.rmc-nav__navigation-button').on('click', function () {
// Prevent scrolling on Body when menu is open.
$('button.rmc-nav__navigation-button').once('uw_home_theme-toggle-no-scroll').on('click', function () {
$('html').toggleClass('no-scroll');
});
}
};
}(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.
(function windowHeightAssign($, window) {
'use strict';
......
This diff is collapsed.
......@@ -7,7 +7,19 @@
* 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 {
@each $faculty in $faculties {
......@@ -152,55 +164,48 @@ body {
}
}
}
.expandable h2:first-child button,
.expandable h2:first-child div[role="button"] ,
.expandable-controls button {
color: nth($faculty, 8);
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);
a {
&:after {
color: nth($faculty, 2);
}
&:after {
a {
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 {
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 {
color: nth($faculty, 2);
color: nth($faculty, 8);
text-decoration:none;
}
&:focus {
color: nth($faculty, 8);
}
}
}
.expandable > h2 {
&:first-child {
button {
&:hover,
&:focus {
&:after {
color: nth($faculty, 2);
}
}
text-decoration:none;
}
}
}
......@@ -263,12 +268,6 @@ body {
}
}
.uw-territorial{
a{
color: $yellow-dark;
}
}
.responsive-nav-menu {
a {
color: $white;
......
......@@ -542,6 +542,8 @@
.node-type-uw-event &,
.page-about-people &,
.page-people-profiles &,
.node-type-uw-embedded-facts-and-figures &,
.node-type-uw-ct-single-page-home &,
.page-taxonomy &,
.node-type-uw-ct-person-profile &,
.node-type-contact & {
......@@ -652,6 +654,8 @@
.node-type-uw-event &,
.page-about-people &,
.page-people-profiles &,
.node-type-uw-embedded-facts-and-figures &,
.node-type-uw-ct-single-page-home &,
.page-taxonomy &,
.node-type-uw-ct-person-profile &,
.node-type-contact & {
......@@ -783,6 +787,7 @@
width: 100%;
height: auto;
min-height: 3.563rem;
table-layout: fixed;
button, div[role="button"] {
padding: 0.75rem;
......@@ -791,6 +796,12 @@
display: table-cell;
vertical-align: middle;
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 {
position: absolute;
......@@ -812,7 +823,7 @@
transform: scale(1, 1) rotate(90deg);
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 {}
......@@ -827,7 +838,7 @@
&:hover,
&:focus {
&:after {
color: $white;
//color: $white;
}
}
......@@ -879,7 +890,7 @@
-ms-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));
}
}
}
......@@ -1040,6 +1051,8 @@
.page-about-people &,
.page-people-profiles &,
.node-type-uw-embedded-facts-and-figures &,
.node-type-uw-ct-single-page-home &,
.node-type-uw-news-item &,
.node-type-uw-event &,
.page-taxonomy-term &,
......@@ -1071,6 +1084,7 @@
.node-type-uw-event &,
.page-about-people &,
.page-people-profiles &,
.node-type-uw-embedded-facts-and-figures &,
.page-taxonomy &,
.node-type-uw-ct-person-profile &,
.node-type-contact &,
......@@ -1680,10 +1694,10 @@
}
// expand collapse overwrite
body.org_cgc .expandable h2:first-child [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_stj .expandable h2:first-child [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_cgc .expandable h2:first-child div[role="button"], body.org_cgc .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 div[role="button"], body.org_stj .expandable-controls button,
body.org_stp .expandable h2:first-child div[role="button"], body.org_stp .expandable-controls button {
&:hover,
&:focus {
color: $lighter-gray;
......@@ -1707,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;
color: $dark-gray;
border:none !important;
&:hover, &:focus {
color: $lighter-gray;
background-color: $dark-gray;
border:none !important;
&:after {
color: $white;
}
}
&:after {
......@@ -1721,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 {
border:none !important;
a {
color: $dark-gray;
......
......@@ -136,12 +136,14 @@ fieldset {
> legend {
margin-bottom: 0.7rem;
padding-top: 1rem;
}
}
> legend {
margin-bottom: 0.7rem;
padding-top: 1rem;
font-weight:400;
}
}
......
......@@ -3,7 +3,7 @@ ol {
list-style: disc outside none;
padding-left: 2rem;
margin-left: 1rem;
//overflow: hidden;
overflow: hidden;
zoom: 1;
li {
......
......@@ -679,7 +679,7 @@ picture {
float: left;
// padding:1rem 1rem 1rem 0;
}
&.block {
......@@ -1292,7 +1292,7 @@ div.uw-site-footer1--logo-dept {
&:after {
// content: ' »'; color: #FFF; text-decoration: none;
}
}
}
......
......@@ -60,7 +60,7 @@
color: $white;
// display:block;
}
@include flex(1);
......
$highlighted-fact-bg-color: $lighter-gray;
$highlighted-fact-color: $uw-black;
$highlighted-fact-bg-color: $light-gray;
$highlighted-fact-color: $uw-gray;
$color-ff: uwaterloo #fffaaa #fdd54f #fdd54f $dark-gray, ahs #97DFEF #00BED0 #0098A5 #005963, arts #FFD5A5 #FBAF00 #E78100 #D93F00, engineering #D0B4EF #BE33DA #8100B4 #57058B, environment #DAF582 #BED500 #B4BE00 #607000, math #FFBEEF #FF63AA #DF2498 #C60078, science #B4D5FF #63A0FF #0073CE #0033BE, org_school #FFA5AA #E41740 #B71233 #80001F, org_cgc #FFA5AA #E41740 #B71233 #80001F, org_ren #FFA5AA #E41740 #B71233 #80001F, org_stj #FFA5AA #E41740 #B71233 #80001F, org_stp #FFA5AA #E41740 #B71233 #80001F;
//faculty / uw colors
$faculty-colors: (".uwdefault": $dark-gray, ".ahs": #005963, ".arts": #D93F00, ".engineering": #57058B, ".environment": #607000, ".math": #C60078, ".science": #0033BE);
......@@ -9,9 +9,11 @@ $faculty-colors: (".uwdefault": $dark-gray, ".ahs": #005963, ".arts": #D93F00, "
@return map-get($faculty-colors, $key);
}
// $highlighted-fact-color: faculty-color('.math'); // #8e3329
//fonts
$highlighted-fact-font: $base-font-family;
$highlighted-fact-font-big: $heading-font-family;
$highlighted-fact-font-big: $condensed-font-family;
$highlighted-fact-font-medium: $highlighted-fact-font;
$highlighted-fact-font-small: $font-1451-medium;
$highlighted-fact-font-caption: $serif-font-family;
......@@ -22,6 +24,10 @@ $global-rounded: 1000px;
$highlighted-fact-radius: $global-radius;
$highlighted-fact-round: $global-rounded;
// $highlighted-fact-color: faculty-color('.math'); // #8e3329
$highlighted-fact-color-tinted: mix(white, $highlighted-fact-color, 10%);
$highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);
//ul
.highlighted-fact-wrapper {
width: 100%;
......@@ -33,7 +39,9 @@ $highlighted-fact-round: $global-rounded;
list-style-type: none;
clear: both;
&.black {}
.uwm-article-body & {
padding: 0;
}
}
.data-usecarousel,
......@@ -42,14 +50,24 @@ $highlighted-fact-round: $global-rounded;
height: 0;
}
/* Override default display: block from owl script.
Ensures bubbles are the same height .
*/
.ff-with-bubbles .owl-wrapper,
.ff-with-bubbles .owl-item {
display: flex !important;
}
%highlighted-fact {
text-align: center;
font-weight: 300;
border-radius: $highlighted-fact-radius + 10;
display: block;
display: flex;
flex-direction: column;
padding: 1rem;
margin: 0 1rem;
position: relative;
min-height: 20rem;
width: 100%;
img {
margin: 0 auto;
......@@ -59,14 +77,6 @@ $highlighted-fact-round: $global-rounded;
width: auto;
}
&.no-icon {
span {
&:first-child {
margin-top: 4rem;
}
}
}
span {
text-align: center;
clear: both;
......@@ -76,8 +86,8 @@ $highlighted-fact-round: $global-rounded;
}
.highlighted-fact-tall {
border-top: 1px solid $gray;
color: $gray;
border-top: 1px solid $medium-gray;
color: $medium-gray;
padding-top: 3rem;
span {}
......@@ -85,139 +95,143 @@ $highlighted-fact-round: $global-rounded;
@include media($medium-screen) {
padding-left: 1.5rem;
border-top: 1px solid $white;
border-left: 1px solid $gray;
border-left: 1px solid $medium-gray;
}
}
.highlighted-fact {
@extend %highlighted-fact;
.ff-with-bubbles .grey & {
$highlighted-fact-bg-color: $lighter-gray;
.ff-with-bubbles & {
background-color: $highlighted-fact-bg-color;
}
.highlighted-fact-text-big, .highlighted-fact-text-medium, .highlighted-fact-caption {
color: $uw-black;
}
$highlighted-fact-color: faculty-color(".uwdefault");
.highlighted-fact-text-small {
background-color: $uw-gold;
color: $uw-black;
}
.highlighted-fact-caption {
p {
color: $uw-black;
}
.highlighted-fact-infographic .graph {
background-color: $uw-gold;
}
.highlighted-fact-text-big,
.highlighted-fact-text-medium {
color: $uw-black;
}
.ahs &,
&.ahs {
.highlighted-fact-text-big, .highlighted-fact-text-medium, .highlighted-fact-caption {
color: faculty-color(".ahs");
$highlighted-fact-color: faculty-color(".ahs");
.highlighted-fact-text-big,
.highlighted-fact-text-medium {
color: $highlighted-fact-color;
}
.highlighted-fact-text-small {
background-color: faculty-color(".ahs");
background-color: $highlighted-fact-color;
color: white;
}
.highlighted-fact-caption {
p {
color: $uw-black;
}
.highlighted-fact-infographic .graph {
background-color: $highlighted-fact-color;
}
}
.arts &,
&.arts {