You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sedona.apache.org by ji...@apache.org on 2025/04/09 18:45:12 UTC
(sedona) branch master updated: [GH-1495] Fix homepage layout bug in mobile view (#1913)
This is an automated email from the ASF dual-hosted git repository.
jiayu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sedona.git
The following commit(s) were added to refs/heads/master by this push:
new 44ed6ba4cd [GH-1495] Fix homepage layout bug in mobile view (#1913)
44ed6ba4cd is described below
commit 44ed6ba4cd9caca3ca14876ca5c2e01cedacfedc
Author: Furqaan Khan <46...@users.noreply.github.com>
AuthorDate: Wed Apr 9 14:45:03 2025 -0400
[GH-1495] Fix homepage layout bug in mobile view (#1913)
* make some parts of the home page mobile friendly
* better mobile friendliness and reduce margin to 5%
---
docs-overrides/main.html | 40 ++++++++++++++++++++++++++++++----------
1 file changed, 30 insertions(+), 10 deletions(-)
diff --git a/docs-overrides/main.html b/docs-overrides/main.html
index ed0b9639af..914e244d35 100644
--- a/docs-overrides/main.html
+++ b/docs-overrides/main.html
@@ -19,11 +19,31 @@
{% if page.is_homepage %}
<!-- {{ super() }} -->
<style>
- .md-header{position:initial}.md-main__inner{margin-left:15%}.md-content{display:display}@media screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
+ .md-header{position:initial}.md-main__inner{margin-left:5%}.md-content{display:display}@media screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
.br {
display: block;
margin-bottom: 14em;
}
+ .responsive-container {
+ display: grid;
+ grid-template-columns: 44% 56%;
+ grid-gap: 20px;
+ }
+ .responsive-text {
+ grid-column: 1;
+ }
+ .responsive-img {
+ grid-column: 2;
+ }
+
+ @media (max-width: 490px) {
+ .responsive-container {
+ grid-template-columns: 100%;
+ }
+ .responsive-text , .responsive-img {
+ grid-column: 1;
+ }
+ }
</style>
<section class="tx-container">
<div class="md-grid md-typeset">
@@ -62,11 +82,11 @@
<div class="tx-hero__content">
<h1>High Speed</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
According to <a href="./community/publication/">our benchmark and third-party research papers</a>, Sedona runs 2X - 10X faster than other Spark-based geospatial data systems on computation-intensive query workloads.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<figure>
<img src="image/jointime.png" width="350">
<figcaption>Execution time of spatial join with polygons</figcaption>
@@ -79,11 +99,11 @@
<div class="tx-hero__content">
<h1>Low Memory Consumption</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
According to <a href="./community/publication/">our benchmark and third-party research papers</a>, Sedona has 50% less peak memory consumption than other Spark-based geospatial data systems for large-scale in-memory query processing.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<figure>
<img src="image/joinmem.png" width="350">
<figcaption>Peak memory consumption of spatial join with polygons</figcaption>
@@ -96,11 +116,11 @@
<div class="tx-hero__content">
<h1>Ease of Use</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
Sedona offers Scala, Java, Spatial SQL, Python, and R APIs and integrates them into underlying system kernels with care. You can simply create spatial analytics and data mining applications and run them in any cloud environments.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<pre class="hljs" style="display: block; overflow-x: auto; background: rgb(235, 248, 255); color: rgb(81, 109, 123); padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(107, 107, 184);">SELECT</span> superhero.name
<span class="hljs-keyword" style="color: rgb(107, 107, 184);">FROM</span> city, superhero
<span class="hljs-keyword" style="color: rgb(107, 107, 184);">WHERE</span> ST_Contains(city.geom, superhero.geom)