Attachment 237859 Details for Bug 422848 – Patch #2: Modal window needed to be bigger for FF

Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

[patch] Patch #2: Modal window needed to be bigger for FF

home-newlogo-422848-2.patch (text/plain), 12.14 KB, created by Christopher Guindon

on 2013-11-29 10:12:27 EST

(hide)

Description:

Filename:

MIME Type:

Creator: Christopher Guindon

Created: 2013-11-29 10:12:27 EST

Size: 12.14 KB

patch

obsolete

>diff --git a/promotions/logovoting/logo/eclipse-logo-a.png b/promotions/logovoting/logo/eclipse-logo-a.png
>new file mode 100644
>index 0000000..9b65006
>Binary files /dev/null and b/promotions/logovoting/logo/eclipse-logo-a.png differ
>diff --git a/promotions/logovoting/modal.js b/promotions/logovoting/modal.js
>new file mode 100755
>index 0000000..fc8097b
>--- /dev/null
>+++ b/promotions/logovoting/modal.js
>@@ -0,0 +1,155 @@
>+/*!
>+ * CSS Modal
>+ * http://drublic.github.com/css-modal
>+ *
>+ * @author Hans Christian Reinl - @drublic
>+ * @version 1.0.3
>+ */
>+
>+(function (global) {
>+
>+	'use strict';
>+
>+	// Storage variable
>+	var modal = {};
>+
>+	// Store for currently active element
>+	modal.lastActive = undefined;
>+	modal.activeElement = undefined;
>+
>+	// Polyfill addEventListener for IE8 (only very basic)
>+	modal._addEventListener = function (element, event, callback) {
>+		if (element.addEventListener) {
>+			element.addEventListener(event, callback, false);
>+		} else {
>+			element.attachEvent('on' + event, callback);
>+		}
>+	};
>+
>+	// Hide overlay when ESC is pressed
>+	modal._addEventListener(document, 'keyup', function (event) {
>+		var hash = window.location.hash.replace('#', '');
>+
>+		// If hash is not set
>+		if (hash === '' || hash === '!') {
>+			return;
>+		}
>+
>+		// If key ESC is pressed
>+		if (event.keyCode === 27) {
>+			window.location.hash = '!';
>+
>+			if (modal.lastActive) {
>+				return false;
>+			}
>+
>+			// Unfocus
>+			modal.removeFocus();
>+		}
>+	}, false);
>+
>+	// Convenience function to trigger event
>+	modal._dispatchEvent = function (event, modal) {
>+		var eventTigger;
>+
>+		if (!document.createEvent) {
>+			return;
>+		}
>+
>+		eventTigger = document.createEvent('Event');
>+
>+		eventTigger.initEvent(event, true, true);
>+		eventTigger.customData = { 'modal': modal };
>+
>+		document.dispatchEvent(eventTigger);
>+	};
>+
>+
>+	// When showing overlay, prevent background from scrolling
>+	modal.mainHandler = function () {
>+		var hash = window.location.hash.replace('#', '');
>+		var modalElement = document.getElementById(hash);
>+		var htmlClasses = document.documentElement.className;
>+		var modalChild;
>+		var oldModal;
>+
>+		// If the hash element exists
>+		if (modalElement) {
>+
>+			// Get first element in selected element
>+			modalChild = modalElement.children[0];
>+
>+			// When we deal with a modal and body-class `has-overlay` is not set
>+			if (modalChild && modalChild.className.match(/modal-inner/)) {
>+				if (!htmlClasses.match(/has-overlay/)) {
>+
>+					// Set an html class to prevent scrolling
>+					document.documentElement.className += ' has-overlay';
>+				}
>+
>+				// Unmark previous active element
>+				if (modal.activeElement) {
>+					oldModal = modal.activeElement;
>+					oldModal.className = oldModal.className.replace(' is-active', '');
>+				}
>+				// Mark modal as active
>+				modalElement.className += ' is-active';
>+				modal.activeElement = modalElement;
>+
>+				// Set the focus to the modal
>+				modal.setFocus(hash);
>+
>+				// Fire an event
>+				modal._dispatchEvent('cssmodal:show', modal.activeElement);
>+			}
>+		} else {
>+			document.documentElement.className =
>+					htmlClasses.replace(' has-overlay', '');
>+
>+			// If activeElement is already defined, delete it
>+			if (modal.activeElement) {
>+				modal.activeElement.className =
>+						modal.activeElement.className.replace(' is-active', '');
>+
>+				// Fire an event
>+				modal._dispatchEvent('cssmodal:hide', modal.activeElement);
>+
>+				// Reset active element
>+				modal.activeElement = null;
>+
>+				// Unfocus
>+				modal.removeFocus();
>+			}
>+		}
>+	};
>+
>+	modal._addEventListener(window, 'hashchange', modal.mainHandler);
>+	modal._addEventListener(window, 'load', modal.mainHandler);
>+
>+	/*
>+	 * Accessibility
>+	 */
>+
>+	// Focus modal
>+	modal.setFocus = function () {
>+		if (modal.activeElement) {
>+
>+			// Set element with last focus
>+			modal.lastActive = document.activeElement;
>+
>+			// New focussing
>+			modal.activeElement.focus();
>+		}
>+	};
>+
>+	// Unfocus
>+	modal.removeFocus = function () {
>+		if (modal.lastActive) {
>+			modal.lastActive.focus();
>+		}
>+	};
>+
>+	// Export CSSModal into global space
>+	global.CSSModal = modal;
>+
>+}(window));
>diff --git a/promotions/logovoting/promotion-newlogo.php b/promotions/logovoting/promotion-newlogo.php
>new file mode 100644
>index 0000000..ac0a0f6
>--- /dev/null
>+++ b/promotions/logovoting/promotion-newlogo.php
>@@ -0,0 +1,315 @@
>+<style>
>+/**
>+ * CSS Modal
>+ * Modal as reusable module
>+ * http://drublic.github.com/css-modal
>+ *
>+ * @author Hans Christian Reinl - @drublic
>+ * @version 1.0.4
>+ */
>+html {
>+	overflow-y: scroll;
>+}
>+.has-overlay {
>+	overflow: hidden;
>+}
>+
>+.has-overlay>body {
>+	height: 100%;
>+	overflow-y: scroll;
>+}
>+
>+.semantic-content {
>+	-webkit-transform: translate(0, 100%);
>+	-moz-transform: translate(0, 100%);
>+	-o-transform: translate(0, 100%);
>+	-ms-transform: translate(0, 100%);
>+	transform: translate(0, 100%);
>+	-webkit-transform: translate3d(0, 100%, 0);
>+	transform: translate3d(0, 100%, 0);
>+	position: fixed;
>+	top: 0;
>+	left: 0;
>+	right: 0;
>+	bottom: 0;
>+	z-index: 999;
>+	opacity: 0;
>+	color: #222;
>+	line-height: 1.3;
>+	display: none\9;
>+}
>+
>+.semantic-content:target {
>+	-webkit-transform: translate(0, 0);
>+	-moz-transform: translate(0, 0);
>+	-o-transform: translate(0, 0);
>+	-ms-transform: translate(0, 0);
>+	transform: translate(0, 0);
>+	opacity: 1;
>+}
>+
>+.is-active.semantic-content {
>+	display: block\9;
>+}
>+
>+.semantic-content:target {
>+	display: block\9;
>+}
>+
>+.semantic-content .modal-inner {
>+	position: absolute;
>+	top: 50px;
>+	left: 50%;
>+	z-index: 20;
>+	margin-left: -325px;
>+	width: 650px;
>+	overflow-x: hidden;
>+	border-radius: 2px;
>+	background: #fff;
>+	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
>+	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
>+}
>+
>+.semantic-content .modal-inner>img,.semantic-content .modal-inner>video,.semantic-content .modal-inner>iframe
>+	{
>+	width: 100%;
>+	height: auto;
>+	min-height: 300px;
>+}
>+
>+.semantic-content .modal-inner>img {
>+	width: auto;
>+	max-width: 100%;
>+}
>+
>+.semantic-content .modal-header {
>+	border-bottom: 1px solid #dddddd;
>+	padding: 0 1.2em;
>+}
>+
>+.semantic-content .modal-header>h2 {
>+	margin: 0.5em 0;
>+	border-bottom:0;
>+}
>+
>+.semantic-content .modal-content {
>+	max-height: 400px;
>+	max-height: 70vh;
>+	border-bottom: 1px solid #dddddd;
>+	padding: 15px 1.2em;
>+	overflow-x: hidden;
>+	overflow-y: auto;
>+}
>+
>+.semantic-content .modal-content>* {
>+	max-width: 100%;
>+}
>+
>+.semantic-content .modal-footer {
>+	border-top: 1px solid white;
>+	padding: 13px 1.2em 18px;
>+	background: #f0f0f0;
>+	border-radius: 2px;
>+}
>+
>+.semantic-content .modal-close {
>+	display: block;
>+	text-indent: -100px;
>+	overflow: hidden;
>+}
>+
>+.semantic-content .modal-close:before {
>+	content: '';
>+	position: absolute;
>+	top: 0;
>+	left: 0;
>+	right: 0;
>+	bottom: 0;
>+	z-index: 10;
>+	background:
>+		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
>+}
>+
>+.semantic-content .modal-close:after {
>+	content: '\00d7';
>+	position: absolute;
>+	top: 25px;
>+	left: 50%;
>+	z-index: 20;
>+	margin-left: 285px;
>+	background: #fff;
>+	border-radius: 2px;
>+	padding: 4px 8px;
>+	font-size: 1.2em;
>+	text-decoration: none;
>+	text-indent: 0;
>+}
>+
>+@media screen and (max-width: 690px) {
>+	.semantic-content .modal-inner {
>+		width: auto;
>+		left: 20px;
>+		right: 20px;
>+		margin-left: 0;
>+	}
>+	.semantic-content .modal-close {
>+		left: auto;
>+		right: 33px;
>+		margin-left: 0;
>+	}
>+	.semantic-content .modal-close:after {
>+		margin-left: 40%;
>+	}
>+}
>+
>+@media screen and (max-width: 30em) {
>+	.semantic-content {
>+		-webkit-transform: translate(0, 400px);
>+		-webkit-transform: translate3d(0, 100%, 0);
>+		transform: translate3d(0, 100%, 0);
>+		-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
>+		-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;
>+		-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;
>+		-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;
>+		transition: transform .25s ease-in-out, opacity 1ms .25s;
>+		display: block;
>+		height: 100%;
>+		bottom: auto;
>+	}
>+	.semantic-content:target {
>+		-webkit-transition: -webkit-transform .25s ease-in-out;
>+		-moz-transition: -moz-transform .25s ease-in-out;
>+		-o-transition: -o-transform .25s ease-in-out;
>+		-ms-transition: -ms-transform .25s ease-in-out;
>+		transition: transform .25s ease-in-out;
>+	}
>+	.semantic-content:before {
>+		background-color: #27aae2;
>+		background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2),
>+			to(#1c9cd3));
>+		background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);
>+		background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3);
>+		background-image: -o-linear-gradient(top, #27aae2, #1c9cd3);
>+		background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);
>+		content: '';
>+		position: fixed;
>+		top: 0;
>+		left: 0;
>+		right: 0;
>+		z-index: 30;
>+		height: 3em;
>+		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
>+		box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
>+	}
>+	.semantic-content .modal-inner {
>+		-webkit-box-sizing: border-box;
>+		-moz-box-sizing: border-box;
>+		box-sizing: border-box;
>+		top: 0;
>+		left: 0;
>+		right: 0;
>+		padding-top: 3em;
>+		height: 100%;
>+		overflow: scroll;
>+		-webkit-box-shadow: none;
>+		box-shadow: none;
>+	}
>+	.semantic-content .modal-content {
>+		max-height: none;
>+	}
>+	.semantic-content .modal-close {
>+		right: auto;
>+		text-decoration: none;
>+	}
>+	.semantic-content .modal-close:before {
>+		display: none;
>+	}
>+	.semantic-content .modal-close:after {
>+		content: attr(data-close);
>+		top: 0.4em;
>+		left: 1em;
>+		z-index: 40;
>+		margin-left: 0;
>+		font-size: 1em;
>+		padding: 0.5em 1em;
>+	}
>+}
>+
>+@media screen and (max-height: 46em) and (min-width: 30em) {
>+	.semantic-content .modal-content {
>+		max-height: 340px;
>+		max-height: 50vh;
>+	}
>+}
>+
>+@media screen and (max-height: 36em) and (min-width: 30em) {
>+	.semantic-content .modal-content {
>+		max-height: 265px;
>+		max-height: 40vh;
>+	}
>+}
>+
>+@media screen and (min-width: 30em) {
>+	.semantic-content {
>+		-webkit-transition: opacity 0.4s;
>+		-o-transition: opacity 0.4s;
>+		transition: opacity 0.4s;
>+	}
>+}
>+#surveyMonkeyInfo{
>+	width:100%;
>+	font-size:10px;
>+	color:#666;
>+}
>+#sm_e_s{
>+	overflow:hidden;
>+	border:0px;
>+	padding-bottom:4px;
>+}
>+#logo{
>+	font-size:12px;
>+	padding-top:6px;
>+}
>+#logo span{
>+  position:absolute;
>+  top:45px;
>+}
>+#logo-a{
>+	padding:18px;
>+}
>+</style>
>+
>+
>+
>+<a href="#modal-text" class="call-modal"
>+	title="Do you like this new logo?"><img
>+	src="/home/promotions/logovoting/logo/eclipse-logo-a.png"
>+	alt="Eclipse.org" id="logo-a"/><span>Do you like this new logo?</span></a>
>+
>+
>+<section class="semantic-content" id="modal-text" tabindex="-1"
>+	role="dialog" aria-labelledby="modal-label" aria-hidden="true">
>+
>+	<div class="modal-inner">
>+		<div class="modal-header">
>+			<h2 id="modal-label">Do you like this new logo?</h2>
>+		</div>
>+
>+		<div class="modal-content">
>+			<div id="surveyMonkeyInfo">
>+			  <iframe id="sm_e_s" src="https://www.surveymonkey.com/jsEmbed.aspx?sm=v_2fUJ5cztOQKSptKXZy7m6A_3d_3d" width="100%" height="585" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
>+		  </div>
>+	  </div>
>+
>+		<div class="modal-footer">
>+			Create your free online surveys with <a href="https://www.surveymonkey.com">SurveyMonkey</a> , the world's leading questionnaire tool.
>+		</div>
>+	</div>
>+
>+	
>+	<a href="#!" class="modal-close" title="Close this modal"
>+		data-dismiss="modal">&times;</a>
>+</section>
>+
>+<script src="/home/promotions/logovoting/modal.js"></script>
>+
>\ No newline at end of file
>diff --git a/promotions/promotion.php b/promotions/promotion.php
>index e6c2698..50e6472 100644
>--- a/promotions/promotion.php
>+++ b/promotions/promotion.php
>@@ -1,5 +1,12 @@
> <?php
> if ($theme == "Nova" || $theme == "bootnova") {
>-	require_once 'promotion-default.php';
>+  // I need Ian to review this. The newlogo variable is required to load the voting functionality.
>+  // We will need to remove this once we are ready to go live.
>+  if(!isset($_GET['newlogo'])){
>+    require_once 'promotion-default.php';
>+  }
>+  else{
>+    require_once 'logovoting/promotion-newlogo.php';
>+  }
> }
> ?>
>\ No newline at end of file

Actions: View | Diff

Attachments on bug 422848: 237852 | 237854 | 237859