Skip to content

GitLab

Commit 6c0db847 authored by Tasio Mendez's avatar Tasio Mendez
Browse files

Modal style on smartphones fixed

parent 14b8fd6a
Hide whitespace changes
Inline Side-by-side
dashboard-gsicrawler.css
View file @ 6c0db847
......@@ -76,7 +76,6 @@ google-chart {
margin-bottom: 20px;
}
paper-tabs, paper-toolbar {
background-color: #449DD5;
color: #fff;
......
demo/elements/news-chart/news-chart.css
View file @ 6c0db847
......@@ -164,6 +164,42 @@ button h4 a:focus {
.news-chart-container {
height: 300px;
}
.modal-dialog {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
.modal-content {
height: 100% !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.modal-body {
flex: 5;
height: 1px !important;
}
.modal-header {
height: auto !important;
min-height: auto;
}
.modal-header div.news-chart {
flex-direction: column !important;
}
.modal-content, .modal-header {
border-radius: 0 !important;
}
.modal-content .modal-tags {
position: absolute;
z-index: 10;
background: white;
height: auto !important;
max-height: 100%;
padding-bottom: 20px;
right: 110%;
transition: all 0.8s ease;
}
}
div.modal.news-chart.in {
......
demo/elements/news-chart/news-chart.html
View file @ 6c0db847
......@@ -35,15 +35,15 @@
<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" style="color: #fff;opacity: inherit;"><span aria-hidden="true">&times;</span></button> -->
<div class="col-md-12 col-sm-12 col-xs-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center; padding: 0">
<div class="col-md-2 col-sm-2 col-xs-2 img-wrapper" style="width:13%; padding: 0">
<div class="col-md-2 col-sm-2 hidden-xs img-wrapper" style="width:13%; padding: 0">
<img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative; padding: 0" align="left">
</div>
<div class="col-md-10 col-sm-10 col-xs-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-10 col-sm-10 col-xs-12" 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;">
<a target="_blank" rel="noopener noreferrer"href$="{{getID(news)}}" style=" color: #fff; outline: 0 !important; text-decoration: none !important; display:inline-block; vertical-align: middle;" title="Open the new">{{getHeadline(news)}} </a>
</h4>
</div>
<div class="col-md-2 col-xs-2 col-sm-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-2 col-xs-12 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;">{{getDate(news)}}</h4>
</div>
......@@ -51,7 +51,7 @@
</div>
<div class="modal-body" style="height: 520px" >
<div class="col-md-5 col-xs-5 col-sm-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="col-md-5 col-xs-12 col-sm-5 modal-tags" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="content" style="text-align:center; margin: 0 auto;">
<br>
<div class="leyend" style="display: flex; flex-direction: row; justify-content: center; margin-bottom: 5px">
......@@ -86,7 +86,7 @@
</template>
</div>
</div>
<div class="col-md-7 col-xs-7 col-sm-7" style="overflow: hidden; height: 100%;">
<div class="col-md-7 col-xs-12 col-sm-7" style="overflow: hidden; height: 100%;">
<div id$="text[[index]]" class="tab-pane fade in active" style="background-color: #eeeeee96; float: right; border: 1px solid #B3BFC7; padding: 20px; padding-top: 0px; overflow-y: auto; height: fit-content; max-height: 100%; ">
<div id$="{{getID(news)}}" class="text-hightlight" style="text-align: justify; white-space: pre-line;">
{{getNew(news)}}
......@@ -99,12 +99,23 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info pull-left visible-xs" onclick="tags_modal_btn()">Show tags</button>
<a href$="{{getID(news)}}" target="_blank">
<button class="btn btn-info">Visit Site</button>
</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script type="text/javascript">
function tags_modal_btn() {
var position = $('.modal-content .modal-tags').css('right');
if (position === '0px')
$('.modal-content .modal-tags').css('right', '110%');
else
$('.modal-content .modal-tags').css('right', '0px');
}
</script>
</div>
</div>
</div>
......@@ -372,6 +383,7 @@
// console.log($('#'+element.parentElement.id+' span').position().top)
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
$('.modal-content .modal-tags').css('right', '110%');
}
},
highlightCategory: function(e) {
......@@ -398,7 +410,7 @@
}
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
$('.modal-content .modal-tags').css('right', '110%');
},
......
demo/elements/propaganda-chart/propaganda-chart.css
View file @ 6c0db847
......@@ -157,6 +157,18 @@ a.text.style-scope.propaganda-chart:first-letter {
overflow-y: auto;
}
.btn.btn-info.style-scope {
color: #fff;
background-color: #449dd5;
border-color: #449dd5;
}
.btn.btn-info.style-scope:hover {
color: #fff;
background-color: #2979ab !important;
border-color: #2979ab !important;
}
@media (max-width: 768px) {
.propaganda-chart-container {
height: 300px;
......@@ -164,6 +176,49 @@ a.text.style-scope.propaganda-chart:first-letter {
.propaganda-chart.col-xs-2 {
padding: 0 !important;
}
.modal-dialog {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
.modal-content {
height: 100% !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.modal-body {
flex: 5;
height: 1px !important;
}
.modal-header {
height: auto !important;
min-height: auto;
}
.modal-header div.news-chart {
flex-direction: column !important;
}
.modal-content, .modal-header {
border-radius: 0 !important;
}
.modal-content .modal-tags {
position: absolute;
z-index: 10;
background: white;
height: auto !important;
max-height: 100%;
padding-bottom: 20px;
padding-top: 20px;
right: 110%;
transition: all 0.8s ease;
}
.modal-content .tab-content .tab-pane {
height: calc(100% - 55px) !important;
}
.modal-content br {
display: none !important;
}
}
div.modal.propaganda-chart.in {
......
demo/elements/propaganda-chart/propaganda-chart.html
View file @ 6c0db847
......@@ -49,19 +49,19 @@
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
<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%">
<div class="col-md-2 col-xs-2 col-sm-2 hidden-xs img-wrapper" style="width:13%">
<img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-10 col-xs-10 col-sm-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-10 col-xs-12 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 col-xs-2 col-sm-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-2 col-xs-12 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 col-xs-5 col-sm-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="col-md-5 col-xs-12 col-sm-5 modal-tags" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<br>
<br>
<br>
......@@ -96,7 +96,7 @@
</template>
</div>
<div class="col-md-7 col-xs-7 col-sm-7" style="overflow-x: hidden; overflow-y: hidden; height: 100%;">
<div class="col-md-7 col-xs-12 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>
......@@ -116,8 +116,20 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info pull-left visible-xs" onclick="tags_modal_btn_propaganda()">Show tags</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script type="text/javascript">
function tags_modal_btn_propaganda() {
var position = $('.modal-content .modal-tags').css('right');
if (position === '0px')
$('.modal-content .modal-tags').css('right', '110%');
else
$('.modal-content .modal-tags').css('right', '0px');
}
</script>
</div>
</div>
</div>
......@@ -228,10 +240,10 @@
var that = this
var hits = this.datos.hits.hits;
var results = []
//console.log(hits)
// console.log(hits)
hits.forEach(function(entry) {
//console.log(entry._source)
// console.log(entry._source)
if(entry._source['@type']=="schema:Article") results.push(entry._source);
});
if(results.length==0){
......@@ -239,17 +251,17 @@
}else{
this.$.nodata.style.visibility = 'hidden';
}
//console.log(results)
// console.log(results)
that.data = results
},
getHeadline: function(news){
//console.log(news['http://schema.org/headline'][0]['@value'])
// console.log(news['http://schema.org/headline'][0]['@value'])
return news['schema:headline']
},
getArticle: function(news){
//console.log(news['http://schema.org/headline'][0]['@value'])
// console.log(news['http://schema.org/headline'][0]['@value'])
text = news['schema:articleBody']
//console.log(text)
// console.log(text)
//text=text.replace('↵','\n')
text=text.replace(' \n','\n')
text=text.replace('\n\f','\n')
......@@ -262,11 +274,11 @@
text=text.replace('', '')
text=text.replace('', '')
text=text.replace('','')
//console.log(text)
// console.log(text)
return text
},
getID: function(news){
//console.log(news['@id'])
// console.log(news['@id'])
return news['@id']
},
getIssue: function(news){
......@@ -274,11 +286,11 @@
},
getDate: function(date){
var fecha = date.toString().split("-");
//console.log(fecha)
// console.log(fecha)
return fecha[2].split("T")[0]+"-"+fecha[1]+"-"+fecha[0]
},
getBg: function(entity){
//console.log(entity)
// console.log(entity)
if(entity["@type"][0] === "schema:Place") {
color = "#ff9900"
} else if(entity["@type"][0] === "schema:Organization") {
......@@ -289,7 +301,7 @@
return color;
},
checkSentiment: function(sentiment) {
//console.log(sentiment[0]['marl:hasPolarity'])
// console.log(sentiment[0]['marl:hasPolarity'])
try{
if (sentiment[0]['marl:hasPolarity'] == "marl:Positive")
return "tweet positive-news"
......@@ -299,7 +311,7 @@
return "tweet neutral-news"
}
catch (e){
//console.log(e)
// console.log(e)
return "tweet neutral-news"
}
},
......@@ -307,19 +319,19 @@
var uri="http://trivalent-resources.cluster.gsi.dit.upm.es/"+news['magazine'].toLowerCase()+"/"+news['magazine'].toLowerCase()+news['number']+".pdf#page="+news['schema:pageStart']+"&view=FitB";
//console.log(uri)
// console.log(uri)
//var uri= "/magazines/"+news['magazine'].toLowerCase()+"/data/"+news['magazine'].toLowerCase()+news['number']+".pdf";
//console.log(uri)
// console.log(uri)
//return uri;
//return '/resources/'+(news['@id'].split('/')[4]);
},
getemotion: function(emotion) {
//console.log(emotion)
// console.log(emotion)
return emotion[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].split(':')[1]
},
checkSpanSentiment: function(sentiment) {
//console.log(sentiment)
// console.log(sentiment)
if (sentiment == "marl:Positive")
return "span positive"
else if (sentiment == "marl:Negative")
......@@ -382,7 +394,7 @@
//Dynamic Scroll
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
$('.modal-content .modal-tags').css('right', '110%');
}
},
......@@ -419,7 +431,7 @@
return news['@id'];
},
highlightCategory: function(e) {
console.log(e)
// console.log(e)
var id = e.target.dataset.id
var element = document.getElementById(id)
var text = e.target.dataset.text
......@@ -428,17 +440,18 @@
var endIndex = e.model.__data__.category["nif:endIndex"]+1
var cnt=0
console.log(beginIndex)
console.log(endIndex)
// console.log(beginIndex)
// console.log(endIndex)
var subtext = text.substring(0,beginIndex)
if (beginIndex >= 0) {
text = text.substring(0,beginIndex) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex,endIndex) + "</span>" + text.substring(endIndex)
element.innerHTML = text
//console.log(text)
// console.log(text)
$('#tabText a').tab('show')
//console.log($('#'+element.parentElement.id+' span').position().top)
// console.log($('#'+element.parentElement.id+' span').position().top)
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
$('.modal-content .modal-tags').css('right', '110%');
}
......
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