This is an automated email from the ASF dual-hosted git repository.
desruisseaux pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/sis-site.git
commit 456af78d1d109c6860035d033a24b9bfa3c098d6
Author: Martin Desruisseaux <martin.desruisse...@geomatys.com>
AuthorDate: Sat Feb 8 12:23:13 2025 +0100
Remove the carousel, replaced by an ordinary table.
This is in preparation for the removing of BootStrap download.
---
content/javafx.md | 58 +++++++++++---------------------------------
layouts/_default/baseof.html | 4 ---
static/sis.css | 43 +++++++++++++++++---------------
3 files changed, 38 insertions(+), 67 deletions(-)
diff --git a/content/javafx.md b/content/javafx.md
index fa0fd618..1391625a 100644
--- a/content/javafx.md
+++ b/content/javafx.md
@@ -35,50 +35,20 @@ For example users on Intel platforms need to choose `x64`
(not `aarch64`) on the
## First look
-After those two steps are completed, user can see an application like below:
-
-<div id="carousel" class="carousel slide" data-bs-ride="carousel">
- <div class="carousel-inner" style="width:983.25px; height:650px">
- <div class="carousel-item active">
- <img style="width:795.75px; height:507px"
src="images/application/Summary.png" class="d-block">
- <div class="carousel-caption d-none d-md-block">
- <h5>Main metadata (title, geographic extent…) in a summary pane</h5>
- </div>
- </div>
- <div class="carousel-item">
- <img style="width:747px; height:603px"
src="images/application/Visual.png" class="d-block">
- <div class="carousel-caption d-none d-md-block">
- <h5>Visualizing raster data <span style="font-size:medium">(credit:
JAXA GCOM)</span></h5>
- </div>
- </div>
- <div class="carousel-item">
- <img style="width:750.75px; height:522px"
src="images/application/Data.png" class="d-block">
- <div class="carousel-caption d-none d-md-block">
- <h5>Viewing raster numerical values</h5>
- </div>
- </div>
- <div class="carousel-item">
- <img style="width:795.75px; height:516.75px"
src="images/application/Metadata.png" class="d-block">
- <div class="carousel-caption d-none d-md-block">
- <h5>ISO 19115 metadata as a tree</h5>
- </div>
- </div>
- <div class="carousel-item">
- <img style="width:983.25px; height:500.25px"
src="images/application/Isolines.png" class="d-block">
- <div class="carousel-caption d-none d-md-block">
- <h5>Drawing isolines on a raster</h5>
- </div>
- </div>
- </div>
- <button class="carousel-control-prev" type="button"
data-bs-target="#carousel" data-bs-slide="prev">
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
- <span class="visually-hidden">Previous</span>
- </button>
- <button class="carousel-control-next" type="button"
data-bs-target="#carousel" data-bs-slide="next">
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
- <span class="visually-hidden">Next</span>
- </button>
-</div>
+After those two steps are completed, user can see an application like below
+(click on an image to expand):
+
+<table class="images">
+ <tr>
+ <td><img style="width:265.25px; height:169.00px"
src="images/application/Summary.png" title="Main metadata (title, geographic
extent…) in a summary pane"></td>
+ <td><img style="width:249.00px; height:201.00px"
src="images/application/Visual.png" title="Visualizing raster data (credit:
JAXA GCOM)"></td>
+ <td><img style="width:250.25px; height:174.00px"
src="images/application/Data.png" title="Viewing raster numerical
values"></td>
+ </tr><tr>
+ <td><img style="width:265.25px; height:172.25px"
src="images/application/Metadata.png" title="ISO 19115 metadata as a tree"></td>
+ <td><img style="width:327.75px; height:166.75px"
src="images/application/Isolines.png" title="Drawing isolines on a raster"></td>
+ <td></td>
+ </tr>
+</table>
# Open files
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index afbd9237..a2573925 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -67,9 +67,5 @@
</footer>
</div>
</div>
-
-<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js";
-
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
-
</body>
</html>
diff --git a/static/sis.css b/static/sis.css
index 198ba469..0d4cf1e7 100644
--- a/static/sis.css
+++ b/static/sis.css
@@ -88,25 +88,30 @@ div.warning {
padding: 9px;
margin: 21px;
}
-div.carousel-inner {
- text-align: center;
- margin: auto;
-}
-div.carousel-inner img {
- margin: auto;
-}
-div.carousel-caption {
- position: relative;
- left: auto;
- right: auto;
-}
-div.carousel-caption h5 {
- color: SteelBlue;
-}
-.carousel-control-next-icon,
-.carousel-control-prev-icon {
- filter: invert(1);
-}
+
+table.images {
+ background-color: #FDFEFF;
+ border-style: none;
+}
+table.images tr th,
+table.images tr td {
+ text-align: center;
+ vertical-align: middle;
+ border-width: 1px;
+ border-style: dotted;
+ border-color: cornflowerblue;
+}
+table.images tr td img {
+ margin: 10px;
+ width: 100px;
+ height: 100px;
+ transition: transform 0.3s;
+ cursor: pointer;
+}
+table.images tr td img:active {
+ transform: scale(3);
+}
+
.footer {
padding-top: 1rem;
font-size: smaller;
