ygopro env

app/ygopro.component.css

@@ -58,6 +58,15 @@
 /*margin-bottom: 1em;*/
 /*}*/
 
+.small-gutters {
+    margin-right: -5px;
+    margin-left: 0px;
+}
+.small-gutters > .col, .small-gutters > [class*="col-"] {
+    padding-right: 5px;
+    padding-left: 0px;
+}
+
 dl {
     margin-bottom: 0;
 }

app/ygopro.component.html

-<div class="input-group input-group-sm">
-    <label i18n class="input-group-addon" id="server-label">选择服务器</label>
-    <select class="form-control form-control-sm" id="selectServer" name="server" [disabled]="!appsService.allReady(app)" [(ngModel)]="currentServer">
-        <option *ngFor="let server of selectableServers" [ngValue]="server">{{server.name}}</option>
-    </select>
-</div>
-
 <div *ngIf="!matching" id="action">
     <button [disabled]="!appsService.allReady(app) || currentServer.id !== 'tiramisu'" (click)="request_match('athletic')" type="button" class="btn btn-primary btn-sm">
         <i class="fa fa-play" aria-hidden="true"></i> <span i18n>竞技匹配</span></button>
@@ -24,13 +17,21 @@
     <span class="input-group-btn"><button i18n class="btn btn-secondary" type="button" [disabled]="!match_cancelable" (click)="cancel_match()">取消</button></span>
 </div>
 
-<div class="input-group input-group-sm">
-    <label i18n class="input-group-addon" id="basic-addon1">卡组</label>
-    <select class="form-control form-control-sm" id="exampleSelect1" name="deck" [(ngModel)]="current_deck">
-        <option *ngFor="let deck of decks" [ngValue]="deck">{{deck}}</option>
-    </select> <span class="input-group-btn">
-        <button id="edit_deck_button" i18n [disabled]="!appsService.allReady(app)" class="btn btn-secondary btn-sm" (click)="edit_deck(current_deck)">编辑</button>
-    </span>
+<div class="row small-gutters">
+    <div class="col-sm-5 input-group input-group-sm">
+        <label i18n class="input-group-addon" id="server-label">环境</label>
+        <select class="form-control form-control-sm" id="selectServer" name="server" [disabled]="!appsService.allReady(app)" [(ngModel)]="currentServer">
+            <option *ngFor="let server of selectableServers" [ngValue]="server">{{server.name}}</option>
+        </select>
+    </div>
+    <div class="col-sm-7 input-group input-group-sm">
+        <label i18n class="input-group-addon" id="basic-addon1">卡组</label>
+        <select class="form-control form-control-sm" id="exampleSelect1" name="deck" [(ngModel)]="current_deck">
+            <option *ngFor="let deck of decks" [ngValue]="deck">{{deck}}</option>
+        </select> <span class="input-group-btn">
+            <button id="edit_deck_button" i18n [disabled]="!appsService.allReady(app)" class="btn btn-secondary btn-sm" (click)="edit_deck(current_deck)">编辑</button>
+        </span>
+    </div>
 </div>
 
 <div class="modal fade" id="game-create-windbot" *ngIf="currentServer.windbot" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

systemjs.config.js

@@ -79,6 +79,7 @@ System.config({
         'tether': 'npm:tether/dist/js/tether.min.js',
         'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
         'reconnecting-websocket': 'npm:reconnecting-websocket/dist/index.js',
+        'popper.js': 'npm:popper.js/dist/umd/popper.min.js',
         // 'typeahead.js': '@node/typeahead.js'
 
         'raven-js': 'npm:raven-js'