Skip to content

Commit

Permalink
Merge pull request #193 from OpenTechSchool/discource-topics
Browse files Browse the repository at this point in the history 
re-add latest discourse topics
  • Loading branch information
@xMartin
xMartin committed Feb 11, 2016
2 parents aabbc30 + 16917de commit 7548641
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 76 deletions.
2 changes: 1 addition & 1 deletion _layouts/city.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
38 changes: 28 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2>The OpenTechSchool initiative</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>

Expand All @@ -33,7 +33,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, <a href="http://eepurl.com/bGlqw9">subscribe to our newsletter</a>, or <a href="#stay-connected" class="stay-connected">stay connected</a>.</p>
</div>

Expand Down Expand Up @@ -62,7 +62,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>


Expand Down Expand Up @@ -94,7 +99,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>
Expand All @@ -109,23 +114,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");
}
});
});
Expand Down
2 changes: 1 addition & 1 deletion locator/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
15 changes: 11 additions & 4 deletions sass/imports/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -496,7 +504,7 @@ ul.nav {
.posters {
width: 150px;
display: block;
float: left;
float: right;
.avatar {
border-radius: 2px;
vertical-align: middle;
Expand Down Expand Up @@ -936,7 +944,6 @@ footer a:focus {




/* ========================================== */
/* ! Provide higher res assets for iPhone 4 */
/* ========================================== */
Expand Down
136 changes: 79 additions & 57 deletions scripts/widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,59 +220,71 @@
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);

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}, [
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: getAvatarUrl(poster.avatar_template),
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 = {
Expand Down Expand Up @@ -304,34 +316,44 @@
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
});
}
});

OTS.Widgets.ChapterConversations = React.createClass({
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
})
);
}
});
Expand Down
6 changes: 4 additions & 2 deletions stylesheets/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down

0 comments on commit 7548641

Please sign in to comment.