Commit e0006e11 authored by mlorin's avatar mlorin
Browse files

added styling to the facebook and twitter module

parent c66721c1
......@@ -23,16 +23,17 @@
"license": "ISC",
"dependencies": {
"ajv": "^5.5.0",
"amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git",
"babel-polyfill": "^6.26.0",
"email-validator": "^2.0.3",
"i18n4v": "^0.2.2",
"html-escape": "^2.0.0",
"i18n4v": "^0.2.2",
"marked": "^0.3.18",
"mithril": "^1.1.5",
"moment": "^2.22.2",
"polythene-css": "^1.0.0",
"polythene-mithril": "^1.0.0",
"raven-js": "^3.24.2",
"amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git"
"raven-js": "^3.24.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
......
import m from 'mithril';
import { apiUrl } from 'config';
import moment from 'moment';
import 'moment/locale/de-ch';
import './SocialMediaPlugin.less';
const request_url = "http://127.0.0.1:5000/socialApi/facebook?fields=posts{created_time%2Cmessage%2Cfull_picture}";
const request_url = "http://127.0.0.1:5000/socialApi/facebook?fields=posts.limit(1){created_time,message,full_picture}";
export default class SocialMediaComponent {
......@@ -17,33 +19,35 @@ export default class SocialMediaComponent {
if(title == "Twitter"){
m.request({
method: "GET",
url: "http://127.0.0.1:5000/socialApi/twitter",
url: "http://127.0.0.1:5000/socialApi/twitter?limit=1",
extract: function(xhr) {return {status: xhr.status, body: xhr.responseText}}
}).then(response => {
this.content = m.trust(response.body);
loadScript("https://platform.twitter.com/widgets.js", function(){
});
loadScript("https://platform.twitter.com/widgets.js", function(){});
});
}else if(title == "Facebook"){
var result;
m.request({
method: "GET",
url: request_url,
}).then(response => {
console.log(response.posts.data)
result = m("div.facebook", [
m("a",{href},"Facebook"),
//console.log(response.posts.data)
this.content = m("div.facebook", [
m("div.header",m("a",{href},"Facebook Feed")),
response.posts.data.map(function(post) {
return m("li",[
m("div", post.created_time),
m("p",post.message),
m("img",{src:post.full_picture},'')
var img_class = "";
if(post.full_picture){
img_class = ".picture";
}
return m("div.element",[
m("div.time", get_date(post.created_time)),
m("img",{src:post.full_picture},''),
m("p"+img_class,post.message),
]
);
})
}),
])
this.content = result;
});
}
}
......@@ -54,12 +58,14 @@ export default class SocialMediaComponent {
if (title == "Twitter"){
return m('div.socialMedia.twitter', this.content);
}else if(title == "Facebook"){
console.log(this.content);
return m('div.socialMedia', this.content);
}
}
}
function get_date(data){
return moment(data).fromNow();
}
//loading external script
function loadScript(url, callback){
......
......@@ -4,7 +4,6 @@
position: absolute;
top: 0;
left: 0;
background-color: #f00;
padding: 0%;
margin: 0%;
overflow: scroll;
......@@ -14,4 +13,68 @@
//overflow: scroll;
}
.twitter::-webkit-scrollbar { width: 0 !important }
.facebook{
text-align: left;
height: 100%;
overflow: hidden;
p.picture{
width: 60%;
display: inline-block;
vertical-align: top;
right: 0;
font-size: 0.85em;
}
img{
max-width: 39%;
height: 100%;
display: inline-block;
}
.time{
text-align: right;
margin-right: 5px;
}
.header{
font-size: 21px;
height: 10%;
vertical-align: middle;
border-bottom: 1px solid #dfe3ee;
margin-bottom: 10px;
}
a:link{
text-decoration: none;
color: #3b5998;
}
a:visited {
text-decoration: none;
color: #3b5998;
}
.element{
height: 89%;
width: 100%;
display: block;
overflow: hidden;
border-bottom-color: gray;
padding-bottom: 5px;
> div~img{
margin-right: 10px;
}
}
}
.facebook:link{
text-decoration: none;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment