Skip to content

Commit

Permalink
Merge pull request #11 from Molaryy/feat/responsive
Browse files Browse the repository at this point in the history
Feat/responsive
  • Loading branch information
Molaryy authored Dec 17, 2023
2 parents e8487dc + d47feec commit cbe99b9
Show file tree
Hide file tree
Showing 22 changed files with 739 additions and 422 deletions.
6 changes: 3 additions & 3 deletions backend/Dockerfile
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
FROM golang:1.21.3-alpine
FROM golang:1.21.3-alpine AS build
WORKDIR /bective
COPY go.mod go.sum ./
RUN go mod download
COPY . ./
RUN CGO_ENABLED=0 GOOS=linux go build -o bective
COPY . .
RUN go build -o bective
EXPOSE 8080
CMD ["./bective"]
15 changes: 13 additions & 2 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,25 @@ version: '3.9'

services:
database:
container_name: db_bective
container_name: bective_db
image: postgres:12.8
restart: always
env_file:
- .env
ports:
- '5432:5432'
volumes:
- db:/var/lib/postgresql/data
restart: always
backend:
container_name: bective_api
env_file:
- .env
build: ./backend
ports:
- '8080:8080'
depends_on:
- database
restart: always

volumes:
db:
1 change: 1 addition & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bective</title>
<link rel="icon" href="/assets/bective-logo.png">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^3.0.3",
"sass": "^1.68.0",
"tailwindcss": "^3.3.6",
"typescript": "*",
"vite": "^4.4.5"
},
Expand Down
Binary file added frontend/public/assets/menu.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 8 additions & 5 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import Navbar from './components/Navbar.tsx';
import Navbar from './components/Navbar/Navbar.tsx';
import TimerFormHandler from './components/Form/TimerFormHandler.tsx';
import ListTodosContainer from './components/Todos/ListTodosContainer.tsx';
import TodosHandler from './components/Todos/TodosHandler.tsx';

function App() {

return (
<>
<Navbar />
<TimerFormHandler />
<ListTodosContainer/>
<div className={'bective-form-parent'}>
<div className={'todos-parent'}>
<TimerFormHandler />
<TodosHandler />
</div>
</div>
</>
);
}
Expand Down
69 changes: 69 additions & 0 deletions frontend/src/components/Form/Form.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.time-form {
background-color: #ffffff;
border-radius: 10px;
width: 390px;
height: 400px;
margin-top: 10rem;
}

.timer {
display: flex;
justify-content: space-around;
}

.working {
display: flex;
flex-direction: column;
align-items: center;

.work-time {
.work-time-input {
font-size: 20px;
text-align: center;
align-items: center;
height: 50px;
width: 40px;
border-radius: 5px;
}
}
}

.pause {
display: flex;
flex-direction: column;
align-items: center;

.pause-time {
.pause-time-input {
font-size: 20px;
text-align: center;
height: 50px;
width: 40px;
border-radius: 5px;
}
}
}

.buttons-time-form {
margin-top: 12rem;
display: flex;
justify-content: space-around;

.btn-form {
color: white;
background-color: #575656;
cursor: pointer;
height: 40px;
border-radius: 10px;
border: none;
text-align: center;
transition: all 0.15s ease 0s;
padding-left: 15px;
padding-right: 15px;
}
.btn-form:hover {
box-shadow: 0 5px 5px;
color: black;
background-color: white;
}
}
106 changes: 57 additions & 49 deletions frontend/src/components/Form/TimerForm.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Dispatch, SetStateAction } from 'react';
import { TimerFormProps } from '../../types.ts';
import './Form.scss';

