Skip to content

Commit

Permalink
Added the Scrolly library to manage custom scroll bars for elements t…
Browse files Browse the repository at this point in the history 
…hat require them (such as context menus, modals, legends, and footers). Updated the code to ensure compatibility with the library.
  • Loading branch information
@aldelucaizs
aldelucaizs committed Jul 30, 2024
1 parent ed4a058 commit 55ca364
Show file tree
Hide file tree
Showing 15 changed files with 621 additions and 234 deletions.
30 changes: 9 additions & 21 deletions css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1250,14 +1250,7 @@
.dashboard-grapetree .card-legend .card-form,
.dashboard-grapetree .card-context-menu .card-form {
padding: 0.2rem;
overflow: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.dashboard-grapetree .card-legend .card-form::-webkit-scrollbar,
.dashboard-grapetree .card-context-menu .card-form::-webkit-scrollbar {
display: none;
position: relative;
}

.dashboard-grapetree .card-legend.legend-loading .card-form {
Expand Down Expand Up @@ -1891,6 +1884,12 @@
margin-top: 1.3rem;
}

.dashboard-grapetree .modal-contents p:first-child,
.dashboard-grapetree .modal-contents ul:first-child,
.dashboard-grapetree .modal-contents ol:first-child {
margin-top: 0;
}

.dashboard-grapetree .modal-contents button {
margin-top: 1.3rem;
}
Expand All @@ -1904,13 +1903,7 @@
.dashboard-grapetree .modal-contents .modal-body {
margin-top: 1.3rem;
max-height: calc(90vh - 14rem); /* 14rem is the sum of h3 size, modal-contents paddings and margins and modal-body margins */
overflow: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.dashboard-grapetree .modal-contents .modal-body::-webkit-scrollbar {
display: none;
position: relative;
}

.dashboard-grapetree .modal-contents .modal-feedback.show {
Expand Down Expand Up @@ -2044,16 +2037,11 @@
z-index: 9998;
width: 32rem;
border-radius: 2.4rem;
padding: 2.1rem 2.1rem;
padding-top: 3.4rem;
padding-bottom: 3.4rem;
padding: 2.1rem 1.3rem;
background-color: var(--white);
top: 1rem;
right: 1rem;
max-height: calc(100vh - 9.8rem);
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
opacity: 0;
-webkit-transform: translateX(calc(100% + 1rem));
transform: translateX(calc(100% + 1rem));
Expand Down
40 changes: 24 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
<!-- LeafletJS CSS -->
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/leaflet-custom.css" />
<!-- scrolly -->
<link rel="stylesheet" href="js/scrolly/scrolly.css" />
<!-- Spectrum -->
<link rel="stylesheet" href="css/spectrum.min.css" type="text/css"/>
</head>
Expand All @@ -49,7 +51,7 @@
</div>
</div><!-- language trigger -->
<div class="tool">
<div class="tool-trigger tool-trigger-footer" onclick="gtiz_layout.showFooter()">
<div class="tool-trigger tool-trigger-footer" onclick="gtiz_footer.showFooter()">
<i class="iconic iconic-information toogle-trigger-img toogle-trigger-img-help"></i>
<i class="iconic iconic-close-circle toogle-trigger-img toogle-trigger-img-close hidden"></i>
</div>
Expand Down Expand Up @@ -278,27 +280,31 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
<section class="search-engine">
<div class="search-engine-close"><i class="iconic iconic-close-circle"></i></div>
<div class="search-engine-contents">
<div class="search-engine-header">
<div class="search-box">
<div class="form-label">Search a function</div>
<input id="search-functions" type="search" placeholder="Keyword..." autocomplete="off">
<div class="search-engine-form">
<div class="search-engine-header">
<div class="search-box">
<div class="form-label">Search a function</div>
<input id="search-functions" type="search" placeholder="Keyword..." autocomplete="off">
</div>
</div>
<div class="search-engine-body"></div>
</div>
<div class="search-engine-body"></div>
</div>
</section>

<footer>
<div class="footer-contents">
<div class="footer-close" onclick="gtiz_layout.showFooter()"><i class="iconic iconic-close-circle"></i></div>
<div class="footer-content">
<!-- here custom contents for footer, you can define them in themes/theme-name/html/footer.html -->
</div>
<div class="footer-info">
<div class="info">
<p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
<p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">2024-07-04</span></p>
<p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
<div class="footer-close" onclick="gtiz_footer.showFooter()"><i class="iconic iconic-close-circle"></i></div>
<div class="footer-contents-wrapper">
<div class="footer-content">
<!-- here custom contents for footer, you can define them in themes/theme-name/html/footer.html -->
</div>
<div class="footer-info">
<div class="info">
<p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
<p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">__LAST_UPDATE__</span></p>
<p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
</div>
</div>
</div>
</div>
Expand All @@ -311,19 +317,20 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
<script src="js/ag-grid/ag-grid-community.min.noStyle.js"></script>
<script src="js/spectrum/spectrum.min.js"></script>
<script src="js/leaflet/leaflet.js"></script>
<script src="js/scrolly/scrolly.js"></script>
<!-- tree enterobase -->
<script charset="utf-8" src="js/tree/base_tree.js"></script>
<script charset="utf-8" src="js/tree/d3_m_tree.js"></script>
<!-- metadata izsam -->
<script src="js/metadata/zooms-finder.js"></script>
<!-- custom -->
<script src="js/optimizer.js"></script>
<script src="js/utils.js"></script>
<script src="js/modal.js"></script>
<script src="js/slider.js"></script>
<script src="js/loader.js"></script>
<script src="js/languages.js"></script>
<script src="js/locales.js"></script>
<script src="js/utils.js"></script>
<script src="js/file-handler.js"></script>
<script src="js/tree.js"></script>
<script src="js/tree-extended.js"></script>
Expand All @@ -338,6 +345,7 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
<script src="js/drag.js"></script>
<script src="js/zooms.js"></script>
<script src="js/search.js"></script>
<script src="js/footer.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Loading

0 comments on commit 55ca364

Please sign in to comment.