Merge pull request #880 from kabel/notice-cleanup

Update Notice Module and Module CSS loading API
unl · Aug 28, 2015 · 81aa4cb · 81aa4cb
2 parents fa02e9e + 1b34c1c
commit 81aa4cb
Show file tree

Hide file tree

Showing 21 changed files with 265 additions and 220 deletions.
diff --git a/debug.shtml b/debug.shtml
@@ -94,30 +94,6 @@
             <div id="maincontent" class="wdn-main">
                 <!--THIS IS THE MAIN CONTENT AREA; WDN: see glossary item 'main content area' -->
                 <!-- InstanceBeginEditable name="maincontentarea" -->
-                <div class="wdn-band">
-                    <div class="wdn-inner-wrapper">
-                    	<a class="wdn-button" id="playme">Play Video</a>
-                    	<div style="display:none">
-                        <video class="wdn_player" src="http://mediahub.unl.edu/uploads/9c6b955c1f7a4ad858720ab64e72594c.mp4">
-      <track srclang="en" kind="subtitles" src="http://mediahub.unl.edu/media/3814/srt" />
-    </video>
-    <script>
-    require(['wdn', 'jquery'], function(WDN, $) {
-    	var player;
-
-    	$('#playme').click(function() {
-    		$(this).next().toggle();
-    		player.play();
-    	});
-
-    	WDN.initializePlugin('mediaelement_wdn', [function() {
-    		player = $('video.wdn_player').data('mediaelementplayer');
-    	}]);
-    });
-    </script>
-    	</div>
-                    </div>
-                </div>
                 <div class="wdn-band wdn-light-triad-band">
                     <div class="wdn-inner-wrapper">
                         <a href="#" class="wdn-button">This is my button</a> 
@@ -159,7 +135,7 @@
                 <div class="wdn-band wdn-band-neutral-seperator">
                     <div class="wdn-inner-wrapper">
 
-                        <h1><span class="wdn-subhead">Roof party freegan lomo</span> Dreamcatcher mumblecore sartorial bitters. Artisan bitters photo booth, American Apparel Bushwick PBR&B salvia Echo Park.</h1>
+                        <h1><span class="wdn-subhead">Roof party freegan lomo</span> Dreamcatcher mumblecore sartorial bitters. Artisan bitters photo booth, American Apparel Bushwick PBR&amp;B salvia Echo Park.</h1>
 
                         <p><a href="#">Before</a> they sold out Truffaut whatever scenester cred forage Odd Future Schlitz tote bag. Cosby sweater selvage whatever, Carles tofu meh vegan pickled Marfa. Thundercats kitsch post-ironic XOXO, +1 wolf kale chips Odd Future try-hard banjo selvage forage flexitarian ethnic.</p>
 
@@ -205,7 +181,7 @@
 
 
 
-                        <h1>Dreamcatcher mumblecore sartorial bitters. Artisan bitters photo booth, American Apparel Bushwick PBR&B salvia Echo Park. <span class="wdn-subhead">Roof party freegan lomo</span></h1>
+                        <h1>Dreamcatcher mumblecore sartorial bitters. Artisan bitters photo booth, American Apparel Bushwick PBR&amp;B salvia Echo Park. <span class="wdn-subhead">Roof party freegan lomo</span></h1>
 
                         <p>Before they sold out Truffaut whatever scenester cred forage Odd Future Schlitz tote bag. Cosby sweater selvage whatever, Carles tofu meh vegan pickled Marfa. Thundercats kitsch post-ironic XOXO, +1 wolf kale chips Odd Future try-hard banjo selvage forage flexitarian ethnic.</p>
 

diff --git a/wdn/templates_4.0/examples/notice.html b/wdn/templates_4.0/examples/notice.html
@@ -6,15 +6,12 @@
 </head>
 <body data-version="4.0">
     <div id="example-code">
-<script type="text/javascript">
-WDN.initializePlugin('notice');
-</script>
 <div class="wdn_notice">
     <div class="close">
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>This is my Title!</h4>
+        <p class="title">This is my Title!</p>
         <p>This is my content. <a href="#">This is some link text</a>.</p>
     </div>
 </div>
@@ -23,7 +20,7 @@ <h4>This is my Title!</h4>
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>Great Success!</h4>
+        <p class="title">Great Success!</p>
         <p>This is my content. <a href="#">This is some link text</a></p>
     </div>
 </div>
@@ -32,7 +29,7 @@ <h4>Great Success!</h4>
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>Denial Notice!</h4>
+        <p class="title">Denial Notice!</p>
         <p>This is my content. <a href="#">This is some link text</a></p>
     </div>
 </div>
@@ -41,28 +38,31 @@ <h4>Denial Notice!</h4>
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>Important Alert!</h4>
+        <p class="title">Important Alert!</p>
         <p>This is my content. <a href="#">This is some link text</a></p>
     </div>
 </div>
