Icons added; miscellaneous improvements.

This commit is contained in:
FilipHalon 2020-01-13 22:34:56 +01:00
parent 0e92104942
commit e05ed89355
9 changed files with 139 additions and 64 deletions

View File

@ -1,4 +1,8 @@
const withCSS = require('@zeit/next-css') const withCSS = require('@zeit/next-css')
module.exports = withCSS({ module.exports = withCSS({
cssModules: false 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' } }) }

29
package-lock.json generated
View File

@ -975,6 +975,35 @@
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==" "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": { "@webassemblyjs/ast": {
"version": "1.8.5", "version": "1.8.5",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",

View File

@ -15,6 +15,9 @@
"author": "", "author": "",
"license": "GPL-3.0-or-later", "license": "GPL-3.0-or-later",
"dependencies": { "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", "@zeit/next-css": "^1.0.1",
"next": "^9.1.7", "next": "^9.1.7",
"react": "^16.12.0", "react": "^16.12.0",

20
pages/_app.js Normal file
View File

@ -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

View File

@ -1,5 +1,6 @@
import Link from 'next/link'; 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 => { const Header = props => {
return ( return (
@ -9,39 +10,39 @@ const Header = props => {
<div className="navbar-options"> <div className="navbar-options">
<li> <li>
<Link href="/"> <Link href="/">
<a>Tasko-O!</a> <a><img src="/taskoala.png" /></a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/">
<a>Zadania</a> <a><FontAwesomeIcon icon={faTasks} /> Zadania</a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/">
<a>Pytania</a> <a><FontAwesomeIcon icon={faCommentDots} /> Pytania</a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/">
<a>Rozmowy</a> <a><FontAwesomeIcon icon={faComments} /> Rozmowy</a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/">
<a>Ustawienia</a> <a><FontAwesomeIcon icon={faCog} /> Ustawienia</a>
</Link> </Link>
</li> </li>
</div> </div>
<div className="navbar-auth"> <div className="navbar-auth">
<li> <li>
<Link href="/"> <Link href="/">
<a>Zaloguj się</a> <a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/"> <Link href="/">
<a>Zarejestruj się</a> <a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
</Link> </Link>
</li> </li>
</div> </div>

View File

@ -1,5 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserCheck, faBuilding } from '@fortawesome/free-solid-svg-icons';
const LoginArea = props => { const LoginArea = props => {
const isDeveloperAccount = props.accountType === "developer" const isDeveloperAccount = props.accountType === "developer"
@ -7,7 +8,7 @@ const LoginArea = props => {
<Link href="/"> <Link href="/">
<span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}> <span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
<span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span> <span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
{/* <span>Ikona</span> */} <span className="account-icon">{isDeveloperAccount ? <FontAwesomeIcon icon={faUserCheck} /> : <FontAwesomeIcon icon={faBuilding} />}</span>
</span> </span>
</Link> </Link>
) )

View File

@ -5,9 +5,9 @@ import Footer from './components/Footer';
const Index = props => ( const Index = props => (
<div className="index"> <div className="index">
<Header/> <Header />
<div className="index-content"> <div className="index-content">
<h2>Rejestracja do systemu Task-O!</h2> <h1>Rejestracja do systemu Task-O!</h1>
<span className="login-areas"> <span className="login-areas">
<LoginArea accountType="developer"/> <LoginArea accountType="developer"/>
<LoginArea accountType="company"/> <LoginArea accountType="company"/>

BIN
public/taskoala.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

119
style.css
View File

@ -15,6 +15,12 @@ body {
height: 100%; height: 100%;
} }
body div:first-child {
height: 100%;
}
/* navbar */
header { header {
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -28,37 +34,35 @@ nav ul {
flex-wrap: wrap; flex-wrap: wrap;
} }
nav ul div { nav div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.navbar-options { .navbar-options {
width: 70%; width: 65%;
} }
.navbar-auth { .navbar-auth {
justify-content: flex-end; justify-content: flex-end;
width: 30%; width: 35%;
/* display: grid;
grid: 1fr / 1fr 1fr */
} }
/* .navbar-auth li a { nav li {
width: 100%;
} */
nav ul div li {
display: flex; display: flex;
} }
nav ul div li a { nav a {
padding: 1em; padding: 1em;
text-decoration: none; text-decoration: none;
color: var(--navbar-text-color); color: var(--navbar-text-color);
font-size: 90%; font-size: 90%;
} }
nav img {
width: 1.1rem;
}
.navbar-auth li:first-of-type a { .navbar-auth li:first-of-type a {
border: solid 1px rgba(255, 255, 255, .1); border: solid 1px rgba(255, 255, 255, .1);
} }
@ -68,46 +72,7 @@ nav ul div li a {
color: #FFF; color: #FFF;
} }
body div:first-child { /* footer */
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; position: fixed;
@ -119,3 +84,55 @@ footer {
text-align: center; text-align: center;
font-size: 90%; 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;
}