adding task page css

nitrotap · Jun 8, 2023 · 7fa7f69 · 7fa7f69
1 parent 98c38db
commit 7fa7f69
Show file tree

Hide file tree

Showing 8 changed files with 311 additions and 14 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}
diff --git a/client/src/app/about/about.page.html b/client/src/app/about/about.page.html
@@ -23,7 +23,7 @@
         </ion-avatar>
         <ion-label>
           <h2>{{ member.name }}</h2>
-          <p>Email: <a [href]="'mailto:'+member.email">{{ member.email }}</a></p>
+          <p>Email: <a [href]="'mailto:' + member.email">{{ member.email }}</a></p>
           <p>GitHub:
             <a [href]="member.github" target="_blank" rel="noopener noreferrer">{{ member.github }}</a>
           </p>
@@ -38,4 +38,43 @@ <h2>{{ member.name }}</h2>
       </ion-item>
     </ion-list>
   </ion-content>
-</ion-content>
+</ion-content>
+
+<script>
+  members = [
+    {
+      name: 'Kartik Jevaji',
+      email: '[email protected]',
+      github: 'https://github.com/nitrotap',
+      linkedin: 'https://www.linkedin.com/in/kjevaji/',
+      website: 'https://www.nitrotap.dev',
+      avatar: 'assets/member1-avatar.jpg',
+      bio: 'Full-stack web developer with strong analytical skills and educated at the University of Minnesota Coding Bootcamp. Strong skills within MERN stack with emphasis on JavaScript and Progressive Web Applications. Experienced with non-profits, CRMs, and databases. Excited to apply learned skills to develop cutting-edge applications and open-source software. A self-described Tekno-junkie that loves learning new languages and is driven to build and perfect.'
+    },
+    {
+      name: 'Kristin Bailey',
+      email: '[email protected]',
+      github: 'https://github.com/highheelgeek',
+      linkedin: 'https://www.linkedin.com/in/kristinbailey-colo/',
+      website: 'https://www.highheelgeek.net',
+      avatar: 'assets/member2-avatar.jpg',
+      bio: 'Artistic, dedicated, and meticulous professional with a lifelong passion for combining technology and art. Currently pursuing a certificate in Full Stack Engineering at Regis University in Denver, CO, with an expected graduation date of June 2023. Throughout her career, she has gained valuable experience in customer service, working with diverse clients both in-person and remotely. She thrives in identifying inefficiencies and providing effective solutions for complex issues while building dynamic relationships and resolving intricate concerns to foster customer loyalty. What sets her apart is her ability to bridge the gap between different industries, fearlessly blending the everyday with an eclectic mix of interests. She enjoys bringing contrasting worlds closer together, enriching lives in the process.'
+    },
+    {
+      name: 'Juliana Sarmo',
+      email: '[email protected]',
+      github: 'https://github.com/juxsarmo',
+      avatar: 'assets/member3-avatar.jpg',
+      bio: 'A passionate tech enthusiast with a love for all things digital. From a young age, I\'ve been fascinated by the ever-evolving world of technology and its impact on our lives. As a tech lover, I\'m constantly seeking out opportunities to expand my knowledge and skills. Whether it\'s coding, web development, artificial intelligence, or cybersecurity, I\'m always eager to learn and embrace new technologies. I enjoy pushing boundaries, solving complex problems, and finding innovative solutions that make a positive difference in the world. I find immense joy in sharing my tech insights and experiences with others, that is why I currently work as a Desktop Support engineer. I truly believe that technology has the power to transform lives and shape a better future for everyone.'
+    },
+    {
+      name: 'Jackie Reyes',
+      email: '[email protected]',
+      github: 'https://github.com/jreyes006',
+      linkedin: '',
+      website: '',
+      avatar: 'assets/member4-avatar.jpg',
+      bio: 'Enthusiastic about using technology for public service and resolving complex challenges because I am dedicated to a life of service. I contribute a distinctive perspective to every project thanks to my varied expertise in non-profits, technology, marketing, sales, and international relations. Educated at the University of North Texas and Regis University, I am continually advancing my expertise and skills in technology and their global applications. My extensive international travel has fostered my interest in cutting-edge technologies. With this combination of knowledge and passion, I am keen to contribute to initiatives that benefit society.'
+    }
+  ];
+</script>
diff --git a/client/src/app/about/about.page.ts b/client/src/app/about/about.page.ts
@@ -29,10 +29,10 @@ export class AboutPage {
       name: 'Juliana Sarmo',
       email: '[email protected]',
       github: 'https://github.com/juxsarmo',
-      linkedin: '',
-      website: '',
       avatar: 'assets/member3-avatar.jpg',
-      bio: 'Add bio content for Member 3 here.'
+      bio: 'A passionate tech enthusiast with a love for all things digital. From a young age, I've been fascinated by the ever-evolving world of technology and its impact on our lives. As a tech lover, I'm constantly seeking out opportunities to expand my knowledge and skills. Whether it's coding, web development, artificial intelligence, or cybersecurity, I'm always eager to learn and embrace new technologies. I enjoy pushing boundaries, solving complex problems, and finding innovative solutions that make a positive difference in the world.
+      I find immense joy in sharing my tech insights and experiences with others, that is why I currently work as an Desktop Support engineer.  
+      I truly believe that technology has the power to transform lives and shape a better future for everyone.'
     },
     {
       name: 'Jackie Reyes',
@@ -45,5 +45,4 @@ export class AboutPage {
     }
   ];
 
-  constructor() { }
 }
diff --git a/client/src/app/quiz/quiz.page.scss b/client/src/app/quiz/quiz.page.scss
@@ -42,4 +42,25 @@ ion-range::part(bar) {
 
 ion-range::part(bar-active) {
   background: #bde0fe;
+}
+
+
+
+
+
+
+
+
+
+
+ion-footer {
+  margin-top: 50px;
+  background-color: #f4f4f4;
+  padding: 10px;
+}
+
+ion-footer p {
+  font-size: 12px;
+  color: #888;
+}
 }
diff --git a/client/src/app/signup/signup.page.scss b/client/src/app/signup/signup.page.scss
@@ -2,4 +2,61 @@ ion-card, ion-title, ion-card-subtitle {
     overflow: visible;
     color: black;
     text-align: center;
-}
+}
+
+
+// styles.scss
+
+// Navigation Styles
+app-nav {
+    ion-accordion {
+        font-family: Arial, sans-serif;
+        font: 16px bold;
+        color: #f4f4f4;
+
+    }
+  }
+
+  // Card Styles
+  ion-card,
+  ion-title,
+  ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+  }
+
+  li {
+    text-align: left;
+  }
+
+  ion-img {
+    width: 30%;
+  }
+
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+  }
+
+  ion-img::part(image) {
+    width: 50%; /* or whatever value */
+    /* you can set the height value too */
+  }
+
+  // Footer Styles
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+
+  ion-footer p {
+    font-size: 12px;
+    color: #888;
+  }
+
diff --git a/client/src/app/strategies/strategies.page.scss b/client/src/app/strategies/strategies.page.scss
@@ -4,11 +4,10 @@ ion-card, ion-title, ion-card-subtitle {
     text-align: center;
 }
 
-    // @media (max-width: 768px) {
-    //   ion-grid {
-    //     grid-template-columns: repeat(1, 1fr) !important;
-    //   }
-    // }
+ @media (max-width: 768px) {
+ ion-grid {
+     grid-template-columns: repeat(1, 1fr) !important;
+  }
 
     // @media (min-width: 769px) {
     //   ion-grid {
@@ -32,3 +31,66 @@ ion-card, ion-title, ion-card-subtitle {
     //   background-color: #dddddd;
     //   transform: scale(1.1);
     // }
+/* Navigation Styles */
+
+ion-accordion {
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    color: #f4f4f4;
+  }
+
+  /* Card Styles */
+
+  ion-card, ion-title, ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+    :hover {
+        transform: scale(1.05);
+    }
+    transition: transform 0.3s ease-in-out;
+
+  }
+
+  li {
+    text-align: left;
+  }
+
+  ion-img {
+    width: 30%;
+  }
+
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40 transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+
+    :hover {
+        background-color: #dddddd;
+        transform: scale(1.1);
+    }
+
+  ion-img::part(image) {
+    width: 25%;
+    height: 25%; /* or whatever value */
+    /* you can set the height value too */
+  }
+
+  /* Footer Styles */
+
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+
+  ion-footer p {
+    font-size: 12px;
+    color: #888;
+  }
+}}
diff --git a/client/src/app/task/new-task.page.scss b/client/src/app/task/new-task.page.scss
@@ -0,0 +1,116 @@
+/* Navigation Styles */
+
+ion-accordion {
+    font-family: Arial, sans-serif;
+    font: 16px bold;
+    color: #f4f4f4;
+  }
+
+  /* Card Styles */
+
+  ion-card,
+  ion-title,
+  ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+  }
+
+  li {
+    text-align: left;
+  }
+
+  ion-img {
+    width: 30%;
+  }
+
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+  }
+
+  ion-img::part(image) {
+    width: 50%; /* or whatever value */
+    /* you can set the height value too */
+  }
+
+
+  /* New Task Page Styles */
+
+  ion-header {
+    ion-toolbar {
+      ion-title {
+        // Add styles for the "New Task" title
+        float: right;
+      }
+    }
+  }
+
+  ion-content {
+    --background: #ffffff; // Set the background color of the content area
+
+    app-nav {
+        ion-accordion {
+            font-family: Arial, sans-serif;
+            font: 16px bold;
+            color: #f4f4f4;
+            background-color: #011411;
+        }
+    }
+
+    form {
+      width: 80%;
+      text-align: center;
+      margin: 0 auto;
+
+      ion-card {
+        margin-bottom: 20px;
+
+        ion-card-content {
+          ion-item {
+            ion-label {
+              &.ion-floating {
+                // Styles for floating labels
+                --color: #000000;
+                --ion-color-base: #000000;
+              }
+            }
+
+            ion-input {
+              // Styles for input fields
+              --border-color: #000000;
+            }
+          }
+        }
+      }
+    }
+
+    ion-button {
+      // Styles for all buttons
+      --border-radius: 5px;
+      --background: #000000;
+      --color: #ffffff;
+      width: 100%;
+
+      &.row-2 {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  /* Footer Styles */
+
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+
+  ion-footer p {
+    font-size: 12px;
+    color: #888; 
+
diff --git a/client/src/app/task/task.page.scss b/client/src/app/task/task.page.scss
@@ -2,5 +2,5 @@
 ion-card, ion-title, ion-card-subtitle, ion-item {
     overflow: visible;
     color: black;
-    text-align: center;
-}
+    text-align: center;/* Variables */
+}