fix: fix ui to match viewport (#16)

tobiasprima · Mar 21, 2024 · aad52ec · aad52ec
1 parent 01886ad
commit aad52ec
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 46 deletions.
diff --git a/src/features/todos/TodoForm.js b/src/features/todos/TodoForm.js
@@ -10,7 +10,7 @@ const TodoForm = ({ newTodo, setNewTodo, handleSubmit }) => {
                 <div className='new-todo'>
                     <input type='text' id='new-todo' value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
                 </div>
-                <button className='submit'>
+                <button className='submit plus'>
                     <FontAwesomeIcon icon={faPlus} />
                 </button>
             </form>

diff --git a/src/features/toggle/ToggleSwitch.js b/src/features/toggle/ToggleSwitch.js
@@ -3,7 +3,7 @@ import React from 'react';
 const ToggleSwitch = ({ handleMoveDoneToEnd }) => {
     return (
         <div className="toggle-switch">
-            <span className="switchlabel">Move done things to end</span>
+            <span className="switchlabel">Move done things to end?</span>
             <label className="switch">
                 <input type="checkbox" className="switchbox" onChange={handleMoveDoneToEnd} />
                 <span className="slider round"></span>

diff --git a/src/index.css b/src/index.css
@@ -16,7 +16,7 @@ body {
 
 html{
   background-image: linear-gradient(to bottom right, #eef6fe, #ecedfe);
-  min-height: 100vh;
+  height: 100%;
 }
 
 input[type="text"], button {
@@ -25,8 +25,9 @@ input[type="text"], button {
 
 main {
   margin: auto;
-  max-width: 600px;
+  max-width: 30vw;
   width: 100%;
+  max-height: 100vh;
 }
 
 h1 {
@@ -43,22 +44,30 @@ article {
   border-radius: 5px;
   border-left: 8px solid #7d8fc9 ;
   background-color: white;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
+  height: 3vh;
 }
 
 p {
   color: #909ac0;
   padding-left: 0.3rem;
+  font-size: 1rem;
   padding-bottom: 0;
-  margin-bottom: 0.5rem;
+  width: 25vw;
+  padding-bottom: 0.5rem;
+}
+
+hr{
+  padding: 0;
+  margin: 0
 }
 
 .new-item-section {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
-  max-width: 100%;
-  max-height: 50px;
+  max-width: 25vw;
+  max-height: 2vh;
 }
 
 .new-item-section form {
@@ -71,15 +80,20 @@ p {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  height: 100%;
 }
 
 .todo input[type="checkbox"]:checked + label {
   text-decoration: line-through;
 }
 
+.todo label {
+  font-size: 1.2rem;
+}
+
 input[type="checkbox"] {
-  min-width: 30px;
-  min-height: 30px;
+  min-width: 20px;
+  min-height: 20px;
   margin-right: 1rem;
   border-radius: 10%;
   border: 1px solid #7491d0;
@@ -99,13 +113,18 @@ button {
   cursor: pointer;
 }
 
+.plus{
+  width: 4rem;
+}
+
 .trash {
   min-width: auto;
   min-height: auto;
   border: none;
   border-radius: 0;
   cursor: pointer;
   background-color: transparent;
+  color: #9f9fb0;
 }
 
 
@@ -114,15 +133,9 @@ form label {
   left: -10000px;
 }
 
-.new-todo {
-  width: 100%;
-  height: 50px;
-  padding-right: 25px;
-}
-
 
 input[type="text"] {
-  width: 100%;
+  width: 24.5vw;
   padding: 0.5rem;
   border-radius: 5px;
   border: 0.5px solid white;
@@ -131,34 +144,32 @@ input[type="text"] {
 .submit {
   background-color: #798ed2;
   color: #fff;
+  margin-left: 0.5rem;
 }
 
 .submit:hover {
   background-color: white;
 }
 
 .bottom-section {
-  position: fixed;
-  bottom: 0;
-  padding-bottom: 4rem;
-  max-width: 600px;
-  width: 100%;
+  margin-top: 9vh;
+  position: relative;
+  width: 30vw;
 }
 
 .progress-container {
   margin: auto;
-  max-width: 600px;
   width: 100%;
   display: flex;
   align-items: center;
   padding-top: 1rem;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
 }
 
 .progress-bar {
   width: 100%;
   top: 60px;
-  height: 20px;
+  height: 0.7rem;
   border-radius: 10px;
   background-color: white;
   background-image: white
@@ -176,12 +187,12 @@ input[type="text"] {
 }
 
 .progress-label {
-  margin-right: 1rem
+  margin-right: 0.5rem
 }
 
 .content{
-  margin-bottom: 2rem;
-  max-height: 600px;
+  margin-bottom: 1rem;
+  max-height: 40vh;
   overflow-y: auto;
 }
 
@@ -190,21 +201,24 @@ input[type="text"] {
 }
 
 .toggle-switch {
-  display: flex;
+  margin-top: 1rem;
+  display: flex; 
   align-items: center;
-  width: 600px;
+  font-size: 1rem;
+  width: 30vw;
   justify-content: right;
 }
 
 .switchlabel {
-  margin-right: 1rem;
+  margin-right: 0.2rem;
+  padding-top: 0.1rem;
 }
 
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 34px;
+  width: 30px;
+  height: 17px;
 }
 
 .switch input {
@@ -229,10 +243,10 @@ input[type="text"] {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
   background-color: #92aafa;
   -webkit-transition: .4s;
   transition: .4s;
@@ -248,9 +262,9 @@ input:focus + .slider {
 
 input:checked + .slider:before {
   background-color: white;
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
 }
 
 .slider.round {
@@ -288,19 +302,18 @@ input:checked + .slider:before {
 }
 
 .infos{
-  position: fixed;
   margin-top: 1rem;
-  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 600px;
+  width: 30vw;
+  padding-top: 1rem;
 }
 
 .ps {
   justify-content: center;
-  margin-left: 1rem;
   align-items: center;
-  width: 600px;
+  width: 100%;
   font-size: 15px;
+  text-align: center;
 }