mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-10 07:05:35 +00:00
SVG sprites, modals, general improvements
This commit is contained in:
Colin McLeod
@@ -1,59 +1,65 @@
|
||||
<header>
|
||||
<div class="l" style="margin-right: 2em;"><a ui-sref="shipyard" class="icon icon-xl shipyard"></a></div>
|
||||
<a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xlink:href="#coriolis"></use></svg></a>
|
||||
|
||||
<div class="l menu">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">Ships</div>
|
||||
<div class="menu-list sm" ng-if="openedMenu=='s'">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
|
||||
<svg class="icon warning"><use xlink:href="#rocket"></use></svg> Ships
|
||||
</div>
|
||||
<div class="menu-list" ng-if="openedMenu=='s'">
|
||||
<a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l menu">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">Builds</div>
|
||||
<div class="menu-list" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">
|
||||
<svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg> Builds
|
||||
</div>
|
||||
<div class="menu-list dbl" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
|
||||
<ul class="l" ng-repeat="(shipId,builds) in allBuilds">
|
||||
{{ships[shipId].properties.name}}
|
||||
<li ng-repeat="(name, build) in builds">
|
||||
<a ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:build, bn:name})" ng-bind="name"></a>
|
||||
<a ui-sref-active="active" class="build-name" ui-sref="outfit({shipId:shipId, code:build, bn:name})" ng-bind="name"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l menu">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='comp', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'comp')">Comparison</div>
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='comp', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'comp')">
|
||||
<svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#stats-bars"></use></svg> Comparison
|
||||
</div>
|
||||
<div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
|
||||
<ul>
|
||||
<li>No Comparisons created</li>
|
||||
<li>Custom Comarisons</li>
|
||||
<li>Coming soon!</li>
|
||||
<!-- TODO: comparison links /-->
|
||||
</ul>
|
||||
<hr />
|
||||
<a ui-sref="comparison" class="block">Create New</a>
|
||||
<a ui-sref="comparison" class="block">Compare All</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="r menu">
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='settings'}" ng-click="openMenu($event,'settings')">
|
||||
<span class="ico ico-cog"></span>
|
||||
<svg class="icon xl warning"><use xlink:href="#cogs"></use></svg>
|
||||
</div>
|
||||
<div class="menu-list sm" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
|
||||
<div class="menu-list" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
|
||||
<ul>
|
||||
Insurance
|
||||
<li><select ng-model="insurance.current" ng-options="ins.name for (i,ins) in insurance.opts" ng-change="updateInsurance()"></select></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<ul>
|
||||
Builds
|
||||
<li>Export All</li>
|
||||
<li>Import</li>
|
||||
Builds & Comparisons
|
||||
<li><a href="#" class="block" ui-sref="modal.export">Export</a></li>
|
||||
<li><a href="#" class="block" ui-sref="modal.import">Import</a></li>
|
||||
<li><a href="#" class="block" ui-sref="modal.delete">Delete All</a></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<a href="#" class="block" ng-click="about($event)">About</a>
|
||||
<a href="#" ui-sref="modal.about" class="block">About</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="r">
|
||||
<a class="icon icon-xl reddit" href="#" target="_blank" title="Reddit Thread"></a>
|
||||
</div>
|
||||
<a href="#" class="r" target="_blank" title="Reddit Thread"><svg class="icon xl"><use xlink:href="#reddit"></use></svg></a>
|
||||
|
||||
</header>
|
||||
3
app/views/_modal.html
Normal file
3
app/views/_modal.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="modal-bg">
|
||||
<div class="modal" ui-view="modal-content" ng-click="$event.stopPropagation()"></div>
|
||||
</div>
|
||||
@@ -7,6 +7,7 @@
|
||||
<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.optmass}} <u>T</u></div>
|
||||
<div class="l" ng-if="c.c.bins">{{c.c.bins}} <u>Bins</u></div>
|
||||
<div class="l" ng-if="c.c.rate">Rate: {{$r.fRound4(c.c.rate/1000)}} <u>T/s</u></div>
|
||||
<div class="l" ng-if="c.c.ammo">Ammo: {{c.c.ammo}}</div>
|
||||
<div class="l" ng-if="c.c.repair">Repair: {{c.c.repair}}</div>
|
||||
<div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<div class="modal-bg" ng-if="showAbout" ng-click="hideAbout()">
|
||||
<div class="modal" ng-click="$event.stopPropagation()">
|
||||
<h1>Coriolis - About</h1>
|
||||
<p>The Coriolis project was inspired by <a href="http://www.edshipyard.com/" target="_blank">E:D Shipyard</a> and, of course,
|
||||
<a href="http://www.elitedangerous.com" target="_blank">Elite Dangerous</a>. </p>
|
||||
|
||||
<h2>Github</h2>
|
||||
<a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">github.com/cmmcleod/coriolis</a>
|
||||
<p>
|
||||
Coriolis is an open source project. Checkout the list of upcoming features and to-do list on github.
|
||||
Any and all contributions and feedback are welcome. If you encounter any bugs please report them and provide as much detail as possible.
|
||||
</p>
|
||||
<button class="r dismiss" ng-click="hideAbout()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
13
app/views/modal-about.html
Normal file
13
app/views/modal-about.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<h1><svg class="icon xl"><use xlink:href="#coriolis"></use></svg> <span class="warning">Coriolis</span></h1>
|
||||
<p>The Coriolis project was inspired by <a href="http://www.edshipyard.com/" target="_blank">E:D Shipyard</a> and, of course,
|
||||
<a href="http://www.elitedangerous.com" target="_blank">Elite Dangerous</a>. The ultimate goal of Coriolis is to provide rich features to support in-game play and planning while engaging the E:D community to support its development.</p>
|
||||
|
||||
<p>Coriolis was created for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments.</p>
|
||||
|
||||
<h2>Github</h2>
|
||||
<a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">github.com/cmmcleod/coriolis</a>
|
||||
<p>
|
||||
Coriolis is an open source project. Checkout the list of upcoming features and to-do list on github.
|
||||
Any and all contributions and feedback are welcome. If you encounter any bugs please report them and provide as much detail as possible.
|
||||
</p>
|
||||
<button class="r dismiss" ng-click="dismiss()">Close</button>
|
||||
4
app/views/modal-delete.html
Normal file
4
app/views/modal-delete.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<h2>Delete All</h2>
|
||||
<p style="text-align:center;">Are you sure?</p>
|
||||
<button class="l" ng-click="deleteAll()">Yes</button>
|
||||
<button class="r" ng-click="dismiss()">No</button>
|
||||
5
app/views/modal-export.html
Normal file
5
app/views/modal-export.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<h2>Export</h2>
|
||||
<div>
|
||||
<textarea class="cb json">{{builds | json}}</textarea>
|
||||
</div>
|
||||
<button class="r dismiss" ng-click="dismiss()">Close</button>
|
||||
26
app/views/modal-import.html
Normal file
26
app/views/modal-import.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<h2>Import</h2>
|
||||
<div ng-show="!processed">
|
||||
<textarea class="cb json" ng-model="importData" ng-change="validateJson()" placeholder="Paste JSON Here"></textarea>
|
||||
<button class="l" ng-click="process()" ng-disabled="!jsonValid">Proceed</button>
|
||||
<div class="l warning" style="margin-left:3em;">{{errorMsg}}</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="processed">
|
||||
<table class="l" style="overflow:hidden;margin: 1em 0;">
|
||||
<thead><tr><th>Ship</th><th>Build Name</th><th>Action</th></tr></thead>
|
||||
<tbody ng-repeat="(shipId,shipBuilds) in builds">
|
||||
<tr class="cb" ng-repeat="(buildName, b) in shipBuilds">
|
||||
<td>{{ships[shipId].properties.name}}</td>
|
||||
<td><input type="text" ng-model="b.useName"/></td>
|
||||
<td ng-class="{warning: hasBuild(shipId, b.useName) == true, disabled: b.useName == ''}">
|
||||
<span ng-if="b.useName">{{ hasBuild(shipId, b.useName)? 'Overwrite' : 'Create' }}</span>
|
||||
<span ng-if="b.useName == ''">Skip</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="cl l" ng-click="import()"><svg class="icon"><use xlink:href="#download"></use></svg> Import</button>
|
||||
<button class="l" style="margin-left: 2em;" ng-click="processed = false">Edit JSON</button>
|
||||
</div>
|
||||
|
||||
<button class="r dismiss" ng-click="dismiss()">Cancel</button>
|
||||
@@ -3,44 +3,53 @@
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Ship</th>
|
||||
<th rowspan="2">Build</th>
|
||||
<th rowspan="2">Agility</th>
|
||||
<th rowspan="2">Speed</th>
|
||||
<th rowspan="2">Boost</th>
|
||||
<th rowspan="2">Shield<br>Strength</th>
|
||||
<th rowspan="2">Armour</th>
|
||||
<tr class="main">
|
||||
<th rowspan="2" ng-click="sort('ship.name')">Ship</th>
|
||||
<th rowspan="2" ng-click="sort('buildName')">Build</th>
|
||||
<!-- <th rowspan="2" ng-click="sort('ship.agility')">Agility</th> /-->
|
||||
<!-- <th rowspan="2" ng-click="sort('ship.speed')">Speed</th> /-->
|
||||
<!-- <th rowspan="2" ng-click="sort('ship.boost')">Boost</th> -->
|
||||
<th rowspan="2" ng-click="sort('ship.shieldStrength')">Shields</th>
|
||||
<th rowspan="2" ng-click="sort('ship.armour')">Armour</th>
|
||||
<th colspan="2">Mass</th>
|
||||
<th colspan="5">Power</th>
|
||||
<th rowspan="2">Fuel</th>
|
||||
<th rowspan="2">Cargo</th>
|
||||
<th colspan="3">Power</th>
|
||||
<!-- <th rowspan="2" ng-click="sort('ship.fuelCapacity')">Fuel</th> -->
|
||||
<th rowspan="2" ng-click="sort('ship.cargoCapacity')">Cargo</th>
|
||||
<th colspan="2">Jump Range</th>
|
||||
<th rowspan="2">Cost</th>
|
||||
<th rowspan="2" ng-click="sort('ship.totalCost')">Cost</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Unladen</th><th>Laden</th>
|
||||
<th>Retracted</th><th>%</th><th>Deployed</th><th>%</th><th>Available</th>
|
||||
<th>Unladen</th><th>Laden</th>
|
||||
<!-- Mass /-->
|
||||
<th class="lft" ng-click="sort('ship.unladenMass')">Unladen</th>
|
||||
<th class="rgt" ng-click="sort('ship.ladenMass')">Laden</th>
|
||||
<!-- Power /-->
|
||||
<th class="lft" ng-click="sort('ship.powerRetracted')">Retracted</th>
|
||||
<!-- <th ng-click="sort('pctRetracted')">%</th> -->
|
||||
<th ng-click="sort('ship.powerDeployed')">Deployed</th>
|
||||
<!-- <th ng-click="sort('pctDeployed')">%</th> -->
|
||||
<th class="rgt" ng-click="sort('ship.powerAvailable')">Available</th>
|
||||
<!-- Jump Range /-->
|
||||
<th class="lft" ng-click="sort('ship.unladenJumpRange')">Unladen</th>
|
||||
<th class="rgt" ng-click="sort('ship.ladenJumpRange')">Laden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat='b in comparison'>
|
||||
<td><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td>
|
||||
<td><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
|
||||
<td ng-bind="b.ship.agility"></td>
|
||||
<td>{{b.ship.speed}} <u>M/s</u></td>
|
||||
<td>{{b.ship.boost}} <u>M/s</u></td>
|
||||
<tr class="tr" ng-repeat="b in comparison | orderBy:predicate:desc">
|
||||
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td>
|
||||
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
|
||||
<!-- <td class="tc" ng-bind="b.ship.agility"></td> -->
|
||||
<!-- <td>{{b.ship.speed}} <u>M/s</u></td> -->
|
||||
<!-- <td>{{b.ship.boost}} <u>M/s</u></td> -->
|
||||
<td>{{fRound(b.ship.shieldStrength)}} <u>Mj</u></td>
|
||||
<td ng-bind="b.ship.armourTotal"></td>
|
||||
<td>{{fRound(b.ship.unladenMass)}} <u>T</u></td>
|
||||
<td>{{fRound(b.ship.ladenMass)}} <u>T</u></td>
|
||||
<td>{{fPwr(b.ship.powerRetracted)}} <u>MW</u></td>
|
||||
<td>{{fPct(b.ship.powerRetracted/b.ship.powerAvailable)}}</td>
|
||||
<!-- <td>{{fPct(b.pctRetracted)}}</td> -->
|
||||
<td>{{fPwr(b.ship.powerDeployed)}} <u>MW</u></td>
|
||||
<td>{{fPct(b.ship.powerDeployed/b.ship.powerAvailable)}}</td>
|
||||
<!-- <td>{{fPct(b.pctDeployed)}}</td> -->
|
||||
<td>{{fPwr(b.ship.powerAvailable)}} <u>MW</u></td>
|
||||
<td>{{fRound(b.ship.fuelCapacity)}} <u>T</u></td>
|
||||
<!-- <td>{{fRound(b.ship.fuelCapacity)}} <u>T</u></td> -->
|
||||
<td>{{fRound(b.ship.cargoCapacity)}} <u>T</u></td>
|
||||
<td>{{fRound(b.ship.unladenJumpRange)}} <u>LY</u></td>
|
||||
<td>{{fRound(b.ship.ladenJumpRange)}} <u>LY</u></td>
|
||||
|
||||
@@ -124,10 +124,18 @@
|
||||
<h1 ng-bind="ship.name"></h1>
|
||||
<div id="build">
|
||||
<input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" />
|
||||
<button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode">Save</button>
|
||||
<button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">Reload</button>
|
||||
<button ng-click="deleteBuild()" ng-disabled="!savedCode">Delete</button>
|
||||
<button ui-sref="outfit({shipId: ship.id,code:null, bn: buildName})" ng-disabled="!code">Reset</button>
|
||||
<button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode">
|
||||
<svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save
|
||||
</button>
|
||||
<button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
|
||||
<svg class="icon lg"><use xlink:href="#spinner11"></use></svg> Load
|
||||
</button>
|
||||
<button class="danger" ng-click="deleteBuild()" ng-disabled="!savedCode">
|
||||
<svg class="icon lg"><use xlink:href="#bin"></use></svg>
|
||||
</button>
|
||||
<button ui-sref="outfit({shipId: ship.id,code:null, bn: buildName})" ng-disabled="!code">
|
||||
<svg class="icon lg"><use xlink:href="#switch"></use></svg> Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -188,7 +196,7 @@
|
||||
<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 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="togglePwrtogglePwr(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>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user