Merge branch 'develop' into feature/issue-4-Update_Header

.gitignore

@@ -46,3 +46,5 @@ testem.log
 Thumbs.db
 package-lock.json
 .env
+
+icon.png

.run/debug.run.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="debug" type="JavascriptDebugType" uri="http://localhost:4200">
+  <configuration default="false" name="debug" type="JavascriptDebugType" uri="http://localhost:4200" useFirstLineBreakpoints="true">
     <method v="2" />
   </configuration>
 </component>

README.md

@@ -1,30 +1,30 @@
 <p align="center">
   <a href="https://www.linkedin.com/company/open-template-hub">
-    <img src="https://avatars2.githubusercontent.com/u/65504426?s=200&v=4" alt="Logo">
+    <img src="https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/brand-logo.png?raw=true" alt="Logo" width=200>
   </a>
 </p>
 
 <h1 align="center">
-Open Template Hub - Web UI Template
+Open Template Hub - Company Profile UI Template v2
 </h1>
 
-[![License](https://img.shields.io/github/license/open-template-hub/company-profile-ui-template?color=2F7488&style=for-the-badge)](LICENSE)
-[![Issues](https://img.shields.io/github/issues/open-template-hub/company-profile-ui-template?color=2F7488&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/issues)
-[![PRCLosed](https://img.shields.io/github/issues-pr-closed-raw/open-template-hub/company-profile-ui-template?color=2F7488&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/pulls?q=is%3Apr+is%3Aclosed)
-[![LastCommit](https://img.shields.io/github/last-commit/open-template-hub/company-profile-ui-template?color=2F7488&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/commits/master)
-[![Release](https://img.shields.io/github/release/open-template-hub/company-profile-ui-template?include_prereleases&color=2F7488&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/releases)
+[![License](https://img.shields.io/github/license/open-template-hub/company-profile-ui-template?color=43b043&style=for-the-badge)](LICENSE)
+[![Issues](https://img.shields.io/github/issues/open-template-hub/company-profile-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/issues)
+[![PRCLosed](https://img.shields.io/github/issues-pr-closed-raw/open-template-hub/company-profile-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/pulls?q=is%3Apr+is%3Aclosed)
+[![LastCommit](https://img.shields.io/github/last-commit/open-template-hub/company-profile-ui-template?color=43b043&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/commits/master)
+[![Release](https://img.shields.io/github/release/open-template-hub/company-profile-ui-template?include_prereleases&color=43b043&style=for-the-badge)](https://github.com/open-template-hub/company-profile-ui-template/releases)
 [![SonarCloud](https://img.shields.io/sonar/quality_gate/open-template-hub_company-profile-ui-template?server=https%3A%2F%2Fsonarcloud.io&label=Sonar%20Cloud&style=for-the-badge&logo=sonarcloud)](https://sonarcloud.io/dashboard?id=open-template-hub_company-profile-ui-template)
 [![BTC](https://img.shields.io/badge/Donate-BTC-ORANGE?color=F5922F&style=for-the-badge&logo=bitcoin)](https://commerce.coinbase.com/checkout/8313af5f-de48-498d-b2cb-d98819ca7d5e)
 
-Responsive Web UI template with sign-up, login and social login functionality
+Company Profile UI Template in Angular
 
 <h3 align="center">
   For demo click the image below ⬇️
 </p>
 
 <p align="center">
-  <a href="https://oth-web-app.herokuapp.com">
-    <img src="https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/products/web-ui/demonstration.png?raw=true" alt="Screenshot" width="800px">
+  <a href="https://oth-company-profile.herokuapp.com">
+    <img src="https://github.com/open-template-hub/company-profile-ui-template/blob/develop/src/assets/common/demonstration.png?raw=true" alt="Screenshot" width="800px">
   </a>
 </p>
 
@@ -36,7 +36,13 @@ Deploy this template to Heroku
 
 [![Deploy](https://img.shields.io/badge/Deploy_to-Heroku-7056bf.svg?style=for-the-badge&logo=heroku)](https://heroku.com/deploy?template=https://github.com/open-template-hub/company-profile-ui-template)
 
-### 2. GitHub Template
+### 2. Start with UI Generator
+
+Create your UI with UI Generator Package
+
+[![NPM](https://img.shields.io/badge/NPM-ui_generator-cb3837.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@open-template-hub/app-generator)
+
+### 3. GitHub Template
 
 Use this repository as a Template
 

angular.json

@@ -75,13 +75,23 @@
               ]
             },
             "local": {
+              "optimization": false,
+              "sourceMap": true,
+              "buildOptimizer": false,
+              "extractLicenses": false,
+              "vendorChunk": true,
               "assets": [
                 "src/favicon.ico",
                 "src/assets/common",
                 "src/assets/production"
               ]
             },
             "local-to-staging-api": {
+              "optimization": false,
+              "sourceMap": true,
+              "buildOptimizer": false,
+              "extractLicenses": false,
+              "vendorChunk": true,
               "assets": [
                 "src/favicon.ico",
                 "src/assets/common",

app.json

@@ -1,12 +1,15 @@
 {
-  "name": "Angular UI Template",
-  "description": "Angular UI Template",
+  "name": "Company Profile UI Template",
+  "description": "Company Profile UI Template in Angular",
   "repository": "https://github.com/open-template-hub/company-profile-ui-template",
-  "logo": "https://avatars2.githubusercontent.com/u/65504426?s=200&v=4",
+  "logo": "https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/brand-logo.png?raw=true",
   "keywords": [
     "angular",
     "template",
     "ui-components",
-    "angular-components"
+    "angular-components",
+    "company-profile",
+    "company-ui",
+    "open-template-hub"
   ]
 }

e2e/protractor.conf.js

@@ -20,9 +20,7 @@ exports.config = {
   framework: "jasmine",
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function () {
-    }
+    defaultTimeoutInterval: 30000
   },
   onPrepare() {
     require( "ts-node" ).register( {

package.json

@@ -1,24 +1,25 @@
 {
   "name": "company-profile-ui-template",
+  "description": "Company Profile UI Template in Angular",
   "version": "2.2.0",
+  "license": "MIT",
   "scripts": {
+    "buildLocal": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=local",
+    "buildLocalToStagingApi": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=local-to-staging-api",
+    "buildStaging": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=staging",
+    "buildProd": "node version-generator.ts > ./src/environments/version.ts && ng build --prod",
+    "e2e": "ng e2e",
+    "heroku-postbuild": "bash heroku.sh",
+    "lint": "ng lint",
     "ng": "ng",
     "startLocal": "ng serve --configuration=local",
     "startLocalFromIPhone": "ng serve --configuration=local --host 0.0.0.0 --disable-host-check true",
     "startLocalToStagingApi": "ng serve --configuration=local-to-staging-api",
     "startLocalFromIPhoneToStagingApi": "ng serve --configuration=local-to-staging-api --host 0.0.0.0 --disable-host-check true",
     "startStaging": "node server.js --configuration=staging",
     "start": "node server.js --configuration=production",
-    "buildLocal": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=local",
-    "buildLocalToStagingApi": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=local-to-staging-api",
-    "buildStaging": "node version-generator.ts > ./src/environments/version.ts && ng build --configuration=staging",
-    "buildProd": "node version-generator.ts > ./src/environments/version.ts && ng build --prod",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "heroku-postbuild": "bash heroku.sh"
+    "test": "ng test"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "^12.1.1",
     "@angular/cdk": "^12.1.1",
@@ -74,5 +75,19 @@
     "ts-node": "~10.0.0",
     "tslint": "~6.1.0",
     "typescript": "~4.2.3"
-  }
+  },
+  "git repository": "https://github.com/open-template-hub/company-profile-ui-template",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-template-hub/company-profile-ui-template.git"
+  },
+  "keywords": [
+    "angular",
+    "template",
+    "ui-components",
+    "angular-components",
+    "company-profile",
+    "company-ui",
+    "open-template-hub"
+  ]
 }

server.js

@@ -8,6 +8,7 @@ const express = require( "express" );
 
 // express init
 const app = express();
+app.disable( "x-powered-by" );
 
 // directory that we will serve
 app.use( express.static( __dirname + "/dist/company-profile-ui-template" ) );

src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { environment } from '../environments/environment';
 import { EventComponent } from './page/dashboard-layout/event/event.component';
-import { CreateEventComponent } from './page/dashboard-layout/createEvent/create-event.component';
+import { CreateEventComponent } from './page/dashboard-layout/create-event/create-event.component';
 import { DashboardLayoutComponent } from './page/dashboard-layout/dashboard-layout.component';
 import { DashboardComponent } from './page/dashboard-layout/dashboard/dashboard.component';
 import { LearnComponent } from './page/dashboard-layout/learn/learn.component';
@@ -87,7 +87,6 @@ const routes: Routes = [
       { path: 'contribute', component: CreateEventComponent, canActivate: [ AuthGuard ] },
       { path: 'learn', component: LearnComponent, canActivate: [ AuthGuard ] },
       { path: 'event', component: EventComponent, canActivate: [ AuthGuard ] },
-      // TODO: Change MaintenanceComponent with PrivacySettingsComponent when implementation is done
       { path: 'privacy', component: MaintenanceComponent, canActivate: [ AuthGuard ] }
     ]
   },

src/app/app.component.scss

@@ -0,0 +1 @@
+/* Intentionally blank */

src/app/app.module.ts

@@ -28,7 +28,7 @@ import { DashboardLayoutSideNavComponent } from './component/nav/dashboard/dashb
 import { DashboardLayoutTopNavComponent } from './component/nav/dashboard/dashboard-layout-top-nav/dashboard-layout-top-nav.component';
 import { LandingLayoutTopNavComponent } from './component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component';
 import { EventComponent } from './page/dashboard-layout/event/event.component';
-import { CreateEventComponent } from './page/dashboard-layout/createEvent/create-event.component';
+import { CreateEventComponent } from './page/dashboard-layout/create-event/create-event.component';
 import { DashboardLayoutComponent } from './page/dashboard-layout/dashboard-layout.component';
 
 import { DashboardComponent } from './page/dashboard-layout/dashboard/dashboard.component';

src/app/component/common/block/event-data/event-data.component.html

@@ -13,8 +13,11 @@ <h4 *ngIf="user?.username">by <a
             [routerLink]="(isPublicPage ? URLS.u : URLS.user.root) + '/' + user.username"
             class="inline-a">{{isEditable ? 'you' : ( user.username.length > 12 ? user.username.slice( 0, 12 ) + '...' : user.username )}}</a>
         </h4>
-        <h4 *ngIf="link && showCalendar"><a [href]="link" class="inline-a"><i [class]="'fas fa-link fa-fw'"></i>join
-          meeting</a></h4>
+        <h4 *ngIf="link && showCalendar">
+          <a [href]="link" class="inline-a">
+            <i aria-hidden="true" [class]="'fas fa-link fa-fw'"></i>join meeting
+        </a>
+        </h4>
       </div>
       <div class="event-sub-header-title-date">
         <h4 *ngIf="date">{{dateItem}}</h4>
@@ -25,12 +28,12 @@ <h4 *ngIf="date">{{timeItem}}</h4>
   <div class="event-content">
     <div *ngIf="count !== undefined || duration !== undefined" class="content-information-row dim">
       <div *ngIf="duration !== undefined" class="content-information-row-inner-row">
-        <i [class]="'far fa-clock fa-lg fa-fw'"></i>
+        <i aria-hidden="true" [class]="'far fa-clock fa-lg fa-fw'"></i>
         <p class="content-information-row-duration"><span class="content-information-row-data">{{duration}}</span>
           Minutes</p>
       </div>
       <div *ngIf="count !== undefined" class="content-information-row-inner-row">
-        <i [class]="'fas fa-users fa-lg fa-fw'"></i>
+        <i aria-hidden="true" [class]="'fas fa-users fa-lg fa-fw'"></i>
         <p class="content-information-row-attendees"><span class="content-information-row-data">{{count}}</span>
           Attendees</p>
       </div>

src/app/component/common/block/event-data/event-data.component.scss

@@ -1,5 +1,3 @@
-//TODO: Remove unnecessary styles
-
 .event {
   display: flex;
   flex-direction: column;
@@ -224,9 +222,6 @@
   margin-top: 20px;
 }
 
-@media (hover: hover) {
-}
-
 @media only screen and (max-width: 999px) {
 
   .event-header {

src/app/component/common/block/event-hamburger-menu/event-hamburger-menu.component.html

@@ -1,6 +1,6 @@
 <div #menu class="hamburger-menu">
-  <i class="material-icons" #icon>menu</i>
-  <div  *ngIf="display" class="menu-list">
+  <i aria-hidden="true" class="material-icons" #icon>menu</i>
+  <div *ngIf="display" class="menu-list">
     <div class="share">
       <p>Share</p>
       <hr>

src/app/component/common/block/label-data/label-data.component.html

@@ -3,7 +3,7 @@
   <p>{{label}}</p>
   <p *ngIf="!isClickable">{{data}}</p>
   <a *ngIf="isClickable" [class.inline-a]="highlight"
-     [href]="(data.startsWith('http://') || data.startsWith('https://')) ? data : 'http://' + data" target="_blank">
+     [href]="(data.startsWith('http://') || data.startsWith('https://')) ? data : 'http://' + data" target="_blank" rel=noopener>
     {{data}}
   </a>
 </div>

src/app/component/common/block/label-data/label-data.component.ts

@@ -10,7 +10,7 @@ export class LabelDataComponent {
   @Input() label = '';
   @Input() data = '';
   @Input() isClickable = false;
-  @Input() noMargin = '';
+  @Input() noMargin = false;
   @Input() contrast = false;
   @Input() leftTopMargin = false;
   @Input() dim = false;

src/app/component/common/block/label-with-icon-data/label-with-icon-data.component.html

@@ -1,12 +1,12 @@
 <div *ngIf="brand" [class.no-margin]="noMargin" [class]="brand" class="icon-data-block" fxLayout="row">
-  <i [class]="'fab fa-' + brand + ' fa-lg fa-fw'"></i>
+  <i aria-hidden="true" [class]="'fab fa-' + brand + ' fa-lg fa-fw'"></i>
   <a [target]="target" class="inline-a" href="{{urlPrefix}}/{{data}}">{{data}}</a>
 </div>
 
 <div *ngIf="solid" [class.fix-width]="fixWidth" [class.no-margin-icon]="noMarginIcon" [class.no-margin]="noMargin"
      [ngClass]="solid"
      class="icon-data-block" fxLayout="row">
-  <i [class]="'fas fa-' + solid + ' fa-lg fa-fw'"></i>
+  <i aria-hidden="true" [class]="'fas fa-' + solid + ' fa-lg fa-fw'"></i>
   <p *ngIf="!isClickable && !isClickableWithinApp && !urlData">{{data}}</p>
   <a *ngIf="isClickable" [class.inline-a]="highlight"
      [href]="(data.startsWith('http://') || data.startsWith('https://')) ? data : urlPrefix + data"

src/app/component/common/block/label-with-icon-data/label-with-icon-data.component.ts

@@ -12,7 +12,7 @@ export class LabelWithIconDataComponent {
   @Input() user = '';
   @Input() solid = '';
   @Input() urlPrefix = 'http://';
-  @Input() noMargin = '';
+  @Input() noMargin = false;
   @Input() isClickable = false;
   @Input() isClickableWithinApp = false;
   @Input() highlight = false;

src/app/component/common/button/button1/button1.component.html

@@ -7,6 +7,6 @@
         [style.color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
         [style.border-color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
         [disabled]="loading || disabled" [style.cursor]="cursor">
-  <i *ngIf="icon" [class]="'fas fa-' + icon + ' fa-lg fa-fw'"></i>
+  <i aria-hidden="true" *ngIf="icon" [class]="'fas fa-' + icon + ' fa-lg fa-fw'"></i>
   {{text}}
 </button>

src/app/component/common/button/social-button/social-button.component.html

@@ -4,8 +4,8 @@
         [class]="flexStart ? 'flex-start' : 'flex-center'"
         [disabled]="loading" [ngClass]="brand"
         class="social-button rounded-box">
-  <i *ngIf="!localImage" [class]="'fab fa-' + (placeholderIcon ? placeholderIcon : brand)"></i>
+  <i aria-hidden="true" *ngIf="!localImage" [class]="'fab fa-' + (placeholderIcon ? placeholderIcon : brand)"></i>
   <img *ngIf="localImage" alt="local image" src="{{localImage}}"/>
-  <hr *ngIf="flexStart && text !== '' && !isSmallLogo" class="vertical-hr"/>
+  <span *ngIf="flexStart && text !== '' && !isSmallLogo" class="vertical-hr"></span>
   {{text}}
 </button>

src/app/component/common/card/card1/card1.component.scss

@@ -26,27 +26,19 @@
 }
 
 .card1-bottom-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
 }
 
-.card1-top-wrapper {
-  border-top-left-radius: 7px;
-  border-top-right-radius: 7px;
-}
-
 .card1-top-wrapper {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-.card1-bottom-wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
 .card1-bottom-wrapper.card1-bottom-wrapper-in-brand-color, .card1-top-wrapper.card1-top-wrapper-in-brand-color {
   background-color: var(--brand-color);
 }
@@ -135,9 +127,9 @@
 
 @media only screen and (max-width: 999px) {
   .card1 {
-    min-width: 95vw;
-    max-width: 95vw;
-    width: 95vw;
+    min-width: 94vw;
+    max-width: 94vw;
+    width: 94vw;
     margin-bottom: 50px;
   }
 

src/app/component/common/card/event-card/event-card.component.html

@@ -6,7 +6,7 @@
              [containsVideo]="event.payload?.trailerVideoLink" [enableHeader]="!showRateBar">
 
     <div *ngIf="event.payload?.trailerVideoLink" headerFullImg id=trailer-video>
-      <iframe title="Trailer Video" width="100%" style="height: -webkit-fill-available" [src]="safeYoutubeUrl" frameborder="0"
+      <iframe title="Trailer Video" width="100%" style="height: -webkit-fill-available" [src]="safeYoutubeUrl"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen></iframe>
     </div>