Web: Studio: Homepage: Redesign
This commit is contained in:
gectokot
parent
49061c8e84
commit
85c55cd1ea
@ -31,7 +31,7 @@ const Tiles = ({ availableModules, username, t }) => {
|
||||
|
||||
return modules.length > 0 ? (
|
||||
<div className="home-modules-container">
|
||||
<Heading>{greetingMessage}</Heading>
|
||||
<Heading className="greeting">{greetingMessage}</Heading>
|
||||
|
||||
<div className="home-modules">
|
||||
{modules.map((m) => (
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
const HomeContainer = styled.div`
|
||||
margin: 110px auto;
|
||||
margin: ${isMobileOnly ? "46px" : "110px"} auto;
|
||||
max-width: 1040px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -9,24 +10,37 @@ const HomeContainer = styled.div`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-weight: bold;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.home-modules-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.home-modules {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 120px);
|
||||
max-width: 500px;
|
||||
grid-gap: 40px 25px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 40px ${isMobileOnly ? "32px" : "40px"};
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
grid-gap: 20px 25px;
|
||||
}
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
@media (min-width: 500px) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`}
|
||||
|
||||
.home-module {
|
||||
z-index: 42;
|
||||
@ -47,15 +61,6 @@ const HomeContainer = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
margin: 100px auto;
|
||||
|
||||
.home-modules {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default HomeContainer;
|
||||
|
||||
@ -7,17 +7,13 @@ import {
|
||||
IllustrationSvg,
|
||||
} from "./svg";
|
||||
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const StyledIllustration = styled.div`
|
||||
display: flex;
|
||||
display: ${isMobile ? "none" : "flex"};
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
z-index: 42;
|
||||
text-align: center;
|
||||
}
|
||||
max-height: 308px;
|
||||
|
||||
.illustration-svg {
|
||||
width: 500px;
|
||||
@ -45,18 +41,24 @@ const StyledIllustration = styled.div`
|
||||
|
||||
.cloud-left {
|
||||
bottom: 0;
|
||||
left: -140px;
|
||||
left: -75px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cloud-right {
|
||||
top: 0;
|
||||
right: -80px;
|
||||
right: -120px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
background-color: antiquewhite;
|
||||
`}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0 auto 40px;
|
||||
order: 1;
|
||||
|
||||
.cloud-left,
|
||||
.cloud-right {
|
||||
@ -67,10 +69,6 @@ const StyledIllustration = styled.div`
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const HomeIllustration = () => {
|
||||
|
||||
@ -10,9 +10,7 @@ import {
|
||||
import StyledExternalLinkIcon from "@appserver/studio/src/helpers/StyledExternalLinkIcon";
|
||||
|
||||
const ModuleTile = (props) => {
|
||||
const { title, imageUrl } = props;
|
||||
|
||||
let { link } = props;
|
||||
const { title, imageUrl, link } = props;
|
||||
|
||||
return (
|
||||
<StyledModuleTile>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
const StyledModuleTile = styled.div`
|
||||
width: auto;
|
||||
@ -11,58 +12,6 @@ const StyledModuleTile = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.title-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.title-image-wrapper {
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
border: none;
|
||||
height: 241px;
|
||||
width: 240px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text-wrapper {
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
width: auto;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
|
||||
.title-text-header {
|
||||
margin: 46px 0 11px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title-text-description {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title-content {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@ -71,22 +20,27 @@ const StyledModuleTile = styled.div`
|
||||
border: none;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 20px rgba(85, 85, 85, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
.sub-title-text {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
.sub-title-image {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.sub-title-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user