change macro layout on xs and lg devices

This commit is contained in:
Attila Csanyi
2017-06-06 21:49:21 +02:00
parent 91a4447f2c
commit 85db54b00f
3 changed files with 6 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
<div class="action--editor"> <div class="action--editor">
<div class="row"> <div class="row">
<div class="col-xs-4 editor__tab-links"> <div class="col-lg-3 editor__tab-links">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li #macroText [class.active]="activeTab === TabName.Text" (click)="selectTab(TabName.Text)"> <li #macroText [class.active]="activeTab === TabName.Text" (click)="selectTab(TabName.Text)">
<a> <a>
@@ -28,7 +28,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-xs-8 editor__tabs" [ngSwitch]="activeTab"> <div class="col-xs-12 col-lg-9 editor__tabs" [ngSwitch]="activeTab">
<macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab> <macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab>
<macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab> <macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab>
<macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab> <macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab>

View File

@@ -1,5 +1,5 @@
<div class="col-xs-12 macro-key__container"> <div class="col-xs-12 macro-key__container">
<div class="col-xs-4 macro-key__types"> <div class="col-xs-3 macro-key__types">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li #keyMove [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)"> <li #keyMove [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
<a> <a>
@@ -21,7 +21,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-xs-8 macro-key__action-container"> <div class="col-xs-9 macro-key__action-container">
<div class="macro-key__action"> <div class="macro-key__action">
<h4 *ngIf="activeTab === TabName.Keypress">Press key</h4> <h4 *ngIf="activeTab === TabName.Keypress">Press key</h4>
<h4 *ngIf="activeTab === TabName.Hold">Hold key</h4> <h4 *ngIf="activeTab === TabName.Hold">Hold key</h4>

View File

@@ -1,5 +1,5 @@
<div class="col-xs-12 macro-mouse__container"> <div class="col-xs-12 macro-mouse__container">
<div class="col-xs-4 macro-mouse__types"> <div class="col-xs-3 macro-mouse__types">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li #mouseMove [class.active]="activeTab === TabName.Move" (click)="selectTab(TabName.Move)"> <li #mouseMove [class.active]="activeTab === TabName.Move" (click)="selectTab(TabName.Move)">
<a> <a>
@@ -33,7 +33,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-xs-8 macro-mouse__actions" [ngSwitch]="activeTab"> <div class="col-xs-9 macro-mouse__actions" [ngSwitch]="activeTab">
<div #tab *ngSwitchCase="TabName.Move"> <div #tab *ngSwitchCase="TabName.Move">
<h4>Move pointer</h4> <h4>Move pointer</h4>
<p>Use negative values to move down or left from current position.</p> <p>Use negative values to move down or left from current position.</p>