Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 07:05:35 +00:00
Code Issues Projects Releases Wiki Activity

Drastically improved build page layout

Browse Source
This commit is contained in:
Colin McLeod
2015-05-25 20:40:53 -07:00
parent f12383bac3
commit e2225d7bf1
12 changed files with 133 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/index.html
View File

@@ -18,7 +18,6 @@
<meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png"> <meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png">
<meta name="msapplication-config" content="/images/logo/browserconfig.xml"> <meta name="msapplication-config" content="/images/logo/browserconfig.xml">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head> </head>
<body ng-click="bgClicked($event)"> <body ng-click="bgClicked($event)">
<div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div> <div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>

6
app/less/app.less
View File

@@ -29,12 +29,6 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: @fStandard; font-family: @fStandard;
overflow-x: hidden;
background-image: none;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
} }
#main { #main {

36
app/less/list.less
View File

@@ -2,20 +2,30 @@
overflow: hidden; overflow: hidden;
padding: 5px; padding: 5px;
cursor: default; cursor: default;
position: relative;
font-size: 0.8em; font-size: 0.8em;
min-width: 21em;
text-align: left;
.header { .header {
position: absolute;
width: 100%; width: 100%;
height: 1.6em; margin-bottom: 0.4em;
font-family: @fTitle; font-family: @fTitle;
color: @primary; color: @bgBlack;
background-color: @primary-disabled;
text-transform: uppercase; text-transform: uppercase;
text-align: center;
}
table {
width: 100%;
text-align: right;
td {
padding-right: 0.5em;
}
} }
.items { .items {
margin-top: 25px;
margin-bottom: 10px; margin-bottom: 10px;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
@@ -52,20 +62,4 @@
} }
} }
.summary {
font-family: @fStandard;
overflow: hidden;
text-align: right;
.item {
float:right;
width: 25%
}
.lbl {
font-family: @fTitle;
color: @primary;
text-transform: uppercase;
}
}
} }

4
app/less/modal.less
View File

@@ -42,8 +42,8 @@ textarea {
&.json { &.json {
display:block; display:block;
width:40em; width:50em;
height: 10em; height: 25em;
resize: vertical; resize: vertical;
margin:2em 0; margin:2em 0;
} }

35
app/less/outfit.less
View File

@@ -1,7 +1,7 @@
#outfit { #outfit {
//width: 62em; width: 64em;
//margin: 0 auto; margin: 0 auto;
} }
#overview { #overview {
@@ -9,11 +9,25 @@
margin: 0; margin: 0;
float: left; float: left;
} }
overflow: hidden;
}
#summary {
.user-select-none();
width: 100%;
margin-top: 1em;
font-size: 0.8em;
border-collapse: collapse;
tbody td {
padding: 0 0.5em;
}
} }
#build { #build {
float: right; float: right;
line-height: 2em; line-height: 2em;
font-size: 0.8em;
input { input {
background: none; background: none;
@@ -38,6 +52,7 @@
} }
#standard { #standard {
margin-right: 0.3em;
.slot { .slot {
clear: left; clear: left;
} }
@@ -48,19 +63,3 @@
clear: left; clear: left;
} }
} }
#summary {
.user-select-none();
margin: 0;
border-collapse: collapse;
tbody td {
padding: 0 0.5em;
}
}
.toggle {
cursor: pointer;
}

9
app/less/slot.less
View File

