Added styles and made some modifications to language

slifty · Jun 30, 2014 · d1e5b61 · d1e5b61
1 parent 3186199
commit d1e5b61
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 52 deletions.
diff --git a/api/layers/post_layers.php b/api/layers/post_layers.php
@@ -77,7 +77,23 @@
 		// CSS Link Fixes
 		$html = preg_replace('/\<link(.*?)text\/css(.*?)src\=(.*?)\/\>/i', "<link\\1text/css\\2href=\\3/>", $html);
 	} elseif ($_REQUEST['text']) {
-		$html = "<html><head></head><body>".str_replace("\n","<br />",$_REQUEST['text'])."</body></html>";
+		$html = "
+		<html>
+			<head>
+				<title>Truth Goggles Credibility Layer</title>
+    			<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
+				<link rel='stylesheet' type='text/css' href='".$BASE_DIRECTORY."css/published.css'>
+			</head>
+			<body>
+				<div id='header'>
+					<div id='logo'></div>
+					<p>The content below was annotated using <a href='/'>truth goggles</a></p>
+				</div>
+				<div id='content'>
+					".str_replace("\n","<br />",$_REQUEST['text'])."
+				</div>
+			</body>
+		</html>";
 	}
 	$script = "
 	

diff --git a/pages/index.php b/pages/index.php
diff --git a/pages/submit/augment/augment.css b/pages/submit/augment/augment.css
@@ -5,6 +5,15 @@ body {
 
 h1 {
 	text-align: center;
+	margin: 0px;
+}
+
+h2 {
+
+}
+
+h1, h2, h3 {
+	font-family: 'Indie Flower', sans-serif;
 }
 
 form ul {
@@ -25,6 +34,7 @@ form ul li label.checkbox {
 
 .frame {
 	display: none;
+	position: relative;
 }
 
 .question_type h4 {
@@ -45,6 +55,14 @@ form ul li label.checkbox {
 	display: block;
 }
 
+#header {
+	background: #fff;
+	margin: 40px auto;
+	padding: 20px;
+	border: 2px solid black;	
+	width: 400px;
+}
+
 #frames {
 	background: #fff;
 	margin: 40px auto;
@@ -60,29 +78,23 @@ form ul li label.checkbox {
 	margin: 0px auto;
 }
 
-#contentText-form label, #contentUrl-form label, #contentSelection-form label {
+#frame-1 #contentText-form label, #contentUrl-form label, #contentSelection-form label {
 	display: block;
 	font-weight: bold;
 	margin-left: 20px;
 	cursor: pointer;
 }
 
-#contentText {
-	width: 500px;
+#frame-1 #contentText {
+	width: 90%;
 	height: 300px;
 	margin-left: 20px;
 }
-#contentUrl {
-	width: 250px;
+#frame-1 #contentUrl {
+	width: 90%;
 	margin-left: 20px;
 }
 
-
-#articlenput {
-	width: 500px;
-	height: 400px;
-}
-
 #content {
 	cursor: url(../../img/highlight.cur) 0 0, pointer;
 	border: 2px solid black;
@@ -160,6 +172,7 @@ form ul li label.checkbox {
 #prompt #promptQuestionSelect {
 	margin-top: 10px;
 	margin-left: 40px;
+	width: 300px;
 	display: block;
 }
 #prompt #promptQuestionText {

