From 6254dc272c1237736f37ea3a7a05a206ed106017 Mon Sep 17 00:00:00 2001 From: Abdul Ali Noori Date: Sat, 1 Jul 2023 12:47:00 +0330 Subject: [PATCH] Remove the liter errors. --- src/components/CurrencyList.scss | 235 +++++++++++++++---------------- src/components/DetailsView.scss | 122 ++++++++-------- src/components/Footer.scss | 8 +- src/components/Navbar.scss | 97 +++++++------ src/components/SearchBar.scss | 77 +++++----- 5 files changed, 268 insertions(+), 271 deletions(-) diff --git a/src/components/CurrencyList.scss b/src/components/CurrencyList.scss index e238382..ecddd6c 100644 --- a/src/components/CurrencyList.scss +++ b/src/components/CurrencyList.scss @@ -1,132 +1,131 @@ table { - width: 98%; - margin: 1%; - border-collapse: collapse; + width: 98%; + margin: 1%; + border-collapse: collapse; +} + +th, +td { + padding: 0.5rem; + text-align: center; + border-bottom: 1px solid #ddd; +} + +/* Added CSS for striped effect on table headers */ +thead th { + background-color: #f2f2f2; +} + +td { + cursor: pointer; +} + +th:nth-child(1), +td:nth-child(1), +th:nth-child(2), +td:nth-child(2) { + text-align: left; +} + +td img { + width: 20px; + margin: 0 10px 0 0; +} + +tr:nth-child(even) { + background-color: #f2f2f2; +} + +tr:hover { + background-color: #eaeaea; +} + +thead th:first-child { + border-bottom: none; +} + +/* Rest of the CSS for responsive layout */ +@media screen and (max-width: 768px) { + /* Adjust the table layout for smaller screens */ + table { + font-size: 12px; + display: block; + overflow-x: auto; + padding: 5px; } - - th, - td { - padding: 0.5rem; - text-align: center; - border-bottom: 1px solid #ddd; + + thead { + display: none; } - th:nth-child(1), - td:nth-child(1), - th:nth-child(2), - td:nth-child(2) { - text-align: left; + tbody { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + /* Remove Rank column in mobile view */ + tr { + display: flex; + flex-direction: column; + width: 50%; + justify-content: space-between; } - + + /* Increase image size */ td img { - width: 20px; - margin: 0 10px 0 0; + width: 50px; + margin: 0; + } + + th { + display: none; } - + td { - cursor: pointer; + position: relative; + padding-left: 60%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: 1px solid #ddd; + padding-bottom: 10px; + } + + td::before { + position: absolute; + top: 0.5rem; + left: 0.5rem; + content: attr(data-label); + font-weight: bold; } - - tr:nth-child(even) { - background-color: #f2f2f2; + + /* Alternate row colors */ + tbody tr:nth-child(4n), + tbody tr:nth-child(4n + 1) { + background-color: #e0dfdf; } - - tr:hover { - background-color: #eaeaea; + + tbody tr:nth-child(4n + 2), + tbody tr:nth-child(4n + 3) { + background-color: #ececec; } - - /* Added CSS for striped effect on table headers */ - thead th { - background-color: #f2f2f2; + + th:nth-child(1), + td:nth-child(1) { + display: none; } - - thead th:first-child { - border-bottom: none; + + th:nth-child(2), + td:nth-child(2) { + display: flex; + justify-content: center; + padding: 10px 0; + font-size: 0; } - - /* Rest of the CSS for responsive layout */ - @media screen and (max-width: 768px) { - /* Adjust the table layout for smaller screens */ - table { - font-size: 12px; - display: block; - overflow-x: auto; - padding: 5px; - } - - thead { - display: none; - } - - tbody { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - /* Remove Rank column in mobile view */ - tr { - display: flex; - flex-direction: column; - width: 50%; - justify-content: space-between; - } - - /* Increase image size */ - td img { - width: 50px; - margin: 0; - } - - th { - display: none; - } - - td { - position: relative; - padding-left: 60%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border-bottom: 1px solid #ddd; - padding-bottom: 10px; - } - - td:before { - position: absolute; - top: 0.5rem; - left: 0.5rem; - content: attr(data-label); - font-weight: bold; - } - - /* Alternate row colors */ - tbody tr:nth-child(4n), - tbody tr:nth-child(4n + 1) { - background-color: #e0dfdf; - } - - tbody tr:nth-child(4n + 2), - tbody tr:nth-child(4n + 3) { - background-color: #ececec; - } - - th:nth-child(1), - td:nth-child(1) { - display: none; - } - - th:nth-child(2), - td:nth-child(2) { - display: flex; - justify-content: center; - padding: 10px 0; - font-size: 0; - } - - /* Hover effect for mobile view */ - tbody tr:hover { - background-color: #c9c9c9; - } + + /* Hover effect for mobile view */ + tbody tr:hover { + background-color: #c9c9c9; } - \ No newline at end of file +} diff --git a/src/components/DetailsView.scss b/src/components/DetailsView.scss index f5929f9..868a721 100644 --- a/src/components/DetailsView.scss +++ b/src/components/DetailsView.scss @@ -1,73 +1,73 @@ .details-view { - margin: 0; - padding: 1rem; - display: flex; - flex-direction: column; + margin: 0; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.details-view ul { + margin: 0; + padding: 0; + width: 90%; + border-radius: 15px; + background-color: rgb(212, 245, 234); +} + +.details-view li { + padding: 10px 0; + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + list-style-type: none; + transition: background-color 0.3s; /* Adding a transition for smooth effect */ +} + +.details-view span.label { + text-align: left; + width: 30%; + font-weight: bold; + color: #333; +} + +.details-view span.value { + text-align: left; + width: 10%; + color: #333; +} + +.details-view li:nth-child(even) { + background-color: #f2f2f2; +} + +/* Hover effect */ +.details-view li:hover { + background-color: #e0e0e0; /* Change the background color on hover */ +} + +@media screen and (max-width: 768px) { + .details-view { + padding: 1rem 0.4rem; align-items: center; - text-align: center; } - + .details-view ul { - margin: 0; - padding: 0; - width: 90%; - border-radius: 15px; - background-color: rgb(212, 245, 234); + width: 95%; + align-items: center; } - + .details-view li { - padding: 10px 0; - display: flex; - flex-wrap: nowrap; + align-items: center; justify-content: space-around; - list-style-type: none; - transition: background-color 0.3s; /* Adding a transition for smooth effect */ } - + .details-view span.label { - text-align: left; - width: 30%; - font-weight: bold; - color: #333; + width: 50%; + white-space: nowrap; } - + .details-view span.value { - text-align: left; - width: 10%; - color: #333; - } - - .details-view li:nth-child(even) { - background-color: #f2f2f2; - } - - /* Hover effect */ - .details-view li:hover { - background-color: #e0e0e0; /* Change the background color on hover */ - } - - @media screen and (max-width: 768px) { - .details-view { - padding: 1rem 0.4rem; - align-items: center; - } - - .details-view ul { - width: 95%; - align-items: center; - } - - .details-view li { - align-items: center; - justify-content: space-around; - } - - .details-view span.label { - width: 50%; - white-space: nowrap; - } - .details-view span.value { - width: 35%; - } + width: 35%; } - \ No newline at end of file +} diff --git a/src/components/Footer.scss b/src/components/Footer.scss index b0ebecb..b2df42a 100644 --- a/src/components/Footer.scss +++ b/src/components/Footer.scss @@ -1,5 +1,5 @@ .copyright { - display: flex; - justify-content: center; - align-items: center; -} \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/Navbar.scss b/src/components/Navbar.scss index 3258916..9746c34 100644 --- a/src/components/Navbar.scss +++ b/src/components/Navbar.scss @@ -1,56 +1,55 @@ .navbar { - padding: 1rem; - height: 4vh; - display: flex; - align-items: center; - background-color: #e4e1e1; - position: relative; /* Add relative positioning to the navbar */ - } - - .navbar-left { - margin-right: auto; - margin-left: 5%; - } - - .navbar-title-container { - position: absolute; /* Position the title absolutely */ - left: 50%; /* Position it in the center horizontally */ - transform: translateX(-50%); /* Adjust for center alignment */ + padding: 1rem; + height: 4vh; + display: flex; + align-items: center; + background-color: #e4e1e1; + position: relative; /* Add relative positioning to the navbar */ +} + +.navbar-left { + margin-right: auto; + margin-left: 5%; +} + +.navbar-title-container { + position: absolute; /* Position the title absolutely */ + left: 50%; /* Position it in the center horizontally */ + transform: translateX(-50%); /* Adjust for center alignment */ +} + +.navbar-title { + color: #333; + font-size: 1.2rem; +} + +.navbar-title h2 { + margin: 0; + white-space: nowrap; +} + +.navbar-flashback { + color: #fff; + padding: 0.2rem 0.9rem 0.3rem; + border-radius: 4px; + text-decoration: none; + background-color: #333; + cursor: pointer; +} + +@media screen and (max-width: 768px) { + .navbar { + justify-content: center; } - + .navbar-title { color: #333; - font-size: 1.2rem; + font-size: 1.1rem; + margin: auto 10px; } - .navbar-title h2 { - margin: 0; - white-space: nowrap; - } - - .navbar-flashback { - color: #fff; - padding: 0.2rem 0.9rem 0.3rem; - border-radius: 4px; - text-decoration: none; - background-color: #333; - cursor: pointer; - } - - @media screen and (max-width: 768px) { - .navbar { - justify-content: center; - } - - .navbar-title { - color: #333; - font-size: 1.1rem; - margin: auto 10px; - } - - .navbar-left { - margin-right: auto; - margin-left: 0; - } + .navbar-left { + margin-right: auto; + margin-left: 0; } - \ No newline at end of file +} diff --git a/src/components/SearchBar.scss b/src/components/SearchBar.scss index f5f13ff..a637823 100644 --- a/src/components/SearchBar.scss +++ b/src/components/SearchBar.scss @@ -1,41 +1,40 @@ .search-bar { - width: 30%; - margin: 0.5rem; - display: flex; - align-items: center; - padding: 0.5rem; - margin-left: 68%; - background-color: #f2f2f2; - border-radius: 4px; + width: 30%; + margin: 0.5rem; + display: flex; + align-items: center; + padding: 0.5rem; + margin-left: 68%; + background-color: #f2f2f2; + border-radius: 4px; +} + +.search-bar input { + flex: 1; + border: none; + padding: 0.5rem; + font-size: 1rem; + background-color: transparent; +} + +.search-bar input:focus { + outline: none; +} + +.search-bar button { + margin-left: 0.5rem; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; + background-color: #333; + color: #fff; + cursor: pointer; +} + +@media screen and (max-width: 768px) { + .search-bar { + width: 90%; + margin: 0.5rem auto; } - - .search-bar input { - flex: 1; - border: none; - padding: 0.5rem; - font-size: 1rem; - background-color: transparent; - } - - .search-bar input:focus { - outline: none; - } - - .search-bar button { - margin-left: 0.5rem; - padding: 0.5rem; - border: none; - border-radius: 4px; - font-size: 1rem; - background-color: #333; - color: #fff; - cursor: pointer; - } - - @media screen and (max-width: 768px) { - .search-bar { - width: 90%; - margin: 0.5rem auto; - } - } - \ No newline at end of file +}