From 9eee33470477a254b8acbd3ea771a094cdbe1002 Mon Sep 17 00:00:00 2001
From: Autarc <autarc@gmail.com>
Date: Wed, 22 Jul 2015 23:37:06 +0200
Subject: [PATCH 1/3] re-add latest discource topics

---
 index.html              |  38 +++++++++---
 sass/imports/_main.scss |  23 ++++---
 scripts/widgets.js      | 134 ++++++++++++++++++++++------------------
 stylesheets/screen.css  |   6 +-
 4 files changed, 121 insertions(+), 80 deletions(-)

diff --git a/index.html b/index.html
index 5d525c9..fbfa4a2 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@ <h2>OpenTechSchool Org.</h2>
   <div class="container clearfix">
     <div class="a-third blocky green">
       <h3 class="head">More about OTS</h3>
-      <p>Go to <a href="/about.html">about</a> to learn more about what OpenTechSchool is, what we do, the values and the history of the movement. 
+      <p>Go to <a href="/about.html">about</a> to learn more about what OpenTechSchool is, what we do, the values and the history of the movement.
       </p>
       <p>You might also want to learn more about <a href="/foundation/">the foundation</a> behind it and what some of the learners, coaches and organisers <a href="testimonials.html">say about OpenTechSchool</a>.</p>
 
@@ -32,7 +32,7 @@ <h3 class="head">Start learning</h3>
     <div class="a-third blocky orange">
       <h3 class="head">Join the movement</h3>
       <p>Just reach out to the <a href="/locator/">next chapter close to you</a> and help organising, coaching or with general support.</p>
- 
+
       <p>You might also want to join the <a href="/foundation/">Foundation as a Member</a> and <a href="http://discourse.opentechschool.org">join our online community</a> of coaches, organisers and volunteers and generally <a href="#stay-connected" class="stay-connected">stay connected</a>.</p>
     </div>
 
@@ -61,7 +61,12 @@ <h3 class="post_title"><a href="http://blog.opentechschool.org${link}">${title}<
     </div>
 
   </div>
-  
+
+  <div class="blocky discussion">
+    <h3 class="head">Discussion <a href="http://discourse.opentechschool.org/latest/" class="tiny_button">&raquo; latest topics</a></h3>
+    <div id="currentTopics"></div>
+  </div>
+
 </div>
 
 
@@ -93,7 +98,7 @@ <h3>Stay connected with OpenTechSchool <span class="close" title="close">x</span
           <h4>Follow us on</h4>
           <div class="clearfix">
             <a href="https://www.twitter.com/OpenTechSchool" class="btn"><span class="ots_icon twitter"></span> Twitter</a>
-            <a href="http://www.facebook.com/OpenTechSchool" class="btn"><span class="ots_icon facebook"></span> Facebook</a> 
+            <a href="http://www.facebook.com/OpenTechSchool" class="btn"><span class="ots_icon facebook"></span> Facebook</a>
             <a href="https://plus.google.com/b/114834784518588736271/114834784518588736271/posts" class="btn">Google+</a>
           </div>
           <h4>and</h4>
@@ -108,23 +113,36 @@ <h4>and</h4>
   </div>
 </div>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
    $(function() {
-    React.renderComponent(OTS.Widgets.UpcomingEventsPreview({teams: OTS.config.chapters, page: 5, params: {text: 'opentechschool'}}), document.getElementById('upcomingEvents'));
-
-    React.renderComponent(OTS.Widgets.LatestConversations({path: "/latest.json"}), document.getElementById('currentTopics'));
+    React.renderComponent(
+      OTS.Widgets.UpcomingEventsPreview({
+        teams: OTS.config.chapters,
+        page: 5,
+        params: {
+          text: 'opentechschool'
+        }
+      }),
+      document.getElementById('upcomingEvents')
+    );
+    React.renderComponent(
+      OTS.Widgets.LatestConversations({
+        path: "/latest.json"
+      }),
+      document.getElementById('currentTopics')
+    );
 
     $(".stay-connected").click(function() {
       $('body').addClass("show-modal");
     });
     $(".modal .close").click(function() {
-      $('body').removeClass("show-modal"); 
+      $('body').removeClass("show-modal");
     });
     $(document).keypress(function(ev){
       if (ev.keyCode === 27){ // ESCAPE
-       $('body').removeClass("show-modal"); 
+       $('body').removeClass("show-modal");
       }
     });
    });
