refacto(responsive): styling

SylvainRomiguier · Jan 31, 2024 · 8601422 · 8601422
1 parent 74bca2d
commit 8601422
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 31 deletions.
diff --git a/src/API/user-card.ts b/src/API/user-card.ts
@@ -8,18 +8,49 @@ export class UserCard extends HTMLElement {
   }
 
   static styles = String.raw`
-            <style>
-                .user-card {
-                    padding: 1rem;
-                    border: 1px solid #eee;
-                    border-radius: 5px;
-                    cursor: pointer;
-                }
-                .user-card:hover {
-                    color: #242424;
-                    background-color: #eee;
-                }
-            </style>
+      <style>
+        .user-card {
+            background-color: #3498db;
+            color: #fff;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            cursor: pointer;
+            overflow: hidden;
+        }
+
+        .user-card .content {
+          white-space: nowrap;
+            overflow: ellipsis;
+        }
+
+        .user-card:hover {
+            background-color: #2980b9;
+            color: orange;
+        }
+
+        .user-card h2 {
+            margin-top: 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .user-card p {
+            margin: 8px 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .user-card .company {
+            font-style: italic;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    </style>
   `;
 
   static get observedAttributes() {
@@ -56,10 +87,12 @@ export class UserCard extends HTMLElement {
     this.shadowRoot.innerHTML = String.raw`
             ${UserCard.styles}
             <div class="user-card">
+              <div class="content">
                 <h2>${this.user.name}</h2>
                 <p>${this.user.email}</p>
                 <p>${this.user.phone}</p>
-                <p>${this.user.company.name}</p>
+                <p class="company">${this.user.company.name}</p>
+                </div>
             </div>
         `;
   }

diff --git a/src/API/user-details.ts b/src/API/user-details.ts
@@ -32,8 +32,8 @@ export class UserDetails extends HTMLElement {
                         padding: 1rem;
                         border: 1px solid black;
                         border-radius: 5px;
-                        background-color: #eee;
-                        color: black;
+                        background-color: #5ab9e2;
+                        color: #fff;
                         width: 300px;
                     }
                 </style>

diff --git a/src/API/user-list.ts b/src/API/user-list.ts
@@ -47,17 +47,29 @@ export class UserList extends HTMLElement {
 
   render() {
     if(!this.shadowRoot) { return }
+    let width = this.users.length === 1 ? "100%" : "calc(33.333% - 20px)";
+    width = this.users.length === 2 ? "calc(50% - 20px)" : width;
+
     this.shadowRoot.innerHTML = `
             <style>
                 .user-list {
-                    display: grid;
-                    grid-template-columns: repeat(3, 1fr);
-                    grid-gap: 1rem;
+                  width: 100%;
+                  display: flex;
+                  flex-wrap: wrap;
+                  gap: 20px;
+                }
+                user-card {
+                  width: ${width};
+                }
+                @media (max-width: 1400px) {
+                  user-card {
+                      width: calc(50% - 20px); /* 50% accounts for two cards in a row on smaller screens */
+                  }
                 }
-                .user-card {
-                    padding: 1rem;
-                    border: 1px solid black;
-                    border-radius: 5px;
+                @media (max-width: 1000px) {
+                  user-card {
+                      width: calc(100% - 20px); /* 50% accounts for two cards in a row on smaller screens */
+                  }
                 }
             </style>
             <div class="user-list">

diff --git a/src/API/user-page.ts b/src/API/user-page.ts
@@ -52,15 +52,42 @@ export class UserPage extends HTMLElement {
     this.shadowRoot.innerHTML = `
         <style>
         .user-page {
+          width: 100%;
             display: flex;
             flex-direction: row;
             gap: 1rem;
         }
+        .left {
+            width: 70%;
+        }
+        .right {
+            width: 30%;
+        }
+        @media (max-width: 1250px) {
+          .left {
+              width: 50%;
+          }
+          .right {
+              width: 50%;
+          }
+        }
+        @media (max-width: 768px) {
+          .left {
+              width: 40%;
+          }
+          .right {
+              width: 60%;
+          }
+        }
         </style>
         <div class="user-page">
+          <div class="left">
+        
             <user-list users='${JSON.stringify(
               this.users.map((user) => user.toJSON)
             )}'></user-list>
+          </div>
+          <div class="right">
             ${
               this.selectedUser
                 ? `
@@ -70,7 +97,8 @@ export class UserPage extends HTMLElement {
             `
                 : ""
             }
-            </div>
+          </div>
+        </div>
         `;
   }
 }

diff --git a/src/main.ts b/src/main.ts
@@ -8,11 +8,11 @@ Store.services().provide('userProvider', new UserProviderJsonPlaceHolder());
 Store.services().provide('userUseCases', new UserUseCases());
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div class="container">
+  <div class="app-container">
     <div class="top-bar">
     <h1>Back to Basics : a minimal frontend framework</h1>
     <h2>Dependency Injection and reactive Web Components in Typescript</h2>
-      <app-switch is-on="false">In Memory provider</app-switch>
+    <app-switch>In Memory Provider</app-switch>
     </div>
     <div class="content">
       <user-page></user-page>

diff --git a/src/style.css b/src/style.css
@@ -38,20 +38,22 @@ body {
   text-align: center;
 }
 
-.container {
+.app-container {
+  width: 100%;
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
 }
 
 .top-bar {
-  top: 0;
-  left: 0;
-  position: fixed;
-  padding: 1em;
+  width: 100%;
+  padding: 2px;
+  text-align: center;
 }
 
 .content {
-  margin-top: 10em;
+  width: 100%;
+  color: #fff; /* Text color for content */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Optional text shadow for better readability */
 }