vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-10 17:33:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Start migration to styled components

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2020-12-08 09:35:36 -08:00
parent a6fe41b5c9
commit 76d4593500
7 changed files with 82 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -44,8 +44,5 @@
]
},
"homepage": "http://localhost:8080/react",
"license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
"dependencies": {
"@types/react-google-recaptcha": "^2.1.0"
}
"license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL"
}

3
packages/webapp/package.json
View File

@ -49,6 +49,7 @@
"react-dom": "^17.0.1",
"react-google-recaptcha": "^2.1.0",
"react-intl": "^5.10.6",
"react-router-dom": "^5.2.0"
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.1"
}
}

1
packages/webapp/src/@types/index.d.ts vendored
View File

@ -1,3 +1,2 @@
declare module 'react-recaptcha-v3';
declare module '*.png';

12
packages/webapp/src/components/header/index.tsx
View File

@ -1,3 +1,5 @@
import { StyledNav, StyledDiv,Logo } from './styled';
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'react-router-dom'
@ -34,14 +36,14 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
}
return (
<nav>
<div className="header">
<span className="header-logo"><Link to="/"><img src={String(logo)} alt="logo" /></Link></span>
<StyledNav>
<StyledDiv>
<Logo><Link to="/" className="header-logo"><img src={String(logo)} alt="logo" /></Link></Logo>
{text}
{signUpButton}
{signInButton}
</div>
</nav>
</StyledDiv>
</StyledNav>
)
};
}

69
packages/webapp/src/components/header/styled.ts Normal file
View File

@ -0,0 +1,69 @@
import styled from 'styled-components';
export const StyledNav = styled.nav`
height: 90px;
position: sticky;
top: -16px;
z-index: 1;
-webkit-backface-visibility: hidden;
&::before,
&::after {
content: '';
display: block;
height: 16px;
position: sticky;
}
&::before {
top: 58px;
box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
&::after {
background: linear-gradient(white, rgba(255, 255, 255, 0.3));
top: 0;
z-index: 2;
}
/* Review ....*/
.header-middle {
grid-column-start: 2;
}
.header-area-right1 {
grid-column-start: 3;
}
.header-area-right2 {
grid-column-start: 4;
}
`;
export const StyledDiv = styled.nav`
background: white;
height: 74px;
padding: 10px;
position: sticky;
top: 0px;
margin-top: -16px;
z-index: 3;
display: grid;
white-space: nowrap;
grid-template-columns: 150px 1fr 130px 160px 50px;
`
export const Logo = styled.span`
grid-column-start: 1;
margin-left: 50px;
margin-top: 5px;
.header-logo img {
height: 50px;
}
.header-logo a {
padding: 0px;
}
`

1
packages/webapp/src/components/login-page/styled.ts Normal file
View File

@ -0,0 +1 @@
import styled from 'styled-components';

80
packages/webapp/src/css/core.css
View File

@ -53,86 +53,6 @@ p {
}
/* Header Section */
nav {
height: 90px;
position: sticky;
top: -16px;
z-index: 1;
-webkit-backface-visibility: hidden;
}
nav::before,
nav::after {
content: '';
display: block;
height: 16px;
position: sticky;
}
nav::before {
top: 58px;
box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
nav::after {
background: linear-gradient(white, rgba(255, 255, 255, 0.3));
top: 0;
z-index: 2;
}
nav>div {
background: white;
height: 74px;
padding: 10px;
position: sticky;
top: 0px;
margin-top: -16px;
z-index: 3;
}
nav a {
text-decoration: none;
border-radius: 9px;
padding: 10px 15px 10px 15px;
background-color: white;
color: #000000;
}
.header {
display: grid;
white-space: nowrap;
grid-template-columns: 150px 1fr 130px 160px 50px;
}
.header-logo {
grid-column-start: 1;
margin-left: 50px;
margin-top: 5px;
}
.header-logo img {
height: 50px;
}
.header-logo a {
padding: 0px;
}
.header-middle {
grid-column-start: 2;
}
.header-area-right1 {
grid-column-start: 3;
}
.header-area-right2 {
grid-column-start: 4;
}
/* Footer */
.footer {