@@ -1,7 +1,6 @@
.slot-group { .slot-group {
float: left; margin: 1em 0;
margin: 0.25em;
.user-select-none(); .user-select-none();
cursor: default; cursor: default;
@@ -13,13 +12,15 @@
margin: 0.1em 0; margin: 0.1em 0;
font-size: 0.8em; font-size: 0.8em;
padding-left: 0.5em; padding-left: 0.5em;
font-weight: normal;
} }
} }
.slot { .slot {
float: left; float: left;
text-align: left; text-align: left;
width: 20.5em; width: 21em;
min-height: 2.75em;
font-size: 0.75em; font-size: 0.75em;
margin-top: 0.5em; margin-top: 0.5em;
position: relative; position: relative;
@@ -64,7 +65,7 @@
color: lighten(@primary-bg, 12%); color: lighten(@primary-bg, 12%);
text-align: center; text-align: center;
letter-spacing: 0.1em; letter-spacing: 0.1em;
line-height: 1.8em; line-height: 1.7em;
} }
&:hover{ &:hover{

2
app/less/table.less
View File

@@ -1,9 +1,7 @@
table { table {
margin: 0 auto;
background-color: @primary-bg; background-color: @primary-bg;
border-spacing: 0; border-spacing: 0;
font-size: 0.8em;
cursor: default; cursor: default;
a, a:visited { a, a:visited {

16
app/less/utilities.less
View File

@@ -29,19 +29,3 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.vertical {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

5
app/views/_slot-hardpoint.html
View File

@@ -1,7 +1,8 @@
<div class="sz">{{::['U','S','M','L','H'][hp.maxClass]}}</div> <div class="sz">{{::['U','S','M','L','H'][hp.maxClass]}}</div>
<div class="empty" ng-if="!hp.c">EMPTY</div> <div class="empty" ng-if="!hp.c">EMPTY</div>
<div ng-if="hp.c"> <div ng-if="hp.c">
<div class="l">{{hp.c.name || lbl}}</div><div class="r">{{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span></div> <div class="l">{{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span> {{hp.c.name || lbl}}</div>
<div class="r">{{hp.c.mass}} <u>T</u></div>
<div class="cb"> <div class="cb">
<div class="l" ng-if="hp.c.damage">DMG: {{hp.c.damage}}</div> <div class="l" ng-if="hp.c.damage">DMG: {{hp.c.damage}}</div>
<div class="l" ng-if="hp.c.dps">DPS: {{hp.c.dps}}</div> <div class="l" ng-if="hp.c.dps">DPS: {{hp.c.dps}}</div>
@@ -12,6 +13,6 @@
<div class="l" ng-if="hp.c.shieldmul">+{{$r.fRPct(hp.c.shieldmul)}}</div> <div class="l" ng-if="hp.c.shieldmul">+{{$r.fRPct(hp.c.shieldmul)}}</div>
<div class="l" ng-if="hp.c.range">{{hp.c.range}} <u>KM</u></div> <div class="l" ng-if="hp.c.range">{{hp.c.range}} <u>KM</u></div>
<div class="l" ng-if="hp.c.ammo">Ammo: {{$r.fCrd(hp.c.clip)}}/{{$r.fCrd(hp.c.ammo)}}</div> <div class="l" ng-if="hp.c.ammo">Ammo: {{$r.fCrd(hp.c.clip)}}/{{$r.fCrd(hp.c.ammo)}}</div>
<div class="r">{{hp.c.mass}} <u>T</u></div>
</div> </div>
</div> </div>

5
app/views/_slot-internal.html
View File

@@ -1,8 +1,8 @@
<div class="sz" ng-bind="c.maxClass"></div> <div class="sz" ng-bind="c.maxClass"></div>
<div class="empty" ng-if="!c.c">EMPTY</div> <div class="empty" ng-if="!c.c">EMPTY</div>
<div ng-if="c.c"> <div ng-if="c.c">
<div class="l">{{c.c.name || lbl}}</div> <div class="l">{{c.c.class}}{{c.c.rating}} {{c.c.name || lbl}}</div>
<div class="r">{{c.c.class}}{{c.c.rating}}</div> <div class="r">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
<div class="cb"></div> <div class="cb"></div>
<div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} <u>T</u></div> <div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} <u>T</u></div>
<div class="l" ng-if="c.c.maxmass">Max: {{c.c.maxmass}} <u>T</u></div> <div class="l" ng-if="c.c.maxmass">Max: {{c.c.maxmass}} <u>T</u></div>
@@ -15,5 +15,4 @@
<div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div> <div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div>
<div class="l" ng-if="c.c.rangeRating">Range: {{c.c.rangeRating}}</div> <div class="l" ng-if="c.c.rangeRating">Range: {{c.c.rangeRating}}</div>
<div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} <u>Armour</u></div> <div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} <u>Armour</u></div>
<div class="r cr">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
</div> </div>

116
app/views/page-outfit.html
View File

@@ -1,6 +1,6 @@
<div id="outfit"> <div id="outfit">
<div id="overview" class="list"> <div id="overview">
<h1 ng-bind="ship.name"></h1> <h1 ng-bind="ship.name"></h1>
<div id="build"> <div id="build">
<input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" /> <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" />
@@ -26,10 +26,13 @@
<thead> <thead>
<tr class="main"> <tr class="main">
<th colspan="3">Manuverability</th><th colspan="2">Mass</th><th rowspan="2">Cargo</th><th rowspan="2">Fuel</th> <th colspan="3">Manuverability</th><th colspan="2">Mass</th><th rowspan="2">Cargo</th><th rowspan="2">Fuel</th>
<th rowspan="2">Armour</th><th rowspan="2">Shields</th><th colspan="2">Jump Range</th><th rowspan="2">Insurance</th><th rowspan="2">Cost</th> <th rowspan="2">Armour</th><th rowspan="2">Shields</th><th colspan="2">Power</th><th colspan="2">Jump Range</th><th rowspan="2">Cost</th>
</tr> </tr>
<tr> <tr>
<th>Agility</th><th>Thrusters</th><th>Boost</th><th class="lft">Unladen</th><th>Laden</th><th>Unladen</th><th>Laden</th> <th>Agility</th><th>Speed</th><th>Boost</th>
<th class="lft">Unladen</th><th>Laden</th>
<th class="lft">Retracted</th><th>Deployed</th>
<th class="lft">Unladen</th><th>Laden</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -41,27 +44,18 @@
<td>{{fRound(ship.ladenMass)}} <u>T</u></td> <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
<td>{{fRound(ship.cargoCapacity)}} <u>T</u></td> <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
<td>{{fRound(ship.fuelCapacity)}} <u>T</u></td> <td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
<td>{{ship.armourTotal}} ({{ship.armour}} + {{ship.armourAdded}})</td> <td>{{ship.armourTotal}}<span ng-if="ship.armourAdded"> ({{ship.armour}} + {{ship.armourAdded}})</span></td>
<td>{{fRound(ship.shieldStrength)}} <u>Mj</u> ({{fRPct(ship.shieldMultiplier)}})</td> <td>{{fRound(ship.shieldStrength)}} <u>Mj</u><span ng-if="ship.shieldMultiplier > 1"> ({{fRPct(ship.shieldMultiplier)}})</span></td>
<td>{{fPwr(ship.powerRetracted)}} <u>MW ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</u></td>
<td>{{fPwr(ship.powerDeployed)}} <u>MW ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</u></td>
<td>{{fRound(ship.unladenJumpRange)}} <u>LY</u></td> <td>{{fRound(ship.unladenJumpRange)}} <u>LY</u></td>
<td>{{fRound(ship.ladenJumpRange)}} <u>LY</u></td> <td>{{fRound(ship.ladenJumpRange)}} <u>LY</u></td>
<td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
<td>{{fCrd(ship.totalCost)}} <u>CR</u></td> <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div id="hardpoints" class="slot-group"> <div id="standard" class="slot-group l">
<h1 class="vertical">HardPoints</h1>
<div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
<div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
<div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
<div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
</div>
</div>
</div>
<div id="standard" class="slot-group">
<h1>Standard</h1> <h1>Standard</h1>
<div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}"> <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
<div class="details"> <div class="details">
@@ -85,8 +79,8 @@
<div class="r">{{pp.id}}</div> <div class="r">{{pp.id}}</div>
<div class="cb"></div> <div class="cb"></div>
<div class="l">Eff: {{pp.c.eff}}</div> <div class="l">Eff: {{pp.c.eff}}</div>
<div class="l">Power: {{pp.c.pGen}} <u>MW</span></div> <div class="l">Power: {{pp.c.pGen}} <u>MW</u></div>
<div class="r">{{pp.c.mass}} <u><u>T</u></span></div> <div class="r">{{pp.c.mass}} <u>T</u></div>
</div> </div>
<div component-select class="select" s="pp" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div> <div component-select class="select" s="pp" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
</div> </div>
@@ -160,7 +154,17 @@
</div> </div>
</div> </div>
<div id="internal" class="slot-group"> <div id="hardpoints" class="slot-group l">
<h1>HardPoints</h1>
<div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
<div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
<div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
<div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
</div>
</div>
</div>
<div id="internal" class="slot-group r">
<h1>Internal Compartments</h1> <h1>Internal Compartments</h1>
<div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}"> <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
<div slot-internal class="details" slot="i" lbl="igMap[i.c.grp]"></div> <div slot-internal class="details" slot="i" lbl="igMap[i.c.grp]"></div>
@@ -170,55 +174,51 @@
</div> </div>
</div> </div>
<div class="cb"> <div class="cb"></div>
<div class="list" ship="ship">
<div class="header toggle" ng-click="powerExp = !powerExp">Power Use</div> <div class="list l">
<div class="items" ng-if="!powerExp"> <div class="header">Power Use</div>
<div class="items">
<div class="primary-disabled">Generated</div>
<div ng-if="pp.c.pGen" class="item common enabled untoggleable"> <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
<div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div> <div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div>
</div> </div>
<div class="primary-disabled">Standard</div>
<div ng-repeat="c in ship.common" ng-if="c.c.power" class="item common" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)"> <div ng-repeat="c in ship.common" ng-if="c.c.power" class="item common" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
<div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fPwr(c.c.power)}}</div> <div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
</div> </div>
<div class="item common consumer" ng-class="{enabled:ship.cargoScoop.enabled}" ng-click="togglePwr(ship.cargoScoop)"> <div class="item common consumer" ng-class="{enabled:ship.cargoScoop.enabled}" ng-click="togglePwr(ship.cargoScoop)">
<div class="lbl">1H Cargo Scoop</div><div class="val">{{fPwr(ship.cargoScoop.c.power)}}</div> <div class="lbl">1H Cargo Scoop</div><div class="val">{{fPwr(ship.cargoScoop.c.power)}}</div>
</div> </div>
<div class="primary-disabled">Hardpoints</div>
<div ng-repeat="c in ship.hardpoints" ng-if="c.c.power" class="item hardpoints" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)"> <div ng-repeat="c in ship.hardpoints" ng-if="c.c.power" class="item hardpoints" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
<div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div> <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
</div> </div>
<div class="primary-disabled">Internal</div>
<div ng-repeat="c in ship.internal" ng-if="c.c.power" class="item internal" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)"> <div ng-repeat="c in ship.internal" ng-if="c.c.power" class="item internal" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
<div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div> <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
</div> </div>
</div> </div>
<div class="summary toggle" ng-click="powerExp = !powerExp">
<div class="item"> <table>
<div class="lbl">Available</div> <thead><tr><td>Retracted</td><td>Deployed</td></tr></thead>
<div class="val">{{fPwr(ship.powerAvailable)}} <u>MW</u></div> <tbody><tr>
</div> <td>{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</td>
<div class="item"> <td>{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</td>
<div class="lbl">Deployed</div> </tr></tbody>
<div class="val">{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</div> </table>
</div>
<div class="item">
<div class="lbl">Retracted</div>
<div class="val">{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</div>
</div> </div>
<div class="list l">
<div class="header">Jump Range</div>
<div class="items cen">
<div class="chart" area-chart config="jrChart" series="jrSeries" width="455" height="250"></div>
</div> </div>
</div> </div>
<div class="list"> <div class="list r">
<div class="header toggle">Jump Range</div> <div class="header">Costs</div>
<div class="items cen"> <div class="items">
<div class="chart" area-chart config="jrChart" series="jrSeries" width="500" height="250"></div>
</div>
</div>
<div class="list">
<div class="header toggle" ng-click="costsExpanded = !costsExpanded">Costs</div>
<div class="items" ng-if="!costsExpanded">
<div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)"> <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)">
<div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div> <div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div>
</div> </div>
@@ -235,17 +235,13 @@
<div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div> <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
</div> </div>
</div> </div>
<div class="summary toggle" ng-click="costsExpanded = !costsExpanded"> <table>
<div class="item"> <thead><tr><td>Insurance</td><td>Total</td></tr></thead>
<div class="lbl">Total</div> <tbody><tr>
<div class="val">{{fCrd(ship.totalCost)}} <u>CR</u></div> <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
</div> <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
<div class="item"> </tr></tbody>
<div class="lbl">Insurance</div> </table>
<div class="val">{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></div>
</div>
</div>
</div>
</div> </div>
</div> </div>

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "coriolis_shipyard", "name": "coriolis_shipyard",
"version": "0.6.2", "version": "0.7.0",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/cmmcleod/coriolis" "url": "https://github.com/cmmcleod/coriolis"