type InputTimeProps = {
time: string;
Expand Down Expand Up @@ -59,62 +60,69 @@ const TimerForm: React.FC<TimerFormProps> = ({
const pauseTitleCss = isInPause ? 'is-in-pause-title' : 'black';
const isWorkingBoxColor =
isWorking || isInPause ? (isWorking ? '#ffaf00' : isInPause ? '#0fbcce' : '') : '';
const boxShadow = isWorking || isInPause ? '.gitignore 5px 5px' : '.gitignore 0px 0px';
const boxShadow = isWorking || isInPause ? '0 5px 5px' : '0 0px 0px';

return (
<form
className='time-form'
onSubmit={onSubmit}
style={{ color: isWorkingBoxColor, boxShadow: boxShadow }}
>
<h2 className={`work-time-title ${workTitleCss}`}>Working</h2>
<label className='work-time'>
<InputTime
time={workTime[0]}
isWorking
indexOnChangeToAddValue={0}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={workTime[1]}
isWorking
indexOnChangeToAddValue={1}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={workTime[2]}
isWorking
indexOnChangeToAddValue={2}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
</label>
<h2 className={`pause-time-title ${pauseTitleCss}`}>Pause</h2>
<label className='pause-time'>
<InputTime
time={pauseTime[0]}
isWorking={false}
indexOnChangeToAddValue={0}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={pauseTime[1]}
isWorking={false}
indexOnChangeToAddValue={1}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={pauseTime[2]}
isWorking={false}
indexOnChangeToAddValue={2}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
</label>
<div className={'timer'}>
<div className={'working'}>
<h2 className={`work-time-title ${workTitleCss}`}>Working</h2>
<label className='work-time'>
<InputTime
time={workTime[0]}
isWorking
indexOnChangeToAddValue={0}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={workTime[1]}
isWorking
indexOnChangeToAddValue={1}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={workTime[2]}
isWorking
indexOnChangeToAddValue={2}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
</label>
</div>
<div className={'pause'}>
<h2 className={`pause-time-title ${pauseTitleCss}`}>Pause</h2>
<label className='pause-time'>
<InputTime
time={pauseTime[0]}
isWorking={false}
indexOnChangeToAddValue={0}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={pauseTime[1]}
isWorking={false}
indexOnChangeToAddValue={1}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
<InputTime
time={pauseTime[2]}
isWorking={false}
indexOnChangeToAddValue={2}
setWorkTime={setWorkTime}
setPauseTime={setPauseTime}
/>
</label>
</div>
</div>

<div className={'buttons-time-form'}>
<button className='btn-form' type='submit'>
Start
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/components/Navbar.tsx

This file was deleted.

65 changes: 65 additions & 0 deletions frontend/src/components/Navbar/NavBar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
nav {
background-color: #ffffff;
display: grid;
grid-template-columns: 50% 45%;
align-items: center;
width: 100%;
height: 40px;
transition: all 0.3s ease-in-out;


ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
transition: all 0.3s ease-in-out;
li {
cursor: pointer;
border-radius: 15px;
transition: all 0.15s ease-in-out 0s;
margin-right: 4rem;
}
}

.bective-logo {
border-radius: 50%;
width: 35px;
}

.toggle-button {
position: absolute;
display: none;
width: 35px;
height: 40px;
right: 0.5rem;
cursor: pointer;
}

@media (max-width: 680px) {
.toggle-button {
display: flex;
margin-right: 1rem;
}

.menu-open {
font-size: 20px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 40px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
li {
margin-left: 2rem;
}
}
ul {
display: none;
}
}
}
35 changes: 35 additions & 0 deletions frontend/src/components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import './NavBar.scss';
import { useState } from 'react';

const Navbar = () => {
const [isMenuOpen, setMenuOpen] = useState(false);
const [menuWidth, setMenuWidth] = useState('0');

const toggleMenu = () => {
setMenuOpen(!isMenuOpen);
setMenuWidth(menuWidth === '0' ? '100%' : '0');
};

return (
<nav>
<img src={'/assets/bective-logo.png'} alt={'bective logo'} className={'bective-logo'} />
<img
src={'/assets/menu.png'}
className={'toggle-button'}
alt={'toggle-menu'}
onClick={toggleMenu}
/>
<ul
className={isMenuOpen ? 'menu-open' : ''}
style={{
width: menuWidth,
}}
>
<li>Home</li>
<li>Connect</li>
<li>About</li>
</ul>
</nav>
);
};
export default Navbar;
Loading

1 comment on commit cbe99b9

@vercel
Copy link

@vercel vercel bot commented on cbe99b9 Dec 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.