diff --git a/pages/submit/augment/augment.js b/pages/submit/augment/augment.js
@@ -30,6 +30,8 @@ $(function() {
 		var $frame = $("#frame-" + id);
 		$(".frame").hide();
 		$frame.show();
+		ga('send', 'event', 'annotation', 'changeFrame', id);
+		console.log(id)
 	}
 
 
@@ -226,7 +228,7 @@ $(function() {
 		}
 		$promptAnswerTitle = $("<h3>")
 			.attr("id", "promptAnswerTitle")
-			.text("What should they know while asking this question?")
+			.text("Do you have any answers?")
 			.appendTo($prompt);
 
 		$promptShortAnswerLabel = $("<label>")
@@ -289,6 +291,8 @@ $(function() {
 
 		$background.fadeIn();
 		$prompt.fadeIn();
+
+		ga('send', 'event', 'annotation', 'layerAction', 'create');
 	}
 
 	function deleteContribution(id) {
@@ -297,6 +301,7 @@ $(function() {
 			.removeClass("selected")
 			.data("contribution_id", "")
 			.removeClass("contribution-" + id);
+		ga('send', 'event', 'annotation', 'layerAction', 'delete');
 	}
 
 	function cancelContribution(start, end) {
@@ -308,6 +313,7 @@ $(function() {
 			if(contribution_id === "")
 				$word.removeClass("selected")
 		}
+		ga('send', 'event', 'annotation', 'layerAction', 'cancel');
 	}
 
 	function saveContribution(start, end) {
@@ -345,6 +351,7 @@ $(function() {
 		} else {
 			contributions[contribution_id] = contribution;
 		}
+		ga('send', 'event', 'annotation', 'layerAction', 'save');
 	}
 
 	function getContributionId(word) {

diff --git a/pages/submit/augment/augment.php b/pages/submit/augment/augment.php
@@ -1,45 +1,58 @@
 <html>
 	<head>
+    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
 		<link rel="stylesheet" type="text/css" href="augment/augment.css">
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="<?PHP echo($BASE_DIRECTORY); ?>js/lib/randomcolor.js"></script>
-    <script>var BASE_PATH = "//<?php echo($_SERVER['HTTP_HOST'].$BASE_DIRECTORY); ?>";</script>
+    <script>var BASE_PATH = "//<?php echo($_SERVER['HTTP_HOST'].$GOGGLES_DIRECTORY); ?>";</script>
 		<script type="text/javascript" src="augment/augment.js"></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-29964553-1', 'auto');
+      ga('send', 'pageview');
+    </script>
 	</head>
 	<body>
-		<div id="frames">
+    <div id="header">
       <div id="logo"></div>
-			<h1>Create a Credibility Layer</h1>
+    </div>
+		<div id="frames">
+      <h1>Create a Credibility Layer...</h1>
 			<div id="frame-1" class="frame">
-        <h2>Use a web site...</h2>
-        <form id="contentUrl-form">
-          <label for="contentUrl">Enter a URL:</label><input type="text" id="contentUrl"/>
-          <input type="submit" class="button" value="Load this"/>
-        </form>
-        <hr />
-        <h2>Or use an article's text...</h2>
-				<form id="contentText-form">
-					<label for="contentText">Paste an article:</label>
-          <textarea id="contentText"></textarea>
-					<input type="submit" class="button" value="Use this"/>
-				</form>
-
+        <div id="frame-1-web">
+          <h2>...for a web site...</h2>
+          <form id="contentUrl-form">
+            <label for="contentUrl">Enter a URL:</label><input type="text" id="contentUrl"/>
+            <input type="submit" class="button" value="Load this"/>
+          </form>
+        </div>
+        <div id="frame-1-text">
+          <h2>...or for a story</h2>
+  				<form id="contentText-form">
+  					<label for="contentText">Paste an article:</label>
+            <textarea id="contentText"></textarea>
+  					<input type="submit" class="button" value="Use this"/>
+  				</form>
+        </div>
 			</div>
       <div id="frame-2" class="frame">
-        <h2>Where should readers be thinking more carefully?</h2>
+        <h2>...by asking your readers questions</h2>
         <form id="contentSelection-form">
-          <label>Highlight phrases you want people to think about.</label>
+          <label>Highlight places where you want people to think more carefully.</label>
           <div id="content"></div></li>
           <input type="submit" class="button" value="Publish"/>
         </form>
       </div>
       <div id="frame-3" class="frame">
-        <h2>Share your layer...</h2>
-        <p>Give this link to your friends to help them think more carefully about this article.  When they click your link, they will see the original story with your layer on top of it.</p>
+        <h2>...and share it...</h2>
+        <p>Give this link to your friends to help them think more carefully.  When they click your link, they will see the original story with your layer on top of it.</p>
         <div id="layerUrl"></div>
         <hr />
-        <h2>Or embed it in your article...</h2>
+        <h2>...or embed it in your article</h2>
         <p>If you wrote this article you can embed your layer directly, so everyone is able to see it. Just copy the code below and paste it just like it was an embeddable video.</p>
         <div id="layerCode"></div>
       </div>

diff --git a/public/css/goggles.css b/public/css/goggles.css
@@ -37,6 +37,7 @@
 	font-weight: bold;
 	cursor: pointer;
 	margin: 20px;
+	margin-left: 55px;
 	width: 120px;
 	padding: 10px 0px;
 	font-family: arial;
@@ -47,8 +48,9 @@
 	padding-bottom: 20px;
 	font-size: 20px;
 	text-align: center;
-	border-bottom: 2px solid #336699;
+	border-bottom: 2px solid #eee;
 	font-family: arial;
+	color: #666;
 }
 .gogglesQuestion {
 	margin: 0px 20px;
@@ -70,15 +72,19 @@
 	font-family: arial;
 }
 .gogglesArgumentSummary {
-	font-weight: bold;
+	font-weight: normal;
 	font-family: arial;
+	text-align: left;
+	cursor: pointer;
 }
 .gogglesArgumentContent {
 	font-family: arial;
 	padding-left: 10px;
 	margin: 5px;
 	padding: 5px;
-	border-left: 3px solid #ccc;
+	border-left: 2px solid #ccc;
+	text-align: left;
+	margin-left: 20px;
 }
 
 .gogglesTarget {

diff --git a/public/css/published.css b/public/css/published.css
@@ -0,0 +1,33 @@
+body {
+	background: #336699;
+	font-family: 'PT Sans', sans-serif;
+}
+
+#content {
+	background: #fff;
+	margin: 40px auto;
+	padding: 40px;
+	border: 2px solid black;	
+	max-width: 900px;
+}
+
+a {
+	color: #CC6600;
+	text-decoration: none;
+}
+
+#header {
+	background: #fff;
+	margin: 40px auto;
+	padding: 20px;
+	border: 2px solid black;	
+	width: 400px;
+	text-align: center;
+}
+
+#logo {
+	background: url("../img/logo.jpg");
+	height: 140px;
+	width: 270px;
+	margin: 0px auto;
+}
diff --git a/public/js/goggles.js b/public/js/goggles.js
@@ -137,7 +137,7 @@ function loadGogglesPlugin(jQuery, queuedCall) {
                     var statement = contribution.statements[x];
                     var $statement = $("<div>")
                         .addClass("gogglesStatement")
-                        .text('"' + statement.content + '"')
+                        .text('"' + statement.content.replace(/^[“”"’']|[“”"’']$/g,"").trim() + '"')
                         .appendTo($contribution);
                 }
 
@@ -159,11 +159,16 @@ function loadGogglesPlugin(jQuery, queuedCall) {
                     var $summary = $("<div>")
                         .addClass("gogglesArgumentSummary")
                         .html(argument.summary)
-                        .appendTo($argument);
+                        .appendTo($argument)
+                        .click(function() {
+                            $(this).parent().find(".gogglesArgumentContent")
+                                .slideToggle(100);
+                        })
 
                     var $content = $("<div>")
                         .addClass("gogglesArgumentContent")
                         .html(argument.content)
+                        .hide()
                         .appendTo($argument);
                 }
 

diff --git a/public/test.html b/public/test.html