From 2943fec79742d56931dd6241bafe67d1efee4325 Mon Sep 17 00:00:00 2001
From: Dinika Saxena <dinika.saxena@cern.ch>
Date: Sat, 17 Feb 2018 20:35:55 +0100
Subject: [PATCH] fix the layout of the contents in navbar

Signed-off-by: Dinika Saxena <dinika.saxena@cern.ch>
---
 .../record-toolbar.component.html             | 12 +++++-------
 .../record-toolbar.component.scss             | 19 ++++++++++++++++++-
 .../search-bar/search-bar.component.html      |  4 ++--
 .../tickets/tickets.component.html            |  4 ++--
 .../tickets/tickets.component.scss            |  1 +
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/record-editor/record-toolbar/record-toolbar.component.html b/src/app/record-editor/record-toolbar/record-toolbar.component.html
index 0654a63..c0347ab 100644
--- a/src/app/record-editor/record-toolbar/record-toolbar.component.html
+++ b/src/app/record-editor/record-toolbar/record-toolbar.component.html
@@ -1,7 +1,6 @@
 <nav class="navbar navbar-default" id="editor-toolbar">
-  <div class="container-fluid">
     <div class="row">
-      <div class="navbar-header col-md-2">
+      <div class="left-navbar">
         <div *ngIf="record" [class.re-disabled]="displayingRevision">
           <button type="button" class="btn navbar-btn btn-success" [disabled]="saveButtonDisabledAttribute" (click)="onSaveClick($event)">
             <i class="fa fa-floppy-o" aria-hidden="true"></i>
@@ -13,21 +12,20 @@
         </div>
       </div>
 
-      <div class="nav navbar-nav col-md-8">
-        <div class="search-form col-md-6">
+      <div class="middle-navbar">
+        <div class="search-form">
           <re-search-bar></re-search-bar>
         </div>
-        <div *ngIf="record" class="search-form col-md-6">
+        <div *ngIf="record" class="search-form">
           <re-tickets></re-tickets>
         </div>
       </div>
 
-      <div *ngIf="record" class="nav navbar-nav navbar-right col-md-2">
+      <div *ngIf="record" class="right-navbar">
         <re-record-history (revisionChange)="onRevisionChange($event)" (revisionRevert)="onRevisionRevert()"></re-record-history>
       </div>
 
     </div>
-  </div>
 </nav>
 
 <re-manual-merge-modal #manualMergeModal></re-manual-merge-modal>
\ No newline at end of file
diff --git a/src/app/record-editor/record-toolbar/record-toolbar.component.scss b/src/app/record-editor/record-toolbar/record-toolbar.component.scss
index c24b0d3..2c4b322 100644
--- a/src/app/record-editor/record-toolbar/record-toolbar.component.scss
+++ b/src/app/record-editor/record-toolbar/record-toolbar.component.scss
@@ -2,4 +2,21 @@
   color: white;
   font-size: 23px;
   padding: 0 0 0 12px;
-}
\ No newline at end of file
+}
+
+.row {
+	display: flex;
+	flex-wrap: nowrap;
+	padding: 0 10px;
+
+	.middle-navbar {
+		display: flex;
+		flex-grow: 1;
+		justify-content: center;
+		.search-form {
+			display: inline-block;
+		}
+	}
+	
+}
+
diff --git a/src/app/record-editor/search-bar/search-bar.component.html b/src/app/record-editor/search-bar/search-bar.component.html
index cdf0d41..530b281 100644
--- a/src/app/record-editor/search-bar/search-bar.component.html
+++ b/src/app/record-editor/search-bar/search-bar.component.html
@@ -1,10 +1,10 @@
-<div class="navbar-form input-group col-md-7 pull-left inline">
+<div class="navbar-form input-group pull-left inline">
   <input class="form-control search" [(ngModel)]="query" (keyup.enter)="searchOrGo()" placeholder="Search records" />
   <span class="input-group-btn">
     <a class="btn btn-default fa fa-search" (click)="searchOrGo()"></a>
   </span>
 </div>
-<div *ngIf="resultCount >= 0" class="navbar-form col-md-5 inline">
+<div *ngIf="resultCount >= 0" class="navbar-form inline">
   <ng-container [ngSwitch]="resultCount">
     <ng-container *ngSwitchCase="0">
       <span class="result-text form-control-static">No results</span>
diff --git a/src/app/record-editor/tickets/tickets.component.html b/src/app/record-editor/tickets/tickets.component.html
index bcad536..b5d84e8 100644
--- a/src/app/record-editor/tickets/tickets.component.html
+++ b/src/app/record-editor/tickets/tickets.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="tickets">
   <div>
-    <ul class="display col-md-8">
+    <ul class="display">
       <li *ngFor="let ticket of tickets | slice:0:displayLimit; let i = index">
         <re-ticket [ticket]="ticket" (resolve)="onTicketResolve(i)"></re-ticket>
       </li>
@@ -18,7 +18,7 @@
       </li>
     </ul>
   </ng-template>
-<div class="col-md-4">
+<div class="inline">
   <re-new-ticket-modal #newTicketModal (create)="onTicketCreate($event)"></re-new-ticket-modal>
 </div>
 </ng-container>
diff --git a/src/app/record-editor/tickets/tickets.component.scss b/src/app/record-editor/tickets/tickets.component.scss
index 3be5ea6..4f4e0f4 100644
--- a/src/app/record-editor/tickets/tickets.component.scss
+++ b/src/app/record-editor/tickets/tickets.component.scss
@@ -7,6 +7,7 @@
 }
 
 ul.display {
+  display: inline-block;
   list-style-type: none;
   padding-left: 0px;
   margin-bottom: 0px;