mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-09 14:45:35 +00:00
Responsive UI Improvements across the board
This commit is contained in:
Colin McLeod
@@ -31,6 +31,7 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: @fStandard;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
div, a, li {
|
||||
@@ -39,7 +40,7 @@ div, a, li {
|
||||
|
||||
#main {
|
||||
margin: 0;
|
||||
padding: 0.5em 0.25em;
|
||||
padding: 0.5em 0;
|
||||
min-height: 90%;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
@@ -69,6 +70,11 @@ div, a, li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scroll-x {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: @fTitle;
|
||||
color: @primary;
|
||||
@@ -79,11 +85,13 @@ h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: @fStandard;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-family: @fStandard;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
margin: 0.2em 0;
|
||||
color: @primary;
|
||||
|
||||
@@ -27,4 +27,12 @@ button {
|
||||
fill: @disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-lbl {
|
||||
margin-left: 0.5em;
|
||||
|
||||
.smallTablet({
|
||||
display: none;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,6 +4,18 @@
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
|
||||
width: 33%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tablet({
|
||||
width: 50%;
|
||||
});
|
||||
|
||||
.smallTablet({
|
||||
width: 100%;
|
||||
});
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
@@ -41,7 +53,7 @@ svg {
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.9em;
|
||||
font-size: 0.75em;
|
||||
fill: @fg;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
// Foreground colors
|
||||
@fg: #CCC;
|
||||
@muted: #999;
|
||||
@primary: #FF8C0D; // Light Orange
|
||||
@secondary: #1FB0FF; // Light blue
|
||||
@warning: #FF3B00; // Dark Orange
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
|
||||
td {
|
||||
border: 1px solid @primary-disabled;
|
||||
@@ -13,6 +15,10 @@
|
||||
line-height: 2em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tablet({
|
||||
font-size: 0.8em;
|
||||
});
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -39,10 +45,6 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.tablet({
|
||||
font-size: 0.8em;
|
||||
});
|
||||
|
||||
.as-sortable-placeholder {
|
||||
background-color: @primary-bg;
|
||||
}
|
||||
@@ -80,9 +82,7 @@
|
||||
#build-select {
|
||||
clear: both;
|
||||
margin: 1em 0 0;
|
||||
height: 10em;
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
@@ -91,21 +91,25 @@
|
||||
}
|
||||
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 20em;
|
||||
width: 40%;
|
||||
vertical-align: top;
|
||||
|
||||
.smallTablet({
|
||||
width: 100%;
|
||||
});
|
||||
|
||||
thead {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height: 8em;
|
||||
max-height: 8em;
|
||||
}
|
||||
}
|
||||
@@ -117,7 +121,10 @@
|
||||
|
||||
#comp-tbl {
|
||||
margin: 1em auto;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8em;
|
||||
|
||||
.tablet({
|
||||
font-size: 0.85em;
|
||||
font-size: 0.7em;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
header {
|
||||
background-color: @bg;
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
padding: 0 0 0 1em;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
font-family: @fTitle;
|
||||
@@ -37,6 +37,10 @@ header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.smallTablet({
|
||||
position: initial;
|
||||
});
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
@@ -73,21 +77,28 @@ header {
|
||||
min-width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: @bgBlack;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.9em;
|
||||
overflow-y: auto;
|
||||
z-index: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: 400px;
|
||||
max-height: 500px;
|
||||
|
||||
.smallTablet({
|
||||
max-height: 400px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid @bg;
|
||||
});
|
||||
|
||||
|
||||
.tablet({
|
||||
font-size: 1.1em;
|
||||
max-height: 800px;
|
||||
|
||||
a {
|
||||
padding: 0.3em 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
&.dbl {
|
||||
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||
-moz-column-count: 2; /* Firefox */
|
||||
@@ -99,12 +110,14 @@ header {
|
||||
}
|
||||
|
||||
ul {
|
||||
white-space: nowrap;
|
||||
margin: 0 0 0.5em;
|
||||
padding: 0;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
li {
|
||||
white-space: normal;
|
||||
list-style: none;
|
||||
margin-left: 1em;
|
||||
line-height: 1.1em;
|
||||
@@ -115,10 +128,6 @@ header {
|
||||
color: @warning;
|
||||
text-decoration: none;
|
||||
|
||||
&.name {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: @warning;
|
||||
}
|
||||
|
||||
@@ -1,65 +1,37 @@
|
||||
.list {
|
||||
margin: 1em 0;
|
||||
cursor: default;
|
||||
font-size: 0.8em;
|
||||
min-width: 25%;
|
||||
text-align: left;
|
||||
.user-select-none();
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
margin-bottom: 0.4em;
|
||||
font-family: @fStandard;
|
||||
color: @bgBlack;
|
||||
background-color: @primary-disabled;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
.items {
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
td {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
margin-bottom: 10px;
|
||||
.item {
|
||||
clear: both;
|
||||
margin: 1px 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
clear: both;
|
||||
margin: 1px 0 0;
|
||||
overflow: hidden;
|
||||
.val {
|
||||
float:right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.val {
|
||||
float:right;
|
||||
text-align: right;
|
||||
}
|
||||
.lbl {
|
||||
float: left;
|
||||
}
|
||||
color: @disabled;
|
||||
cursor: pointer;
|
||||
|
||||
.lbl {
|
||||
float: left;
|
||||
}
|
||||
color: @disabled;
|
||||
cursor: pointer;
|
||||
&.enabled {
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
&.consumer {
|
||||
.val:before {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
|
||||
&.untoggleable {
|
||||
cursor: default;
|
||||
&.consumer {
|
||||
.val:before {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.untoggleable {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,10 +16,20 @@
|
||||
left:50%; top:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
-webkit-transform:translate(-50%,-50%);
|
||||
max-width: 75%;
|
||||
padding: 3em;
|
||||
width: 75%;
|
||||
max-width: 1000px;
|
||||
max-height: 100%;
|
||||
padding: 2em;
|
||||
background-color: @bgBlack;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @primary;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.smallTablet({
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
});
|
||||
|
||||
h1 {
|
||||
margin: 0.2em 0;
|
||||
@@ -29,7 +39,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
min-width: 30em;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
@@ -42,8 +51,8 @@ textarea {
|
||||
|
||||
&.json {
|
||||
display:block;
|
||||
width:50em;
|
||||
height: 25em;
|
||||
width:100%;
|
||||
min-height: 10em;
|
||||
resize: vertical;
|
||||
margin:2em 0;
|
||||
}
|
||||
|
||||
@@ -1,25 +1,12 @@
|
||||
|
||||
#outfit {
|
||||
font-size: 1.1em;
|
||||
max-width: 1200px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
.user-select-none();
|
||||
|
||||
.tablet({
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
max-width: 1600px;
|
||||
});
|
||||
|
||||
&>.list {
|
||||
.tablet({
|
||||
width: 49%;
|
||||
});
|
||||
|
||||
.largePhone({
|
||||
width: 100%;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
#overview {
|
||||
@@ -36,19 +23,18 @@
|
||||
|
||||
#summary {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 1em 0 1em 0;
|
||||
padding-bottom: 1em;
|
||||
|
||||
padding: 0.5em 0.2em;
|
||||
|
||||
#summaryTable {
|
||||
.user-select-none();
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8em;
|
||||
|
||||
tbody td {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,6 +47,7 @@
|
||||
background: none;
|
||||
line-height: 1.5em;
|
||||
font-size: 0.8em;
|
||||
width: 20em;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
@@ -75,38 +62,51 @@
|
||||
padding: 0.25em;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#hardpoints, #utility, #standard {
|
||||
padding-right: 0.3em;
|
||||
.slot {
|
||||
.largePhone({
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#internal {
|
||||
.slot {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.outfit-button-label {
|
||||
margin-left: 0.5em;
|
||||
|
||||
.smallTablet({
|
||||
display: none;
|
||||
});
|
||||
}
|
||||
|
||||
#jumpRange {
|
||||
width: 50%;
|
||||
padding: 0 0.5em;
|
||||
.group {
|
||||
width: 25%;
|
||||
padding: 0.5em 0.2em;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
.user-select-none();
|
||||
cursor: default;
|
||||
|
||||
h1 {
|
||||
font-family: @fStandard;
|
||||
color: @bgBlack;
|
||||
background-color: @primary-disabled;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
line-height: 1.3em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tablet({
|
||||
float: right;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
font-size: 0.9em;
|
||||
});
|
||||
}
|
||||
|
||||
.smallTablet({
|
||||
width: 50%;
|
||||
});
|
||||
|
||||
.largePhone({
|
||||
width: 100%;
|
||||
});
|
||||
|
||||
&.dbl {
|
||||
width: 50%;
|
||||
|
||||
.smallTablet({
|
||||
width: 100% !important;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -22,12 +22,11 @@
|
||||
}
|
||||
|
||||
.smallTablet(@rules) {
|
||||
@media only screen and /*(min-width: 641px) and */(max-width: 820px) {
|
||||
@media only screen and /*(min-width: 641px) and */(max-width: 1000px) {
|
||||
@rules();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tablet(@rules) {
|
||||
@media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
|
||||
@rules();
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
text-align: center;
|
||||
|
||||
.select-group {
|
||||
line-height: 1.5em;
|
||||
text-align: left;
|
||||
margin: 0.5em 0;
|
||||
padding-left: 5px;
|
||||
@@ -45,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@optionSpacing: 1.8em;
|
||||
@optionSpacing: 2em;
|
||||
|
||||
.lc {
|
||||
line-height:@optionSpacing;
|
||||
@@ -90,8 +91,8 @@
|
||||
|
||||
&.hardpoint {
|
||||
.c {
|
||||
width: 4em;
|
||||
padding: 0.1em 0.5em;
|
||||
width: 4.4em;
|
||||
padding: 0.1em 0.2em;
|
||||
}
|
||||
ul {
|
||||
width: 17em;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.7em;
|
||||
fill: @primary-disabled;
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
text {
|
||||
dominant-baseline: central;
|
||||
fill: @primary;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.filled {
|
||||
|
||||
@@ -1,41 +1,10 @@
|
||||
|
||||
.slot-group {
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
.user-select-none();
|
||||
cursor: default;
|
||||
|
||||
h1 {
|
||||
font-family: @fStandard;
|
||||
color: @bgBlack;
|
||||
background-color: @primary-disabled;
|
||||
text-transform: uppercase;
|
||||
margin: 0.1em 0;
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tablet({
|
||||
width: 50%;
|
||||
h1 {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
});
|
||||
|
||||
.largePhone({
|
||||
width: 100%;
|
||||
});
|
||||
}
|
||||
|
||||
.slot {
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 0.75em;
|
||||
margin-top: 0.5em;
|
||||
font-size: 0.85em;
|
||||
margin-top: 0.25em;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-right: 0.4em;
|
||||
@@ -44,10 +13,12 @@
|
||||
background-color: @primary-bg;
|
||||
border: 1px solid @primary-disabled;
|
||||
color: @fg;
|
||||
fill: @disabled;
|
||||
fill: @fg;
|
||||
|
||||
.details {
|
||||
min-height: 2.5em;
|
||||
padding: 0.25em 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
@@ -73,6 +44,7 @@
|
||||
color: @primary-disabled;
|
||||
border-right: 1px solid @primary-disabled;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
|
||||
.empty {
|
||||
@@ -85,6 +57,7 @@
|
||||
|
||||
&.selected {
|
||||
color: @primary-bg;
|
||||
fill: @primary-bg;
|
||||
background-color: @primary;
|
||||
border: 1px solid @primary;
|
||||
z-index: 1;
|
||||
|
||||
@@ -13,6 +13,8 @@ table {
|
||||
thead {
|
||||
color: @bgBlack;
|
||||
background-color: @primary-disabled;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4em;
|
||||
.user-select-none();
|
||||
|
||||
.main th {
|
||||
@@ -52,14 +54,11 @@ tbody tr {
|
||||
fill: @warning;
|
||||
background-color: @warning-bg;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
td {
|
||||
line-height: 1.4em;
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -28,4 +28,4 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
|
||||
<svg class="icon warning"><use xlink:href="#rocket"></use></svg><span class="menu-item-label"> Ships</span>
|
||||
</div>
|
||||
<div class="menu-list no-wrap" ng-if="openedMenu=='s'">
|
||||
<div class="menu-list dbl no-wrap" 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>
|
||||
@@ -18,7 +18,7 @@
|
||||
<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><span class="menu-item-label"> Builds</span>
|
||||
</div>
|
||||
<div class="menu-list dbl" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
|
||||
<div class="menu-list" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
|
||||
<ul ng-repeat="shipId in buildsList">
|
||||
{{ships[shipId].properties.name}}
|
||||
<li ng-repeat="(name, build) in allBuilds[shipId]">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<h2>Permalink</h2>
|
||||
<br>
|
||||
<h3>URL</h3>
|
||||
<input ng-model="url" size="70" ng-click="onTextClick($event)">
|
||||
<input ng-model="url" size="40" ng-click="onTextClick($event)">
|
||||
<br><br>
|
||||
<h3>Shortened</h3>
|
||||
<input ng-model="shortenedUrl" size="25" ng-click="onTextClick($event)">
|
||||
|
||||
@@ -6,11 +6,19 @@
|
||||
<input ng-model="name" ng-change="nameChange()" placeholder="Enter Comparison Name" maxlength="50" />
|
||||
</td>
|
||||
<td>
|
||||
<button ng-click="save()" ng-disabled="!name || name == 'all' || saved"><svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save</button>
|
||||
<button ng-click="save()" ng-disabled="!name || name == 'all' || saved">
|
||||
<svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl"> Save</span>
|
||||
</button>
|
||||
<button ng-click="delete()" ng-disabled="name == 'all' || !saved"><svg class="icon lg warning "><use xlink:href="#bin"></use></svg></button>
|
||||
<button ng-click="selectBuilds(true, $event)"><svg class="icon lg "><use xlink:href="#rocket"></use></svg> Builds</button>
|
||||
<button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#link"></use></svg> Permalink</button>
|
||||
<button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#embed"></use></svg> Forum</button>
|
||||
<button ng-click="selectBuilds(true, $event)">
|
||||
<svg class="icon lg "><use xlink:href="#rocket"></use></svg><span class="button-lbl"> Builds</span>
|
||||
</button>
|
||||
<button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0">
|
||||
<svg class="icon lg "><use xlink:href="#link"></use></svg><span class="button-lbl"> Permalink</span>
|
||||
</button>
|
||||
<button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0">
|
||||
<svg class="icon lg "><use xlink:href="#embed"></use></svg><span class="button-lbl"> Forum</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-show="!compareMode">
|
||||
@@ -32,9 +40,11 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
|
||||
<div class="scroll-x">
|
||||
<table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart width="480" facet="f" data="builds">
|
||||
<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart facet="f" data="builds">
|
||||
<h3 ng-click="sort(f.props[0])" >{{f.title}}</h3>
|
||||
</div>
|
||||
|
||||
@@ -52,14 +62,15 @@
|
||||
</table>
|
||||
<h1>⇆</h1>
|
||||
<table>
|
||||
<thead><tr><th colspan="2">Added</th></tr></thead>
|
||||
<tbody>
|
||||
<thead><tr><th colspan="2">Added</th></tr></thead>
|
||||
<tr ng-repeat="b in builds | orderBy:'name'" ng-click="removeBuild(b.id, b.buildName)">
|
||||
<td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br>
|
||||
<button class="r dismiss" ng-click="selectBuilds(false, $event)">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,18 +3,18 @@
|
||||
<div id="overview">
|
||||
<h1 ng-bind="ship.name"></h1>
|
||||
<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" maxsize="50" />
|
||||
<button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
|
||||
<svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="outfit-button-label">Save</span>
|
||||
<svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl">Save</span>
|
||||
</button>
|
||||
<button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
|
||||
<svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="outfit-button-label">Reload</span>
|
||||
<svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="button-lbl">Reload</span>
|
||||
</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><span class="outfit-button-label">Reset</span>
|
||||
<svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="button-lbl">Reset</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,7 +69,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="standard" class="slot-group">
|
||||
<div id="standard" class="group">
|
||||
<h1>Standard</h1>
|
||||
<div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
|
||||
<div class="details">
|
||||
@@ -105,8 +105,8 @@
|
||||
<div class="l">{{th.id}} Thrusters</div>
|
||||
<div class="r">{{th.c.mass}} <u>T</u></div>
|
||||
<div class="cb"></div>
|
||||
<div class="l">Opt: {{th.c.optmass}} <u>T</u></div>
|
||||
<div class="l">Max: {{th.c.maxmass}} <u>T</u></div>
|
||||
<div class="l">Optimal Mass: {{th.c.optmass}} <u>T</u></div>
|
||||
<div class="l">Max Mass: {{th.c.maxmass}} <u>T</u></div>
|
||||
</div>
|
||||
<div component-select class="select" s="th" mass="ship.unladenMass" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
|
||||
</div>
|
||||
@@ -116,7 +116,7 @@
|
||||
<div class="l">{{fsd.id}} Frame Shift Drive</div>
|
||||
<div class="r cr">{{fsd.c.mass}} <u>T</u></div>
|
||||
<div class="cb"></div>
|
||||
<div class="l">Opt: {{fsd.c.optmass}} <u>T</u></div>
|
||||
<div class="l">Optimal Mass: {{fsd.c.optmass}} <u>T</u></div>
|
||||
<div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
|
||||
</div>
|
||||
<div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
|
||||
@@ -149,7 +149,7 @@
|
||||
<div class="l">{{ss.id}} Sensors</div>
|
||||
<div class="r">{{ss.c.mass}} <u>T</u></div>
|
||||
<div class="cb"></div>
|
||||
<div class="l">{{ss.c.range}} <u>KM</u></div>
|
||||
<div class="l">Range: {{ss.c.range}} <u>KM</u></div>
|
||||
</div>
|
||||
<div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
|
||||
</div>
|
||||
@@ -163,7 +163,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hardpoints" class="slot-group">
|
||||
<div id="internal" class="group">
|
||||
<h1>Internal Compartments</h1>
|
||||
<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]" fuel="ship.fuelCapacity"></div>
|
||||
<div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
|
||||
<div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hardpoints" class="group">
|
||||
<h1>HardPoints</h1>
|
||||
<div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" 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>
|
||||
@@ -173,7 +183,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="utility" class="slot-group">
|
||||
<div id="utility" class="group">
|
||||
<h1>Utility Mounts</h1>
|
||||
<div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" 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>
|
||||
@@ -183,20 +193,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="internal" class="slot-group">
|
||||
<h1>Internal Compartments</h1>
|
||||
<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]" ft="ft"></div>
|
||||
<div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
|
||||
<div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cb"></div>
|
||||
|
||||
<div class="list l">
|
||||
<div class="header">Power Use</div>
|
||||
<div class="group dbl">
|
||||
<h1>Power Use</h1>
|
||||
<div class="items">
|
||||
<div class="primary-disabled">Generated</div>
|
||||
<div ng-if="pp.c.pGen" class="item common enabled untoggleable">
|
||||
@@ -230,8 +228,8 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="list r">
|
||||
<div class="header">Costs</div>
|
||||
<div class="group dbl">
|
||||
<h1>Costs</h1>
|
||||
<div class="items">
|
||||
<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>
|
||||
@@ -260,10 +258,10 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="list l" id="jumpRange">
|
||||
<div class="header">Jump Range</div>
|
||||
<div class="group dbl">
|
||||
<h1>Jump Range</h1>
|
||||
<div class="cen">
|
||||
<div class="chart" area-chart config="jrChart" series="jrSeries"></div>
|
||||
<div area-chart config="jrChart" series="jrSeries"></div>
|
||||
<div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
|
||||
<svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user