Refactor layout of home page

- Move logo to Nav - Move gh-iframes to top-right, below Nav - Display buttons next to text on big screens - Show products in a Slider - Show Popup on click on Product Signed-off-by: Max Elia Schweigkofler <[email protected]>
eclipse-theia · Jun 9, 2021 · d61f5e4 · d61f5e4
1 parent 9146135
commit d61f5e4
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -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"

diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -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;
@@ -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;

diff --git a/src/components/index/Header.js b/src/components/index/Header.js
@@ -39,35 +39,60 @@ 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;
+                margin-bottom: 1rem;
             }
+            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 {
+            position: absolute;
+            top: 11rem;
+            right: 2rem;
+        }
+        &__sub-text-box {
+            padding-bottom: 2rem;
             display: flex;
-            justify-content: flex-end;
-            margin: 5rem 0 0;
+            flex-grow: 1;
+            flex-basis: 0;
+            @media(max-width: 800px){
+                display: block;
+            }
+        }
+        &__buttons {
+            display:flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            text-align: center;
+            padding: 0 3rem;
+            flex: 1 1 0px;
+            @media(max-width: 800px){
+                display: block;
+            }
         }
         iframe {
             height: 2.5rem;
-            width: 11rem;
+            width: 12rem;
         }
         .heading-tertiary {
-            padding-bottom: 40px;
+            flex: 3 1 0px;
+            @media(max-width: 800px) {
+                padding-bottom: 2rem;
+            }
         }
     }
 `
@@ -76,27 +101,29 @@ const Header = () => (
     <StyledHeader>
         <header className='header' role="banner">
             <div className="row">
-                <Nav />
-                <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.
-                        <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>
+                <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">
+                    <h1 className="heading-primary">
+                    An Open, Flexible and Extensible Cloud & Desktop IDE Platform
+                    </h1>
+                    <div className="header__sub-text-box">
+                        <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.
+                            <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>
+                        <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>
 
         </header>

diff --git a/src/components/index/Products.js b/src/components/index/Products.js
@@ -19,29 +19,23 @@ 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`
      .contributors {
         padding-bottom: 5rem;
         margin-top: 4rem;
 
-        &__images {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-
-                @media(min-width: 768px) {
-                    display: grid;
-                    grid-template-columns: repeat(4, 1fr);
-                    grid-row-gap: 80px;
-                }
-
-            @media(max-width: 50rem) {
-                text-align: center;
-            }
-        }
-
-        &__image {
+        &__thumb {
             height: 100%;
             max-width: 42rem;
             object-fit: contain;
@@ -92,15 +86,43 @@ const Products = () => (
             <section className="contributors" >
                 <h3 className="heading-tertiary">Selected Tools based on Eclipse Theia</h3>
                 <div className="contributors__images">
-                    {
+                    <Swiper
+                        spaceBetween={10}
+                        slidesPerView={2}
+                        centeredSlides={false}
+                        breakpoints={{
+                            "800": {
+                                "slidesPerView": 3,
+                                "spaceBetween": 20,
+                                "centeredSlides": true
+                            }
+                        }}
+                        onSlideChange={() => console.log('slide change')}
+                        onSwiper={(swiper) => console.log(swiper)}
+                        pagination={{ "clickable": true }}
+                        loop={true}
+                        autoplay={{
+                            "delay": 4000,
+                            "disableOnInteraction": false
+                        }}
+                    >
+                        {
                         products.map((item, i) => (
-                            <div key={i} className="contributors__image-container">
-                                <a target="_blank" rel="noopener noreferrer" href={item.href}>
-                                    <img className="contributors__image" src={item.src} alt={item.alt} />
-                                </a>
-                            </div>
+                            <SwiperSlide key={i} className="contributors__thumb-container">
+                                <Popup
+                                    trigger={<img className="contributors__thumb" src={item.src} alt={item.alt} />} modal>
+
+                                    <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>
+
                 </div>
             </section>
         </Styled>

diff --git a/src/layouts/layout.js b/src/layouts/layout.js
@@ -160,6 +160,23 @@ 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%;
+                    }
+                }
+                
+
             `} />
             <Helmet>
                 <html lang='en' />