responsive fixes

the-collab-lab · May 26, 2023 · d7ee61e · d7ee61e
1 parent 97213fa
commit d7ee61e
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 51 deletions.
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -1,5 +1,5 @@
 .ListItem {
- width: 400px;
+ width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
@@ -17,7 +17,7 @@
 
 .ListItem-label {
  margin-left: 0.2em;
- width: 360px;
+ width: 80%;
 }
 label {
  padding-inline: 0.3em;
@@ -31,6 +31,21 @@ label {
  background-color: var(--color-accent-primary);
 }
 
+.ListItem:has(input[type='checkbox']:focus-visible) {
+ text-decoration: line-through;
+ color: var(--color-accent-primary);
+ border: 2px solid var(--color-text);
+}
+
+.list-item-name {
+ display: block;
+}
+.list-item-urgency {
+ display: block;
+ text-transform: uppercase;
+ font-size: 1.4rem;
+}
+
 .bin {
  cursor: pointer;
  margin-left: auto;

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -74,7 +74,8 @@ export function ListItem({ name, itemId, dateLastPurchased, urgency }) {
  />
 
  <label className="ListItem-label" htmlFor={name}>
- {name} - {urgency}
+ <span class="list-item-name">{name}</span>
+ <span class="list-item-urgency">{urgency}</span>
  </label>
 
  <ImBin className="bin" onClick={openModal} />

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
diff --git a/src/index.css b/src/index.css
@@ -99,23 +99,6 @@ button:focus-visible {
  font-weight: bold;
 }
 
-.switch-btn {
- background: none;
- margin-top: 0;
- text-transform: none;
- color: var(--color-text);
- font-family: Poppins, arial, sans-serif;
- font-size: 1.45em;
- flex: 0 1 auto;
- padding: 0.8rem;
- text-align: center;
- text-decoration: none;
- outline: none;
-}
-.switch-btn:hover {
- background-color: initial;
-}
-
 input[type='text'] {
  border: 2px solid var(--color-accent-primary);
  border-radius: 7px;

diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -41,22 +41,6 @@
  top: 8px;
 }
 
-@media (min-width: 400px) {
- .Layout-header h1 {
- font-size: 2.5rem;
- margin: 1rem 1.5rem;
- }
-}
-@media (min-width: 768px) {
- .Layout-header {
- display: block;
- }
- .Layout-header h1 {
- text-align: center;
- font-size: 3rem;
- }
-}
-
 .Layout-main {
  margin: 0 auto;
  max-width: 100vw;
@@ -66,20 +50,21 @@
 }
 
 .Nav {
- align-items: stretch;
  background-color: var(--color-accent-primary);
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
+ align-items: center;
  margin-top: auto;
  position: sticky;
- padding: 1rem;
+ padding: 0;
+ min-height: 7rem;
 }
 
 .Nav-link {
  color: var(--color-text);
- font-size: 1.45em;
+ font-size: 1.2em;
  flex: 0 1 auto;
  padding: 0.8rem;
  text-align: center;
@@ -90,6 +75,45 @@
 .Nav-link.active {
  font-weight: bold;
 }
-.Nav-link:focus-visible {
+.switch-btn {
+ background: none;
+ margin-top: 0;
+ text-transform: none;
+ color: var(--color-text);
+ text-decoration: none;
+ outline: none;
+}
+.switch-btn:hover {
+ background-color: initial;
+}
+
+.Nav-link:focus-visible,
+.switch-btn:focus-visible {
  text-decoration: underline;
+ background-color: initial;
+ border: none;
+ font-weight: bold;
+}
+
+@media (min-width: 400px) {
+ .Layout-header h1 {
+ font-size: 2.5rem;
+ margin: 1rem 1.5rem;
+ }
+ .Nav-link {
+ font-size: 1.45em;
+ }
+ .Nav {
+ align-items: stretch;
+ padding: 1rem;
+ }
+}
+@media (min-width: 768px) {
+ .Layout-header {
+ display: block;
+ }
+ .Layout-header h1 {
+ text-align: center;
+ font-size: 3rem;
+ }
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -4,18 +4,17 @@ import './Layout.css';
 import { DarkMode } from '../components/DarkModeToggle';
 
 export function Layout({ token }) {
-
  const handleSwitchToken = () => {
  localStorage.removeItem('tcl-shopping-list-token');
  window.location.replace('/');
- }
- 
+ };
+
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
  const [isChecked, setChecked] = useState(prefersDarkMode.matches);
  const onChange = () => {
  setChecked((prevChecked) => !prevChecked);
  };
- 
+
  return (
  <>
  <div className="Layout" id={isChecked ? 'theme-dark' : 'theme-light'}>
@@ -31,7 +30,10 @@ export function Layout({ token }) {
  <nav className="Nav">
  {token ? (
  <>
- <button className="switch-btn" onClick={handleSwitchToken}>
+ <button
+ className="switch-btn Nav-link"
+ onClick={handleSwitchToken}
+ >
  Switch List
  </button>
  <NavLink to="/list" className="Nav-link">

diff --git a/src/views/List.css b/src/views/List.css
@@ -1,8 +1,7 @@
 .list-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ width: 95vw;
+ margin: auto;
+ max-width: 600px;
 }
 
 .search-bar {
@@ -13,7 +12,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
- width: 350px;
+ width: 100%;
  border-radius: 7px;
 }
 
@@ -40,7 +39,7 @@
 }
 
 ul {
- width: 80%;
+ width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;