mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 11:52:40 +00:00
Code Issues Releases Wiki Activity

Design url bar

Browse Source
This commit is contained in:
balazs 2019-01-23 14:12:33 +01:00
parent 42ca6d7c0d
commit 0e5a8fca05
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/dashboard/dashboard.component.html
View File

@ -12,16 +12,16 @@
<div class="tfw-web tao-grid-top-left" <div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying || polling}"> [ngClass]="{'deploy-blur': deploying || polling}">
<app-web *ngIf="!iframeUrl"></app-web> <app-web *ngIf="!iframeUrl"></app-web>
<div *ngIf="iframeUrl" class="iframe-container"> <div class="urlbar-container">
<div class="urlbar-container"> <button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>
<button class="refresh" (click)="reloadIframe()">R</button>
<input type="text" <input type="text"
#urlbar #urlbar
class="urlbar" class="urlbar form-control"
value="{{actualIframeUrl}}" value="{{actualIframeUrl}}"
(keyup.enter)="changeIframeURL()"> (keyup.enter)="changeIframeURL()">
<button class="go" (click)="changeIframeURL()">G</button> <button class="go btn btn-sm rounded-circle" (click)="changeIframeURL()">&#8680;</button>
</div> </div>
<div *ngIf="iframeUrl" class="iframe-container">
<iframe class="iframe" <iframe class="iframe"
#webiframe #webiframe
scrolling="yes" scrolling="yes"

16
src/app/dashboard/dashboard.component.scss
View File

@ -22,10 +22,26 @@
.urlbar-container { .urlbar-container {
display: flex; display: flex;
height: 37px;
background: #353535;
.btn {
background: #353535;
color: white;
align-self: center;
margin: 5px;
}
.btn:hover{
background: lighten(#353535, 10);
}
} }
.urlbar { .urlbar {
flex-grow: 1; flex-grow: 1;
height: 30px;
align-self: center;
border-radius: 15px;
} }
} }
} }