From 5c7ccb9b834c69ec4e3981cb76d87577d07dca3b Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Thu, 14 Sep 2017 19:53:46 +0100
Subject: [PATCH] fix toolbar and page port view for size in small devices
 (#2338)

remove old alfresco and activiti prefix
fix login toggle mobile devices
---
 demo-shell-ng2/app/app.component.html         | 37 ++++++++++++++-----
 demo-shell-ng2/app/app.component.scss         | 31 +++++++++-------
 .../app/components/about/about.component.html |  2 +-
 .../activiti/activiti-demo.component.html     | 28 +++++++-------
 ...ctiviti-process-attachments.component.html |  4 +-
 .../activiti-show-diagram.component.html      |  2 +-
 .../activiti-task-attachments.component.html  |  4 +-
 .../activiti/form-node-viewer.component.html  |  4 +-
 .../activiti/form-viewer.component.html       | 10 ++---
 .../datatable/datatable-demo.component.css    |  4 +-
 .../app/components/files/files.component.html | 20 +++++-----
 .../login/login-demo.component.html           |  8 ++--
 .../search/search-bar.component.html          |  8 ++--
 .../components/search/search.component.html   | 10 ++---
 .../components/search/search.component.scss   | 20 ++++++++++
 .../app/components/search/search.component.ts | 23 +-----------
 .../app/components/tag/tag.component.html     |  6 +--
 .../components/search-control.component.html  |  2 +-
 .../components/search-control.component.scss  | 20 +++-------
 19 files changed, 127 insertions(+), 116 deletions(-)
 create mode 100644 demo-shell-ng2/app/components/search/search.component.scss

diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index a788cb75e7..8d75ad1c28 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -1,20 +1,20 @@
-<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
-    <ng2-alfresco-userinfo
-        class="user-profile"
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()" class="adf-app-toolbar" >
+    <adf-userinfo
+        class="adf-app-user-profile"
         [menuPositionX]="'before'"
         [menuPositionY]="'above'">
-    </ng2-alfresco-userinfo>
+    </adf-userinfo>
 
-    <span>ADF Demo Application</span>
+    <span  class="adf-app-hide-xsmall" >ADF Demo Application</span>
 
-    <div class="app-menu--spacer"></div>
+    <div class="adf-app-menu-spacer"></div>
 
     <search-bar></search-bar>
 
-    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
-    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
-    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small"  md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
     <theme-picker></theme-picker>
     <button md-icon-button [mdMenuTriggerFor]="langMenu">
@@ -29,7 +29,24 @@
     <button md-icon-button [mdMenuTriggerFor]="appMenu">
         <md-icon>more_vert</md-icon>
     </button>
+
     <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/">
+            <md-icon>home</md-icon>
+            <span>Home</span>
+        </a>
+        <a md-menu-item href="" routerLink="/files">
+            <md-icon>folder_open</md-icon>
+            <span>Content Services</span>
+        </a>
+        <a md-menu-item href="" routerLink="/activiti">
+            <md-icon>device_hub</md-icon>
+            <span>Process Services</span>
+        </a>
+        <a md-menu-item href="" routerLink="/login">
+            <md-icon>vpn_key</md-icon>
+            <span>Login</span>
+        </a>
         <a md-menu-item href="" routerLink="/dl-custom-sources">
             <md-icon>extension</md-icon>
             <span>DL: Custom Sources</span>
diff --git a/demo-shell-ng2/app/app.component.scss b/demo-shell-ng2/app/app.component.scss
index 66c299f901..35a7d0c51f 100644
--- a/demo-shell-ng2/app/app.component.scss
+++ b/demo-shell-ng2/app/app.component.scss
@@ -1,24 +1,29 @@
-.user-profile {
+@import '~@angular/material/theming';
+
+
+.adf-app-user-profile {
     margin-right: 10px;
 }
 
-.app-menu--spacer {
+.adf-app-menu-spacer {
     flex: 1 1 auto;
 }
 
-.p-10 {
-    padding: 10px;
+.adf-app-toolbar {
+    overflow: hidden;
 }
 
-.m-10 {
-    margin: 10px;
-}
+@media ($mat-small) {
 
-._dialog_overlay {
-    position: static !important;
-}
+    .adf-app-hide-small{
+        display: none !important;
+    }
+
+}
+@media ($mat-xsmall) {
+
+    .adf-app-hide-xsmall{
+        display: none !important;
+    }
 
-.md-simple-snackbar-action {
-    border: 0px;
-    cursor: pointer;
 }
diff --git a/demo-shell-ng2/app/components/about/about.component.html b/demo-shell-ng2/app/components/about/about.component.html
index 284fd42d37..132925dfc1 100644
--- a/demo-shell-ng2/app/components/about/about.component.html
+++ b/demo-shell-ng2/app/components/about/about.component.html
@@ -108,5 +108,5 @@
 
     <h3>Packages</h3>
     <small>Current project is using the following ADF libraries:</small>
-    <alfresco-datatable [data]="data"></alfresco-datatable>
+    <adf-datatable [data]="data"></adf-datatable>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 1b141dfae0..0d551a24e6 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -12,20 +12,20 @@
                     <adf-accordion>
                         <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
                                              [headingIcon]="'assignment'">
-                            <activiti-filters
+                            <adf-filters
                                 [filterParam]="{name:'MY tasks'}"
                                 [appId]="appId"
                                 [hasIcon]="false"
                                 (filterClick)="onTaskFilterClick($event)"
                                 (onSuccess)="onSuccessTaskFilterList($event)"
                                 #activitifilter>
-                            </activiti-filters>
+                            </adf-filters>
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
-                    <activiti-tasklist
+                    <adf-tasklist
                         [appId]="taskFilter?.appId"
                         [page]="taskPage"
                         [size]="taskPagination.maxItems"
@@ -48,7 +48,7 @@
                             <data-column key="created" title="Created" class="hidden"></data-column>
                         </data-columns>
                         -->
-                    </activiti-tasklist>
+                    </adf-tasklist>
 
                     <adf-pagination
                         (changePageNumber)="onChangePageNumber($event)"
@@ -60,7 +60,7 @@
                     </adf-pagination>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
-                    <activiti-task-details #activitidetails
+                    <adf-task-details #activitidetails
                                            [debugMode]="true"
                                            [taskId]="currentTaskId"
                                            [fieldValidators]="fieldValidators"
@@ -69,7 +69,7 @@
                                            (taskCreated)="onTaskCreated($event)"
                                            (assignTask)="onAssignTask()"
                                            (taskDeleted)="onTaskDeleted($event)">
-                    </activiti-task-details>
+                    </adf-task-details>
                     <hr>
                     <div *ngIf="currentTaskId">
                         {{'PS-TAB.AUDIT-LOG' | translate}}
@@ -119,18 +119,18 @@
                     <adf-accordion>
                         <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
                                              [headingIcon]="'assessment'">
-                            <activiti-process-instance-filters
+                            <adf-process-instance-filters
                                 [filterParam]="{index: 0}"
                                 [appId]="appId"
                                 (filterClick)="onProcessFilterClick($event)"
                                 (onSuccess)="onSuccessProcessFilterList($event)">
-                            </activiti-process-instance-filters>
+                            </adf-process-instance-filters>
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
-                    <activiti-process-instance-list
+                    <adf-process-instance-list
                         *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                         [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                         [name]="processFilter.filter.name"
@@ -146,15 +146,15 @@
                             <data-column key="created" title="Created" class="hidden"></data-column>
                         </data-columns>
                         -->
-                    </activiti-process-instance-list>
+                    </adf-process-instance-list>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
-                    <activiti-process-instance-details
+                    <adf-process-instance-details
                         [processInstanceId]="currentProcessInstanceId"
                         (processCancelled)="processCancelled()"
                         (showProcessDiagram)="onShowProcessDiagram($event)"
                         (taskClick)="onProcessDetailsTaskClick($event)">
-                    </activiti-process-instance-details>
+                    </adf-process-instance-details>
                     <hr>
                     <div *ngIf="currentProcessInstanceId">
                         {{'PS-TAB.START-PROCESS' | translate}}
@@ -201,7 +201,7 @@
                 </analytics-report-list>
             </div>
             <div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
-                <activiti-analytics
+                <adf-analytics
                     *ngIf="report"
                     [appId]="appId"
                     [reportId]="report.id"
@@ -209,7 +209,7 @@
                     (editReport)="onEditReport($event)"
                     (reportSaved)="onReportSaved($event)"
                     (reportDeleted)="onReportDeleted()">
-                </activiti-analytics>
+                </adf-analytics>
                 <div *ngIf="!report">
                     <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
                 </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
index c4f36017e6..4b039bff2d 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
@@ -21,10 +21,10 @@
 </div>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer
+    <adf-viewer
         [(showViewer)]="fileShowed"
         [blobFile]="content"
         [displayName]="contentName"
         [overlayMode]="true">
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
index fb812041e8..6bac0d752a 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
@@ -1,4 +1,4 @@
 <div>
     <button md-mini-fab  (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
-    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+    <adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html
index 72871b82b6..6cafcae6eb 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html
@@ -20,10 +20,10 @@
 </div>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer
+    <adf-viewer
         [(showViewer)]="fileShowed"
         [blobFile]="content"
         [displayName]="contentName"
         [overlayMode]="true">
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html b/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html
index e2f166282b..c66bacf054 100644
--- a/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html
+++ b/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html
@@ -1,6 +1,6 @@
 <div class="activiti-form-viewer" *ngIf="nodeId">
-    <activiti-form [nodeId]="nodeId"
+    <adf-form [nodeId]="nodeId"
                    [saveMetadata]="true"
                    [path]="'/Sites/swsdp/documentLibrary'">
-    </activiti-form>
+    </adf-form>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/form-viewer.component.html b/demo-shell-ng2/app/components/activiti/form-viewer.component.html
index 2a5c98ccdb..acda361721 100644
--- a/demo-shell-ng2/app/components/activiti/form-viewer.component.html
+++ b/demo-shell-ng2/app/components/activiti/form-viewer.component.html
@@ -1,11 +1,11 @@
 <div class="activiti-form-viewer" *ngIf="taskId">
-    <activiti-form [taskId]="taskId"></activiti-form>
-    <!--<activiti-form [formName]="'activitiForms:patientFolder'"-->
+    <adf-form [taskId]="taskId"></adf-form>
+    <!--<adf-form [formName]="'activitiForms:patientFolder'"-->
                        <!--[saveMetadata]="true"-->
                        <!--[path]="'/Sites/swsdp/documentLibrary'"-->
-                       <!--[nameNode]="'test'"></activiti-form>-->
-    <!--<activiti-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
+                       <!--[nameNode]="'test'"></adf-form>-->
+    <!--<adf-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
                    <!--[saveMetadata]="true"-->
                    <!--[path]="'/Sites/swsdp/documentLibrary'">-->
-    <!--</activiti-form>-->
+    <!--</adf-form>-->
 </div>
diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.css b/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
index cf1e8fe8da..a4d9493a15 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
@@ -1,10 +1,10 @@
-alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+adf-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
     outline-offset: -1px;
     outline-width: 1px;
     outline-color: green;
     outline-style: solid;
 }
 
-alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+adf-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
     color: green;
 }
diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 4b4d00f2e2..5703dec0da 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -3,7 +3,7 @@
         <adf-sites-dropdown (change)="getSiteContent($event)">
         </adf-sites-dropdown>
     </div>
-    <alfresco-upload-drag-area
+    <adf-upload-drag-area
         [parentId]="documentList.currentFolderId"
         [versioning]="versioning"
         [adf-node-permission]="'create'"
@@ -208,7 +208,7 @@
                 </content-action>
             </content-actions>
         </adf-document-list>
-    </alfresco-upload-drag-area>
+    </adf-upload-drag-area>
 </div>
 
 <context-menu-holder></context-menu-holder>
@@ -264,7 +264,7 @@
         </md-input-container>
     </section>
     <div *ngIf="!acceptedFilesTypeShow">
-        <alfresco-upload-button
+        <adf-upload-button
             #uploadButton
             tooltip="Custom tooltip"
             [disabled]="!enableUpload"
@@ -276,10 +276,10 @@
             [adf-node-permission]="'create'"
             [adf-nodes]="getCurrentDocumentListNode()"
             (permissionEvent)="handlePermissionError($event)">
-        </alfresco-upload-button>
+        </adf-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
-        <alfresco-upload-button
+        <adf-upload-button
             #uploadButton
             tooltip="Custom tooltip"
             [disabled]="!enableUpload"
@@ -292,7 +292,7 @@
             [adf-node-permission]="'create'"
             [adf-nodes]="getCurrentDocumentListNode()"
             (permissionEvent)="handlePermissionError($event)">
-        </alfresco-upload-button>
+        </adf-upload-button>
     </div>
     <section>
         <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
@@ -312,7 +312,7 @@
 
 <div *ngIf="showViewer">
     <ng-container *ngIf="!useInlineViewer">
-        <alfresco-viewer
+        <adf-viewer
             [(showViewer)]="showViewer"
             [fileNodeId]="fileNodeId"
             [overlayMode]="true">
@@ -323,15 +323,15 @@
                 </ng-template>
             </extension-viewer>
 
-        </alfresco-viewer>
+        </adf-viewer>
     </ng-container>
 
     <ng-container *ngIf="useInlineViewer">
         <div class="adf-not-overlay-viewer">
-            <alfresco-viewer
+            <adf-viewer
                 [(showViewer)]="showViewer"
                 [fileNodeId]="fileNodeId">
-            </alfresco-viewer>
+            </adf-viewer>
         </div>
     </ng-container>
 </div>
diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html
index 901dc463ec..d1c4bc48b3 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.html
+++ b/demo-shell-ng2/app/components/login/login-demo.component.html
@@ -60,7 +60,7 @@
             <md-slide-toggle
                 id="switch1-mobile"
                 [color]="'primary'"
-                (click)="toggleECM()"
+                (change)="toggleECM()"
                 [checked]="isECM">
                 Content Services
             </md-slide-toggle>
@@ -69,7 +69,7 @@
             <md-slide-toggle
                 id="switch2-mobile"
                 [color]="'primary'"
-                (click)="toggleBPM()"
+                (change)="toggleBPM()"
                 [checked]="isBPM">
                 Process Services
             </md-slide-toggle>
@@ -78,7 +78,7 @@
             <md-slide-toggle
                 id="switch3-mobile"
                 [color]="'primary'"
-                (click)="toggleCSRF()"
+                (change)="toggleCSRF()"
                 [checked]="!disableCsrf">
                 CSRF
             </md-slide-toggle>
@@ -87,7 +87,7 @@
             <md-slide-toggle
                 id="switch4-mobile"
                 [color]="'primary'"
-                (click)="toggleFooter()"
+                (change)="toggleFooter()"
                 [checked]="showFooter">
                 Login footer
             </md-slide-toggle>
diff --git a/demo-shell-ng2/app/components/search/search-bar.component.html b/demo-shell-ng2/app/components/search/search-bar.component.html
index 1a7d13a90c..2fcc5b92dc 100644
--- a/demo-shell-ng2/app/components/search/search-bar.component.html
+++ b/demo-shell-ng2/app/components/search/search-bar.component.html
@@ -1,4 +1,4 @@
-<alfresco-search-control *ngIf="isLoggedIn()"
+<adf-search-control *ngIf="isLoggedIn()"
                          [searchTerm]="searchTerm"
                          [autocomplete]="false"
                          [highlight]="true"
@@ -6,10 +6,10 @@
                          (searchChange)="onSearchTermChange($event);"
                          (expand)="onExpandToggle($event);"
                          (fileSelect)="onItemClicked($event)">
-</alfresco-search-control>
+</adf-search-control>
 
-<alfresco-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
+<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
                  [fileNodeId]="fileNodeId"
                  [overlayMode]="true">
     <md-spinner></md-spinner>
-</alfresco-viewer>
+</adf-viewer>
diff --git a/demo-shell-ng2/app/components/search/search.component.html b/demo-shell-ng2/app/components/search/search.component.html
index 5f73bf6081..a606f50dcc 100644
--- a/demo-shell-ng2/app/components/search/search.component.html
+++ b/demo-shell-ng2/app/components/search/search.component.html
@@ -1,14 +1,14 @@
 <div class="search-results-container">
-    <h1>Search results</h1>
-    <alfresco-search
+    <div class="adf-search-title">Search results</div>
+    <adf-search
         [navigate]="false"
-        (nodeDbClick)="nodeDbClick($event)"></alfresco-search>
+        (nodeDbClick)="nodeDbClick($event)"></adf-search>
 </div>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
+    <adf-viewer [(showViewer)]="fileShowed"
                      [fileNodeId]="fileNodeId"
                      [overlayMode]="true">
         <md-spinner></md-spinner>
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
diff --git a/demo-shell-ng2/app/components/search/search.component.scss b/demo-shell-ng2/app/components/search/search.component.scss
new file mode 100644
index 0000000000..a8a1a2930a
--- /dev/null
+++ b/demo-shell-ng2/app/components/search/search.component.scss
@@ -0,0 +1,20 @@
+div.search-results-container {
+    padding: 0 20px 20px 20px;
+}
+
+.adf-search-title {
+    font-size: 22px;
+    padding: 15px 0 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .col-display-name {
+        min-width: 100px;
+    }
+    :host .col-modified-at, :host .col-modified-by {
+        display: none;
+    }
+    :host div.search-results-container table {
+        width: 100%;
+    }
+}
diff --git a/demo-shell-ng2/app/components/search/search.component.ts b/demo-shell-ng2/app/components/search/search.component.ts
index 7adfa19d01..35a1d22f5e 100644
--- a/demo-shell-ng2/app/components/search/search.component.ts
+++ b/demo-shell-ng2/app/components/search/search.component.ts
@@ -21,28 +21,7 @@ import { Router } from '@angular/router';
 @Component({
     selector: 'search-component',
     templateUrl: './search.component.html',
-    styles: [`
-        :host div.search-results-container {
-            padding: 0 20px 20px 20px;
-        }
-        :host h1 {
-            font-size: 22px;
-        }
-        :host tbody tr {
-            cursor: pointer;
-        }
-        @media screen and (max-width: 600px) {
-            :host .col-display-name {
-                min-width: 100px;
-            }
-            :host .col-modified-at, :host .col-modified-by {
-                display: none;
-            }
-            :host div.search-results-container table {
-                width: 100%;
-            }
-        }
-    `]
+    styleUrls: ['./search.component.scss']
 })
 export class SearchComponent {
 
diff --git a/demo-shell-ng2/app/components/tag/tag.component.html b/demo-shell-ng2/app/components/tag/tag.component.html
index 2f05dc8641..11d44c424a 100644
--- a/demo-shell-ng2/app/components/tag/tag.component.html
+++ b/demo-shell-ng2/app/components/tag/tag.component.html
@@ -2,18 +2,18 @@
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 <div class="adf-tag-example-area">
     <md-card>
-        <alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
+        <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
     </md-card>
 </div>
 <div class="adf-tag-example-area">
     <md-card>
         <div class="adf-tag-example-title">List Tags Content Services</div>
-        <alfresco-tag-list></alfresco-tag-list>
+        <adf-tag-list></adf-tag-list>
     </md-card>
 </div>
 <div class="adf-tag-example-area">
     <md-card>
         <div class="adf-tag-example-title">Tag list By Node ID</div>
-        <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+        <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
     </md-card>
 </div>
diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html
index 926189cf27..24ed7be8f3 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html
@@ -7,7 +7,7 @@
             class="adf-search-button">
             <md-icon aria-label="search button">search</md-icon>
         </button>
-        <div class="search-field">
+        <div class="adf-search-field">
             <md-input-container>
                 <input
                     mdInput
diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
index c439ad8c65..ae1ba18104 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
@@ -19,8 +19,8 @@
             display: flex;
             align-items: center;
 
-            .search-field {
-                width: 260px;
+            .adf-search-field {
+                max-width: 260px;
                 padding-top: 6px;
 
                 .mat-input-container {
@@ -36,20 +36,10 @@
                 }
             }
 
-            .search-field .mat-input-infix {
-                padding: 0px;
+            .adf-search-field .mat-input-infix {
+                padding: 0;
             }
 
-            @media only screen and (max-width: 400px) {
-                .search-field {
-                    width: 200px;
-                }
-            }
-            @media only screen and (max-width: 320px) {
-                .search-field {
-                    width: 160px;
-                }
-            }
         }
 
         &-search-form{
@@ -61,4 +51,4 @@
             display: block;
         }
     }
-}
\ No newline at end of file
+}