Skip to content

Commit f48a3c8

Browse files
mustafasoylumustafasoylu
authored
Merge pull request #33 from Materials-Data-Science-and-Informatics/dev
UI adjustments to fit with 2024 dashboard
2 parents 71257c0 + 82a5857 commit f48a3c8

3 files changed

Lines changed: 103 additions & 51 deletions

File tree

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[project]
22
name = "survey-dashboard"
3-
version = "2.0.1"
3+
version = "2.0.2"
44
description = "A Dashboard displaying survey data in an interactive way and allow for interactive exploration."
55
authors = [{name = "Jens Broeder", email = "j.broeder@fz-juelich.de"},
66
{name = "Silke Christine Gerlich", email = "s.gerlich@fz-juelich.de"},

‎survey_dashboard/hmc_layout/en_template.html‎

Lines changed: 101 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -958,19 +958,41 @@
958958
</a>
959959
</div>
960960

961-
<div
962-
class="pr-6 mt-10 lg:pr-12 xl:block"
963-
>
964-
<ul class="flex">
965-
<li class="ml-2">
966-
<a
967-
class="text-blue-dark text-sm uppercase hmc_highlight_hover"
968-
href="https://2024.dashboard.survey.helmholtz-metadaten.de"
969-
>
970-
Data Professionals Survey 2024
971-
</a>
972-
</li>
973-
</ul>
961+
962+
<div class="flex" id="survey-nav">
963+
<div
964+
class="mt-10 mr-3"
965+
>
966+
<ul class="flex">
967+
<li class="ml-2">
968+
<a
969+
class="text-blue-dark text-sm uppercase survey-link"
970+
style="color: #002864;"
971+
href="https://2021.dashboard.survey.helmholtz-metadaten.de"
972+
data-survey="2021"
973+
>
974+
HMC Community Survey 2021
975+
</a>
976+
</li>
977+
</ul>
978+
</div>
979+
<div class="mt-10">|</div>
980+
<div
981+
class="pr-6 mt-10"
982+
>
983+
<ul class="flex">
984+
<li class="ml-2">
985+
<a
986+
class="text-blue-dark text-sm uppercase survey-link"
987+
style="color: #002864;"
988+
href="https://2024.dashboard.survey.helmholtz-metadaten.de"
989+
data-survey="2024"
990+
>
991+
HMC Data Professionals Survey 2024
992+
</a>
993+
</li>
994+
</ul>
995+
</div>
974996
</div>
975997
</div>
976998

@@ -999,22 +1021,24 @@
9991021
<div class="pt-10 pb-20 lg:pt-20">
10001022
<section>
10011023
<div class="container mx-auto mb-24">
1024+
<h2 class="font-bold font-lg">Overview</h2>
1025+
<div style="border: 2px solid rgb(236, 251, 253); border-radius: 8px; padding: 2rem; background-color:rgb(236, 251, 253) ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;">
1026+
<p style="margin-bottom:2.5rem;">
1027+
Who are the data stakeholders in Helmholtz? What tools do they use? What are the roadblocks to better metadata?
1028+
These were some of the questions that we investigated with our HMC community survey in 2021. Here you can browse the results interactively and dive deeper into the data!
1029+
</p>
10021030

1003-
<p style="margin-left:36px; margin-bottom:2.5rem;">
1004-
Who are the data stakeholders in Helmholtz? What tools do they use? What are the roadblocks to better metadata?
1005-
These were some of the questions that we investigated with our HMC community survey in 2021. Here you can browse the results interactively and dive deeper into the data!
1006-
</p>
1007-
1008-
<p style="margin-left: 36px; margin-bottom:12px; margin-top: 2.5rem;">
1009-
Refine the displayed data with <b>Global Data Filters</b> and explore
1010-
<ul style="margin-left: 72px;font-size: 17px; list-style-type: disc;">
1011-
<li>the community profiles of our data stakeholders</li>
1012-
<li>the methods, tools and software used for data generation and handling</li>
1013-
<li>responses and how they compare to each other between different quesitons in the Survey Data Explorer</li>
1014-
</ul>
1015-
</p>
1016-
<div class="flex" style="margin-top: 5rem; min-width: 1200px; align-items: center;margin-left: 24px" >
1031+
<p style="margin-bottom:12px; margin-top: 2.5rem;">
1032+
Refine the displayed data with <b>Global Data Filters</b> and explore
1033+
<ul style="margin-left: 36px;font-size: 17px; list-style-type: disc;">
1034+
<li>the community profiles of our data stakeholders</li>
1035+
<li>the methods, tools and software used for data generation and handling</li>
1036+
<li>responses and how they compare to each other between different quesitons in the Survey Data Explorer</li>
1037+
</ul>
1038+
</p>
1039+
</div>
10171040

1041+
<div class="flex" style="margin-top: 5rem; min-width: 1200px; align-items: center;" >
10181042
<div class="infobox" style="aspect-ratio: 3/2; background-image: url(./en_files/surveyBG.png); margin-left: 0px">
10191043
<div class="infoHeadline" style="margin-bottom: 0px;">
10201044
49
@@ -1041,29 +1065,26 @@
10411065
<a href="https://doi.org/10.7802/2433" target="_blank">Complete dataset is available online</a>
10421066
</div>
10431067
</div>
1044-
10451068
</div>
1046-
<div class="flex flex-wrap">
1047-
<div class="infobox2" style="min-width: 1200px; margin-top: 5rem; margin-left: 24px; border-color: #002864;">
10481069

1049-
<p style="margin-bottom: 0px">
1050-
<b style="color: #002864;">DISCLAIMER</b><br>Displayed data should be interpreted with care. Responses might be subject to sample bias and some
1051-
questions were specific to the research field of participants.
1052-
<a href="https://doi.org/10.3289/HMC_publ_05" target="_blank">Check our written publication for further details.</a>
1053-
</p>
1054-
1055-
</div>
10561070

1071+
<h2 class="font-bold mt-20">Explore the data</h2>
1072+
<div style="border: 2px solid rgb(236, 251, 253); border-radius: 8px; padding: 2rem; background-color:rgb(236, 251, 253) ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;">
1073+
<p style="margin-bottom:2.5rem;">
1074+
Use the filters in Global Data Filters section and explore the data from various angles below.
1075+
</p>
1076+
<p style="margin-bottom:12px; margin-top: 2.5rem;">
1077+
<b style="color: #002864;">Disclaimer</b><br>Displayed data should be interpreted with care.<br> Responses might be subject to sample bias and some
1078+
questions were specific to the research field of participants.<br>
1079+
<a href="https://doi.org/10.3289/HMC_publ_05" target="_blank">Check our written publication for further details.</a>
1080+
</p>
10571081
</div>
1058-
10591082
</div>
10601083
</section>
10611084

10621085
<section>
1063-
<div class="container mx-auto mb-12">
1086+
<div class="container mx-auto mb-12" style="margin-top: -3rem;">
10641087
{% block contents %}
1065-
<div class="flex flex-col w-full lg:space-x-4 lg:flex-row">
1066-
<br>
10671088
{% for doc in docs %}
10681089
{{ embed(doc) if doc.elementid }}
10691090
{% for root in doc.roots %}
@@ -1112,16 +1133,11 @@
11121133
</script>
11131134

11141135
{{ plot_script | indent(8) }}
1115-
<div class="container mx-auto mb-24">
1116-
<div class="row">
1117-
<div class="col-sm">
1118-
{{ embed(roots.App) }}
1119-
</div>
1120-
</div>
1121-
</div>
1136+
<div class="w-full">
1137+
{{ embed(roots.App) }}
1138+
</div>
11221139
{% endblock %}
11231140
</div>
1124-
</div>
11251141
</section>
11261142
</div>
11271143
</main>
@@ -2033,6 +2049,42 @@
20332049
}
20342050
</script>
20352051