diff --git a/sass/imports/_main.scss b/sass/imports/_main.scss
index 045ffa4..d1e9e30 100644
--- a/sass/imports/_main.scss
+++ b/sass/imports/_main.scss
@@ -307,7 +307,7 @@ a.menu_ots_logo {
     top: -5px;
     position: relative;
     margin: 0 3px 0 1.5em;
-  } 
+  }
 
   a.quick_nav_btn {
     font-size: 1.5em;
@@ -384,7 +384,7 @@ ul.nav {
     margin-top: 2.7em;
     margin-bottom: 0.5em;
     margin-right: 1em;
-    
+
     .ots_action {
       font-size: 1.2em;
       line-height: 2.5em;
@@ -485,9 +485,17 @@ ul.nav {
 
 // discourse topic loader
 
+
+.discussion {
+  width: 75%;
+  margin: 0 auto;
+  margin-bottom: 0;
+}
+
 .topic {
-  padding: 15px 10px;
-  clear: both;
+  padding: 15px 0;
+  width: 50%;
+  display: inline-block;
   .metadata {
     opacity: 0.6;
     width: 100%;
@@ -496,7 +504,7 @@ ul.nav {
   .posters {
     width: 150px;
     display: block;
-    float: left;
+    float: right;
     .avatar {
       border-radius: 2px;
       vertical-align: middle;
@@ -609,14 +617,14 @@ ul.nav {
   overflow: display;
   min-height: 130px;
   margin-bottom: 1em;
-  
+
   .head {
     border-bottom: 2px $ots_blue solid;
     padding-left: 2px;
     margin-left: 10px;
     text-transform: uppercase;
     margin-bottom: 12px;
-    
+
     a {
       font-size: 0.7em;
       text-transform: capitalize;
@@ -923,7 +931,6 @@ footer a:focus {
 	background-color: $ots_blue;
 	padding: 2% 0;
 }
-	
 
 
 
diff --git a/scripts/widgets.js b/scripts/widgets.js
index 3033f36..d691f4c 100644
--- a/scripts/widgets.js
+++ b/scripts/widgets.js
@@ -57,7 +57,7 @@
         render: function() {
           return React.DOM.div({className: this.props.showNonMatching ? "onoffswitch checked" : "onoffswitch", onClick: function(){
               this.props.toggleFilter();
-            }.bind(this)}, 
+            }.bind(this)},
               React.DOM.div({className: "onoffswitch-label"},
                 React.DOM.div({className: "onoffswitch-inner"}),
                 React.DOM.div({className: "onoffswitch-switch"})
@@ -201,7 +201,7 @@
       getInitialState: function() {
         return {events: []};
       },
-	
+
       teamClicked: function(team){
       	var url_name = team.urlname.toLowerCase(),
       		team_config = this.props.teams[url_name];
@@ -220,59 +220,63 @@
     OTS.Widgets.Topic = React.createClass({
     	get_url: function() {
     		var topic = this.props.topic;
-    		return ["http://discourse.opentechschool.org/t",
-    				topic.slug, topic.id].join("/");
+    		return ["http://discourse.opentechschool.org/t", topic.slug, topic.id].join("/");
     	},
-      	getInitialState: function() {
-        	return {highlight: false};
-      	},
-      	mouseEnter: function() {
-      		this.setState({"highlight": true});
-      	},
-      	mouseLeave: function() {
-      		this.setState({"highlight": false});
-      	},
-        render: function() {
-          var topic = this.props.topic,
-              users = this.props.users,
-              bumped = moment(topic.bumped_at);
-
-
-          return React.DOM.div({
-          				className: this.state.highlight ? "topic highlight" : "topic",
-          				onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave}, [
-                    React.DOM.h3({className: "topic_title"},
-                        React.DOM.a({href: this.get_url()}, topic.fancy_title)
-                        ),
-                    React.DOM.div({className: "metadata"}, [ 
-                    	React.DOM.div({className: "posters"}, topic.posters.slice(0, 5).map(function(poster){
-                    			var poster = users[poster.user_id];
-                    			return React.DOM.img({
-                    				className: poster.extras === "latest" ? "avatar latest" : "avatar",
-                    				src: poster.avatar_template.replace("{size}", "25"),
-                    				title: poster.username,
-                    				alt: poster.username});
-                    			})
-                    		), 
-                    	React.DOM.span({className: "bumped"},
-                    		bumped.fromNow())
-                    	])
-                    ]);
+    	getInitialState: function() {
+      	return {highlight: false};
+    	},
+    	mouseEnter: function() {
+    		this.setState({"highlight": true});
+    	},
+    	mouseLeave: function() {
+    		this.setState({"highlight": false});
+    	},
+      render: function() {
+        var topic = this.props.topic;
+        var users = this.props.users;
+        var bumped = moment(topic.bumped_at);
+        return React.DOM.div({
+        				className: this.state.highlight ? "topic highlight" : "topic",
+        				onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave}, [
+                  React.DOM.h3({className: "topic_title"},
+                      React.DOM.a({href: this.get_url()}, topic.fancy_title)
+                  ),
+                  React.DOM.div({className: "metadata"}, [
+                  	React.DOM.div({className: "posters"}, topic.posters.slice(0, 5).map(function(poster){
+												var origin = 'http://discourse.opentechschool.org';
+                  			var poster = users[poster.user_id];
+                  			return React.DOM.img({
+                  				className: poster.extras === "latest" ? "avatar latest" : "avatar",
+                  				src: origin + poster.avatar_template.replace("{size}", "25"),
+                  				title: poster.username,
+                  				alt: poster.username
+												});
+                  			})
+                  		),
+                  	React.DOM.span({className: "bumped"},
+                  		bumped.fromNow())
+                  	])
+                  ]);
         }
     });
 
     OTS.Widgets.TopicList = React.createClass({
-
-          render: function() {
-            if (!this.props.topics) {return;}
-            var topicNodes = this.props.topics.slice(0,5).map(function (topic) {
-              	return OTS.Widgets.Topic({topic: topic, users: this.props.users});
-            	}.bind(this));
-            if (topicNodes.length == 0){
-              topicNodes = React.DOM.div({className:"empty"},"No topics found :( ");
-            }
-            return React.DOM.div({className:"topicsList"}, topicNodes);
-          }
+      render: function() {
+        if (!this.props.topics) {
+					return null;
+				}
+				var entryMax = 4; // cut length
+        var topicNodes = this.props.topics.slice(0, entryMax).map(function (topic) {
+          	return OTS.Widgets.Topic({
+							topic: topic,
+							users: this.props.users
+						});
+        	}.bind(this));
+        if (topicNodes.length == 0){
+          topicNodes = React.DOM.div({className:"empty"},"No topics found :(");
+        }
+        return React.DOM.div({className:"topicsList"}, topicNodes);
+      }
     });
 
     var DiscourseMixin = {
@@ -304,11 +308,14 @@
     OTS.Widgets.LatestConversations = React.createClass({
       mixins: [DiscourseMixin],
       render: function(){
-        if (!this.state.loading) {
+        if (this.state.loading === true) {
           return OTS.Widgets.Loading();
+					// return null;
         }
-      	return OTS.Widgets.TopicList({topics: this.state.topics,
-                        users: this.state.users});
+      	return OTS.Widgets.TopicList({
+					topics: this.state.topics,
+          users: this.state.users
+				});
       }
     });
 
@@ -316,22 +323,29 @@
       mixins: [DiscourseMixin],
 
       render: function() {
-          if (!this.state.loading) {
+          if (this.state.loading === true) {
             return OTS.Widgets.Loading();
+						// return null;
           }
 
           if (this.state.topics.length === 0){
+						return null;
             // in case we are empty, don't show anything
-            return React.DOM.div();
+            // return React.DOM.div();
           }
 
           return React.DOM.div({className:"blocky"},
               React.DOM.h3({className:"head"},
                   "Latest Conversations ",
-                  React.DOM.a({href:this.get_discourse_path().replace(".json", ""), className: "tiny_button"}, "join")
-                  ),
-              OTS.Widgets.TopicList({topics: this.state.topics,
-                            users: this.state.users})
+                  React.DOM.a({
+										href:this.get_discourse_path().replace(".json", ""),
+										className: "tiny_button"
+									}, "join")
+              ),
+              OTS.Widgets.TopicList({
+								topics: this.state.topics,
+                users: this.state.users
+							})
             );
       }
     });
@@ -341,7 +355,7 @@
       resultsReceived: function(data){
         var group = data.results[0];
         this.setState({members: group.members, who: group.who});
-      }, 
+      },
       getInitialState: function() {
         return {members: "", who: ""};
       },
diff --git a/stylesheets/screen.css b/stylesheets/screen.css
index 5abf83b..e47cbcf 100644
--- a/stylesheets/screen.css
+++ b/stylesheets/screen.css
@@ -179,9 +179,11 @@ ul.nav { margin-right: 7px; }
 .eventsList .event .details { padding: 5px; }
 .eventsList .event .details .team { cursor: pointer; }
 
-.topic { padding: 15px 10px; clear: both; }
+.discussion { width: 75%; margin: 0 auto; margin-bottom: 0; }
+
+.topic { padding: 15px 0; width: 50%; display: inline-block; }
 .topic .metadata { opacity: 0.6; width: 100%; line-height: 30px; }
-.topic .posters { width: 150px; display: block; float: left; }
+.topic .posters { width: 150px; display: block; float: right; }
 .topic .posters .avatar { border-radius: 2px; vertical-align: middle; margin: 2px; }
 .topic.highlight .metadata { opacity: 1; }
 

From c20d90b8853054199e861d8e49276c6266d932e0 Mon Sep 17 00:00:00 2001
From: xMartin <xmartin@siarp.de>
Date: Thu, 11 Feb 2016 00:16:04 +0100
Subject: [PATCH 2/3] fix avatar fallback image urls in lastest discussion
 widget

---
 scripts/widgets.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/scripts/widgets.js b/scripts/widgets.js
index 9fe3852..da01092 100644
--- a/scripts/widgets.js
+++ b/scripts/widgets.js
@@ -235,6 +235,15 @@
         var topic = this.props.topic;
         var users = this.props.users;
         var bumped = moment(topic.bumped_at);
+
+        function getAvatarUrl(template) {
+          var url = template.replace("{size}", "25");
+          if (url.indexOf('https://avatars.discourse.org/') !== 0) {
+            url = 'http://discourse.opentechschool.org' + url;
+          }
+          return url;
+        }
+
         return React.DOM.div({
         				className: this.state.highlight ? "topic highlight" : "topic",
         				onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave}, [
@@ -243,11 +252,10 @@
                   ),
                   React.DOM.div({className: "metadata"}, [
                   	React.DOM.div({className: "posters"}, topic.posters.slice(0, 5).map(function(poster){
-												var origin = 'http://discourse.opentechschool.org';
                   			var poster = users[poster.user_id];
                   			return React.DOM.img({
                   				className: poster.extras === "latest" ? "avatar latest" : "avatar",
-                  				src: origin + poster.avatar_template.replace("{size}", "25"),
+                  				src: getAvatarUrl(poster.avatar_template),
                   				title: poster.username,
                   				alt: poster.username
 												});

From 16917de94d9c613e991540be0383a9db8b6999f1 Mon Sep 17 00:00:00 2001
From: xMartin <xmartin@siarp.de>
Date: Thu, 11 Feb 2016 01:09:57 +0100
Subject: [PATCH 3/3] update all of react to 0.11

---
 _layouts/city.html | 2 +-
 dashboard.html     | 2 +-
 locator/index.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/_layouts/city.html b/_layouts/city.html
index a99500c..1e6076c 100644
--- a/_layouts/city.html
+++ b/_layouts/city.html
@@ -123,7 +123,7 @@ <h3>You?</h3>
   </div>
 </section>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
    $(function() {
diff --git a/dashboard.html b/dashboard.html
index 5150126..01c06ed 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -64,7 +64,7 @@ <h2>Workshops</h1>
 course, prone to error.
 </small>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">
diff --git a/locator/index.html b/locator/index.html
index 28ad35c..fb9b38b 100644
--- a/locator/index.html
+++ b/locator/index.html
@@ -58,7 +58,7 @@ <h2 class="claim-title">Find OpenTechSchool events in your area!</h2>
 </div>
 
 <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js" type="text/javascript" charset="utf-8"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/x-template" data-template="marker-popup">
   <a href="${link}">${name}</a><br/>