Theme everything nicer with transparency and background the sentiment

Mark Veidemanis 2 years ago
parent 3050b96baa
commit 24a5af32e2
Signed by: m
GPG Key ID: 5ACFCEED46C0904F

@ -38,7 +38,10 @@ new Chart(ctx, {
return foot;
}
}
}
},
legend: {
display: false,
},
}
}
});

@ -111,6 +111,57 @@
.rounded-tooltip:hover .tooltiptext {
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>
</head>
<body>

@ -70,8 +70,18 @@
</div>
<div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
<div class="grid-stack-item-content">
<div id="results">
{% include 'ui/drilldown/table_results.html' %}
<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">
{% include 'ui/drilldown/table_results.html' %}
</div>
</div>
</div>
</div>
</div>
</div>

@ -1,13 +1,10 @@
{% load static %}
<div style="display: none" id="jsonData" data-json="{{ data }}">
</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' %}
<div style="height: 30rem" id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
<canvas id="sentiment-chart"></canvas>
</div>
<script src="{% static 'chart.js' %}"></script>
{% endif %}
{% if params.index != 'int' and params.index != 'meta' %}
<div id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
<canvas id="sentiment-chart"></canvas>
</div>
</div>
<script src="{% static 'chart.js' %}"></script>
{% endif %}

@ -5,42 +5,34 @@
{% if table %}
<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">
<i class="fa-solid fa-chart-mixed"></i>
</span>
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
<i class="fa-solid fa-chart-mixed"></i>
{{ table.data|length }} hits in {{ took }}ms
{% if exemption is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="God mode">
<i class="fa-solid fa-book-bible"></i>
</span>
{% else %}
{% if redacted != 0 %}
<span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
<i class="fa-solid fa-mask"></i>
</span>
{% endif %}
{% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
{% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %}
{{ table.data|length }} hits in {{ took }}ms
{% if exemption is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="God mode">
<i class="fa-solid fa-book-bible"></i>
</span>
{% else %}
{% if redacted != 0 %}
<span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
<i class="fa-solid fa-mask"></i>
</span>
{% endif %}
{% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
</p>
<div class="panel-block is-active">
<div class="control">
{% include 'ui/drilldown/table_results_partial.html' %}
</div>
</div>
</div>
{% endif %}

@ -55,7 +55,7 @@
</script>
<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 %}
{% if table.show_header %}
<thead {% render_attrs table.attrs.thead class="" %}>

Loading…
Cancel
Save