Icons added; miscellaneous improvements.
This commit is contained in:
FilipHalon
parent
0e92104942
commit
e05ed89355
|
|
@ -1,4 +1,8 @@
|
|||
const withCSS = require('@zeit/next-css')
|
||||
module.exports = withCSS({
|
||||
cssModules: false
|
||||
})
|
||||
})
|
||||
|
||||
// Fixes npm packages that depend on `fs` module
|
||||
// Great many thank to Mohammed Alrefai for making this work https://spectrum.chat/next-js/general/how-to-properly-load-font-awesome-pro-into-a-next-js-application~56b0396d-8b7d-447d-9f46-24ba6192936e
|
||||
const nextConfig = { webpack: config => ({ ...config, node: { fs: 'empty' } }) }
|
||||
|
|
|
|||
|
|
@ -975,6 +975,35 @@
|
|||
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
|
||||
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.26",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz",
|
||||
"integrity": "sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.26",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz",
|
||||
"integrity": "sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.26"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz",
|
||||
"integrity": "sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.26"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz",
|
||||
"integrity": "sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.10"
|
||||
}
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@
|
|||
"author": "",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.26",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.12.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.8",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"next": "^9.1.7",
|
||||
"react": "^16.12.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||
// import App from 'next/app'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
// Only uncomment this method if you have blocking data requirements for
|
||||
// every single page in your application. This disables the ability to
|
||||
// perform automatic static optimization, causing every page in your app to
|
||||
// be server-side rendered.
|
||||
//
|
||||
// MyApp.getInitialProps = async (appContext) => {
|
||||
// // calls page's `getInitialProps` and fills `appProps.pageProps`
|
||||
// const appProps = await App.getInitialProps(appContext);
|
||||
//
|
||||
// return { ...appProps }
|
||||
// }
|
||||
|
||||
export default MyApp
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import Link from 'next/link';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCog, faTasks, faComments, faCommentDots, faUserPlus, faUser } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const Header = props => {
|
||||
return (
|
||||
|
|
@ -9,39 +10,39 @@ const Header = props => {
|
|||
<div className="navbar-options">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Tasko-O!</a>
|
||||
<a><img src="/taskoala.png" /></a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Zadania</a>
|
||||
<a><FontAwesomeIcon icon={faTasks} /> Zadania</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Pytania</a>
|
||||
<a><FontAwesomeIcon icon={faCommentDots} /> Pytania</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Rozmowy</a>
|
||||
<a><FontAwesomeIcon icon={faComments} /> Rozmowy</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Ustawienia</a>
|
||||
<a><FontAwesomeIcon icon={faCog} /> Ustawienia</a>
|
||||
</Link>
|
||||
</li>
|
||||
</div>
|
||||
<div className="navbar-auth">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Zaloguj się</a>
|
||||
<a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Zarejestruj się</a>
|
||||
<a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
|
||||
</Link>
|
||||
</li>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Link from 'next/link';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUserCheck, faBuilding } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const LoginArea = props => {
|
||||
const isDeveloperAccount = props.accountType === "developer"
|
||||
|
|
@ -7,7 +8,7 @@ const LoginArea = props => {
|
|||
<Link href="/">
|
||||
<span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
|
||||
<span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
|
||||
{/* <span>Ikona</span> */}
|
||||
<span className="account-icon">{isDeveloperAccount ? <FontAwesomeIcon icon={faUserCheck} /> : <FontAwesomeIcon icon={faBuilding} />}</span>
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import Footer from './components/Footer';
|
|||
|
||||
const Index = props => (
|
||||
<div className="index">
|
||||
<Header/>
|
||||
<Header />
|
||||
<div className="index-content">
|
||||
<h2>Rejestracja do systemu Task-O!</h2>
|
||||
<h1>Rejestracja do systemu Task-O!</h1>
|
||||
<span className="login-areas">
|
||||
<LoginArea accountType="developer"/>
|
||||
<LoginArea accountType="company"/>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
119
style.css
119
style.css
|
|
@ -15,6 +15,12 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
body div:first-child {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
|
@ -28,37 +34,35 @@ nav ul {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav ul div {
|
||||
nav div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar-options {
|
||||
width: 70%;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.navbar-auth {
|
||||
justify-content: flex-end;
|
||||
width: 30%;
|
||||
/* display: grid;
|
||||
grid: 1fr / 1fr 1fr */
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* .navbar-auth li a {
|
||||
width: 100%;
|
||||
} */
|
||||
|
||||
nav ul div li {
|
||||
nav li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav ul div li a {
|
||||
nav a {
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
color: var(--navbar-text-color);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar-auth li:first-of-type a {
|
||||
border: solid 1px rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
|
@ -68,46 +72,7 @@ nav ul div li a {
|
|||
color: #FFF;
|
||||
}
|
||||
|
||||
body div:first-child {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.index-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-areas {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.login-area {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.login-areas span {
|
||||
display: inline-block;
|
||||
height: 10rem;
|
||||
width: 18rem;
|
||||
max-width: 300px;
|
||||
color: #FFF;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.developer-account span {
|
||||
background-color: #4457F3;
|
||||
}
|
||||
|
||||
.company-account span {
|
||||
background-color: #FF733F;
|
||||
}
|
||||
/* footer */
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
|
|
@ -119,3 +84,55 @@ footer {
|
|||
text-align: center;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
/* index page */
|
||||
|
||||
.index-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.login-areas {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.login-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 1em;
|
||||
height: 10rem;
|
||||
width: 18rem;
|
||||
max-width: 300px;
|
||||
color: #FFF;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.developer-account {
|
||||
background-color: #4457F3;
|
||||
}
|
||||
|
||||
.company-account {
|
||||
background-color: #FF733F;
|
||||
}
|
||||
|
||||
.login-area span {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.account-icon {
|
||||
align-self: flex-end;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue