Infra 1923 - layout change for Eclipse Installer, add Che Download block
Change-Id: I7498c7753a4ee8bcd45bbf06f08d5b0c60e99a68
Signed-off-by: Eric Poirier <eric@eclipse.org>
diff --git a/assets/public/images/che-installer-bg.png b/assets/public/images/che-installer-bg.png
new file mode 100644
index 0000000..0277161
--- /dev/null
+++ b/assets/public/images/che-installer-bg.png
Binary files differ
diff --git a/assets/public/images/che-installer-logo.png b/assets/public/images/che-installer-logo.png
new file mode 100644
index 0000000..e6626de
--- /dev/null
+++ b/assets/public/images/che-installer-logo.png
Binary files differ
diff --git a/assets/public/images/installer-bg.jpg b/assets/public/images/installer-bg.jpg
index 43ae207..4d402fb 100644
--- a/assets/public/images/installer-bg.jpg
+++ b/assets/public/images/installer-bg.jpg
Binary files differ
diff --git a/assets/public/stylesheets/downloads.min.css b/assets/public/stylesheets/downloads.min.css
index 769f1f5..784498c 100644
--- a/assets/public/stylesheets/downloads.min.css
+++ b/assets/public/stylesheets/downloads.min.css
@@ -1 +1 @@
-.download-link-1 a{padding-left:12px;border-left:1px solid #fff}.padding-left-0{padding-left:0}.icon{text-align:center}@media (min-width:768px){.icon{text-align:right}}@media (max-width:767px){.xs-sm-text-center{text-align:center}}.downloadLink-icon{text-align:center;padding-top:26px}@media (min-width:768px){.downloadLink-icon{text-align:right}}.downloadLink-content ul{margin-bottom:0}.downloadLink-content ul li{padding-bottom:0}@media (min-width:768px){.downloadLink-content{padding-left:0}.downloadLink-icon{pading-right:0}}.ad{margin-bottom:2em}.package-row{border-top:1px solid #ddd;padding:12px 6px}.package-row.zebra{background:#fafafa}@media (max-width:767px){.package-row{padding:24px 12px}}@media (max-width:767px){.package-row .icon{margin-bottom:20px}}.package-row .download-icon{font-size:3em;text-align:right;margin-top:-7px}.package-row.promo .download-icon{margin-top:7px}.package-row .download-link a{font-weight:bold}.package-row h2{margin:10px 0 0 0;font-weight:700;font-size:1.3em}.package-row h2 a{color:#111}.os-warning{padding:10px;background:#ffe5b4}.download-container .options a,.download-container #download-packages a{color:#f7941e;font-weight:normal}.download-container .well{border-radius:0;border-top:0;margin-top:-20px}.download-container .default-download .btn-primary{margin-bottom:10px}.download-container .default-download .package-row{border-top:1px solid #e6e6e6}.download-container .default-download .package-row .download-counts{background-color:#e6e6e6;padding:3px 5px;font-size:10px}.download-container .default-download .package-row .list-inline{margin-left:0}.download-container .default-download .package-row p{font-size:12px}.download-container .default-download .package-row .download .fa-download{font-size:20px}@media (max-width:767px){.download-container .default-download .package-row .download p{font-weight:bold}}.download-container .default-download .package-row.promo{position:relative}.download-container .default-download .package-row.promo .more-info{position:absolute;right:0;bottom:0;background-color:#f7941e;border-radius:5px 0 0 0;padding:0 5px}.download-container .default-download .package-row.promo .more-info a{color:#fff}.download-container .default-download .package-row.promo .more-info a:hover{text-decoration:none}.download-container .default-download h2,.download-container .default-download h3{margin-top:10px}.download-container .default-download h3{font-size:21px}.download-container .default-download h3 a{color:#2c2255}.download-container .default-download .form-choose-platform{color:#fff}.download-container .default-download .form-choose-platform label{font-weight:normal;font-size:12px;position:relative;top:3px;margin-right:10px}@media (min-width:768px){.download-container .default-download .form-choose-platform label{float:right}}@media (max-width:767px){.download-container .default-download .form-choose-platform label{float:left}}.download-container .default-download .form-choose-platform select{font-size:12px}@media (min-width:768px){.download-container .default-download .form-choose-platform select{float:right;margin-left:10px}}@media (max-width:767px){.download-container .default-download .form-choose-platform.text-right{text-align:left}}ul.list-inline .divider.white{border-left:1px solid #fff}ul.list-inline .divider.black{border-left:1px solid #000}ul.list-inline .divider{line-height:1.4;height:100%;height:15px;padding-right:0;padding-left:0;margin-left:4px;position:relative;top:2px}.no-border{border:none}@media (min-width:768px){.vertical-align-min-md{display:flex;align-items:center}}#filter-placeholder{margin-top:6px;text-transform:capitalize;background:#2c2f33;color:#a2a8ad;border-color:#414346;font-size:1.1em}#filter-placeholder ul.ft-menu>li.ft-field{margin-right:0}#filter-placeholder ul.ft-menu>li.ft-field>span.ft-label:before{content:"" !important;width:auto}.installer{background-image:url(../images/installer-bg.jpg);background-size:cover;text-align:center;margin-bottom:20px;color:#fff}.installer .title{padding:20px 20px 0}.installer .title h2{color:#fff;margin-bottom:20px}.installer .title .label-new{background-color:#fff;color:#000;font-size:.6em;font-weight:300}@media (min-width:768px){.installer .title .label-new{margin-bottom:25px;margin-left:10px;padding:4px 5px;position:absolute;top:5px}}.installer .options{background-color:rgba(0,0,0,0.6);padding:10px 10px 0}.installer .orange{color:#f7941e}.header-row{padding:6px 6px 4px 6px}.header-row h2{font-size:1.5em}.header-row a{color:#fff;font-weight:normal}.header-row a.active{font-weight:bold;color:#2f2f31}.orange-download-link a{color:#f7941e}.download-count-eclipse-installer p{padding-top:10px}.download-count-eclipse-installer span{font-size:18px;font-weight:700}
\ No newline at end of file
+.download-link-1 a{padding-left:12px;border-left:1px solid #fff}.padding-left-0{padding-left:0}.icon{text-align:center}@media (min-width:768px){.icon{text-align:right}}@media (max-width:767px){.xs-sm-text-center{text-align:center}}.downloadLink-icon{text-align:center;padding-top:26px}@media (min-width:768px){.downloadLink-icon{text-align:right}}.downloadLink-content ul{margin-bottom:0}.downloadLink-content ul li{padding-bottom:0}@media (min-width:768px){.downloadLink-content{padding-left:0}.downloadLink-icon{pading-right:0}}.ad{margin-bottom:2em}.package-row{border-top:1px solid #ddd;padding:12px 6px}.package-row.zebra{background:#fafafa}@media (max-width:767px){.package-row{padding:24px 12px}}@media (max-width:767px){.package-row .icon{margin-bottom:20px}}.package-row .download-icon{font-size:3em;text-align:right;margin-top:-7px}.package-row.promo .download-icon{margin-top:7px}.package-row .download-link a{font-weight:bold}.package-row h2{margin:10px 0 0 0;font-weight:700;font-size:1.3em}.package-row h2 a{color:#111}.os-warning{padding:10px;background:#ffe5b4}.download-container .options a,.download-container #download-packages a{color:#f7941e;font-weight:normal}.download-container .well{border-radius:0;border-top:0}.download-container .default-download .btn-primary{margin-bottom:10px}.download-container .default-download .package-row{border-top:1px solid #e6e6e6}.download-container .default-download .package-row .download-counts{background-color:#e6e6e6;padding:3px 5px;font-size:10px}.download-container .default-download .package-row .list-inline{margin-left:0}.download-container .default-download .package-row p{font-size:12px}.download-container .default-download .package-row .download .fa-download{font-size:20px}@media (max-width:767px){.download-container .default-download .package-row .download p{font-weight:bold}}.download-container .default-download .package-row.promo{position:relative}.download-container .default-download .package-row.promo .more-info{position:absolute;right:0;bottom:0;background-color:#f7941e;border-radius:5px 0 0 0;padding:0 5px}.download-container .default-download .package-row.promo .more-info a{color:#fff}.download-container .default-download .package-row.promo .more-info a:hover{text-decoration:none}.download-container .default-download h2,.download-container .default-download h3{margin-top:10px}.download-container .default-download h3{font-size:21px}.download-container .default-download h3 a{color:#2c2255}.download-container .default-download .form-choose-platform{color:#fff}.download-container .default-download .form-choose-platform label{font-weight:normal;font-size:12px;position:relative;top:3px;margin-right:10px}@media (min-width:768px){.download-container .default-download .form-choose-platform label{float:right}}@media (max-width:767px){.download-container .default-download .form-choose-platform label{float:left}}.download-container .default-download .form-choose-platform select{font-size:12px}@media (min-width:768px){.download-container .default-download .form-choose-platform select{float:right;margin-left:10px}}@media (max-width:767px){.download-container .default-download .form-choose-platform.text-right{text-align:left}}ul.list-inline .divider.white{border-left:1px solid #fff}ul.list-inline .divider.black{border-left:1px solid #000}ul.list-inline .divider{line-height:1.4;height:100%;height:15px;padding-right:0;padding-left:0;margin-left:4px;position:relative;top:2px}.no-border{border:none}@media (min-width:768px){.vertical-align-min-md{display:flex;align-items:center}}#filter-placeholder{margin-top:6px;text-transform:capitalize;background:#2c2f33;color:#a2a8ad;border-color:#414346;font-size:1.1em}#filter-placeholder ul.ft-menu>li.ft-field{margin-right:0}#filter-placeholder ul.ft-menu>li.ft-field>span.ft-label:before{content:"" !important;width:auto}.installer{background-image:url(../images/installer-bg.jpg);background-size:cover;background-position:bottom right;color:#fff;box-shadow:0 9px 4px -8px rgba(0,0,0,0.3) inset}.installer .row-eq-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:185px;overflow:hidden}.installer .content{padding:30px}.installer .content h2{color:#fff;font-weight:100;font-size:26px;margin-top:0}.installer .content p{font-size:18px;font-weight:100}.installer .content ul{margin-bottom:0}.installer .content ul li{font-size:16px;padding-bottom:0}.installer .options{text-align:center;background-color:rgba(0,0,0,0.6);font-weight:300;padding-top:50px;font-size:16px}.installer .options .title{font-size:20px;padding-bottom:0}.installer .options ul.links li{padding:0 5px}.installer .options ul.links li a{font-weight:300}.installer .orange{color:#f7941e}.header-row{padding:6px 6px 4px 6px;box-shadow:0 3px 2px -1px rgba(0,0,0,0.3);z-index:999;position:relative}.header-row h2{font-size:1.5em}.header-row a{color:#fff;font-weight:normal}.header-row a.active{font-weight:bold;color:#2f2f31}.orange-download-link a{color:#f7941e}.download-count-eclipse-installer p{padding-top:10px}.download-count-eclipse-installer span{font-size:18px;font-weight:700}.che-installer{background-image:url(../images/che-installer-bg.png);background-size:cover;background-position:bottom center;text-align:center;padding:40px 20px;height:215px;overflow:hidden;margin-bottom:2em}@media (min-width:992px){.che-installer{padding:22px 20px}}@media (min-width:1200px){.che-installer{padding:29px 20px}}.che-installer .logo{margin:0 auto}.che-installer h2{margin-top:0}.che-installer p{color:#fff;font-size:18px;font-weight:300;position:relative;margin-bottom:30px}.che-installer p:after{position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #f7941e;display:block;content:" ";left:50%;margin-left:-7px;margin-top:5px}
\ No newline at end of file
diff --git a/assets/src/stylesheets/downloads.less b/assets/src/stylesheets/downloads.less
index 7ea5d09..fd3683d 100644
--- a/assets/src/stylesheets/downloads.less
+++ b/assets/src/stylesheets/downloads.less
@@ -80,7 +80,7 @@
&.promo{
.download-icon{
margin-top:7px
- }
+ }
}
.download-link{
a{
@@ -104,7 +104,7 @@
/* Download Page */
.download-container{
- .options,
+ .options,
#download-packages{
a{
color: #f7941e;
@@ -115,9 +115,8 @@
.well{
border-radius:0;
border-top:0;
- margin-top: -20px;
}
-
+
.default-download{
.btn-primary{
margin-bottom:10px;
@@ -164,7 +163,6 @@
}
}
}
-
h2, h3{
margin-top:10px;
}
@@ -259,33 +257,55 @@
.installer{
background-image:url(../images/installer-bg.jpg);
background-size:cover;
- text-align:center;
- margin-bottom:20px;
+ background-position:bottom right;
color:#fff;
- .title{
- padding:20px 20px 0;
-
+ box-shadow: 0px 9px 4px -8px rgba(0,0,0,0.3) inset;
+ .row-eq-height {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ height: 185px;
+ overflow:hidden;
+ }
+ .content{
+ padding:30px;
h2{
color:#fff;
- margin-bottom:20px;
+ font-weight:100;
+ font-size:26px;
+ margin-top:0;
}
- .label-new{
- background-color: #fff;
- color: #000;
- font-size: 0.6em;
- font-weight: 300;
- @media (min-width: 768px) {
- margin-bottom: 25px;
- margin-left: 10px;
- padding: 4px 5px;
- position: absolute;
- top: 5px;
+ p{
+ font-size: 18px;
+ font-weight: 100;
+ }
+ ul{
+ margin-bottom:0;
+ li{
+ font-size:16px;
+ padding-bottom:0;
}
}
}
+
.options{
- background-color:rgba(0,0,0,0.6);
- padding:10px 10px 0;
+ text-align:center;
+ font-weight:300;
+ padding-top: 50px;
+ font-size:16px;
+ .title{
+ font-size:20px;
+ padding-bottom:0;
+ }
+ ul.links{
+ li{
+ padding:0 5px;
+ a {
+ font-weight:300;
+ }
+ }
+ }
}
.orange{
color:#F7941E;
@@ -294,6 +314,9 @@
.header-row{
padding:6px 6px 4px 6px;
+ box-shadow: 0px 3px 2px -1px rgba(0,0,0,0.3);
+ z-index: 999;
+ position: relative;
h2{
font-size:1.5em;
}
@@ -321,4 +344,47 @@
font-size:18px;
font-weight:700;
}
+}
+
+.che-installer{
+ background-image:url(../images/che-installer-bg.png);
+ background-size:cover;
+ background-position:bottom center;
+ text-align:center;
+ padding:40px 20px;
+ height:215px;
+ overflow:hidden;
+ @media ( min-width : 992px) {
+ padding:22px 20px;
+ }
+ @media ( min-width : 1200px) {
+ padding:29px 20px;
+ }
+ .logo{
+ margin:0 auto;
+ }
+ margin-bottom: 2em;
+ h2{
+ margin-top:0;
+ }
+ p{
+ color:#fff;
+ font-size:18px;
+ font-weight:300;
+ position:relative;
+ margin-bottom:30px;
+ &:after{
+ position:absolute;
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-top: 7px solid #f7941e;
+ display:block;
+ content:" ";
+ left:50%;
+ margin-left:-7px;
+ margin-top:5px;
+ }
+ }
}
\ No newline at end of file
diff --git a/downloads/views/view.sidebar.php b/downloads/views/view.sidebar.php
index 08f9537..429d725 100644
--- a/downloads/views/view.sidebar.php
+++ b/downloads/views/view.sidebar.php
@@ -17,6 +17,17 @@
$PromotedPlugin = new promotedPlugin('ECLIPSE.ORG - Downloads');
$random = rand(0,100);
?>
+
+<div class="row">
+ <div class="col-md-24">
+ <div class="che-installer">
+ <h2><img class="logo img-responsive" src="/downloads/assets/public/images/che-installer-logo.png" alt="Eclipse Che"></h2>
+ <p>Try the new Cloud IDE</p>
+ <a class="link btn btn-warning" href="http://www.eclipse.org/che/getting-started/">Get Started</a>
+ </div>
+ </div>
+</div>
+
<div class="row">
<?php if ($random <= 70): ?>
<div class="ad col-sm-12 col-md-24 clearfix">