-<div class="wdn_notice overlay-header duration-10">
+<div class="wdn_notice" data-overlay="header" data-duration="10">
     <div class="close">
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>I'm Floating!</h4>
-        <p>This notice has classes <em>overlay-header</em> and <em>duration-10</em> and will vanish on its own.</p>
+        <p class="title">I'm Floating!</p>
+        <p>This notice overlays the header and will vanish on its own in 10 seconds.</p>
     </div>
 </div>
-<div class="wdn_notice affirm overlay-maincontent duration-15">
+<div class="wdn_notice affirm" data-overlay="maincontent" data-duration="15">
     <div class="close">
         <a href="#" title="Close this notice">Close this notice</a>
     </div>
     <div class="message">
-        <h4>Success!</h4>
-        <p>This notice has classes <em>affirm</em>, <em>overlay-maincontent</em>, and <em>duration-15</em></p>
+        <p class="title">Success!</p>
+        <p>This notice overlays the maincontent and will vanish on its own in 15 seconds.</p>
     </div>
 </div>
+<script type="text/javascript">
+WDN.initializePlugin('notice');
+</script>
 </div>
 </body>
 </html>
diff --git a/wdn/templates_4.0/less/layouts/bands.less b/wdn/templates_4.0/less/layouts/bands.less
@@ -1,25 +1,39 @@
 // implement the same content padding
 #maincontent > * {
-    padding-left: @mobile-pad;
-    padding-right: @mobile-pad;
+    margin-left: @mobile-pad;
+    margin-right: @mobile-pad;
+
+    @media @bp3 {
+    	max-width: 60rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 .wdn-band {
     max-width: 100% !important; //important is required to overpower the wildcard selector above
     clear: both;
 
     #maincontent > *& {
-        padding: 0;
+        margin: 0;
     }
 
     .wdn-inner-wrapper {
         .clear-fix();
-        padding: 0 @mobile-pad;
+        padding-left: @mobile-pad;
+        padding-right: @mobile-pad;
 
         @media @bp3 {
-            padding: 0;
+            padding-left: 0;
+            padding-right: 0;
+            width: 60rem;
+        	margin: 0 auto;
+        }
+
+        .wdn-text-band& {
+        	max-width: 50rem;
         }
-        
+
         #maincontent & {
             padding-top: 2.369em;
             padding-bottom: 2.532em;
@@ -63,7 +77,7 @@
             }
         }
     }
-    
+
     .wdn-stretch { // Use this class for presentational elements that stretch the full-width of the band
         max-width: 100%;
         width: 100%;
@@ -73,31 +87,3 @@
         text-align: center;
     }
 }
-
-@media @bp3 {
-    #maincontent {
-
-        > * {
-            max-width: 60rem;
-            margin-left: auto;
-            margin-right: auto;
-            padding-left: 0;
-            padding-right: 0;
-        }
-    }
-
-    .wdn-band {
-
-        .wdn-inner-wrapper {
-            width: 60rem;
-            margin: 0 auto;
-        }
-    }
-
-    .wdn-text-band {
-
-        .wdn-inner-wrapper {
-            max-width: 50rem;
-        }
-    }
-}
diff --git a/wdn/templates_4.0/less/modules/notices.less b/wdn/templates_4.0/less/modules/notices.less
@@ -2,7 +2,7 @@
 
 .colorize-notice(@color) {
     background-color: @color;
-    .transition(all ease-out 0.2s);
+    .transition(background ease-out 0.2s);
 
     &:hover {
         background-color: darken(@color, 2%);
@@ -24,10 +24,6 @@
     box-shadow: 0 1px 1px 0 fadeout(#000, 50%);
     .colorize-notice(@triad);
 
-    #maincontent > & {
-        padding: 1em 1em 0.75em;
-    }
-
     .close {
         color: #fff;
 
@@ -45,18 +41,18 @@
             padding: 0 0 0 4.209em;
         }
 
-        h4, p {
+        * {
             margin: 0;            
-            color: #fff;
+            color: inherit;
         }
 
-        h4 {
-            padding: 0;
+        h4, .title {
+        	// match .wdn-sans-caps
             .sans-serif-font;
 		    line-height: 1.333;
 		    text-transform: uppercase;
 		    letter-spacing: 0.02em;  
-    		.rem(13,16);
+    		font-size: inherit;
         }
 
         &:before {
@@ -75,10 +71,6 @@
                 width: 54px;                
             }
         }
-
-        a, a:hover {
-            color: #fff;
-        }
     }
 
     &.affirm {
@@ -150,19 +142,27 @@
         }
     }
 
-    &[class^="duration"] {
-        position: absolute;
-    }
-
-    &.overlay-header,
-    #maincontent > &.overlay-maincontent {
+    &.overlay {
         position: absolute;
         left: @mobile-pad;
         right: @mobile-pad;
         top: 51px;
-        margin: 0 auto;
-        max-width: 52rem;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 50rem;
         z-index: (@nav-z-index + 2); // above nav
         text-align: left;
+
+        @media @bp3 {
+        	left: 0;
+        	right: 0;
+        }
+
+        // override the core max-width to be slimmer
+        #maincontent > & {
+	        margin-left: auto;
+	        margin-right: auto;
+        	max-width: 50rem;
+        }
     }
 }
