From 5cbee451a7c88c8ef1f3b386b58a01be6984838a Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sun, 18 Apr 2021 22:40:40 +0200
Subject: [PATCH] bugfixes and started task page
---
client/public/index.html | 2 +-
.../src/components/forms/LoginForm/index.tsx | 4 +-
client/src/components/ui/Header/header.scss | 2 +-
client/src/index.scss | 26 +-
client/src/pages/Home/home.scss | 635 +++++++++---------
client/src/pages/Home/index.tsx | 2 +-
client/src/pages/Tasks/index.tsx | 20 +-
client/src/pages/Tasks/tasks.scss | 9 +
client/src/styles/settings.scss | 1 +
9 files changed, 366 insertions(+), 335 deletions(-)
diff --git a/client/public/index.html b/client/public/index.html
index f3cdd31..c67ac5b 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -14,7 +14,7 @@
<meta name="name" content="ryoko | plan your projects like a journey">
<meta property="og:title" content="Try planning your next project with ryoko!">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<title>ryoko | plan your projects like a journey</title>
diff --git a/client/src/components/forms/LoginForm/index.tsx b/client/src/components/forms/LoginForm/index.tsx
index 960208a..aebf7c8 100644
--- a/client/src/components/forms/LoginForm/index.tsx
+++ b/client/src/components/forms/LoginForm/index.tsx
@@ -10,10 +10,10 @@ interface Props {
export default function RegisterForm({ onSubmit }: Props) {
const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>('');
-
+
const handleSubmit = useCallback(async (e: FormEvent) => {
e.preventDefault();
- onSubmit?.(username, password);
+ onSubmit?.(username, password);
}, [onSubmit, password, username]);
return (
diff --git a/client/src/components/ui/Header/header.scss b/client/src/components/ui/Header/header.scss
index 4d13738..74a7482 100644
--- a/client/src/components/ui/Header/header.scss
+++ b/client/src/components/ui/Header/header.scss
@@ -2,6 +2,6 @@
display: flex;
justify-content: space-between;
img {
- padding: 35px;
+ padding: 35px 30px 20px 30px;
}
}
\ No newline at end of file
diff --git a/client/src/index.scss b/client/src/index.scss
index 9b5732c..f83ef1d 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -53,6 +53,7 @@ h6 {
h1 {
font-size: fn.toRem(36);
margin-bottom: fn.toRem(20);
+ font-weight: s.$weight-xbold;
&.underlined {
position: relative;
@@ -61,16 +62,17 @@ h1 {
&:after {
content: ' ';
position: absolute;
- right: -10px;
- bottom: 10px;
+ right: -7px;
+ bottom: 5px;
width: 90px;
background: rgba(s.$accent, .5);
- height: 16px;
+ height: 20px;
z-index: -1;
@include mx.breakpoint(large) {
height: 24px;
width: 120px;
+ bottom: 10px;
}
}
@@ -130,16 +132,22 @@ h4 {
overflow: hidden;
.bubble {
- width: 400px;
- height: 400px;
+ width: 300px;
+ height: 300px;
position: absolute;
- filter: blur(200px);
- opacity: 0.75;
-
+ filter: blur(150px);
+ opacity: 0.5;
+
+ @include mx.breakpoint(medium) {
+ width: 400px;
+ height: 400px;
+ filter: blur(300px);
+ opacity: 0.6;
+ }
+
@include mx.breakpoint(large) {
width: 500px;
height: 500px;
- filter: blur(200px);
}
&.secondary {
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 26b55f9..8d01b07 100644
--- a/client/src/pages/Home/home.scss
+++ b/client/src/pages/Home/home.scss
@@ -2,444 +2,449 @@
@use 'styles/mixins.scss'as mx;
@use 'styles/functions.scss'as fn;
-//General
-section {
- margin-bottom: 70px;
+.landing-page {
+ //General
- @include mx.breakpoint(large) {
- margin-bottom: 180px;
- }
-
- &.darker {
- padding: 30px 0;
- color: #f1f1f1;
- background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
+ section {
+ margin-bottom: 70px;
@include mx.breakpoint(large) {
- margin: 0 75px;
- padding: 75px 0;
- border-radius: 25px;
+ margin-bottom: 180px;
}
- }
-}
-
-// Hero section
-
-header {
- display: flex;
- align-items: center;
- padding: 20px;
-
- @include mx.breakpoint(500) {
- padding-top: 80px;
- }
-
- @include mx.breakpoint(large) {
- width: 30%;
- padding-bottom: 160px;
- }
-
- nav {
- display: flex;
- a {
- color: s.$body-color;
- font-weight: s.$weight-bold;
- margin-left: 40px;
- display: none;
+ &.darker {
+ padding: 30px 0;
+ color: #f1f1f1;
+ background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
- @include mx.breakpoint(medium) {
- display: block;
+ @include mx.breakpoint(large) {
+ margin: 0 75px;
+ padding: 75px 0;
+ border-radius: 25px;
}
}
}
-}
-.hero-section {
- position: relative;
+ // Hero section
- .hero-container {
+ header {
display: flex;
- flex-direction: column;
- justify-content: space-between;
+ align-items: center;
+ padding: 20px;
- @include mx.breakpoint(medium) {
- height: calc(100vh - 0.5rem);
+ @include mx.breakpoint(500) {
+ padding-top: 80px;
}
- @include mx.breakpoint(xlarge) {
- height: calc(100vh - 6rem);
+ @include mx.breakpoint(large) {
+ width: 30%;
+ padding-bottom: 160px;
}
- .text-container {
- position: relative;
- z-index: 2;
- padding-bottom: 30px;
- font-size: fn.toRem(18);
+ nav {
+ display: flex;
- @include mx.breakpoint(500) {
- width: 50%;
+ a {
+ color: s.$body-color;
+ font-weight: s.$weight-bold;
+ margin-left: 40px;
+ display: none;
+
+ @include mx.breakpoint(medium) {
+ display: block;
+ }
}
+ }
+ }
+
+ .hero-section {
+ position: relative;
+
+ .hero-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
@include mx.breakpoint(medium) {
- width: 30%;
- padding-bottom: 160px;
+ height: calc(100vh - 0.5rem);
}
- .button-container {
- margin-top: 40px;
+ @include mx.breakpoint(xlarge) {
+ height: calc(100vh - 6rem);
}
- }
- .preview-container {
- width: 50%;
- display: flex;
- justify-content: center;
- margin: 20px 0;
- padding: 30px 0;
- border-top-right-radius: 25px;
- border-bottom-right-radius: 25px;
- background: s.$linear-gradient;
-
- @include mx.breakpoint(500) {
- right: 0;
- height: 100%;
- width: 40%;
- top: 0;
- border-bottom-left-radius: 50px;
- position: absolute;
- margin: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+ .text-container {
+ position: relative;
+ z-index: 2;
+ padding-bottom: 30px;
+ font-size: fn.toRem(18);
- @include mx.breakpoint(large) {
- width: 45%;
+ @include mx.breakpoint(500) {
+ width: 50%;
+ }
+
+ @include mx.breakpoint(medium) {
+ width: 30%;
+ padding-bottom: 160px;
+ }
+
+ .button-container {
+ margin-top: 40px;
+ }
}
- .preview-phone {
- transform: translate(50%, 0%);
- width: 75vw;
+ .preview-container {
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ margin: 20px 0;
+ padding: 30px 0;
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+ background: s.$linear-gradient;
@include mx.breakpoint(500) {
- left: 0;
- top: 50%;
- transform: translate(-20%, -50%);
+ right: 0;
+ height: 100%;
+ width: 40%;
+ top: 0;
+ border-bottom-left-radius: 50px;
position: absolute;
- width: 200px;
+ margin: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
- @include mx.breakpoint(medium) {
- left: 0;
- transform: translate(-30%, -50%);
- top: 50%;
- width: 300px;
+ @include mx.breakpoint(large) {
+ width: 45%;
}
- .inner {
- padding-bottom: 177.77777777778%;
- background: url('/images/screen-design.jpg');
- background-size: 100% auto;
- background-repeat: no-repeat;
- background-position: top left;
- width: 100%;
- border: 7px solid #303030;
- border-radius: 25px;
- box-shadow: 0 0 40px rgba(0, 0, 0, .15);
+ .preview-phone {
+ transform: translate(50%, 0%);
+ width: 75vw;
+
+ @include mx.breakpoint(500) {
+ left: 0;
+ top: 50%;
+ transform: translate(-20%, -50%);
+ position: absolute;
+ width: 200px;
+ }
@include mx.breakpoint(medium) {
- border-width: 10px;
+ left: 0;
+ transform: translate(-30%, -50%);
+ top: 50%;
+ width: 300px;
}
- &:before {
- content: ' ';
- position: absolute;
- width: 25%;
- height: 20px;
- background: #303030;
- left: 50%;
- top: 2px;
- border-radius: 5px;
- transform: translateX(-50%);
+ .inner {
+ padding-bottom: 177.77777777778%;
+ background: url('/images/screen-design.jpg');
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-position: top left;
+ width: 100%;
+ border: 7px solid #303030;
+ border-radius: 25px;
+ box-shadow: 0 0 40px rgba(0, 0, 0, .15);
+
+ @include mx.breakpoint(medium) {
+ border-width: 10px;
+ }
+
+ &:before {
+ content: ' ';
+ position: absolute;
+ width: 25%;
+ height: 20px;
+ background: #303030;
+ left: 50%;
+ top: 2px;
+ border-radius: 5px;
+ transform: translateX(-50%);
+ }
}
}
}
}
- }
-}
+ }
-// Intro Section
+ // Intro Section
-.intro-section {
- .intro-container {
- @include mx.breakpoint(medium) {
- display: flex;
- align-items: center;
+ .intro-section {
+ .intro-container {
+ @include mx.breakpoint(medium) {
+ display: flex;
+ align-items: center;
+ }
}
- }
- .text-container {
- padding-right: 10%;
- margin-bottom: 50px;
+ .text-container {
+ padding-right: 10%;
+ margin-bottom: 50px;
- @include mx.breakpoint(medium) {
- flex-grow: 1;
- margin-bottom: 0;
+ @include mx.breakpoint(medium) {
+ flex-grow: 1;
+ margin-bottom: 0;
+ }
}
- }
- .preview-container {
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(255, 255, 255, .5);
- border-radius: 25px;
- padding: 40px;
+ .preview-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(255, 255, 255, .5);
+ border-radius: 25px;
+ padding: 40px;
- @include mx.breakpoint(large) {
- padding: 110px;
+ @include mx.breakpoint(large) {
+ padding: 110px;
+ }
}
- }
- .project-overview {
- display: grid;
- grid-gap: 20px;
- grid-template-areas:
- 'small-1 large'
- 'small-2 large';
+ .project-overview {
+ display: grid;
+ grid-gap: 20px;
+ grid-template-areas:
+ 'small-1 large'
+ 'small-2 large';
- @include mx.breakpoint(medium) {
- grid-gap: 30px;
+ @include mx.breakpoint(medium) {
+ grid-gap: 30px;
- .project-small {
- .project {
- width: 150px;
- height: 150px;
+ .project-small {
+ .project {
+ width: 150px;
+ height: 150px;
+ }
}
- }
- .project-large {
- .project {
- width: 150px;
- height: 330px;
+ .project-large {
+ .project {
+ width: 150px;
+ height: 330px;
+ }
}
}
- }
- .small-1 {
- grid-area: small-1;
- }
+ .small-1 {
+ grid-area: small-1;
+ }
- .small-2 {
- grid-area: small-2;
+ .small-2 {
+ grid-area: small-2;
- .project {
- animation-delay: 3s;
+ .project {
+ animation-delay: 3s;
+ }
}
- }
- .large {
- grid-area: large;
+ .large {
+ grid-area: large;
- .project {
- animation-delay: 6s;
+ .project {
+ animation-delay: 6s;
+ height: 100%;
+ }
}
- }
- .project {
- animation: move-up 9s ease-in infinite;
+ .project {
+ animation: move-up 9s ease-in infinite;
- svg {
- width: 70px;
- height: 70px;
- }
+ svg {
+ width: 70px;
+ height: 70px;
+ }
- @keyframes move-up {
+ @keyframes move-up {
- 5%,
- 35% {
- transform: translateY(0);
- box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
- }
+ 5%,
+ 35% {
+ transform: translateY(0);
+ box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
+ }
- 10%,
- 30% {
- transform: translateY(-10px);
- box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
+ 10%,
+ 30% {
+ transform: translateY(-10px);
+ box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
+ }
}
- }
+ }
}
}
-}
-
-//Feature section
-
-.feature-section {
- .feature-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin: 5rem auto;
- }
- .feature-list {
- margin-top: 10px;
+ //Feature section
- @include mx.breakpoint(medium) {
+ .feature-section {
+ .feature-container {
display: flex;
+ flex-direction: column;
justify-content: center;
+ margin: 5rem auto;
}
- }
- .feature-item {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 1.5rem 0;
+ .feature-list {
+ margin-top: 10px;
- @include mx.breakpoint(medium) {
- padding: 20px;
+ @include mx.breakpoint(medium) {
+ display: flex;
+ justify-content: center;
+ }
}
- }
- .feature-icon {
- background: s.$radial-gradient;
- background-clip: text;
- -webkit-background-clip: text;
- color: transparent;
- font-size: 5rem;
- }
+ .feature-item {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 1.5rem 0;
- .feature-title {
- margin: 1rem 0;
- }
-}
+ @include mx.breakpoint(medium) {
+ padding: 20px;
+ }
+ }
-// Team section
+ .feature-icon {
+ background: s.$radial-gradient;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 5rem;
+ }
-.team-section {
- .team-container {
- @include mx.breakpoint(large) {
- display: flex;
- flex-direction: column;
- align-items: center;
+ .feature-title {
+ margin: 1rem 0;
}
}
- .team-list {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 20px;
- }
+ // Team section
- .team-member {
- text-align: left;
- margin: 3rem 0;
+ .team-section {
+ .team-container {
+ @include mx.breakpoint(large) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
- @include mx.breakpoint(medium) {
+ .team-list {
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
+ margin-top: 20px;
}
- .team-member-title {
- font-size: fn.toRem(14);
- font-weight: s.$weight-bold;
- display: inline-block;
- padding: 2px 10px;
- text-transform: uppercase;
- background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
- letter-spacing: 0.5px;
- margin-bottom: 10px;
- color: s.$white;
- border-radius: 5px;
- }
-
- .team-member-image {
- margin-right: 0;
- margin-bottom: 3rem;
+ .team-member {
+ text-align: left;
+ margin: 3rem 0;
@include mx.breakpoint(medium) {
- margin-right: 3rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .team-member-title {
+ font-size: fn.toRem(14);
+ font-weight: s.$weight-bold;
+ display: inline-block;
+ padding: 2px 10px;
+ text-transform: uppercase;
+ background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
+ letter-spacing: 0.5px;
+ margin-bottom: 10px;
+ color: s.$white;
+ border-radius: 5px;
+ }
+
+ .team-member-image {
+ margin-right: 0;
+ margin-bottom: 3rem;
border-radius: 50%;
+
+ @include mx.breakpoint(medium) {
+ margin-right: 3rem;
+ margin-bottom: 0;
+ }
}
}
}
-}
-.contact-section {
- .contact-container {
- display: flex;
- flex-direction: column;
- text-align: center;
- }
+ .contact-section {
+ .contact-container {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
- .contact-form {
- margin-top: 2rem;
- display: flex;
- width: 100%;
- flex-wrap: wrap;
- max-width: 960px;
- margin-left: auto;
- margin-right: auto;
+ .contact-form {
+ margin-top: 2rem;
+ display: flex;
+ width: 100%;
+ flex-wrap: wrap;
+ max-width: 960px;
+ margin-left: auto;
+ margin-right: auto;
- .input-element {
- @include mx.breakpoint(medium) {
- width: 50%;
+ .input-element {
+ @include mx.breakpoint(medium) {
+ width: 50%;
+ }
+
+ &.textarea {
+ width: 100%;
+ }
}
- &.textarea {
+ .submit-button {
+ appearance: none;
+ border: none;
+ margin: 0.5rem;
+ }
+
+ .button-container {
+ display: flex;
width: 100%;
+ justify-content: flex-end;
}
}
+ }
- .submit-button {
- appearance: none;
- border: none;
- margin: 0.5rem;
+ footer {
+ .footer-container {
+ padding: 100px 0;
}
- .button-container {
+ .footer-copyright {
+ flex: 1 1 100%;
display: flex;
- width: 100%;
- justify-content: flex-end;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
- }
-}
-footer {
- .footer-container {
- padding: 100px 0;
- }
-
- .footer-copyright {
- flex: 1 1 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- margin-bottom: 10px;
- }
+ .logo {
+ margin-bottom: 10px;
+ }
- .footer-nav {
- flex: 1 1 100%;
- display: flex;
- justify-content: center;
- margin-top: 30px;
+ .footer-nav {
+ flex: 1 1 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 30px;
- a {
- padding: 5px 10px;
+ a {
+ padding: 5px 10px;
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 24b23ef..375e312 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -11,7 +11,7 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg';
export default function Home() {
return (<>
- <Page header={false}>
+ <Page className="landing-page" header={false}>
<section className="hero-section" id="hero">
<div className="hero-container">
<header>
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 6887e1f..612654d 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -3,12 +3,20 @@ import './tasks.scss';
export default function Tasks() {
return (
- <Page className="tasks-page">
- <main className="content-container">
- <h1>Tasks</h1>
- <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
- </main>
- </Page>
+ <>
+ <Page className="tasks-page">
+ <main className="content-container">
+ <section className="intro-section">
+ <h1 className="underlined">Tasks</h1>
+ <p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
+ </section>
+ </main>
+ </Page>
+ <div className="background-container">
+ <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
+ <div className="bubble accent" style={{ bottom: '-20%', left: '-20%' }}></div>
+ </div>
+ </>
);
}
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index e69de29..494fdb8 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/client/src/pages/Tasks/tasks.scss
@@ -0,0 +1,9 @@
+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
+@use 'styles/functions'as fn;
+
+.tasks-page {
+ .intro-section {
+ font-size: fn.toRem(18);
+ }
+}
\ No newline at end of file
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index f12549a..957f8dd 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -30,6 +30,7 @@ $weight-regular: 400;
$weight-medium: 500;
$weight-semi-bold: 600;
$weight-bold: 700;
+$weight-xbold: 800;
// Breakpoints
$breakpoints: (
--
GitLab