Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added product screenshots #162

Merged
merged 1 commit into from
Jun 28, 2021
Merged

Added product screenshots #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-tweet-embed": "^1.2.2",
"react-twitter-embed": "^2.0.8"
"react-twitter-embed": "^2.0.8",
"reactjs-popup": "^2.0.4",
"swiper": "*"
},
"devDependencies": {
"prettier": "^1.18.2"
Expand Down
3 changes: 1 addition & 2 deletions src/components/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const StyledNav = styled.div`
display: flex;
position: relative;
padding-top: 5rem;
margin-bottom: 7rem;
margin-bottom: 2rem;

@media(max-width: ${breakpoints.xmd}) {
flex-direction: column;
Expand Down Expand Up @@ -91,7 +91,6 @@ const StyledNav = styled.div`
justify-content: flex-end;
list-style: none;
width: 100%;
z-index: 1000;

@media(max-width: ${breakpoints.xmd}) {
height: 95vh;
Expand Down
11 changes: 6 additions & 5 deletions src/components/index/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,10 @@ const StyledBanner = styled.div`

img {
display: block;
height: 26rem;
transform: translateX(-18rem) translateY(4rem);
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
}

div {
Expand All @@ -65,12 +67,11 @@ const StyledBanner = styled.div`
}

h3 {
margin-bottom: 2rem;
@media(max-width: ${breakpoints.md}) {
width: 100%;
max-width: 60rem;
margin: 0 auto;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/index/Feature.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const StyledFeature = styled.div`
}

h3 {
margin: 2rem 0 3rem;
margin-top: 2rem;
}

& > p {
Expand Down
2 changes: 1 addition & 1 deletion src/components/index/Features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import Feature from './Feature'

const StyledFeatures = styled.div`
.features {
padding: 12rem 0;
padding: 1rem 0;
}

.feature__container {
Expand Down
66 changes: 31 additions & 35 deletions src/components/index/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
********************************************************************************/

import Background from '../../resources/background-image.png'
import ContributorsAndAdopters from './ContributorsAndAdopters'
import DocImage from '../DocImage'
import Nav from '../Nav'
import React from 'react'
Expand All @@ -40,35 +39,41 @@ const StyledHeader = styled.div`
height: 3rem;
}
h1 {
margin-bottom: 3rem;
margin-bottom: 1rem;
font-size: 3.4rem;
}
.btn {
&:not(:last-child) {
margin-right: 2.5rem;
}
max-width: 20rem;
@media(max-width: 385px) {
&:not(:last-child) {
margin-right: 0;
}
}
@media(max-width: 410px) {
@media(max-width: 800px) {
&:not(:last-child) {
margin-bottom: 2rem;
margin-right: 2rem;
}
}
}
&__github-details {
display: flex;
justify-content: flex-end;
margin: 5rem 0 0;
position: absolute;
top: 10rem;
right: 2rem;
}
&__buttons {
display:flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
padding: 3rem 10vw;
@media(max-width: 800px){
padding: 3rem 0;
}

}
iframe {
height: 2.5rem;
width: 11rem;
}
.heading-tertiary {
padding-bottom: 40px;
width: 12rem;
}
}
`
Expand All @@ -77,35 +82,26 @@ const Header = () => (
<StyledHeader>
<header className='header' role="banner">
<div className="row">
<Nav />
<Nav shouldRenderLogo={true} />
<div className="header__github-details">
<iframe title="Github Star Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=star&count=true" frameBorder={0} scrolling={0} />
<iframe title="Github Fork Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=fork&count=true" frameBorder={0} scrolling={0} />
</div>
<div className="header__text-box">
<div className="header__logo-box">
<img className="header__logo" src={TheiaLogoDark} alt="theia logo" />
</div>
<h1 className="heading-primary">
An Open, Flexible and Extensible Cloud & Desktop IDE Platform
</h1>
<h2 className="heading-tertiary" style={{ fontSize: '2.2rem' }}>
Eclipse Theia helps you efficiently develop and deliver multi-language Cloud & Desktop IDEs and tools with modern, state-of-the-art web technologies.
</h1>
<h2 style={{ fontSize: '2.2rem' }}>
Eclipse Theia helps you efficiently develop and deliver multi-language Cloud & Desktop IDEs and tools with modern, state-of-the-art web technologies.
<br/>
<a href="https://dev.to/svenefftinge/theia-1-0-finally-a-good-browser-ide-3ok0" rel="noopener noreferrer">Learn about the 1.0 Release!</a>
</h2>

<a className="btn" href="https://github.com/eclipse-theia/theia" target="_blank" rel="noopener noreferrer">View on GitHub</a>
<a className="btn btn--cta" href="/docs/blueprint_download/" rel="noopener">Try now &nbsp;&nbsp;&rarr;</a>
</div>
<div className="header__github-details">
<iframe title="Github Star Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=star&count=true" frameBorder={0} scrolling={0} />
<iframe title="Github Fork Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=fork&count=true" frameBorder={0} scrolling={0} />
<div className="header__buttons">
<a className="btn" href="https://github.com/eclipse-theia/theia" target="_blank" rel="noopener noreferrer">View on GitHub</a>
<a className="btn btn--cta" href="/docs/blueprint_download/" rel="noopener">Try now &nbsp;&nbsp;&rarr;</a>
</div>
</div>
</div>

<div className="row">
<DocImage name="theia-screenshot.jpg" alt="Theia IDE Screenshot" shadow={true} />
</div>

<ContributorsAndAdopters />

</header>
</StyledHeader>
)
Expand Down
122 changes: 122 additions & 0 deletions src/components/index/Products.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/********************************************************************************
* Copyright (C) 2020 EclipseSource and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* This Source Code may also be made available under the following Secondary
* Licenses when the conditions for such availability set forth in the Eclipse
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
* with the GNU Classpath Exception which is available at
* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import React from 'react'

import styled from '@emotion/styled'
import { products } from '../../utils/data'
import { breakpoints } from '../../utils/variables'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';
import "swiper/components/pagination/pagination.min.css"
import SwiperCore, {
Autoplay
} from 'swiper/core';

SwiperCore.use([Autoplay]);

const Styled = styled.div`
.products {
padding-bottom: 5rem;
margin-top: 4rem;

&__thumb {
height: 100%;
max-width: 100%;
object-fit: fill;
cursor: pointer;
display: block;
margin: auto;

&-container {
height: 18rem;
padding: 2px;

@media(min-width: 768px) {
text-align: center;
}

@media(max-width: 50rem) {
width: 40%;
margin-bottom: 4rem;
}

@media(max-width: 30rem) {
width: 100%;
}
}
&-popup {
height: 100%
}
}
}
`

const Products = () => (
<div className="row">
<Styled>
<section className="products" >
<h3 className="heading-tertiary">Selected Tools based on Eclipse Theia</h3>
<Swiper
slidesPerView={1}
breakpoints={{
"560": {
"slidesPerView": 2,
},
"900": {
"slidesPerView": 3,
"spaceBetween": 20,
}
}}
pagination={{ "clickable": true }}
autoplay={{
"delay": 4000,
"disableOnInteraction": false
}}
>
{
products.map((item, i) => (
<SwiperSlide key={i} className="products__thumb-container">
<Popup key={i}
trigger={
<div className="products__thumb-popup">
<img className="products__thumb" src={item.thumb} alt={item.alt} />
</div>

} modal>
{close => (
<>
<button className="close" onClick={close}>
&times;
</button>
<h2>{item.alt}</h2>
<img style={{ width: '100%', margin: '2rem' }} src={item.src} alt={item.alt} />
<a className="btn" href={item.href} target="_blank" rel="noopener noreferrer">More information</a>
</>
)}
</Popup>
</SwiperSlide>
))
}
</Swiper>
</section>
</Styled>
</div>
)

export default Products
4 changes: 0 additions & 4 deletions src/components/index/Promo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,6 @@ const StyledPromo = styled.div`
.promo__video {
width: 100%;
}

p {
margin-top: 3rem;
}
`

const Promo = ({
Expand Down
33 changes: 33 additions & 0 deletions src/layouts/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const Layout = ({ children, canonical }) => {

.heading-tertiary {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

/* --------------------------------------------- */
Expand Down Expand Up @@ -126,6 +127,7 @@ const Layout = ({ children, canonical }) => {
border-radius: 10rem;
transition: all .3s;
font-weight: 500;
outline: none;

&:hover,
&:active,
Expand Down Expand Up @@ -160,6 +162,37 @@ const Layout = ({ children, canonical }) => {
object-fit: contain;
}

/* --------------------------------------------- */
/* ----- Pop Up ----- */
/* --------------------------------------------- */
.popup-content {
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between,
}
@media(max-width: ${breakpoints.md}){
.popup-content{
width: 80%;
}
}
.popup-content .close {
cursor: pointer;
position: absolute;
display: block;
padding: 2px 5px;
line-height: 20px;
right: -10px;
top: -10px;
font-size: 24px;
background: #ffffff;
border-radius: 18px;
border: 1px solid #cfcece;
outline: none;
}


`} />
<Helmet>
<html lang='en' />
Expand Down
5 changes: 5 additions & 0 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,18 @@ import Features from '../components/index/Features'
import Banner from '../components/index/Banner'
import Promos from '../components/index/Promos'
import Footer from '../components/Footer'
import ContributorsAndAdopters from '../components/index/ContributorsAndAdopters'
import Products from '../components/index/Products'


export default () => {
return (
<Layout canonical='/'>
<Header />
<main role="main">
<Products />
<Features />
<ContributorsAndAdopters />
<Banner />
<Promos />
</main>
Expand Down
Binary file added src/resources/screenshots/blueprint.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/coffeeditor.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/logicloud.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/thumbnails/arm_mbedstudio-ss-min.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/thumbnails/blueprint-min.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/thumbnails/coffeeditor-min.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/thumbnails/logicloud-min.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/thumbnails/redhat-crw-ss-min.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading