introduce two skins - dialog and in-page

satismeter · Jul 1, 2014 · 6b645b6 · 6b645b6
1 parent 2b47622
commit 6b645b6
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 31 deletions.
diff --git a/Makefile b/Makefile
@@ -1,4 +1,4 @@
-build:
+build: *.js *.css *.html languages/*.json
 	component build --dev
 
 test: build

diff --git a/index.html b/index.html
@@ -3,12 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <title>Sample</title>
+    <style>
+        body {
+            background-color: #f8f8f8;
+        }
+    </style>
 </head>
 <body>
     <script src="build/build.js"></script>
     <script>
         var View = require('nps-widget');
-        var view = new View({language: 'sk'});
+        var view = new View({language: 'en', skin: 'page'});
         view.appendTo(document.body);
         view.show();
     </script>

diff --git a/index.js b/index.js
@@ -48,11 +48,12 @@ View.parse = function(options) {
         poweredBy: options.poweredBy !== false,
         state: options.state || View.RATING_STATE,
         rating: options.rating || null,
-        visible: !!options.visible
+        visible: !!options.visible,
+        skin: options.skin || 'dialog'
     };
 };
 
-View.computed('classes', ['state', 'visible', 'poweredBy'], function() {
+View.computed('classes', ['state', 'visible', 'poweredBy', 'skin'], function() {
     var result = [];
     switch (this.get('state')) {
         case View.RATING_STATE:
@@ -71,6 +72,12 @@ View.computed('classes', ['state', 'visible', 'poweredBy'], function() {
     if (this.get('poweredBy')) {
         result.push('nps-is-powered-by');
     }
+    if (this.get('skin') === 'dialog') {
+        result.push('nps-dialog');
+    }
+    if (this.get('skin') === 'page') {
+        result.push('nps-page');
+    }
     return result.join(' ');
 });
 

diff --git a/style.css b/style.css
@@ -1,33 +1,12 @@
 .nps {
-	position: fixed;
-	z-index: 2147483646;
-
-	top: 60px;
-	right: -500px;
-
-	padding: 20px;
-	margin: 20px;
-
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	box-shadow: rgba(0, 0, 0, 0.4) 0 1px 4px 0;
-
-	background-color: #f8f8f8;
-	color: #333;
-
 	font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;
-	font-size: 14px;
 	line-height: 1.42857143;
-	transition: right 500ms;
 }
 .nps * {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;
 }
-.nps.nps-visible {
-	right: 0;
-}
 
 .nps .nps-feedback, .nps .nps-rating, .nps .nps-thanks {
 	display: none;
@@ -44,10 +23,8 @@
 
 .nps-top {
 	min-height: 120px;
-	width: 375px;
 }
 .nps-question {
-	font-weight: bold;
 	margin-bottom: 14px;
 }
 .nps-scale {
@@ -97,8 +74,8 @@
 }
 
 .nps-text {
-	width: 375px;
 	height: 60px;
+	width: 100%;
 }
 .nps-buttons {
 	float: right;
@@ -124,3 +101,62 @@
 .nps-thanks .nps-question {
 	margin-bottom: 0;
 }
+
+/* Dialog skin */
+
+.nps.nps-dialog {
+	width: 375px;
+	position: fixed;
+	z-index: 2147483646;
+
+	top: 60px;
+	right: -500px;
+
+	padding: 20px;
+	margin: 20px;
+
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	box-shadow: rgba(0, 0, 0, 0.4) 0 1px 4px 0;
+
+	background-color: #f8f8f8;
+	color: #333;
+
+	font-size: 14px;
+	transition: right 500ms;	
+}
+.nps.nps-dialog.nps-visible {
+	right: 0;
+}
+
+/* In-page skin */
+
+.nps.nps-page {
+	font-size: 16px;
+	color: #333;
+	max-width: 500px;
+	min-width: 375px;
+	margin: 20px auto;
+	padding: 20px;
+    border: 1px solid #d8d8d8;
+    background-color: white;
+}
+
+.nps.nps-page .nps-dismiss,
+.nps.nps-page .nps-close {
+	display: none;
+}
+
+/* Utils */
+
+.nps-cf:before,
+.nps-cf:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */
+}
+
+.nps-cf:after {
+  clear: both;
+}
diff --git a/template.html b/template.html
@@ -1,6 +1,6 @@
 <div class="nps {{classes}}">
 
-	<div class="nps-rating">
+	<div class="nps-rating nps-cf">
 		<div class="nps-top">
 			<div class="nps-question">{{translation.HOW_LIKELY}}</div>
 			<div class="nps-scale">
@@ -29,7 +29,7 @@
 		</div>
 	</div>
 
-	<div class="nps-feedback">
+	<div class="nps-feedback nps-cf">
 		<div class="nps-top">
 			<div class="nps-question">{{translation.THANKS_IMPROVE}}</div>
 			<textarea class="nps-textarea nps-text"
@@ -51,7 +51,7 @@
 		</div>
 	</div>
 
-	<div class="nps-thanks">
+	<div class="nps-thanks nps-cf">
 		<div class="nps-top">
 			<div class="nps-question">{{translation.THANKS}}</div>
 		</div>