franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Responsive desing done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-02 00:09:40 -03:00
parent fa9330c9de
commit 8b1b423332
14 changed files with 543 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
public/css_styles/styles.css
View File

@@ -11,7 +11,7 @@
}
.header-main-page h1 {
color: #ffffff;
font-size: 7vh;
font-size: 3vw;
font-family: "Raleway", sans-serif;
font-weight: 700;
margin: 0;
@@ -20,7 +20,7 @@
}
.header-main-page h3 {
color: rgba(255, 255, 255, 0.75);
font-size: 2vh;
font-size: 1vw;
font-family: "Raleway", sans-serif;
font-weight: 700;
margin: 0;
@@ -44,6 +44,18 @@
color: #000000;
}
@media (max-width: 991.98px) {
.header-main-page {
height: auto;
padding: 3vw 0px;
}
.header-main-page h1 {
font-size: 26pt;
}
.header-main-page h3 {
font-size: 13pt;
}
}
.banner-login {
background-color: #D17262;
color: white;
@@ -86,6 +98,36 @@
opacity: 0%;
}
@media (max-width: 918px) {
.banner-login {
justify-content: initial;
height: auto;
padding: 2vh 2vw;
}
.banner-login p {
width: 33.3%;
}
.banner-login .button-container {
width: 66.6%;
justify-content: space-around;
}
.banner-login .button-container button {
width: 30%;
}
}
@media (max-width: 576px) {
.banner-login p {
width: 50%;
}
.banner-login .button-container {
width: 50%;
flex-direction: column;
}
.banner-login .button-container button {
width: 75%;
margin: 10px;
}
}
.main-pomodoro {
display: flex;
flex-direction: column;
@@ -137,6 +179,14 @@
color: white;
}
@media (max-width: 576px) {
.main-pomodoro .timer {
font-size: 80pt;
}
.main-pomodoro .start-pomodoro {
font-size: 13pt;
}
}
.style-selector {
width: calc(20vw - 1px);
padding-left: 3vw;
@@ -210,6 +260,47 @@
pointer-events: none;
}
@media (max-width: 991.98px) {
.style-selector {
position: initial;
margin: 0 0 5% 0;
width: 100%;
padding: 0;
padding: 0px 5vw;
box-sizing: border-box;
}
.style-selector h2 {
text-align: start;
margin-left: 0;
}
.style-selector .style-selection-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.style-selector .style-selection-container .style-container {
height: 100%;
width: 30%;
margin: 1% 10%;
}
}
@media (max-width: 918px) {
.style-selector {
margin-bottom: 5vh;
}
.style-selector .style-selection-container {
flex-wrap: nowrap;
flex-direction: column;
}
.style-selector .style-selection-container .style-container {
width: 60%;
}
}
@media (max-width: 462px) {
.style-selector .style-selection-container .style-container {
width: 100%;
}
}
.go-down {
height: 7vh;
width: 100%;
@@ -225,6 +316,18 @@
fill: #aaaaaa;
}
.go-down-separator-line {
width: 100%;
display: flex;
justify-content: center;
}
.go-down-separator-line hr {
height: 1px;
width: 75%;
border: none;
border-top: 1px solid #b8b8b8;
}
#about-this, #credits {
height: 83vh;
padding: 0px 3vw;
@@ -275,6 +378,12 @@
height: 95vh;
}
@media (max-width: 918px) {
#about-this, #credits {
height: auto;
padding-bottom: 5vh;
}
}
.history-button {
background: none;
border: none;
@@ -343,6 +452,12 @@
background-color: #9DF3C4;
}
@media (max-width: 991.98px) {
.pomodoro-counter {
position: initial;
padding-bottom: 5vh;
}
}
.identify-container {
display: flex;
flex-direction: column;
@@ -454,6 +569,24 @@
background-color: #b632eb;
}
@media (max-width: 991.98px) {
.dark-mode {
position: initial;
}
}
@media (max-width: 576px) {
.dark-mode {
margin-bottom: 20px;
}
.dark-mode label {
width: 50px;
height: 20px;
}
.dark-mode label::after {
width: 15px;
height: 15px;
}
}
.account-container #message {
padding-left: 5vw;
background-color: #ff6a6a;
@@ -567,13 +700,14 @@
.go-to-account .go-to-account-text {
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 1vw;
text-decoration: none;
user-select: none;
color: #ffffff;
}
.close-session {
width: 6vw;
width: 7vw;
height: 3vw;
position: absolute;
left: 10vw;
@@ -586,11 +720,41 @@
.close-session .close-session-text {
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 1vw;
text-decoration: none;
user-select: none;
color: #ffffff;
}
@media (max-width: 991.98px) {
.go-to-account, .close-session {
position: initial;
padding: 1vw;
}
.go-to-account {
margin-top: 10px;
margin-bottom: 10px;
}
.go-to-account .go-to-account-text {
font-size: 9pt;
}
.close-session .close-session-text {
font-size: 9pt;
}
}
@media (max-width: 576px) {
.go-to-account, .close-session {
width: auto;
height: auto;
}
.go-to-account-text, .close-session-text {
position: initial;
margin: 10px 10px;
}
}
.clockify-tasks-display {
width: 20vw;
position: absolute;
@@ -638,6 +802,41 @@
opacity: 30%;
}
@media (max-width: 991.98px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
justify-content: space-around;
padding: 0px 5vw;
}
.clockify-tasks-display.loading-container {
width: 90%;
height: auto;
}
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
width: 20vw;
height: 5vw;
}
}
@media (max-width: 576px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.clockify-tasks-display.loading-container {
width: 90%;
height: auto;
}
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
}
}
html, body {
margin: 0;
padding: 0;

2
public/css_styles/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"}

8
public/sass_styles/_aboutThis.scss
View File

@@ -54,4 +54,12 @@
#credits {
height: 95vh;
}
@media (max-width: 918px) {
#about-this, #credits {
height: auto;
padding-bottom: 5vh;
}
}