2052+
<!-- Survey Navigation Handler -->
2053+
<script>
2054+
// Variable to track which survey is selected (default: 2021)
2055+
var selected = '2021';
2056+
2057+
document.addEventListener('DOMContentLoaded', function() {
2058+
// Determine which survey is currently active based on URL
2059+
var currentUrl = window.location.hostname;
2060+
if (currentUrl.includes('2024.dashboard')) {
2061+
selected = '2024';
2062+
} else {
2063+
selected = '2021';
2064+
}
2065+
2066+
// Apply active styling to the selected survey link
2067+
var links = document.querySelectorAll('.survey-link');
2068+
links.forEach(function(link) {
2069+
var survey = link.getAttribute('data-survey');
2070+
if (survey === selected) {
2071+
link.style.color = '#14c8ff';
2072+
2073+
} else {
2074+
link.style.color = '#002864';
2075+
2076+
}
2077+
});
2078+
2079+
// Add click handlers to update selected variable
2080+
links.forEach(function(link) {
2081+
link.addEventListener('click', function() {
2082+
selected = link.getAttribute('data-survey');
2083+
});
2084+
});
2085+
});
2086+
</script>
2087+
20362088
<!-- Matomo -->
20372089
<script>
20382090
var _paq = (window._paq = window._paq || []);

‎survey_dashboard/i18n/text_display.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
This is the central place for all text from the dashboard which needs to be translated
1313
"""
1414

15-
md_text_title = {'EN': 'Survey Data Explorer: ', 'DE': 'HMC Survey Data Explorer'}
15+
md_text_title = {'EN': 'Community Survey Explorer', 'DE': 'HMC Survey Data Explorer'}
1616

1717
md_dashboard_title = {'EN': 'HMC Community Survey 2021', 'DE': 'HMC Community Survey 2021'}
1818

0 commit comments

Comments
 (0)