Fixed: Responsiveness for mobile devices w.r.t to side navigation (#161)

* FIxed: Sidebar was not responsive for mobile view
Angular 12 migration
UI design changes

* Fixed Unit tese cases

Author: patelvimal

.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

angular.json

@@ -5,7 +5,11 @@
   "projects": {
     "angular-builders": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -18,7 +22,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -29,49 +32,54 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "angular-builders:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "angular-builders:build:production"
+            },
+            "development": {
+              "browserTarget": "angular-builders:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -97,37 +105,9 @@
             ],
             "scripts": []
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-builders:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-builders:serve:production"
-            }
-          }
         }
       }
     }
   },
-  "defaultProject": "angular-builders",
-  "cli": {
-    "analytics": "02413cf1-b5b8-42b1-8c01-5a81a3a99231"
-  }
-}
+  "defaultProject": "angular-builders"
+}

e2e/protractor.conf.js

@@ -5,49 +5,43 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
     "contributors:add": "all-contributors add",
     "contributors:check": "all-contributors check"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "11.0.9",
-    "@angular/cdk": "11.1.0",
-    "@angular/common": "11.0.9",
-    "@angular/compiler": "11.0.9",
-    "@angular/core": "11.0.9",
-    "@angular/forms": "11.0.9",
-    "@angular/material": "11.1.0",
-    "@angular/platform-browser": "11.0.9",
-    "@angular/platform-browser-dynamic": "11.0.9",
-    "@angular/router": "11.0.9",
-    "@angular/service-worker": "11.0.9",
-    "rxjs": "6.6.3",
-    "tslib": "2.1.0",
-    "zone.js": "0.10.3"
+    "@angular/animations": "~12.0.0",
+    "@angular/cdk": "^12.0.2",
+    "@angular/common": "~12.0.0",
+    "@angular/compiler": "~12.0.0",
+    "@angular/core": "~12.0.0",
+    "@angular/forms": "~12.0.0",
+    "@angular/material": "^12.0.2",
+    "@angular/platform-browser": "~12.0.0",
+    "@angular/platform-browser-dynamic": "~12.0.0",
+    "@angular/router": "~12.0.0",
+    "@angular/service-worker": "~12.0.0",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.1.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1101.1",
-    "@angular/cli": "11.1.1",
-    "@angular/compiler-cli": "11.0.9",
-    "@angular/language-service": "11.0.9",
-    "@types/jasmine": "3.6.3",
-    "@types/jasminewd2": "2.0.8",
-    "@types/node": "12.12.54",
+    "@angular-devkit/build-angular": "~12.0.0",
+    "@angular/cli": "~12.0.0",
+    "@angular/compiler-cli": "~12.0.0",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
     "all-contributors-cli": "6.17.0",
-    "codelyzer": "6.0.1",
-    "jasmine-core": "3.6.0",
-    "jasmine-spec-reporter": "5.0.2",
-    "karma": "5.0.9",
-    "karma-chrome-launcher": "3.1.0",
+    "jasmine-core": "~3.7.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.5.4",
-    "protractor": "7.0.0",
-    "ts-node": "8.10.2",
-    "tslint": "6.1.3",
-    "typescript": "4.0.5"
+    "jasmine-spec-reporter": "7.0.0",
+    "typescript": "~4.2.3"
   }
 }

e2e/src/app.e2e-spec.ts

@@ -6,7 +6,7 @@ input {
 input[type=search] {
 	-webkit-appearance: textfield;
     font-family: Roboto,"Helvetica Neue",sans-serif;
-    font-size: 18px;
+    font-size: 16px;
 }
 input::-webkit-search-decoration,
 input::-webkit-search-cancel-button {
@@ -15,14 +15,15 @@ input::-webkit-search-cancel-button {
 
 
 input[type=search] {
-	background: #ededed url('../../../../assets/icons/search-1x.png') no-repeat 9px center;
+	background: #ededed url('../../../../assets/icons/search-1x.png') no-repeat;
+	background-position: right 10px top 8px;
 	border: solid 1px #ccc;
 	padding: 9px 10px 9px 32px;
 	width: 85px;
 
-	-webkit-border-radius: 10em;
-	-moz-border-radius: 10em;
-	border-radius: 10em;
+	-webkit-border-radius: 8em;
+	-moz-border-radius: 8em;
+	border-radius: 8em;
 
 	-webkit-transition: all .5s;
 	-moz-transition: all .5s;
@@ -42,25 +43,20 @@ input[type=search] {
 }
 
 #expand-search input[type=search] {
-	width: 40px;
-	height: 40px;
+	width: 180px;
+	height: 34px;
 	padding-left: 10px;
 	color: transparent;
 	cursor: pointer;
+	font-size: 16px;
 }
+
 #expand-search input[type=search]:hover {
 	background-color: #fff;
 }
 #expand-search input[type=search]:focus {
-	width: 230px;
-	padding-left: 32px;
 	color: #000;
 	background-color: #fff;
 	cursor: auto;
+	
 }
-#expand-search input:-moz-placeholder {
-	color: transparent;
-}
-#expand-search input::-webkit-input-placeholder {
-	color: transparent;
-}