Skip to content
Permalink
Browse files

Merge pull request #119 from snollygolly/jf-airport_ui

Updated Airport UI
  • Loading branch information...
snollygolly committed Jul 3, 2019
2 parents f4a9a05 + b391624 commit f7528cc8542adfd2dae409982d5e5aacea63e2e6
@@ -10,10 +10,70 @@
max-width: none;
}

.transport-info .card {
cursor: pointer;
.transport-info {
font-family: 'Airport Open';
background-color: #232529;
text-align: center;
font-size: .8rem;

&:hover {
box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .1125) !important;
}
&, th, td {
border: 1px solid #fff;
}

th, td {
padding: .5rem;
}

th {
color: #ddd;
}

td {
color: #F5EF5A;
}

tr {
cursor: pointer;
}

.align-left {
text-align: left;
}

&.mobile {
color: #ddd;
background-color: inherit;

.transport-buy {
background-color: #232529;
padding-bottom: .5rem;

+ .transport-buy {
margin-top: 1rem;
}
}

p {
margin: 0;
padding: .25rem;

+ p {
font-size: .6rem;
padding-bottom: 1rem;
}
}

.table {
margin-bottom: 0;
}

th, td {
padding: 0;
}

td {
border: 0 none;
font-size: 1rem;
}
}
}
@@ -0,0 +1,15 @@
@font-face {
font-family: 'Airport';
src: url('../fonts/Erbos-Draco-1st-NBP.woff2') format('woff2'),
url('../fonts/Erbos-Draco-1st-NBP.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Airport Open';
src: url('../fonts/Erbos-Draco-1st-Open-NBP.woff2') format('woff2'),
url('../fonts/Erbos-Draco-1st-Open-NBP.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@@ -22,6 +22,18 @@ body {
.game-content {
padding-top: 80px; }

@font-face {
font-family: 'Airport';
src: url("../fonts/Erbos-Draco-1st-NBP.woff2") format("woff2"), url("../fonts/Erbos-Draco-1st-NBP.woff") format("woff");
font-weight: normal;
font-style: normal; }

@font-face {
font-family: 'Airport Open';
src: url("../fonts/Erbos-Draco-1st-Open-NBP.woff2") format("woff2"), url("../fonts/Erbos-Draco-1st-Open-NBP.woff") format("woff");
font-weight: normal;
font-style: normal; }

.brand-logo {
height: 35px; }

@@ -82,7 +94,41 @@ a:hover .card {
.transport-table {
max-width: none; }

.transport-info .card {
cursor: pointer; }
.transport-info .card:hover {
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1125) !important; }
.transport-info {
font-family: 'Airport Open';
background-color: #232529;
text-align: center;
font-size: .8rem; }
.transport-info, .transport-info th, .transport-info td {
border: 1px solid #fff; }
.transport-info th, .transport-info td {
padding: .5rem; }
.transport-info th {
color: #ddd; }
.transport-info td {
color: #F5EF5A; }
.transport-info tr {
cursor: pointer; }
.transport-info .align-left {
text-align: left; }
.transport-info.mobile {
color: #ddd;
background-color: inherit; }
.transport-info.mobile .transport-buy {
background-color: #232529;
padding-bottom: .5rem; }
.transport-info.mobile .transport-buy + .transport-buy {
margin-top: 1rem; }
.transport-info.mobile p {
margin: 0;
padding: .25rem; }
.transport-info.mobile p + p {
font-size: .6rem;
padding-bottom: 1rem; }
.transport-info.mobile .table {
margin-bottom: 0; }
.transport-info.mobile th, .transport-info.mobile td {
padding: 0; }
.transport-info.mobile td {
border: 0 none;
font-size: 1rem; }
@@ -1,4 +1,5 @@
@import "_src/global";
@import "_src/fonts";

@import "_src/header";
@import "_src/footer";
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -7,36 +7,56 @@
<p>Here's a listing of where you can fly right now and how much it will cost you. Click on a listing to buy a ticket and fly away from this crazy town.</p>
<div id="alert-container"></div>
<br>
<div class="row">
<div class="transport-info d-md-none mobile">
{{#each life.listings.airport}}
<div class="col-lg-4 col-md-6 transport-info">
<div class="card" class="transport-buy" id="transport-buy-btn" data-id="{{id}}" data-name="{{name}}" data-price="{{price}}" data-city="{{city}}" data-country="{{country}}" data-flight-number="{{flight_number}}" data-flight-time="{{flight_time}}" data-toggle="modal" data-target="#transport-modal">
<div class="card-body card-block">
<h5 class="card-title">{{name}}</h5>
<h6 class="card-subtitle text-muted font-italic">{{city}}, {{country}}</h6>
</div>
<div class="card-footer">
<table class="table table-sm table-borderless">
<thead>
<tr>
<th>FLIGHT</th>
<th>DEST</th>
<th>PRICE</th>
<th>TURNS</th>
</tr>
</thead>
<tbody>
<td><tt>{{flight_number}}</tt></td>
<td><tt>{{id}}</tt></td>
<td><tt>${{price}}</tt></td>
<td><tt><strong>{{flight_time}}</strong></tt></td>
</tbody>
</table>
</div>
</div>
<div class="transport-buy" id="transport-buy-btn" data-id="{{id}}" data-name="{{name}}" data-price="{{price}}" data-city="{{city}}" data-country="{{country}}" data-flight-number="{{flight_number}}" data-flight-time="{{flight_time}}" data-toggle="modal" data-target="#transport-modal">
<p>{{name}}</p>
<p>{{city}}, {{country}}</p>
<table class="table table-sm table-borderless">
<thead>
<tr>
<th>FLIGHT</th>
<th>DEST</th>
<th>PRICE</th>
<th>TURNS</th>
</tr>
</thead>
<tbody>
<td><tt>{{flight_number}}</tt></td>
<td><tt>{{id}}</tt></td>
<td><tt>${{price}}</tt></td>
<td><tt><strong>{{flight_time}}</strong></tt></td>
</tbody>
</table>
</div>
{{/each}}
</div>
<div class="transport-info d-none d-md-block">
<table>
<thead>
<tr>
<th>AIRPORT</th>
<th>CITY</th>
<th>FLIGHT</th>
<th>DEST</th>
<th>PRICE</th>
<th>TURNS</th>
</tr>
</thead>
<tbody>
{{#each life.listings.airport}}
<tr class="transport-buy" id="transport-buy-btn" data-id="{{id}}" data-name="{{name}}" data-price="{{price}}" data-city="{{city}}" data-country="{{country}}" data-flight-number="{{flight_number}}" data-flight-time="{{flight_time}}" data-toggle="modal" data-target="#transport-modal">
<td class="align-left">{{name}}</td>
<td class="align-left">{{city}}, {{country}}</td>
<td>{{flight_number}}</td>
<td>{{id}}</td>
<td>${{price}}</td>
<td>{{flight_time}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div><!-- /.container -->

0 comments on commit f7528cc

Please sign in to comment.
You can’t perform that action at this time.