Add quote toggle

jposi · Nov 5, 2013 · 3141433 · 3141433
1 parent f1a7a55
commit 3141433
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 23 deletions.
diff --git a/less/app.less b/less/app.less
@@ -19,21 +19,23 @@ canvas {
 	width: 640px;
 	margin: @line-height-computed auto;
 
-	.btn-group {
-		margin-right: @grid-gutter-width;
+	.btn-group,
+	.btn-group + .btn {
+		margin-right: @grid-gutter-width / 2;
 	}
 }
 
 
-.quote {
+.poster {
 	height: 640px;
 	width: 640px;
 	background: #fff;
 	margin: @grid-gutter-width auto 0;
 	position: relative;
-	padding: @grid-gutter-width;
-	font-size: @font-size-base * 3;
-	line-height: 1.2 !important;
+	padding: @grid-gutter-width * 2;
+	font-size: 75px;
+	line-height: 1 !important;
+	font-weight: 700;
 
 	&.music {
 		background: @musicDark;
@@ -49,13 +51,19 @@ canvas {
 		border-left: none;
 		font-size: inherit;
 
+		&.quote {
+			&:before { content:"\201C"; margin-left: -0.56em; }
+			&:after { content:"\201D";}
+		}
+
 		span {
 			line-height: 1.2 !important;
 		}
 	}
 
 	.source {
 		font-size: @font-size-base *1.5;
+		font-weight: normal;
 
 		&:before {
 			content: '\2014';
@@ -69,9 +77,21 @@ canvas {
 		}
 	}
 
-	.logo {
+	.logo-wrapper {
 		position: absolute;
-		bottom: @grid-gutter-width;
-		right: @grid-gutter-width;
+		bottom: @grid-gutter-width * 2;
+		right: @grid-gutter-width * 2;
+		font-size: 46px;
+
+		span {
+			display: none;
+
+			.music& {
+				display: inline;
+				font-weight: normal;
+				color: #fff;
+				-webkit-font-smoothing: antialiased;
+			}
+		}
 	}
 }
diff --git a/less/lib/bootstrap/variables.less b/less/lib/bootstrap/variables.less
@@ -128,8 +128,8 @@
 @btn-default-border:             #ccc;
 
 @btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 5%);
+@btn-primary-bg:                 @inlineLink;
+@btn-primary-border:             darken(@inlineLink, 5%);
 
 @btn-success-color:              #fff;
 @btn-success-bg:                 @brand-success;

diff --git a/templates/index.html b/templates/index.html
@@ -10,23 +10,24 @@
 
 {% block wide_content %}
 <div class="row">
-    <div class="quote col-md-12">
-        <blockquote>Nobody goes there anymore. It's too crowded.</blockquote>
+    <div class="poster col-md-12">
+        <blockquote class="quote">Nobody goes there anymore. It's too crowded.</blockquote>
 
         <p class="source">Yogi Berra</p>
 
-        <img class="logo" src="{{ S3_BASE_URL }}/img/npr-home.png">
+        <p class="logo-wrapper"><img class="logo" src="{{ S3_BASE_URL }}/img/npr-home.png"> <span>music</span></p>
     </div>
 
     <div class="controls col-md-12">
         <div class="controls-wrapper">
             <div class="btn-group">
-                <button id="news" class="btn btn-large btn-primary">News</button>
-                <button id="music" class="btn btn-large btn-default">Music</button>
+                <button id="news" class="btn btn-primary">News</button>
+                <button id="music" class="btn btn-default">Music</button>
             </div>
+            <button id="quote" class="btn btn-primary">Quote</button>
             <label for="fontsize">Font Size</label>
             <input id="fontsize" name="fontsize" type="range" min="42" max="96">
-            <button id="save" class="pull-right btn btn-large btn-primary">Save image</button>
+            <button id="save" class="pull-right btn btn-primary">Save image</button>
 
         </div>
     </div>

diff --git a/www/js/app.js b/www/js/app.js
@@ -1,6 +1,6 @@
 $(function() {
     $('#save').on('click', function(){
-        html2canvas($('.quote'), {
+        html2canvas($('.poster'), {
           onrendered: function(canvas) {
             document.body.appendChild(canvas);
             window.oCanvas = document.getElementsByTagName("canvas");
@@ -18,7 +18,7 @@ $(function() {
         $('#music')
             .removeClass('btn-primary')
             .addClass('btn-default');
-        $('.quote').removeClass('music');
+        $('.poster').removeClass('music');
     });
 
     $('#music').on('click', function(){
@@ -29,15 +29,20 @@ $(function() {
             .removeClass('btn-primary')
             .addClass('btn-default');
 
-        $('.quote').addClass('music');
+        $('.poster').addClass('music');
+    });
+
+    $('#quote').on('click', function(){
+        $(this).toggleClass('btn-primary btn-default');
+        $('.poster blockquote').toggleClass('quote');
     });
 
     $('#fontsize').on('change', function(){
         var font_size = $(this).val().toString() + 'px';
-        $('.quote').css('font-size', font_size);
+        $('.poster').css('font-size', font_size);
     });
 
-    var editor = new MediumEditor('.quote', {
+    var editor = new MediumEditor('.poster', {
         buttons: ['bold', 'italic']
     });
 });
diff --git a/www/test/test.html b/www/test/test.html
@@ -147,7 +147,10 @@
                 <button id="news" class="btn btn-large btn-primary">News</button>
                 <button id="music" class="btn btn-large btn-default">Music</button>
             </div>
-            <button id="save" class="btn btn-large btn-primary">Save image</button>
+            <label for="fontsize">Font Size</label>
+            <input id="fontsize" name="fontsize" type="range" min="42" max="96">
+            <button id="save" class="pull-right btn btn-large btn-primary">Save image</button>
+
         </div>
     </div>
 </div>