44
public/sass_styles/_banner-login.scss
View File

@@ -51,4 +51,48 @@
.blank {
opacity: 0%;
}
@media (max-width: 918px) {
.banner-login {
justify-content: initial;
height: auto;
padding: 2vh 2vw;
p {
width: 33.3%;
}
.button-container {
width: 66.6%;
justify-content: space-around;
button {
width: 30%;
}
}
}
}
@media (max-width: 576px) {
.banner-login {
p {
width: 50%;
}
.button-container {
width: 50%;
flex-direction: column;
button {
width: 75%;
margin: 10px;
}
}
}
}

47
public/sass_styles/_clockify-tasks-display.scss
View File

@@ -56,4 +56,51 @@
opacity: 30%;
}
}
}
@media (max-width: 991.98px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
justify-content:space-around;
padding: 0px 5vw;
&.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 20vw;
height: 5vw;
}
}
}
@media (max-width: 576px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
&.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
}
}
}

25
public/sass_styles/_dark-mode_toogle-switch.scss
View File

@@ -44,3 +44,28 @@
background-color: #b632eb;
}
}
@media (max-width: 991.98px) {
.dark-mode {
position: initial;
}
}
@media (max-width: 576px) {
.dark-mode {
label {
width: 50px;
height: 20px;
}
label::after {
width: 15px;
height: 15px;
}
margin-bottom: 20px;
}
}

16
public/sass_styles/_goDownArrow.scss
View File

@@ -17,4 +17,20 @@
// CREDITS TO https://stackoverflow.com/a/49627345
}
}
}
.go-down-separator-line {
width: 100%;
display: flex;
justify-content: center;
hr {
height: 1px;
width: 75%;
border: none;
border-top: 1px solid rgb(184, 184, 184);
}
}

47
public/sass_styles/_goToAccount.scss
View File

@@ -18,6 +18,8 @@
.go-to-account-text {
@include titleFont();
font-size: 1vw;
text-decoration: none;
user-select: none;
@@ -26,7 +28,7 @@
}
.close-session {
width: 6vw;
width: 7vw;
height: 3vw;
position: absolute;
@@ -44,10 +46,53 @@
.close-session-text {
@include titleFont();
font-size: 1vw;
text-decoration: none;
user-select: none;
color: #ffffff;
}
}
@media (max-width: 991.98px) {
//! I fucking hate make the responsive design
.go-to-account, .close-session {
position: initial;
padding: 1vw;
}
.go-to-account {
.go-to-account-text {
font-size: 9pt;
}
margin-top: 10px;
margin-bottom: 10px;
}
.close-session {
.close-session-text {
font-size: 9pt;
}
}
}
@media (max-width: 576px) {
.go-to-account, .close-session {
width: auto;
height: auto;
}
.go-to-account-text, .close-session-text {
position: initial;
margin:10px 10px;
}
}

