Overview

The objective of this Custom Banner is to change the existing top header in fragile, page_fit and compact home page templates.

Old Banner

The Department logo and Product logo appear like a patch in the header.

Custom Banner

  • Added contact details in header and Register Now Button.
  • placed the navbar below contact details.
  • Flash content removed displaying only static content.

Navbar

  • Changes done in UI design.
  • Renamed the menu items as below
    • Tenders to Tender View
    • More to Utilities
    • Login to User Log-in
  • Re-arranged the menu options as below

Home -> Tender View -> About Us -> Register -> User Log-in -> Contact Us -> Utilities

Components

  • One new component added that is "cust_header".

What changes and In which file

  • File : header.html

Added "CustHeader" type.

<div if.bind="(mdlOptions.Type == type.CustHeader)">
<compose view="./cust_header/cust_header.html"></compose>
</div>
  • File : header_model.js

Initialize the new CustHeader type in "HeaderModelCls" class.

class HeaderModelCls {
constructor() {
this.type = {
Default: 'default',
Dark: 'dark',
Light: 'light',
CustHeader: 'custHeader'
};
}
}
  • File : home_page_model.js

Defined the "Fragile" and "CustHeader" in "headerElmNameObj" object.

let headerElmNameObj = {
CustHeader: {
HideTriangle: true,
HideLeftTitle: true,
HideFlash: true,
HideLogoRight: true,
HideHeaderCenterHeading: true,
Type: 'custHeader'
},
Fragile: {
HideTriangle: true,
HideLeftTitle: true,
HideFlash: true,
HideLogoRight: true,
HideHeaderCenterHeading: true,
IsWhiteBg: true
}
}
  • File : home_page_model.js

Added CustHeader in "HeaderElmOptions" > "templateConfigOptions" > "templateObj" object.

this.templateObj = {
[this.templateNameObj.Compact]: {
Path: PLATFORM.moduleName('./cpwd_home_pages/cpwd_home_page.html'),
//HoriNavShowShadowScrollFlag : true,
templateConfigOptions: {
FooterElmType: footerElmNameObj.Dark,
HeaderElmOptions: headerElmNameObj.CustHeader,
IsHeaderLightBg: true
},
PageCode: 'cst-pg004-03'
},
[this.templateNameObj.PageFit]: {
Path: PLATFORM.moduleName('./page_fits/page_fit.html'),
templateConfigOptions: {
HeaderTagElmType: headerTagElmNameObj.NamePlate,
FooterElmType: footerElmNameObj.PageFit,
HeaderElmOptions: headerElmNameObj.CustHeader,
IsHeaderLightBg: true
},
PageCode: 'cst-pg004-04'
},
[this.templateNameObj.Fragile]: {
Path: PLATFORM.moduleName('./fragiles/fragile.html'),
templateConfigOptions: {
HeaderTagElmType: headerTagElmNameObj.Pen,
FooterElmType: footerElmNameObj.Compact,
HeaderElmOptions: headerElmNameObj.CustHeader,
IsHeaderLightBg: ''
},
PageCode: 'cst-pg004-09'
}
}
  • File : header.js

Added two lines of code in "HeaderCls" constructor to fetch contact details.

constructor() {
this.mdlObj2 = new HomePageModelCls();
this.deptLabels = this.mdlObj2.deptLabels;
}
  • File : nav_bar_horizontal.js

Renamed "More" to "Utilities" (in navbar) in "NavBarHorizontalCls" class.

class NavBarHorizontalCls {
constructor(eventAggregatorObj, router) {
this.pageLabels.TitleMore = "Utilities";
}
}
  • File : 1. fragile.css 2. page_fit.css and 3. cpwd_home_page.css

Written custom css for Custom Banner.