Skip to content

Commit a90fdb8

Browse files
dlmcpauldlmcpaul
committed
Improve small screen views
1 parent 542660b commit a90fdb8

5 files changed

Lines changed: 90 additions & 41 deletions

File tree

‎src/main/resources/static/css/default.css‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,51 @@
11
@media screen and (max-width: 1900px) {
22
#primary-menu {
33
display: none;
4+
visibility: hidden;
45
}
56
}
67

78
@media screen and (min-width: 1900px) {
89
#primary-tabs {
910
display: none;
11+
visibility: hidden;
1012
}
1113
}
1214

1315
@media (max-width: 768px) {
14-
.big-screen {
15-
display: none;
16+
div.big-screen, .big-screen-table, span.big-screen, .big-screen {
17+
display: none !important;
18+
visibility: hidden;
1619
}
17-
.small-screen {
20+
div.small-screen, span.small-screen, .small-screen {
1821
display: block;
22+
visibility: visible;
23+
}
24+
.small-screen-table {
25+
display: table-cell;
26+
visibility: visible;
27+
}
28+
div.chart {
29+
height: 600px !important;
30+
width: 100% !important;
1931
}
2032
}
2133

2234
@media (min-width: 769px) {
23-
.big-screen {
35+
div.big-screen, span.big-screen, .big-screen {
2436
display: block;
37+
visibility: visible;
2538
}
26-
.small-screen {
27-
display: none;
39+
.big-screen-table {
40+
display: table-cell;
41+
visibility: visible;
42+
}
43+
div.small-screen, span.small-screen, .small-screen-table, .small-screen {
44+
display: none !important;
45+
visibility: hidden;
46+
}
47+
div.chart {
48+
height: 900px !important;
49+
width: 100% !important;
2850
}
2951
}

‎src/main/resources/templates/Equity.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@
44
lang="en">
55
<body>
66
<main>
7-
<div class="ui raised horizontal equal width segments">
7+
<div class="big-screen ui raised horizontal equal width segments">
8+
<th:block th:unless="${accounts.equityAccounts.isEmpty()}"
9+
th:each="account, stats : ${accounts.equityAccounts}"
10+
th:with="break=${stats.first or account.category != accounts.equityAccounts[stats.index-1].category}">
11+
<div th:if="${break}" class="ui segment">
12+
<a th:if="${break}" class="ui green ribbon label" th:text="${account.category()}"
13+
th:href="|@{/Accounts/}${#uris.escapePathSegment(account.fullName())}|">Super Account</a>
14+
<div th:replace="~{fragments/Equity :: Feed (${accounts.filterEquityAccounts(account.category())}, 'Equity:' + ${account.category()})}"></div>
15+
</div>
16+
</th:block>
17+
</div>
18+
<div class="small-screen ui raised horizontal wrapping segments">
819
<th:block th:unless="${accounts.equityAccounts.isEmpty()}"
920
th:each="account, stats : ${accounts.equityAccounts}"
1021
th:with="break=${stats.first or account.category != accounts.equityAccounts[stats.index-1].category}">

‎src/main/resources/templates/RecurringTransactions.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
lang="en">
55
<body>
66
<main>
7-
<table class="ui compact celled table">
7+
<table class="ui unstackable single line compact celled table">
88
<thead>
99
<tr>
1010
<th>Description</th>
11-
<th>Next Due Date</th>
11+
<th>Due Date</th>
1212
<th>Recurrence</th>
1313
<th class="right aligned">Amount</th>
14-
<th class="right aligned">Estimate over Year</th>
15-
<th class="center aligned">Actions</th>
14+
<th class="right aligned big-screen-table">Yearly Estimate</th>
15+
<th class="center aligned big-screen-table">Actions</th>
1616
</tr>
1717
</thead>
1818
<tbody>
@@ -21,9 +21,9 @@
2121
<td data-label="Due Date" th:text="${#temporals.format(schedule.dueDate(),'dd MMM yyyy', #locale)}">24</td>
2222
<td data-label="Recurrence" th:text="${schedule.recurrenceDescription()}">Engineer</td>
2323
<td data-label="Amount" class="right aligned" th:text="${#numbers.formatCurrency(schedule.amount())}"></td>
24-
<td data-label="Estimate over Year" class="right aligned"
24+
<td data-label="Yearly Estimate" class="right aligned big-screen-table"
2525
th:text="${#numbers.formatCurrency(schedule.totalForYear())}"></td>
26-
<td data-label="Actions" class="center aligned">
26+
<td data-label="Actions" class="center aligned big-screen-table">
2727
<div class="ui small spaced buttons">
2828
<button class="ui compact button">Edit</button>
2929
<button class="ui compact button">Skip</button>

‎src/main/resources/templates/Superannuation.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,19 @@
2121
th:text="|${account.name()} (${#temporals.format(account.openingDate(), 'MMM yyyy')} - ${#temporals.format(account.closingDate(), 'MMM yyyy')})|"></div>
2222
</div>
2323
</div>
24-
<div class="ui segment">
24+
<div class="ui segment small-screen">
25+
<div class="ui one column very compact grid">
26+
<div class="row">
27+
<div class="center aligned column"><b>Earnings</b></div>
28+
</div>
29+
<div class="row">
30+
<div class="center aligned column" th:text="${#numbers.formatCurrency(account.earnings())}">
31+
Earnings
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
<div class="ui segment big-screen">
2537
<div class="ui three column very compact grid">
2638
<div class="row">
2739
<div class="center aligned column"><b>Starting</b></div>
@@ -41,7 +53,7 @@
4153
</div>
4254
</div>
4355
</div>
44-
<div class="ui segment">
56+
<div class="ui segment big-screen">
4557
<div class="ui three column very compact grid">
4658
<div class="row">
4759
<div class="center aligned column"><b>Losses</b></div>

‎src/main/resources/templates/fragments/Investment.html‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
<html xmlns:th="http://www.thymeleaf.org" lang="en">
33
<body>
44
<!--/*@thymesVar id="shareGraphData" type="com.hz.mymoney.ui.models.templates.InvestmentsTemplateData"*/-->
5-
<table id="InvestmentTable" th:fragment="InvestmentTable (investmentsData)" class="ui fixed small compact celled table">
5+
<table id="InvestmentTable" th:fragment="InvestmentTable (investmentsData)"
6+
class="ui unstackable single line small compact celled table">
67
<thead>
78
<tr>
89
<th>Investment</th>
9-
<th class="left aligned">Purchase Date</th>
10+
<th class="left aligned">Purchased</th>
1011
<th class="right aligned" th:if="${#strings.contains(header,'Current')}">Quantity</th>
1112
<th class="right aligned" th:if="${#strings.contains(header,'Current')}">Last Price</th>
12-
<th class="right aligned">Outlay</th>
13-
<th class="right aligned">Earnings</th>
14-
<th class="right aligned">Sales</th>
13+
<th class="right aligned big-screen-table">Outlay</th>
14+
<th class="right aligned big-screen-table">Earnings</th>
15+
<th class="right aligned big-screen-table">Sales</th>
1516
<th class="right aligned" th:if="${#strings.contains(header,'Current')}">Market Value</th>
16-
<th class="right aligned">Net Profit/Loss</th>
17-
<th class="right aligned">Annualised Return</th>
17+
<th class="right aligned big-screen-table">Net Profit/Loss</th>
18+
<th class="right aligned">Annual Return</th>
1819
</tr>
1920
</thead>
2021
<tbody>
@@ -25,49 +26,52 @@
2526
<td class="right aligned" th:if="${#strings.contains(header,'Current')}" th:text="${investment.count}"></td>
2627
<td class="right aligned" th:if="${#strings.contains(header,'Current')}"
2728
th:text="${#numbers.formatCurrency(investment.lastPrice)}"></td>
28-
<td class="right aligned" th:text="${#numbers.formatCurrency(investment.costBase)}"></td>
29-
<td class="right aligned" th:text="${#numbers.formatCurrency(investment.earnings)}"></td>
30-
<td class="right aligned" th:text="${#numbers.formatCurrency(investment.sales)}"></td>
29+
<td class="right aligned big-screen-table" th:text="${#numbers.formatCurrency(investment.costBase)}"></td>
30+
<td class="right aligned big-screen-table" th:text="${#numbers.formatCurrency(investment.earnings)}"></td>
31+
<td class="right aligned big-screen-table" th:text="${#numbers.formatCurrency(investment.sales)}"></td>
3132
<td class="right aligned" th:if="${#strings.contains(header,'Current')}"
3233
th:text="${#numbers.formatCurrency(investment.balance)}"></td>
3334
<td th:text="${#numbers.formatCurrency(investment.netProfitLoss)}"
34-
th:attr="class=${investment.isProfit() ? 'right aligned green' : 'right aligned red'}"></td>
35+
th:attr="class=${investment.isProfit() ? 'right aligned green big-screen-table' : 'right aligned red big-screen-table'}"></td>
3536
<td th:text="${#numbers.formatPercent(investment.yearlyReturn,1,2)}"
3637
th:attr="class=${investment.isProfit() ? 'right aligned green' : 'right aligned red'}"></td>
3738
</tr>
3839
<tr th:unless="${investmentsData.investmentSummaries.isEmpty()}">
3940
<td th:if="${#strings.contains(header,'Current')}"></td>
4041
<td th:if="${#strings.contains(header,'Current')}"></td>
4142
<td></td>
42-
<td class="right aligned" th:if="${#strings.contains(header,'Current')}"><b>Total Outlay</b></td>
43-
<td class="right aligned blue" th:if="${#strings.contains(header,'Current')}"
43+
<td class="right aligned big-screen-table" th:if="${#strings.contains(header,'Current')}"><b>Total Outlay</b>
44+
</td>
45+
<td class="right aligned blue big-screen-table" th:if="${#strings.contains(header,'Current')}"
4446
th:text="${#numbers.formatCurrency(investmentsData.getTotalOutlay())}">$0.00
4547
</td>
4648
<td th:if="${#strings.contains(header,'Current')}"></td>
47-
<td class="right aligned" th:unless="${#strings.contains(header,'Current')}"><b>Total Outlay</b></td>
48-
<td class="right aligned blue" th:unless="${#strings.contains(header,'Current')}"
49+
<td class="right aligned big-screen-table" th:unless="${#strings.contains(header,'Current')}"><b>Total
50+
Outlay</b></td>
51+
<td class="right aligned blue big-screen-table" th:unless="${#strings.contains(header,'Current')}"
4952
th:text="${#numbers.formatCurrency(investmentsData.getTotalOutlay())}">$0.00
5053
</td>
5154
<td></td>
52-
<td class="right aligned"><b>Total Profit/Loss</b></td>
53-
<td class="right aligned blue" th:text="${#numbers.formatCurrency(investmentsData.getTotalProfitOrLoss())}">
55+
<td class="right aligned big-screen-table"><b>Total Profit/Loss</b></td>
56+
<td class="right aligned blue big-screen-table"
57+
th:text="${#numbers.formatCurrency(investmentsData.getTotalProfitOrLoss())}">
5458
$0.00
5559
</td>
5660
<td></td>
5761
</tr>
5862
</tbody>
5963
</table>
6064

61-
<div id="InvestmentChart" th:fragment="InvestmentChart(investmentsData, header)" class="ui grid">
62-
<div class="eight wide column">
63-
<div th:if="${#strings.contains(header,'Current')}" id="investmentsTotalChart"
64-
style="width: 100%; height: 600px"></div>
65-
<div th:if="${#strings.contains(header,'Historical')}" style="width: 100%; height: 600px"></div>
65+
<div id="InvestmentChart" th:fragment="InvestmentChart(investmentsData, header)"
66+
th:class="${#strings.contains(header,'Current')} ? 'ui two column grid' : 'ui two column grid container'">
67+
<div th:if="${#strings.contains(header,'Current')}" class="column">
68+
<div id="investmentsTotalChart" class="chart"></div>
6669
</div>
67-
<div class="eight wide column">
68-
<div id="marketValueChart"
69-
th:attr="data-chart-data=${investmentsData.getMarketValuesJson()}, data-chart-title=${#strings.contains(header,'Current')?'Market Value':'Net Profit/Loss'}"
70-
style="width: 100%; height: 600px"></div>
70+
<div th:unless="${#strings.contains(header,'Current')}" class="three wide column"></div>
71+
<div class="column">
72+
<div id="marketValueChart" class="chart"
73+
th:attr="data-chart-data=${investmentsData.getMarketValuesJson()}, data-chart-title=${#strings.contains(header,'Current')?'Market Value':'Net Profit/Loss'}">
74+
</div>
7175
</div>
7276
</div>
7377
</body>

0 commit comments

Comments
 (0)