diff --git a/wdn/templates_4.0/scripts/band_imagery.js b/wdn/templates_4.0/scripts/band_imagery.js
@@ -175,7 +175,7 @@ define(['jquery', 'wdn'], function($, WDN) {
 
 	var Plugin = {
 		initialize : function() {
-			WDN.loadCSS(WDN.getTemplateFilePath('css/modules/band_imagery.css'));
+			WDN.loadCSS(WDN.getTemplateFilePath('css/modules/band_imagery.css', true, true));
 			$('.wdn-scroll-watch').parent().css('position', 'relative');
 			imageryUpdate();
 			$(window).load(imageryUpdate).scroll(function() {

diff --git a/wdn/templates_4.0/scripts/carousel.js b/wdn/templates_4.0/scripts/carousel.js
@@ -6,7 +6,7 @@
 define(['wdn', 'require', 'jquery'], function(WDN, require, $) {
 	var defaultSel = '#wdn_Carousel',
 	flexCls = 'flexslider',
-	pluginPath = './plugins/flexslider/',
+	pluginPath = 'plugins/flexslider/',
 	initd = false;
 
 	return {
@@ -28,10 +28,10 @@ define(['wdn', 'require', 'jquery'], function(WDN, require, $) {
 			};
 
 			if (!initd) {
-				WDN.loadCSS(require.toUrl(pluginPath + 'css/flexslider.css'));
+				WDN.loadCSS(WDN.getTemplateFilePath('scripts/' + pluginPath + 'css/flexslider.css', true, true));
 
 				WDN.loadJQuery(function(){
-					require([pluginPath + 'jquery.flexslider' + min], done);
+					require(['./' + pluginPath + 'jquery.flexslider' + min], done);
 				});
 			} else {
 				done();

diff --git a/wdn/templates_4.0/scripts/events-band.js b/wdn/templates_4.0/scripts/events-band.js
@@ -76,7 +76,7 @@ define(['jquery', 'wdn', 'require', 'moment'], function($, WDN, require, moment)
         localConfig = $.extend({}, defaultConfig, config);
 
         if (localConfig.url && $(localConfig.container).length) {
-            WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/events-band.css'));
+            WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/events-band.css', true, true));
             fetchEvents(localConfig);
         }
     };

diff --git a/wdn/templates_4.0/scripts/events.js b/wdn/templates_4.0/scripts/events.js
@@ -82,7 +82,7 @@ define(['jquery', 'wdn', 'require', 'moment'], function($, WDN, require, moment)
 
 		if (localConfig.url && $(localConfig.container).length) {
 			$(this.container).addClass('wdn-calendar');
-			WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/events.css'));
+			WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/events.css', true, true));
 			$.getJSON(localConfig.url + 'upcoming/?format=json&limit=' + encodeURIComponent(localConfig.limit), function(data) {
 					display(data, localConfig);
 				}

diff --git a/wdn/templates_4.0/scripts/extlatin.js b/wdn/templates_4.0/scripts/extlatin.js
@@ -20,7 +20,7 @@ define(['jquery', 'wdn', 'require'], function($, WDN, require) {
             $('head').append($extlatin);
 
             // Load WDN small caps styles
-            WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/extlatin.css'));
+            WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/extlatin.css', true, true));
         }
     };
 });
diff --git a/wdn/templates_4.0/scripts/form_validation.js b/wdn/templates_4.0/scripts/form_validation.js
@@ -1,7 +1,7 @@
 define(['wdn', 'require'], function(WDN, require) {
 	return {
 		initialize: function(callback) {
-			WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/formvalidator.css'));
+			WDN.loadCSS(WDN.getTemplateFilePath('css/layouts/formvalidator.css', true, true));
 			WDN.loadJQuery(function() {
 				require(['plugins/validator/jquery.validator.min'], callback);
 			});

diff --git a/wdn/templates_4.0/scripts/jqueryui.js b/wdn/templates_4.0/scripts/jqueryui.js
@@ -1,5 +1,5 @@
 define(['wdn', 'require'], function(WDN, require) {
-	var pluginPath = './plugins/ui/';
+	var pluginPath = 'plugins/ui/';
 
 	return {
 		initialize: function(callback) {
@@ -8,9 +8,9 @@ define(['wdn', 'require'], function(WDN, require) {
 				min = '.min';
 			}
 
-			WDN.loadCSS(require.toUrl(pluginPath + 'css/jquery-ui' + min + '.css'));
+			WDN.loadCSS(WDN.getTemplateFilePath('scripts/' + pluginPath + 'css/jquery-ui' + min + '.css', true, true));
 			WDN.loadJQuery(function() {
-				require([pluginPath + 'jquery-ui' + min], callback);
+				require(['./' + pluginPath + 'jquery-ui' + min], callback);
 			});
 		}
 	};