Merge pull request #713 from ajoykumardas12/footer-migration-changes

[Ember Migration] Footer Changes
Real-Dev-Squad · Oct 26, 2023 · 55dfac0 · 55dfac0
2 parents 0898b9a + 8a20e7a
commit 55dfac0
Show file tree

Hide file tree

Showing 12 changed files with 383 additions and 75 deletions.
diff --git a/app/components/events.hbs b/app/components/events.hbs
@@ -0,0 +1,24 @@
+<section data-test-events-section class='events-section'>
+  <h2 data-test-events-section-header class='events-section__heading'>You can
+    check out all our events below!!</h2>
+  {{#each-in this.EVENTS_CATEGORIES as |category events|}}
+    <div class='events-section__category'>
+      <h3
+        data-test-events-category={{category}}
+        class='events-section__category-heading'
+      >{{category}}:</h3>
+      <div class='events-section__links-container'>
+        {{#each events as |event index|}}
+          {{#if (not-eq index 0)}}
+            <span>|</span>
+          {{/if}}
+          <a
+            data-test-events-link={{event.name}}
+            href={{event.link}}
+            class='events-section__link'
+          >{{event.name}}</a>
+        {{/each}}
+      </div>
+    </div>
+  {{/each-in}}
+</section>
diff --git a/app/components/events.js b/app/components/events.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { EVENTS_CATEGORIES } from '../constants/events-data';
+
+export default class EventsComponent extends Component {
+  EVENTS_CATEGORIES = EVENTS_CATEGORIES;
+}
diff --git a/app/components/footer.hbs b/app/components/footer.hbs
@@ -1,81 +1,130 @@
-<footer class='footer'>
-  <div class='footer__container'>
-    <div class='footer__sites-about'>
-      <div class='col'>
-        <h3 data-test-sites-title class='col__title'>Sites</h3>
-        <span data-test-underline class='col__underline'></span>
+{{#if this.isDevMode}}
+  <footer aria-label='footer under dev feature flag' class='footer--dev'>
+    <Events />
+    <h3 data-test-footer-info class='footer__info'>
+      To know how this page is developed, join our Discord channel by contacting
+      one of
+      <a
+        data-test-footer-info-members-link
+        href={{this.MEMBERS_URL}}
+        class='footer__info__link'
+      >our existing members</a>
+      or our
+      <a
+        data-test-footer-info-faq-link
+        href={{this.FAQ_URL}}
+        class='footer__info__link'
+      > FAQ section</a>.
+    </h3>
+    <p data-test-footer-repo-text-dev class='footer__repo--dev'>The contents of
+      the website are deployed from this
+      <a
+        data-test-footer-repo-link-dev
+        href={{this.REPOSITORY_URL}}
+        class='footer__repo__link'
+      >open sourced repo</a>
+    </p>
+  </footer>
+{{else}}
+  <footer class='footer'>
+    <div class='footer__container'>
+      <div class='footer__sites-about'>
+        <div class='col'>
+          <h3 data-test-sites-title class='col__title'>Sites</h3>
+          <span data-test-underline class='col__underline'></span>
+        </div>
+        <ul class='col__list'>
+          {{#each this.APPS_PROPERTIES as |app|}}
+            <li><a
+                data-test-sites-link={{app.name}}
+                href={{app.url}}
+              >{{app.name}}</a></li>
+          {{/each}}
+        </ul>
       </div>
-      <ul class='col__list'>
-        {{#each this.APPS_PROPERTIES as |app|}}
-          <li><a data-test-sites-link={{app.name}} href={{app.url}}>{{app.name}}</a></li>
-        {{/each}}
-      </ul>
-    </div>
-    <div class='footer__sites-about'>
-      <div class='col'>
-        <h3 data-test-about-title class='col__title'>About</h3>
-        <span data-test-underline class='col__underline'></span>
+      <div class='footer__sites-about'>
+        <div class='col'>
+          <h3 data-test-about-title class='col__title'>About</h3>
+          <span data-test-underline class='col__underline'></span>
+        </div>
+        <ul class='col__list'>
+          {{#each this.ABOUT_PROPERTIES as |about|}}
+            <li><a
+                data-test-about-link={{about.name}}
+                href={{about.url}}
+              >{{about.name}}</a></li>
+          {{/each}}
+        </ul>
       </div>
-      <ul class='col__list'>
-        {{#each this.ABOUT_PROPERTIES as |about|}}
-          <li><a data-test-about-link={{about.name}} href={{about.url}}>{{about.name}}</a></li>
-        {{/each}}
-      </ul>
-    </div>
-    <div class='footer__col'>
-      <div class='col left'>
-        <h3 data-test-social-media-title class='col__title'>Social Media</h3>
-        <span data-test-underline class='col__underline'></span>
+      <div class='footer__col'>
+        <div class='col left'>
+          <h3 data-test-social-media-title class='col__title'>Social Media</h3>
+          <span data-test-underline class='col__underline'></span>
+        </div>
+        <div>
+          {{#each this.SOCIAL_LINK_PROPERTIES as |social|}}
+            <a
+              data-test-social-link={{social.title}}
+              href={{social.url}}
+              target='_blank'
+              class='social__links'
+              rel='noopener noreferrer'
+            >
+              <img
+                data-test-social-icon={{social.title}}
+                class='social__icons'
+                src={{social.white_icon}}
+                alt={{social.alt}}
+              />
+            </a>
+          {{/each}}
+        </div>
       </div>
-      <div>
-        {{#each this.SOCIAL_LINK_PROPERTIES as |social|}}
-          <a
-            data-test-social-link={{social.title}}
-            href={{social.url}}
-            target='_blank'
-            class='social__links'
-            rel='noopener noreferrer'
+      <div class='footer__col'>
+        <div class='col'>
+          <h3 data-test-newsletter-title class='col__title'>Newsletter</h3>
+          <span data-test-underline class='col__underline'></span>
+        </div>
+        <div class='newsletter'>
+          <label for='email'></label>
+          <input
+            data-test-newsletter-input
+            id='email'
+            type='text'
+            class='newsletter__input'
+            placeholder='Enter your email'
+          />
+          <button
+            data-test-newsletter-button
+            type='button'
+            class='newsletter__button'
           >
             <img
-              data-test-social-icon={{social.title}}
-              class='social__icons'
-              src={{social.white_icon}}
-              alt={{social.alt}}
+              data-test-newsletter-button-icon
+              src='assets/icons/right-arrow.png'
+              alt='Right Arrow'
+              height='20px'
+              width='20px'
             />
-          </a>
-        {{/each}}
+          </button>
+        </div>
       </div>
     </div>
-    <div class='footer__col'>
-      <div class='col'>
-        <h3 data-test-newsletter-title class='col__title'>Newsletter</h3>
-        <span data-test-underline class='col__underline'></span>
-      </div>
-      <div class='newsletter'>
-        <label for='email'></label>
-        <input
-          data-test-newsletter-input
-          id='email'
-          type='text'
-          class='newsletter__input'
-          placeholder='Enter your email'
-        />
-        <button data-test-newsletter-button type='button' class='newsletter__button'>
-          <img
-            data-test-newsletter-button-icon
-            src='assets/icons/right-arrow.png'
-            alt='Right Arrow'
-            height='20px'
-            width='20px'
-          />
-        </button>
-      </div>
+    <div class='footer__repo'>
+      <img
+        data-footer-repo-github-img
+        class='repo__img'
+        src='assets/icons/github-white.png'
+        alt='GitHub'
+      />
+      <p data-footer-repo-text class='repo__text'>The contents of the website
+        are deployed from this
+        <a
+          data-footer-repo-link
+          href={{this.REPOSITORY_URL}}
+          class='repo__link'
+        >open sourced repo</a>
+      </p>
     </div>
-  </div>
-  <div class='footer__repo'>
-    <img data-footer-repo-github-img class='repo__img' src='assets/icons/github-white.png' alt='GitHub' />
-    <p data-footer-repo-text class='repo__text'>The contents of the website are deployed from this
-      <a data-footer-repo-link href={{this.REPOSITORY_URL}} class='repo__link'>open sourced repo</a>
-    </p>
-  </div>
-</footer>
+  </footer>
+{{/if}}
diff --git a/app/components/footer.js b/app/components/footer.js
@@ -1,11 +1,19 @@
 import Component from '@glimmer/component';
-import { ABOUT } from '../constants/urls';
+import { ABOUT, APPS } from '../constants/urls';
 import { APPS_PROPERTIES, ABOUT_PROPERTIES } from '../constants/footer-data';
 import { SOCIAL_LINK_PROPERTIES } from '../constants/social-data';
+import { inject as service } from '@ember/service';
 
 export default class FooterComponent extends Component {
+  @service featureFlag;
   REPOSITORY_URL = ABOUT.REPOSITORY;
   APPS_PROPERTIES = APPS_PROPERTIES;
   ABOUT_PROPERTIES = ABOUT_PROPERTIES;
   SOCIAL_LINK_PROPERTIES = SOCIAL_LINK_PROPERTIES;
+  MEMBERS_URL = APPS.MEMBERS;
+  FAQ_URL = ABOUT.FAQ;
+
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
 }
diff --git a/app/constants/events-data.js b/app/constants/events-data.js
@@ -0,0 +1,36 @@
+export const EVENTS_CATEGORIES = {
+  'Upcoming Features': [
+    {
+      name: 'Art Feature',
+      link: 'https://realdevsquad.com/art-feature',
+    },
+  ],
+  'Upcoming Events': [
+    {
+      name: 'APIs made Easier',
+      link: 'https://realdevsquad.com/event-APIs-made-Easier-April-2021',
+    },
+  ],
+  'Past Events': [
+    {
+      name: 'Dynamic Programming',
+      link: 'https://realdevsquad.com/event-dynamic-programming-october-2020',
+    },
+    {
+      name: 'NodeJS Workshop Part I',
+      link: 'https://realdevsquad.com/event-nodejs-workshop-october-2020',
+    },
+    {
+      name: 'Web-Mini-Conf-July-2020',
+      link: 'https://realdevsquad.com/event-web-mini-conf-july-2020',
+    },
+    {
+      name: 'React Hooks Session',
+      link: 'https://realdevsquad.com/event-react-hooks-july-2020',
+    },
+    {
+      name: 'SSR the right way',
+      link: 'https://realdevsquad.com/event-ssr-correctly-august-2020',
+    },
+  ],
+};
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -28,6 +28,7 @@
 @import 'intro.module.css';
 @import 'onboarding-card.module.css';
 @import 'logs-page.module.css';
+@import 'events.module.css';
 
 * {
   margin: 0px;
@@ -60,4 +61,4 @@ button {
 
 #toast-container>div {
   opacity: 1;
-}
+}
diff --git a/app/styles/events.module.css b/app/styles/events.module.css
@@ -0,0 +1,47 @@
+.events-section {
+  padding: 0 1.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.75rem;
+}
+
+.events-section__heading {
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.2rem;
+  color: var(--color-black);
+}
+
+.events-section__category-heading {
+  font-size: 1.1rem;
+  text-align: center;
+  color: var(--color-black);
+}
+
+.events-section__links-container {
+  margin-top: 1.25rem;
+  display: flex;
+  justify-content: center;
+  flex-flow: row wrap;
+}
+
+.events-section__links-container > * {
+  margin: 0 0.625rem;
+  padding: 0.5rem;
+  text-align: center;
+  width: auto;
+  color: var(--color-pink);
+  text-decoration: none;
+}
+
+.events-section__link:hover {
+  background: var(--color-soft-magenta);
+  border-radius: 1.25rem;
+}
+
+@media (max-width: 425px) {
+  .events-section__links-container > * {
+    width: 100%;
+  }
+}