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

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%;
}
}
}
}