feat(redesign): Downloads page
* Create featured downloads
* Create all projects section
* Implement search
* Populate links
Change-Id: I5777839a5d2d8bea3de14d557fa6307e70ed50e8
diff --git a/content/en_index.php b/content/en_index.php
index 2ad9e21..5528583 100644
--- a/content/en_index.php
+++ b/content/en_index.php
@@ -1,6 +1,6 @@
<?php
/*******************************************************************************
- * Copyright (c) 2014, 2016 Eclipse Foundation and others.
+ * Copyright (c) 2014, 2016, 2023 Eclipse Foundation and others.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
@@ -8,44 +8,129 @@
*
* Contributors:
* Eric Poirier (Eclipse Foundation) - Initial implementation
+ * Olivier Goulet <olivier.goulet@eclipse-foundation.org>
*******************************************************************************/
?>
-<!-- Featured story and ad -->
-<div class="featured-story downloads-header">
- <div class="container">
- <div class="row">
- <div class="col-sm-15 col-md-16 featured-story-block padding-top-20 padding-bottom-20">
- <h1 class="h1-container">Download <span class="text-nowrap">Eclipse Technology</span><br>that is right for you</h1>
- <div class="eclipsefdn-promo-content" data-ad-format="ads_download" data-ad-publish-to="eclipse_org_downloads"></div>
+<!-- @todo: Remove or update and add .downloads-section below -->
+
+<style>
+ .eclipsefdn-featured-story .featured-story-jumbotron-content-body {
+ font-weight: 500;
+ }
+</style>
+
+<script>
+ // Parallax effect
+ const topBannerImageElement = document.querySelector('.download-top-banner img');
+
+ document.addEventListener('scroll', () => {
+ const scrollY = window.scrollY;
+ topBannerImageElement.style.transform = `translateX(${scrollY * -0.25}px)`;
+ });
+</script>
+
+<section class="container margin-top-20 margin-bottom-60">
+ <div class="row">
+ <div class="featured-download col-md-12 bg-neutral-flat match-height-item">
+ <?php print $Installer->output(); ?>
+ </div>
+
+ <div class="featured-download col-md-12 bg-neutral-flat-dark match-height-item">
+ <div class="featured-download-logo">
+ <img class="img" src="https://www.eclipse.org/downloads/assets/public/images/logo-temurin.png?version=2" />
</div>
- <div class="col-sm-9 col-md-8 featured-ad featured-story-block padding-top-20 padding-bottom-20">
- <div class="featured-ad-content text-center">
- <div class="eclipsefdn-promo-content" data-ad-format="ads_square" data-ad-publish-to="eclipse_org_downloads"></div>
+ <p>
+ The Eclipse Temurin™ project provides high-quality, TCK
+ certified OpenJDK runtimes and associated technology for use across the
+ Java™ ecosystem.
+ </p>
+ <div class="btn-group">
+ <a class="btn btn-neutral" href="https://projects.eclipse.org/projects/adoptium.temurin">Learn More</a>
+ <a class="btn btn-primary" href="https://adoptium.net/">Download</a>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="other-products-section container margin-bottom-40">
+ <div class="row">
+
+ <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0 match-item-height">
+ <div class="card card-bordered text-center margin-bottom-40">
+ <div class="card-logo margin-x-auto margin-bottom-20">
+ <img src="assets/public/images/logo-che.png?version=2" alt="Eclipse Che" />
+ </div>
+ <div class="card-content">
+ <p>Eclipse Che is a developer workspace server and cloud IDE</p>
+ </div>
+ <div class="card-action">
+ <a class="btn btn-neutral btn-block" href="https://eclipse.org/che">Learn More</a>
+ <a class="btn btn-primary btn-block" href="https://www.eclipse.org/che/getting-started/download/">Download</a>
</div>
</div>
</div>
- </div>
-</div>
-<?php print $Downloads->getAllDownloadsProjects(); ?>
-
-<!-- ALL PROJECTS -->
-<div id="all-projects" class="downloads-section">
- <div class="container">
- <h2><span class="downloads-title">All Projects</span></h2>
- <div class="downloads-items">
- <p>Find an Eclipse open source project.</p>
- <form id="form-discover-search" class="col-md-8 col-md-offset-8 form-inline form-search-projects input-group custom-search-form text-center" role="form" action="https://projects.eclipse.org">
- <input id="discover-search-box" class="form-control" type="text" size="25" name="combine" placeholder="Search">
- <span class="input-group-btn">
- <button class="btn btn-default" type="submit">
- <i class="fa fa-search"></i>
- </button>
- </span>
- </form>
- <br/>
- <p><a class="btn btn-info" href="//projects.eclipse.org">List of projects</a></p>
+ <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0 match-item-height margin-bottom-40">
+ <div class="card card-bordered text-center">
+ <div class="card-logo margin-x-auto margin-bottom-20">
+ <img src="assets/public/images/logo-theia.png?version=2" alt="Eclipse Theia" />
+ </div>
+ <div class="card-content">
+ <p>An open, flexible and extensible cloud & desktop IDE platform</p>
+ </div>
+ <div class="card-action">
+ <a class="btn btn-neutral btn-block" href="https://theia-ide.org/#gettingstarted">Learn More</a>
+ <a class="btn btn-primary btn-block" href="https://theia-ide.org/">Download</a>
+ </div>
+ </div>
</div>
+
+ <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0 match-item-height margin-bottom-40">
+ <div class="card card-bordered text-center">
+ <div class="card-logo margin-auto margin-bottom-20">
+ <img src="assets/public/images/logo-jetty.png" alt="Eclipse Jetty" />
+ </div>
+ <div class="card-content">
+ <p>Eclipse Jetty provides a web server and javax.servlet container</p>
+ </div>
+ <div class="card-action">
+ <a class="btn btn-neutral btn-block" href="https://eclipse.dev/jetty/">Learn More</a>
+ <a class="btn btn-primary btn-block" href="https://www.eclipse.org/jetty/download.html">Download</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0 match-item-height margin-bottom-40">
+ <div class="card card-bordered text-center">
+ <div class="card-logo margin-x-auto margin-bottom-20">
+ <img src="assets/public/images/logo-glassfish.png" alt="Eclipse GlassFish" />
+ </div>
+ <div class="card-content">
+ <p>Eclipse Jetty provides a web server and javax.servlet container</p>
+ </div>
+ <div class="card-action">
+ <a class="btn btn-neutral btn-block" href="https://projects.eclipse.org/projects/ee4j.glassfish">Learn More</a>
+ <a class="btn btn-primary btn-block" href="https://projects.eclipse.org/projects/ee4j.glassfish/downloads">Download</a>
+ </div>
+ </div>
+ </div>
+
</div>
-</div>
+</section>
+
+<section class="featured-section-row featured-section-row-dark-bg text-center padding-top-60 padding-bottom-60" id="all-projects">
+ <div class="container">
+ <h2 id="projects">All Projects</h2>
+ <p class="text-primary-light">Find an Eclipse open source project.</p>
+ <form class="search-bar" action="https://projects.eclipse.org">
+ <input name="combine" type="text" placeholder="Search" />
+ <button class="btn btn-primary">
+ <i class="fa fa-search" aria-hidden="true"></i>
+ </button>
+ </form>
+ <a class="btn btn-primary" href="//projects.eclipse.org">
+ List of Projects
+ </a>
+ </div>
+</section>
diff --git a/images/download-parallax.png b/images/download-parallax.png
new file mode 100644
index 0000000..3d0f213
--- /dev/null
+++ b/images/download-parallax.png
Binary files differ
diff --git a/index.php b/index.php
index 90e91c9..4ef2292 100644
--- a/index.php
+++ b/index.php
@@ -14,14 +14,17 @@
*/
require_once ($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/system/app.class.php");
-require_once ($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/classes/downloads/downloads.class.php");
+//require_once ($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/classes/downloads/downloads.class.php");
+require_once ($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/classes/downloads/eclipseInstaller.php");
$App = new App();
$Theme = $App->getThemeClass();
-$Downloads = new Downloads();
+//$Downloads = new Downloads();
+$Installer = new EclipseInstaller();
+$Installer->setInstallerLayout("layout_a");
// This hide/show the banner ad from being displayed
-$Downloads->hideBannerAd(FALSE);
+//$Downloads->hideBannerAd(FALSE);
// @todo: We should probably move these functions to Theme().
$App->Promotion = TRUE;
@@ -29,7 +32,12 @@
$App->AddExtraJSFooter('<script type="text/javascript" src="/downloads/assets/public/javascript/downloads.min.js?v=1.0"></script>');
-$App->setThemeVariables(array('hide_breadcrumbs' => TRUE));
+$App->setThemeVariables(
+ array(
+ 'main_container_classes' => 'container-full test',
+ 'hide_breadcrumbs' => TRUE,
+ )
+);
$pageTitle = 'Eclipse Downloads';
$Theme->setPageAuthor('Eclipse Foundation');
@@ -49,6 +57,42 @@
$App->setThemeVariables($variables);
+ob_start();
+?>
+ <div class="container">
+ <div class="download-extra-header row">
+ <div class="col-md-12 download-top-banner match-height-item-by-row">
+ <img class="img img-responsive" src="images/download-parallax.png" />
+ </div>
+ <div class="col-md-12 match-height-item-by-row">
+ <h1 class="h2 text-center">Download Eclipse Technology that is right for you</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eclipsefdn-featured-story" data-template-id="template-featured-story-jumbotron" data-publish-target="eclipse_org">
+ <div class="featured-container"></div>
+ </div>
+ </div>
+ </div>
+ <!-- Move styles to EFSA -->
+ <style>
+ .eclipsefdn-featured-story[data-template-id="template-featured-story-jumbotron"] .btn-primary {
+ background-color: #000;
+ border-color: #000;
+ }
+
+ .eclipsefdn-featured-story[data-template-id="template-featured-story-jumbotron"] .featured-story-jumbotron-content {
+ width: 100%;
+ }
+
+ .eclipsefdn-featured-story[data-template-id="template-featured-story-jumbotron"] .featured-story-jumbotron-links {
+ flex-shrink: 0;
+ }
+ </style>
+<?php
+$extra_header_html = ob_get_clean();
+$Theme->setExtraHeaderHtml($extra_header_html);
+
// Place your html content in a file called content/en_pagename.php
ob_start();
include ("content/en_index.php");
