Skip to content
Snippets Groups Projects
Commit 5cbee451 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

bugfixes and started task page

parent bfc0c13e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 366 additions and 335 deletions
client/public/index.html
+ 1
− 1
View file @ 5cbee451
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<meta name="name" content="ryoko | plan your projects like a journey"> <meta name="name" content="ryoko | plan your projects like a journey">
<meta property="og:title" content="Try planning your next project with ryoko!"> <meta property="og:title" content="Try planning your next project with ryoko!">
<link rel="preconnect" href="https://fonts.gstatic.com"> <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" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<title>ryoko | plan your projects like a journey</title> <title>ryoko | plan your projects like a journey</title>
......
client/src/components/forms/LoginForm/index.tsx
+ 2
− 2
View file @ 5cbee451
...@@ -10,10 +10,10 @@ interface Props { ...@@ -10,10 +10,10 @@ interface Props {
export default function RegisterForm({ onSubmit }: Props) { export default function RegisterForm({ onSubmit }: Props) {
const [username, setUsername] = useState<string>(''); const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>(''); const [password, setPassword] = useState<string>('');
const handleSubmit = useCallback(async (e: FormEvent) => { const handleSubmit = useCallback(async (e: FormEvent) => {
e.preventDefault(); e.preventDefault();
onSubmit?.(username, password); onSubmit?.(username, password);
}, [onSubmit, password, username]); }, [onSubmit, password, username]);
return ( return (
......
client/src/components/ui/Header/header.scss
+ 1
− 1
View file @ 5cbee451
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
img { img {
padding: 35px; padding: 35px 30px 20px 30px;
} }
} }
\ No newline at end of file
client/src/index.scss
+ 17
− 9
View file @ 5cbee451
...@@ -53,6 +53,7 @@ h6 { ...@@ -53,6 +53,7 @@ h6 {
h1 { h1 {
font-size: fn.toRem(36); font-size: fn.toRem(36);
margin-bottom: fn.toRem(20); margin-bottom: fn.toRem(20);
font-weight: s.$weight-xbold;
&.underlined { &.underlined {
position: relative; position: relative;
...@@ -61,16 +62,17 @@ h1 { ...@@ -61,16 +62,17 @@ h1 {
&:after { &:after {
content: ' '; content: ' ';
position: absolute; position: absolute;
right: -10px; right: -7px;
bottom: 10px; bottom: 5px;
width: 90px; width: 90px;
background: rgba(s.$accent, .5); background: rgba(s.$accent, .5);
height: 16px; height: 20px;
z-index: -1; z-index: -1;
@include mx.breakpoint(large) { @include mx.breakpoint(large) {
height: 24px; height: 24px;
width: 120px; width: 120px;
bottom: 10px;
} }
} }
...@@ -130,16 +132,22 @@ h4 { ...@@ -130,16 +132,22 @@ h4 {
overflow: hidden; overflow: hidden;
.bubble { .bubble {
width: 400px; width: 300px;
height: 400px; height: 300px;
position: absolute; position: absolute;
filter: blur(200px); filter: blur(150px);
opacity: 0.75; opacity: 0.5;
@include mx.breakpoint(medium) {
width: 400px;
height: 400px;
filter: blur(300px);
opacity: 0.6;
}
@include mx.breakpoint(large) { @include mx.breakpoint(large) {
width: 500px; width: 500px;
height: 500px; height: 500px;
filter: blur(200px);
} }
&.secondary { &.secondary {
......
client/src/pages/Home/home.scss
+ 320
− 315
View file @ 5cbee451
...@@ -2,444 +2,449 @@ ...@@ -2,444 +2,449 @@
@use 'styles/mixins.scss'as mx; @use 'styles/mixins.scss'as mx;
@use 'styles/functions.scss'as fn; @use 'styles/functions.scss'as fn;
//General
section { .landing-page {
margin-bottom: 70px; //General
@include mx.breakpoint(large) { section {
margin-bottom: 180px; margin-bottom: 70px;
}
&.darker {
padding: 30px 0;
color: #f1f1f1;
background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
@include mx.breakpoint(large) { @include mx.breakpoint(large) {
margin: 0 75px; margin-bottom: 180px;
padding: 75px 0;
border-radius: 25px;
} }
}
}
// 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 { &.darker {
color: s.$body-color; padding: 30px 0;
font-weight: s.$weight-bold; color: #f1f1f1;
margin-left: 40px; background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
display: none;
@include mx.breakpoint(medium) { @include mx.breakpoint(large) {
display: block; margin: 0 75px;
padding: 75px 0;
border-radius: 25px;
} }
} }
} }
}
.hero-section { // Hero section
position: relative;
.hero-container { header {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: space-between; padding: 20px;
@include mx.breakpoint(medium) { @include mx.breakpoint(500) {
height: calc(100vh - 0.5rem); padding-top: 80px;
} }
@include mx.breakpoint(xlarge) { @include mx.breakpoint(large) {
height: calc(100vh - 6rem); width: 30%;
padding-bottom: 160px;
} }
.text-container { nav {
position: relative; display: flex;
z-index: 2;
padding-bottom: 30px;
font-size: fn.toRem(18);
@include mx.breakpoint(500) { a {
width: 50%; 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) { @include mx.breakpoint(medium) {
width: 30%; height: calc(100vh - 0.5rem);
padding-bottom: 160px;
} }
.button-container { @include mx.breakpoint(xlarge) {
margin-top: 40px; height: calc(100vh - 6rem);
} }
}
.preview-container { .text-container {
width: 50%; position: relative;
display: flex; z-index: 2;
justify-content: center; padding-bottom: 30px;
margin: 20px 0; font-size: fn.toRem(18);
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;
}
@include mx.breakpoint(large) { @include mx.breakpoint(500) {
width: 45%; width: 50%;
}
@include mx.breakpoint(medium) {
width: 30%;
padding-bottom: 160px;
}
.button-container {
margin-top: 40px;
}
} }
.preview-phone { .preview-container {
transform: translate(50%, 0%); width: 50%;
width: 75vw; 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) { @include mx.breakpoint(500) {
left: 0; right: 0;
top: 50%; height: 100%;
transform: translate(-20%, -50%); width: 40%;
top: 0;
border-bottom-left-radius: 50px;
position: absolute; position: absolute;
width: 200px; margin: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
@include mx.breakpoint(medium) { @include mx.breakpoint(large) {
left: 0; width: 45%;
transform: translate(-30%, -50%);
top: 50%;
width: 300px;
} }
.inner { .preview-phone {
padding-bottom: 177.77777777778%; transform: translate(50%, 0%);
background: url('/images/screen-design.jpg'); width: 75vw;
background-size: 100% auto;
background-repeat: no-repeat; @include mx.breakpoint(500) {
background-position: top left; left: 0;
width: 100%; top: 50%;
border: 7px solid #303030; transform: translate(-20%, -50%);
border-radius: 25px; position: absolute;
box-shadow: 0 0 40px rgba(0, 0, 0, .15); width: 200px;
}
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
border-width: 10px; left: 0;
transform: translate(-30%, -50%);
top: 50%;
width: 300px;
} }
&:before { .inner {
content: ' '; padding-bottom: 177.77777777778%;
position: absolute; background: url('/images/screen-design.jpg');
width: 25%; background-size: 100% auto;
height: 20px; background-repeat: no-repeat;
background: #303030; background-position: top left;
left: 50%; width: 100%;
top: 2px; border: 7px solid #303030;
border-radius: 5px; border-radius: 25px;
transform: translateX(-50%); 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-section {
.intro-container { .intro-container {
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
display: flex; display: flex;
align-items: center; align-items: center;
}
} }
}
.text-container { .text-container {
padding-right: 10%; padding-right: 10%;
margin-bottom: 50px; margin-bottom: 50px;
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
flex-grow: 1; flex-grow: 1;
margin-bottom: 0; margin-bottom: 0;
}
} }
}
.preview-container { .preview-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .5);
border-radius: 25px; border-radius: 25px;
padding: 40px; padding: 40px;
@include mx.breakpoint(large) { @include mx.breakpoint(large) {
padding: 110px; padding: 110px;
}
} }
}
.project-overview { .project-overview {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-template-areas: grid-template-areas:
'small-1 large' 'small-1 large'
'small-2 large'; 'small-2 large';
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
grid-gap: 30px; grid-gap: 30px;
.project-small { .project-small {
.project { .project {
width: 150px; width: 150px;
height: 150px; height: 150px;
}
} }
}
.project-large { .project-large {
.project { .project {
width: 150px; width: 150px;
height: 330px; height: 330px;
}
} }
} }
}
.small-1 { .small-1 {
grid-area: small-1; grid-area: small-1;
} }
.small-2 { .small-2 {
grid-area: small-2; grid-area: small-2;
.project { .project {
animation-delay: 3s; animation-delay: 3s;
}
} }
}
.large { .large {
grid-area: large; grid-area: large;
.project { .project {
animation-delay: 6s; animation-delay: 6s;
height: 100%;
}
} }
}
.project { .project {
animation: move-up 9s ease-in infinite; animation: move-up 9s ease-in infinite;
svg { svg {
width: 70px; width: 70px;
height: 70px; height: 70px;
} }
@keyframes move-up { @keyframes move-up {
5%, 5%,
35% { 35% {
transform: translateY(0); transform: translateY(0);
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
} }
10%, 10%,
30% { 30% {
transform: translateY(-10px); transform: translateY(-10px);
box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15); 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 { //Feature section
margin-top: 10px;
@include mx.breakpoint(medium) { .feature-section {
.feature-container {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
margin: 5rem auto;
} }
}
.feature-item { .feature-list {
display: flex; margin-top: 10px;
flex-direction: column;
width: 100%;
padding: 1.5rem 0;
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
padding: 20px; display: flex;
justify-content: center;
}
} }
}
.feature-icon { .feature-item {
background: s.$radial-gradient; display: flex;
background-clip: text; flex-direction: column;
-webkit-background-clip: text; width: 100%;
color: transparent; padding: 1.5rem 0;
font-size: 5rem;
}
.feature-title { @include mx.breakpoint(medium) {
margin: 1rem 0; padding: 20px;
} }
} }
// Team section .feature-icon {
background: s.$radial-gradient;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 5rem;
}
.team-section { .feature-title {
.team-container { margin: 1rem 0;
@include mx.breakpoint(large) {
display: flex;
flex-direction: column;
align-items: center;
} }
} }
.team-list { // Team section
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.team-member { .team-section {
text-align: left; .team-container {
margin: 3rem 0; @include mx.breakpoint(large) {
display: flex;
flex-direction: column;
align-items: center;
}
}
@include mx.breakpoint(medium) { .team-list {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 20px;
} }
.team-member-title { .team-member {
font-size: fn.toRem(14); text-align: left;
font-weight: s.$weight-bold; margin: 3rem 0;
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;
@include mx.breakpoint(medium) { @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%; border-radius: 50%;
@include mx.breakpoint(medium) {
margin-right: 3rem;
margin-bottom: 0;
}
} }
} }
} }
}
.contact-section { .contact-section {
.contact-container { .contact-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
.contact-form { .contact-form {
margin-top: 2rem; margin-top: 2rem;
display: flex; display: flex;
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 960px; max-width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.input-element { .input-element {
@include mx.breakpoint(medium) { @include mx.breakpoint(medium) {
width: 50%; width: 50%;
}
&.textarea {
width: 100%;
}
} }
&.textarea { .submit-button {
appearance: none;
border: none;
margin: 0.5rem;
}
.button-container {
display: flex;
width: 100%; width: 100%;
justify-content: flex-end;
} }
} }
}
.submit-button { footer {
appearance: none; .footer-container {
border: none; padding: 100px 0;
margin: 0.5rem;
} }
.button-container { .footer-copyright {
flex: 1 1 100%;
display: flex; display: flex;
width: 100%; flex-direction: column;
justify-content: flex-end; align-items: center;
justify-content: center;
} }
}
}
footer { .logo {
.footer-container { margin-bottom: 10px;
padding: 100px 0; }
}
.footer-copyright {
flex: 1 1 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
margin-bottom: 10px;
}
.footer-nav { .footer-nav {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 30px; margin-top: 30px;
a { a {
padding: 5px 10px; padding: 5px 10px;
}
} }
} }
} }
\ No newline at end of file
client/src/pages/Home/index.tsx
+ 1
− 1
View file @ 5cbee451
...@@ -11,7 +11,7 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg'; ...@@ -11,7 +11,7 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg';
export default function Home() { export default function Home() {
return (<> return (<>
<Page header={false}> <Page className="landing-page" header={false}>
<section className="hero-section" id="hero"> <section className="hero-section" id="hero">
<div className="hero-container"> <div className="hero-container">
<header> <header>
......
client/src/pages/Tasks/index.tsx
+ 14
− 6
View file @ 5cbee451
...@@ -3,12 +3,20 @@ import './tasks.scss'; ...@@ -3,12 +3,20 @@ import './tasks.scss';
export default function Tasks() { export default function Tasks() {
return ( return (
<Page className="tasks-page"> <>
<main className="content-container"> <Page className="tasks-page">
<h1>Tasks</h1> <main className="content-container">
<p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p> <section className="intro-section">
</main> <h1 className="underlined">Tasks</h1>
</Page> <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>
</>
); );
} }
client/src/pages/Tasks/tasks.scss
+ 9
− 0
View file @ 5cbee451
@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
client/src/styles/settings.scss
+ 1
− 0
View file @ 5cbee451
...@@ -30,6 +30,7 @@ $weight-regular: 400; ...@@ -30,6 +30,7 @@ $weight-regular: 400;
$weight-medium: 500; $weight-medium: 500;
$weight-semi-bold: 600; $weight-semi-bold: 600;
$weight-bold: 700; $weight-bold: 700;
$weight-xbold: 800;
// Breakpoints // Breakpoints
$breakpoints: ( $breakpoints: (
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment