Event and Team components with responsive design (JIITODC#8)

prityusha · Sep 25, 2020 · 3c58857 · 3c58857
1 parent 5e90d72
commit 3c58857
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 72 deletions.
diff --git a/src/components/EventComponent.svelte b/src/components/EventComponent.svelte
@@ -0,0 +1,59 @@
+<script>
+    export let title;
+    export let about;
+    export let time;
+    export let location;
+</script>
+
+<div class="event-container">
+    <div class="left">
+        <img src="Poster.png" alt="event poster">
+    </div>
+    <div class="right">
+        <h2 class="title">{title}</h2>
+        <p class="about">{about}</p>
+        <p class="time">{time}</p>
+        <p class="location">{location}</p>
+    </div>
+</div>
+
+<style>
+    .event-container {
+        font-family: 'Red Hat Display', sans-serif;
+        display: flex;
+        margin-top: 2rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid white;
+    }
+
+    .right {
+        padding: 0 0 0 2rem;
+        font-weight: 100;
+    }
+
+    .title {
+        font-size: 2rem;
+        font-weight: bold;
+    }
+
+    @media (max-width:700px) {
+        .event-container {
+            flex-direction: column;
+            /* align-items: center; */
+            font-size: 1rem;
+        }
+
+        img {
+            height: auto;
+            max-width: 200px;
+        }
+
+        .title {
+            font-size: 1.5rem;
+        }
+
+        .right {
+            padding: 1rem 0 0 0;
+        }
+    }
+</style>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -1,8 +1,11 @@
 <script>
   let active = false;
+  let addActive = "";
 
   const toggleLinks = () => {
     active = !active;
+    if (active) addActive = "active";
+    else addActive = "";
   }
 </script>
 
@@ -34,7 +37,8 @@
     margin-right: 50px;
   }
 
-  a {
+  a,
+  .toggle-button {
     text-decoration: none;
     padding: .1em 0.25em;
     display: block;
@@ -45,7 +49,8 @@
     border-bottom: 2px solid #fff;
   }
 
-  a::after {
+  a::after,
+  .toggle-button::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -58,20 +63,28 @@
     background-color: #fff;
   }
 
-  a:hover::after {
+  a:hover::after,
+  .toggle-button:hover::after {
     height: 100%;
     opacity: 1;
   }
 
-  a:hover {
+  a:hover,
+  .toggle-button:hover {
     color: #000;
   }
 
   .toggle-button {
+    background-color: transparent;
+    outline: none;
+    border: none;
+    border-bottom: 2px solid #fff;
+    color: white;
     font-size: 2rem;
     position: absolute;
     display: none;
     right: 28px;
+    cursor: pointer;
   }
 
   @media (max-width:700px) {
@@ -109,18 +122,10 @@
 
 <nav>
   <img src="jodcMascotWB.svg" alt="JODC Mascot" class="jodc-mascot-img">
-  <a href="#" class="toggle-button" on:click={toggleLinks}>&#9776;</a>
-  {#if active}
-    <ul class="nav-links active">
-      <li><a href=".">home</a></li>
-      <li><a href="events">events</a></li>
-      <li><a href="team">team</a></li>
-    </ul>
-  {:else}
-    <ul class="nav-links">
-      <li><a href=".">home</a></li>
-      <li><a href="events">events</a></li>
-      <li><a href="team">team</a></li>
-    </ul>
-  {/if}
+  <button class="toggle-button" on:click={toggleLinks}>&#9776;</button>
+  <ul class="nav-links {addActive}">
+    <li><a href=".">home</a></li>
+    <li><a href="events">events</a></li>
+    <li><a href="team">team</a></li>
+  </ul>
 </nav>
diff --git a/src/components/TeamComponent.svelte b/src/components/TeamComponent.svelte
@@ -0,0 +1,63 @@
+<script>
+    export let imgSrc;
+    export let name;
+    export let about;
+    export let gitLink;
+    export let facebookLink;
+    export let twitterLink;
+
+</script>
+
+<div class="team-member">
+    <div class="left">
+        <img src={imgSrc} alt="event poster">
+    </div>
+    <div class="right">
+        <h2 class="name">{name}</h2>
+        <p class="about">{about}</p>
+        <div class="socails">
+            <a href={gitLink}>GITHUB</a>
+            <a href={facebookLink}>FACEBOOK</a>
+            <a href={twitterLink}>TWITTER</a>
+        </div>
+    </div>
+</div>
+
+<style>
+    .team-member {
+        display: flex;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid white;
+        margin-top: 2rem;
+    }
+
+    .right {
+        padding: 0 0 0 2rem;
+    }
+
+    .name {
+        font-size: 2rem;
+        font-weight: bold;
+    }
+
+    @media (max-width:700px) {
+        .team-member {
+            flex-direction: column;
+            align-items: center;
+            font-size: 1rem;
+        }
+
+        img {
+            height: auto;
+            max-width: 200px;
+        }
+
+        .name {
+            font-size: 1.5rem;
+        }
+
+        .right {
+            padding: 1rem 0 0 0;
+        }
+    }
+</style>
diff --git a/src/routes/events.svelte b/src/routes/events.svelte
@@ -2,21 +2,16 @@
     <title>Events</title>
 </svelte:head>
 
-<script></script>
+<script>
+    import EventComponent from '../components/EventComponent.svelte';
+</script>
 
 
 <div class="main-title">EVENTS</div>
-<div class="event-container">
-    <div class="left">
-        <img src="Poster.png" alt="event poster">
-    </div>
-    <div class="right">
-        <h2 class="title">HACKTOBERFEST</h2>
-        <p class="about">WIN A TSHIRT AT HACKTOBERFEST BY CONTRIBUTING TO OPEN SOURCE PROJECTS.</p>
-        <p class="time">31 FEB 2023 12:30AM</p>
-        <p class="location">LT5</p>
-    </div>
-</div>
+<EventComponent title="Git/Github Workshop" about="Learn about git and github." time="12:00AM 1 OCT 2002"
+    location="LT6" />
+<EventComponent title="Hacktoberfest" about="Contribute to open source to get a free t-shirt" time="12:00AM 1 OCT 2002"
+    location="LT5" />
 
 
 <style>
@@ -25,18 +20,9 @@
         font-weight: bold;
     }
 
-    .event-container {
-        display: flex;
-        margin-top: 2rem;
-        padding-bottom: 1rem;
-        border-bottom: 1px solid white;
-    }
-
-    .right {
-        padding: 0 0 0 2rem;
-    }
-
-    .title {
-        font-size: 2rem;
+    @media (max-width:700px) {
+        .main-title {
+            font-size: 2rem;
+        }
     }
 </style>
diff --git a/src/routes/team.svelte b/src/routes/team.svelte
@@ -2,27 +2,22 @@
   <title>Team</title>
 </svelte:head>
 
-<script></script>
+<script>
+  import TeamComponent from '../components/TeamComponent.svelte';
+</script>
 
 
 <div class="main-title">TEAMS</div>
 <h2 class="team-type">Core Members</h2>
 <div class="team-container">
-  <div class="team-member">
-    <div class="left">
-      <img src="Poster.png" alt="event poster">
-    </div>
-    <div class="right">
-      <h2 class="name">HACKTOBERFEST</h2>
-      <p class="about">WORLD’S GREATEST DETECTIVE. HE SOLVES CRIME AND HATES THE WORLD. GO TO HIS REPO TO SOLVE MURDER
-        MYSTERIES.</p>
-      <div class="socails">
-        <a href="#">GITHUB</a>
-        <a href="#">FACEBOOK</a>
-        <a href="#">TWITTER</a>
-      </div>
-    </div>
-  </div>
+  <TeamComponent imgSrc="Poster.png" name="Aayush Kumar Sahu"
+    about="Hi there, i am an open source enthusiast and working on web development."
+    gitLink="https://www.github.com/aayushmau5" facebookLink="https://www.facebook.com"
+    twitterLink="https://twitter.com/aayushmau5" />
+  <TeamComponent imgSrc="Poster.png" name="Aachman Mittal"
+    about="Hey, i am an open source enthusiast and love low level system stuff."
+    gitLink="https://www.github.com/aarkimos" facebookLink="https://www.facebook.com"
+    twitterLink="https://twitter.com/aarkimos" />
 </div>
 
 
@@ -32,22 +27,17 @@
     font-weight: bold;
   }
 
-  .team-container {
-    margin-top: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid white;
-  }
-
-  .team-member {
-    display: flex;
+  .team-type {
+    font-weight: bold;
   }
 
-  .right {
-    padding: 0 0 0 2rem;
+  .team-container {
+    font-family: 'Red Hat Display', sans-serif;
   }
 
-  .name {
-    font-size: 3rem;
-    font-weight: bold;
+  @media (max-width:700px) {
+    .main-title {
+      font-size: 2rem;
+    }
   }
 </style>