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

Other responsive changes. Outfitting screen now works pretty well on phone-sized displays. Summary is currently just a horizontal-scrolling thing (because it's a table atm) but everything else scales down and collapses pretty nicely.

Browse Source
This commit is contained in:
Maverick
2015-06-04 20:40:43 +10:00
parent 6e9990831d
commit cc1018c62c
2 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/less/outfit.less
View File

@@ -11,6 +11,14 @@
//font-size: 0.8em;
});
&>.list {
@media screen and (max-width: 1000px) {
width: 49%;
}
@media screen and (max-width: 600px) {
width: 100%;
}
}
}
#overview {
@@ -74,4 +82,16 @@
@media screen and (max-width: 640px) {
display: none;
}
}
#jumpRange {
width: 50%;
padding: 0 0.5em;
@media screen and (max-width: 1000px) {
float: right;
clear: both;
display: block;
width: 100% !important;
}
}

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

@@ -227,16 +227,6 @@
</table>
</div>
<div class="list l" style="width: 50%;padding: 0 0.5em;">
<div class="header">Jump Range</div>
<div class="cen">
<div class="chart" 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>
</div>
</div>
<div class="list r">
<div class="header">Costs</div>
<div class="items">
@@ -267,4 +257,14 @@
</table>
</div>
<div class="list l" id="jumpRange">
<div class="header">Jump Range</div>
<div class="cen">
<div class="chart" 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>
</div>
</div>
</div>