Skip to content

GitLab

Commit b172b279 authored by Daniel Suarez Souto's avatar Daniel Suarez Souto
Browse files

Improvemnts in mobile view

parent 74478eb2
Pipeline #1531 passed with stages
in 12 seconds
Hide whitespace changes
Inline Side-by-side
dashboard-gsicrawler.css
View file @ b172b279
@media screen and (max-width: 600px){
.top-bar.dashboard-gsicrawler{
margin-top: 15px;
}
.container{
width: 100% !important;
padding-left: 0px;
padding-right: 0px;
}
iron-pages.dashboard-gsicrawler{
padding: 0px 0px 0px !important;
}
paper-tabs.dashboard-gsicrawler{
margin: 0px 0px !important;
}
}
:root {
--paper-tab-ink: var(--accent-color);
--paper-tabs-selection-bar-color: var(--accent-color);
}
paper-material{
background: white;
}
google-chart {
margin: 0 auto;
}
.lists{
padding: 0px;
}
.chart_container {
width: 49%;
margin-bottom: 20px;
}
/* Tablet+ */
@media (min-width: 601px) {
paper-tabs, paper-toolbar {
}
}
paper-tabs, paper-toolbar {
background-color: #449DD5;
color: #fff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 0 0;
}
paper-tabs[noink][no-bar] paper-tab.iron-selected {
color: #04419B;
}
#content, .announcement {
max-width: 790px;
background-color: #FFF;
padding: 1em;
margin: 0 auto;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.announcement {
margin: 1em auto;
border: 2px solid #0A0;
}
h2 {
font-size: 1.8em;
margin: 1.5em 0 0.5em -2px;
font-weight: bold;
padding: .2em .5em;
background: #edeeef;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #fff;
background-color: #b0de5c;
background-image: -moz-linear-gradient(top, #b0de5c, #82cb00);
background-image: -o-linear-gradient(top, #b0de5c, #82cb00);
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00));
background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00);
background-image: linear-gradient(top, #b0de5c, #82cb00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00');
border-radius: 5px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.nav {
color: #000;
text-decoration: none;
border-bottom: 1px dashed #000;
display: inline-block;
padding: 3px;
}
.nav:hover {
background-color: #DDF;
}
leaflet-map,
geolocation-sample {
max-width: 100%;
height: 30em;
border: 1px solid #aaa;
}
geolocation-sample {
height: 21em;
}
pre {
font-size: large;
padding: 0.5em 1em;
background-color: #DDD;
clear: all;
}
.i {
color: #00D
}
.a {
color: #008;
}
.v {
color: #800;
}
.c {
color: #080;
}
iron-pages {
padding: 48px 62px 10px;
}
#barsentiment > paper-material{
height: 261px;
}
}
paper-material{
background: white;
}
google-chart {
margin: 0 auto;
}
.lists{
padding: 0px;
}
.chart_container {
width: 49%;
margin-bottom: 20px;
}
/* Tablet+ */
@media (min-width: 601px) {
paper-tabs, paper-toolbar {
}
}
paper-tabs, paper-toolbar {
background-color: #449DD5;
color: #fff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 0 0;
}
paper-tabs[noink][no-bar] paper-tab.iron-selected {
color: #04419B;
}
#content, .announcement {
max-width: 790px;
background-color: #FFF;
padding: 1em;
margin: 0 auto;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.announcement {
margin: 1em auto;
border: 2px solid #0A0;
}
h2 {
font-size: 1.8em;
margin: 1.5em 0 0.5em -2px;
font-weight: bold;
padding: .2em .5em;
background: #edeeef;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #fff;
background-color: #b0de5c;
background-image: -moz-linear-gradient(top, #b0de5c, #82cb00);
background-image: -o-linear-gradient(top, #b0de5c, #82cb00);
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00));
background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00);
background-image: linear-gradient(top, #b0de5c, #82cb00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00');
border-radius: 5px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.nav {
color: #000;
text-decoration: none;
border-bottom: 1px dashed #000;
display: inline-block;
padding: 3px;
}
.nav:hover {
background-color: #DDF;
}
leaflet-map,
geolocation-sample {
max-width: 100%;
height: 30em;
border: 1px solid #aaa;
}
geolocation-sample {
height: 21em;
}
pre {
font-size: large;
padding: 0.5em 1em;
background-color: #DDD;
clear: all;
}
.i {
color: #00D
}
.a {
color: #008;
}
.v {
color: #800;
}
.c {
color: #080;
}
iron-pages {
padding: 48px 62px 10px;
}
#barsentiment > paper-material{
height: 261px;
}
.top-bar{
width: 100%;
......@@ -124,19 +142,7 @@
line-height: 35px;
border-radius: 5px 5px 0 0;
}
@media (max-width: 600px){
.top-bar.dashboard-gsicrawler{
margin-top: 15px;
}
.container{
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
}
@media (min-width: 1200px)
.container {
width: 1180px;
}
dashboard-gsicrawler.html
View file @ b172b279
......@@ -397,7 +397,7 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
if(ready){
this.client.search({
// undocumented params are appended to the query string
index: "gsicrawlerprueba",
index: "gsicrawler",
body: {
size: 200,
query: {
......
demo/elements/propaganda-chart/propaganda-chart.html
View file @ b172b279
......@@ -48,20 +48,20 @@
<div class="modal-header" style="height:80px;background-color: #449DD5; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0;display: flex; align-items: center;justify-content: center;">
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
<div class="col-md-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center;">
<div class="col-md-2 img-wrapper" style="width:13%">
<div class="col-md-12 col-xs-12 col-sm-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center;">
<div class="col-md-2 col-xs-2 col-sm-2 img-wrapper" style="width:13%">
<img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-10 col-xs-10 col-sm-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<h4 class="modal-title" id="myModalLabel" style="display: flex; justify-self: center; align-self: center; color: #fff;display:inline-block; vertical-align: middle;">{{getHeadline(news)}}</h4>
</div>
<div class="col-md-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-2 col-xs-2 col-sm-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<h4 style="color: white;color: white; display: flex; justify-self: center; align-self: center; font-style: italic;">Issue: {{getIssue(news)}}</h4>
</div>
</div>
</div>
<div class="modal-body" style="height: 520px" >
<div class="col-md-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="col-md-5 col-xs-5 col-sm-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<br>
<br>
<br>
......@@ -96,7 +96,7 @@
</template>
</div>
<div class="col-md-7" style="overflow-x: hidden; overflow-y: hidden; height: 100%;">
<div class="col-md-7 col-xs-7 col-sm-7" style="overflow-x: hidden; overflow-y: hidden; height: 100%;">
<ul class="nav nav-tabs" role="tablist">
<li class="active" id="tabText"><a data-toggle="tab" href$="#propaganda[[index]]">Text</a></li>
<li id="tabArticle"><a data-toggle="tab" href$="#pdf[[index]]">Magazine</a></li>
......
demo/index.env.html
View file @ b172b279
......@@ -10,6 +10,8 @@
<link rel="import" href="/elements/annotate-view/annotate-view.html">
<link rel="import" href="/elements/trivalent-page/trivalent-page.html">
<link rel="import" href="/bower_components/app-route/app-location.html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/trivalent.jpg">
......
demo/index.html
View file @ b172b279
......@@ -10,6 +10,8 @@
<link rel="import" href="/elements/annotate-view/annotate-view.html">
<link rel="import" href="/elements/trivalent-page/trivalent-page.html">
<link rel="import" href="/bower_components/app-route/app-location.html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/trivalent.jpg">
......@@ -26,7 +28,7 @@
<app-location route="{{route}}"></app-location>
<elastic-client
config='{"host": "http://localhost:19200"}'
config='{"host": "http://sefarad-elasticsearch.cluster.gsi.dit.upm.es"}'
client="{{client}}"
cluster-status="{{myStatus}}">
</elastic-client>
......
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