polishing frontend

Author: mschild

src/app/app.component.css

@@ -1,13 +1,14 @@
 /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
 .row.content {
-	height: 1500px
+	height: 1500px;
 }
 
 /* Set gray background color and 100% height */
 .sidenav {
 	background-color: #f1f1f1;
 	height: 100%;
 	padding-left: 5%;
+	padding-top: 1%;
 }
 
 /* Set black background color, white text and some padding */
@@ -22,7 +23,6 @@ footer {
 	.sidenav {
 		height: auto;
 		padding: 15px;
-		padding-top: 1%;
 	}
 	.row.content {
 		height: auto;
@@ -62,6 +62,7 @@ footer {
 
 .white {
 	background-color: white;
+	padding-left: 1%;
 
 }
 

src/app/app.component.html

@@ -7,10 +7,12 @@
 		</div>
 		<div id="controlId" tabindex="1" [appFocusRework]="focusMainArea"
 			(keypress)="keyControl($event)"
-			*ngIf="anonymizationHanlderService.displayableText" class="col-sm-10 sidenav">
-			{{fileName}}
+			*ngIf="anonymizationHanlderService.displayableText"
+			class="col-sm-10 sidenav">
+			<button type="button" class="btn btn-secondary">{{fileName}}</button>
 			<div class="panel panel-default">
-				<div class="panel-body white fixed-panel" (mouseup)="getSelectionText()">
+				<div class="panel-body white fixed-panel"
+					(mouseup)="getSelectionText()">
 					<!-- *ngFor="let page of anonymizationHanlderService.displayableText"-->
 					<div
 						[innerHtml]="anonymizationHanlderService.displayableText | highlightAnonymization:anonymizationHanlderService.getAnonymizations():trigger"></div>
@@ -48,29 +50,31 @@ <h4>Steuerung:</h4>
 									class="btn btn-sq-lg btn-default btn-lg">a</button></td>
 							<td>
 								<h4>
-									: <b>a</b>ccept
+									:&nbsp;<b>a</b>ccept
 								</h4>
 							</td>
 						</tr>
 						<tr>
 							<td><button type="button"
 									class="btn btn-sq-lg btn-default btn-lg">d</button></td>
-							<td><h4>
-									: <b>d</b>ecline
-								</h4></td>
+							<td>
+								<h4>
+									:&nbsp;<b>d</b>ecline
+								</h4>
+							</td>
 						</tr>
 						<tr>
 							<td><button type="button"
 									class="btn btn-sq-lg btn-default btn-lg">w</button></td>
 							<td><h4>
-									: re<b>w</b>ork
+									:&nbsp;re<b>w</b>ork
 								</h4></td>
 						</tr>
 						<tr>
 							<td><button type="button"
 									class="btn btn-sq-lg btn-default btn-lg">s</button></td>
 							<td><h4>
-									: <b>s</b>ave
+									:&nbsp;<b>s</b>ave
 								</h4></td>
 						</tr>
 					</table>