24
public/sass_styles/_header.scss
View File

@@ -16,7 +16,7 @@
h1 {
color: #ffffff;
font-size: 7vh;
font-size: 3vw;
@include titleFont();
@include normalizeTitle();
}
@@ -24,7 +24,8 @@
h3 {
color: rgba(255, 255, 255, 0.75);
font-size: 2vh;
font-size: 1vw;
@include titleFont();
@include normalizeTitle();
@@ -51,4 +52,21 @@
}
}
}
}
}
@media (max-width: 991.98px) {
.header-main-page {
height: auto;
padding: 3vw 0px;
h1 {
font-size: 26pt;
}
h3 {
font-size: 13pt;
}
}
}

15
public/sass_styles/_mainPomodoro.scss
View File

@@ -63,4 +63,19 @@
font-size: 5vh;
color: white;
}
}
@media (max-width: 576px) {
.main-pomodoro {
.timer {
font-size: 80pt;
}
.start-pomodoro {
font-size: 13pt;
}
}
}

10
public/sass_styles/_pomodoro-counter.scss
View File

@@ -42,4 +42,14 @@
}
}
}
}
@media (max-width: 991.98px) {
.pomodoro-counter {
position: initial;
padding-bottom: 5vh;
}
}

84
public/sass_styles/_styleSelector.scss
View File

@@ -95,12 +95,82 @@
transition: 0.2s ease-in-out;
}
.style-selector-show {
opacity: 100%;
pointer-events: auto;
.style-selector-show {
opacity: 100%;
pointer-events: auto;
}
.style-selector-hidden {
opacity: 0%;
pointer-events: none;
}
@media (max-width: 991.98px) {
.style-selector {
position: initial;
margin: 0 0 5% 0;
width: 100%;
padding: 0;
padding: 0px 5vw;
box-sizing: border-box;
h2 {
text-align: start;
margin-left: 0;
}
.style-selector-hidden {
opacity: 0%;
pointer-events: none;
}
.style-selection-container {
display: flex;
flex-wrap: wrap;
width: 100%;
.style-container{
height: 100%;
width: 30%;
margin: 1% 10%;
}
}
}
}
@media (max-width: 918px) {
.style-selector {
.style-selection-container {
flex-wrap: nowrap;
flex-direction: column;
.style-container {
width: 60% ;
}
}
margin-bottom: 5vh;
}
}
@media (max-width: 462px) {
.style-selector {
.style-selection-container {
.style-container{
width: 100%;
}
}
}
}

34
src/App.js
View File

@@ -66,6 +66,24 @@ function App() {
<BannerLogin
signIn={signIn}
/>
<ClockifyTasksDisplay
signIn={signIn}
timerOn={timerOn}
apiKey={apiKey}
setApiKey={setApiKey}
taskName={taskName}
setTaskName={setTaskName}
workspaceID={workspaceID}
setWorspaceID={setWorspaceID}
projectID={projectID}
setProjectID={setProjectID}
/>
<MainPomodoro
signIn={signIn}
timerOn={timerOn}
@@ -84,22 +102,6 @@ function App() {
/>
<ClockifyTasksDisplay
signIn={signIn}
timerOn={timerOn}
apiKey={apiKey}
setApiKey={setApiKey}
taskName={taskName}
setTaskName={setTaskName}
workspaceID={workspaceID}
setWorspaceID={setWorspaceID}
projectID={projectID}
setProjectID={setProjectID}
/>
<GoDownArrow
direction={'about-this'}
/>

13
src/components/GoDownArrow.jsx
View File

@@ -3,6 +3,19 @@ import { Link, animateScroll as scroll } from "react-scroll";
const GoDownArrow = (props) => {
const width = window.screen.width
console.log(width)
if (width <= '991.98') {
return (
<div className="go-down-separator-line">
<hr/>
</div>
)
}
console.log('GO DOWN ARROW DEPLOYED')
return (