Theme everything nicer with transparency and background the sentiment
This commit is contained in:
parent
3050b96baa
commit
24a5af32e2
GPG Key ID:
5ACFCEED46C0904F
|
|
@ -38,7 +38,10 @@ new Chart(ctx, {
|
||||||
return foot;
|
return foot;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -111,6 +111,57 @@
|
||||||
.rounded-tooltip:hover .tooltiptext {
|
.rounded-tooltip:hover .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sentiment-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
cursor:pointer;
|
||||||
|
background-color:rgba(221, 224, 255, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.panel-block {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.panel-block:hover {
|
||||||
|
cursor:pointer;
|
||||||
|
background-color:rgba(221, 224, 255, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel, .box {
|
||||||
|
background-color:rgba(250, 250, 250, 0.5) !important;
|
||||||
|
}
|
||||||
|
.modal{
|
||||||
|
background-color:rgba(255, 255, 255, 0.9) !important;
|
||||||
|
}
|
||||||
|
.modal-background{
|
||||||
|
background-color:rgba(255, 255, 255, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-background-grey-lighter{
|
||||||
|
background-color:rgba(219, 219, 219, 0.5) !important;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -70,12 +70,22 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
|
<div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
|
||||||
<div class="grid-stack-item-content">
|
<div class="grid-stack-item-content">
|
||||||
|
<div class="panel">
|
||||||
|
<p class="panel-heading" style="padding: .2em; line-height: .5em;">
|
||||||
|
<i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
|
||||||
|
Results
|
||||||
|
</p>
|
||||||
|
<div class="panel-block is-active">
|
||||||
|
<div class="control">
|
||||||
<div id="results">
|
<div id="results">
|
||||||
{% include 'ui/drilldown/table_results.html' %}
|
{% include 'ui/drilldown/table_results.html' %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="modals-here">
|
<div id="modals-here">
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,10 @@
|
||||||
|
{% load static %}
|
||||||
<div style="display: none" id="jsonData" data-json="{{ data }}">
|
<div style="display: none" id="jsonData" data-json="{{ data }}">
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
|
|
||||||
<div class="grid-stack-item-content">
|
{% if params.index != 'int' and params.index != 'meta' %}
|
||||||
{% if params.index != 'int' and params.index != 'meta' %}
|
<div id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
|
||||||
<div style="height: 30rem" id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
|
|
||||||
<canvas id="sentiment-chart"></canvas>
|
<canvas id="sentiment-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<script src="{% static 'chart.js' %}"></script>
|
<script src="{% static 'chart.js' %}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,6 @@
|
||||||
|
|
||||||
{% if table %}
|
{% if table %}
|
||||||
<script src="{% static 'js/column-shifter.js' %}"></script>
|
<script src="{% static 'js/column-shifter.js' %}"></script>
|
||||||
<div class="panel">
|
|
||||||
<p class="panel-heading" style="padding: .2em; line-height: .5em;">
|
|
||||||
<i
|
|
||||||
class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
|
|
||||||
|
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
|
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
|
||||||
<i class="fa-solid fa-chart-mixed"></i>
|
<i class="fa-solid fa-chart-mixed"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -36,11 +31,8 @@
|
||||||
<i class="fa-solid fa-shuffle"></i>
|
<i class="fa-solid fa-shuffle"></i>
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
|
||||||
<div class="panel-block is-active">
|
|
||||||
<div class="control">
|
|
||||||
{% include 'ui/drilldown/table_results_partial.html' %}
|
{% include 'ui/drilldown/table_results_partial.html' %}
|
||||||
</div>
|
{% include 'ui/drilldown/sentiment_partial.html' %}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<div id="table-container" class="table-container" style="display:none;">
|
<div id="table-container" class="table-container" style="display:none;">
|
||||||
<table {% render_attrs table.attrs class="table is-striped is-hoverable is-fullwidth" %}>
|
<table {% render_attrs table.attrs class="table drilldown-results-table is-fullwidth" %}>
|
||||||
{% block table.thead %}
|
{% block table.thead %}
|
||||||
{% if table.show_header %}
|
{% if table.show_header %}
|
||||||
<thead {% render_attrs table.attrs.thead class="" %}>
|
<thead {% render_attrs table.attrs.thead class="" %}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue