mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:11:32 +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"
[ngClass]="{'deploy-blur': deploying || polling}">
<app-web *ngIf="!iframeUrl"></app-web>
<div *ngIf="iframeUrl" class="iframe-container">
<div class="urlbar-container">
<button class="refresh" (click)="reloadIframe()">R</button>
<div class="urlbar-container">
<button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>
<input type="text"
#urlbar
class="urlbar"
class="urlbar form-control"
value="{{actualIframeUrl}}"
(keyup.enter)="changeIframeURL()">
<button class="go" (click)="changeIframeURL()">G</button>
</div>
<button class="go btn btn-sm rounded-circle" (click)="changeIframeURL()">&#8680;</button>
</div>
<div *ngIf="iframeUrl" class="iframe-container">
<iframe class="iframe"
#webiframe
scrolling="yes"

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

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