Commit 0bb1b56f authored by Tasio Mendez's avatar Tasio Mendez
Browse files

Some improvements on smartphones style

parent 0800536a
......@@ -14,7 +14,7 @@
margin: 0px 0px !important;
height: 5%;
}
material-search{
material-search {
margin-top: 3%;
}
.row {
......@@ -27,6 +27,38 @@
--paper-tabs-selection-bar-color: var(--accent-color);
}
.header .trivalent {
width: 20%;
margin:0 auto;
}
iron-pages.dashboard-gsicrawler {
padding: 25px 0px 10px;
}
@media (max-width: 768px) {
.header .trivalent {
width: 60% !important;
}
paper-tabs.dashboard-gsicrawler {
height: 45px !important;
margin: 0px 0px 0px !important;
}
material-search {
margin: 15px 15px 15px !important;
}
.margin-bottom-phone {
margin-bottom: 15px;
}
.about-info {
margin-top: 15px;
}
}
.dashboard-gsicrawler iframe {
max-width: 100%;
}
paper-material{
background: white;
}
......@@ -132,7 +164,18 @@ iron-pages {
#barsentiment > paper-material{
height: 261px;
}
.footer-gsi {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 0 65px;
}
@media (max-width: 768px) {
.footer-gsi {
margin: 10px 0px !important;
}
}
.top-bar{
width: 100%;
......
......@@ -51,8 +51,8 @@
</div>
-->
<div class="container">
<div style="width:100%; padding-bottom: 20px; text-align:center; display:inline-block">
<img style="width: 20%; margin:0 auto;"src="/images/trivalent.jpg">
<div class="header" style="width:100%; padding-bottom: 20px; text-align:center; display:inline-block">
<img class="trivalent" src="/images/trivalent.jpg">
</div>
<paper-tabs selected="{{selected}}">
......@@ -64,12 +64,11 @@
<iron-pages selected="{{selected}}">
<div>
<div class="row">
<material-search active="true" search-value="{{query}}" style="margin: 0 15px;"></material-search>
<br>
<material-search active="true" search-value="{{query}}" style="margin: 0 15px;"></material-search>
</div>
<br>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="col-md-6 col-xs-12 col-sm-6">
<number-chart
data="{{data}}"
object="schema:NewsArticle"
......@@ -80,7 +79,7 @@
stylebg="bg-yellow">
</number-chart>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="col-md-6 col-xs-12 col-sm-6">
<number-chart
data="{{data}}"
aggKey="type"
......@@ -94,7 +93,7 @@
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<entities-chart
field="entities.name"
data="{{data}}"
......@@ -108,7 +107,7 @@
{"name": "Person","type":"schema:Person","color":"#00c0ef"}]'>
</entities-chart>
</div>
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<entities-chart
field="categories.name"
data="{{data}}"
......@@ -125,7 +124,7 @@
<br>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<google-chart
field="schema:author"
data="{{data}}"
......@@ -139,7 +138,7 @@
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'>
</google-chart>
</div>
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<people-chart
data="{{data}}"
title="People"
......@@ -153,7 +152,7 @@
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="col-md-12 col-xs-12 margin-bottom-phone">
<google-chart
field="schema:datePublished"
data="{{data}}"
......@@ -170,13 +169,13 @@
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<paper-tabs selected="{{selectedpage}}" style="height: 38px">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> News</paper-tab>
<!-- <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Social Media</paper-tab>
--> <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Magazines</paper-tab>
</paper-tabs>
<iron-pages class="lists" selected="{{selectedpage}}">
<iron-pages class="lists" selected="{{selectedpage}}" style="padding-top: 0px !important;">
<div>
<news-chart
datos = "{{data}}"
......@@ -194,7 +193,6 @@
</tweet-chart>
</div> -->
<div>
<propaganda-chart
datos = "{{data}}"
title="List of propaganda"
......@@ -205,7 +203,7 @@
</iron-pages>
</div>
<div class="col-md-6">
<div class="col-md-6 col-xs-12 margin-bottom-phone">
<div class="top-bar">
<iron-icon icon="maps:my-location"></iron-icon>
<span>Geolocated News</span>
......@@ -235,7 +233,7 @@
queries="{{queries}}">
</yasgui-ui>
</div>
<div>
<div class="about-info">
This demo shows GSI-Crawler functionalities in the context of the project Trivalent. The system is aimed at crawling from a variety of data sources including news web sites such as CNN and New York Times, as well as social media platforms, like Twitter. The presented demo is the result of the ingest of the crawled online data and posterior analysis and semantic augmentation of said data. The resulting information is stored in both ElastiSearch and Fuseki databases, which allows the user to consult the data is a variety of forms, as showed.
......@@ -254,7 +252,7 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
</iron-pages>
</div>
<div style="background-color:#ccc; padding: 1%; margin: -16px;margin-top: 20px;">
<div style="display: flex; flex-direction: column; justify-content: center; align-content: center; margin: 0 65px;">
<div class="footer-gsi">
<img style="width: 100%; height: 50px; object-fit: contain; margin-bottom: 5px;" src="/images/gsi.png">
<div style="display: flex; flex-direction: column; justify-content: center; font-size: 12px; text-align: center;">© 2019 Grupo de Sistemas Inteligentes GSI-UPM </div>
</div>
......
......@@ -24,7 +24,7 @@
</template>
</div>
</div>
<div id="tagwrapper" style="min-height: 215px; padding-left: 7px;">
<div id="tagwrapper" style="min-height: 215px; padding-left: 7px; overflow-x: auto;">
<template is="dom-repeat" items="{{entities}}" as="entity">
......
......@@ -24,9 +24,14 @@
<!--MAP-->
<div id="happymap"></div>
<style>
#happymap {
height: 600px;
@media (max-width: 768px) {
#happymap.happymap-element {
height: 300px;
}
}
#happymap {
height: 600px;
}
</style>
</template>
<script>
......@@ -420,7 +425,7 @@
}
});
});
that.happyMapLayer = L.heatLayer(happy_data, that.happyMapOptions);
that.intenseMapLayer = L.heatLayer(intense_data, that.intenseMapOptions);
that.powerMapLayer = L.heatLayer(power_data, that.powerMapOptions);
......
......@@ -6,11 +6,11 @@
}
.top-bar{
width: 100%;
background-color: #04419B;
color: white;
text-align: center;
height: 35px;
width: 100%;
background-color: #04419B;
color: white;
text-align: center;
height: 35px;
line-height: 35px;
}
......@@ -99,8 +99,8 @@ paper-icon-button.green:hover {
}
.text {
font-size:13px;
display:inline-block;
font-size:13px;
display:inline-block;
vertical-align: middle;
color: white;
}
......@@ -115,7 +115,7 @@ paper-icon-button.green:hover {
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
text-align: center;
}
img.style-scope.news-chart {
object-fit: contain;
......@@ -153,3 +153,15 @@ button h4 a:focus {
font-size: 13px;
color: white;
}
.news-chart-container {
height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 768px) {
.news-chart-container {
height: 300px;
}
}
......@@ -13,7 +13,7 @@
<!-- Shadow DOM -->
<paper-material elevation="1">
<div id="nodata">No entries match the current filters</div>
<div style="height: 600px; overflow-x: hidden; overflow-y: auto;">
<div class="news-chart-container">
<template is="dom-repeat" items="{{data}}" as="news">
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" style=" text-align: center; min-height: 65px;display: flex;align-items: center;justify-content: center;">
......
......@@ -136,7 +136,9 @@
<div id="tagwrapper" style="min-height: 215px;">
<br>
<template is="dom-repeat" items="{{entities}}" as="person">
<div class="col-md-3 col-xs-3" style="text-align:center; overflow: hidden; height: 115px;" on-tap="filter"><img src="{{person.0}}" onerror="this.src='/images/Person.png';"height="70px" style=" width: 100%;object-fit: contain;" /><br><span>{{getChars(person.1)}}</span>
<div class="col-md-3 col-sm-3 col-xs-6" style="text-align:center; overflow: hidden; height: 115px;" on-tap="filter">
<img src="{{person.0}}" onerror="this.src='/images/Person.png';"height="70px" style=" width: 100%;object-fit: contain;" /><br>
<span>{{getChars(person.1)}}</span>
</div>
</template>
</div>
......
......@@ -6,11 +6,11 @@
}
.top-bar{
width: 100%;
background-color: #04419B;
color: white;
text-align: center;
height: 35px;
width: 100%;
background-color: #04419B;
color: white;
text-align: center;
height: 35px;
line-height: 35px;
}
......@@ -20,8 +20,8 @@
.headline{
text-align: left;
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
}
......@@ -102,8 +102,8 @@ paper-icon-button.green:hover {
}
.text {
font-size:13px;
display:inline-block;
font-size:13px;
display:inline-block;
vertical-align: middle;
color: white;
}
......@@ -136,7 +136,7 @@ a.text.style-scope.propaganda-chart:first-letter {
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
text-align: center;
}
.badge.badge-secondary {
border: 1px solid ;
......@@ -148,4 +148,20 @@ a.text.style-scope.propaganda-chart:first-letter {
margin-left: 3px;
font-size: 13px;
color: white;
}
\ No newline at end of file
}
.propaganda-chart-container {
height: 600px;
overflow-x:
hidden;
overflow-y: auto;
}
@media (max-width: 768px) {
.propaganda-chart-container {
height: 300px;
}
.propaganda-chart.col-xs-2 {
padding: 0 !important;
}
}
......@@ -24,10 +24,10 @@
</table> -->
<div id="nodata">No entries match the current filters</div>
<div style="height: 600px; overflow-x: hidden; overflow-y: auto;">
<div class="propaganda-chart-container">
<template is="dom-repeat" items="{{data}}" as="news">
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" style=" text-align: center; min-height: 65px;display: flex;align-items: center;justify-content: center; width: 100%">
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" style=" text-align: center; min-height: 65px;display: flex;align-items: center;justify-content: center;">
<div class="row" style="width: 100%;">
<button data-toggle="modal" data-target$="#article[[index]]" style="background: none; border: none; cursor: pointer; width: 100%;" title="Check the article">
......@@ -35,7 +35,7 @@
<div class="col-md-2 col-xs-2 col-sm-2" style="justify-self: center; align-self: center;">
<img src={{checkSource(news)}} style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-7 col-xs-7 col-sm-7">
<div class="col-md-10 col-xs-10 col-sm-10">
<a class="text" style="font-size: 15px; display: inline-block; vertical-align: middle;"> {{getHeadline(news)}}</a>
</div>
......
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