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

Add url bar layout

Browse Source
This commit is contained in:
balazs 2019-01-21 16:49:11 +01:00
parent 79a4017386
commit fd297a6f5f
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,12 +13,18 @@
[ngClass]="{'deploy-blur': deploying}"> [ngClass]="{'deploy-blur': deploying}">
<app-web *ngIf="!iframeUrl"></app-web> <app-web *ngIf="!iframeUrl"></app-web>
<div *ngIf="iframeUrl" class="iframe-container"> <div *ngIf="iframeUrl" class="iframe-container">
<iframe class="iframe" <div class="urlbar-container">
#webiframe <button class="refresh">R</button>
scrolling="yes" <input type="text" class="urlbar" value="{{iframeUrl}}">
frameborder="0" <button class="go">G</button>
[src]="iframeUrl | safe"> </div>
</iframe> <iframe class="iframe"
#webiframe
scrolling="yes"
frameborder="0"
(load)="iframeLoad()"
[src]="iframeUrl | safe">
</iframe>
</div> </div>
</div> </div>
<div class="tfw-ide"> <div class="tfw-ide">

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

@ -8,6 +8,7 @@
.tfw-web { .tfw-web {
.iframe-container { .iframe-container {
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
@include set-component-size($layouts-key, 'web'); @include set-component-size($layouts-key, 'web');
} }
@ -18,6 +19,14 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.urlbar-container {
display: flex;
}
.urlbar {
flex-grow: 1;
}
} }
} }