Merge pull request #10 from tpokorra/TP-20210130-redesignlayout
redesign the layout
This commit was merged in pull request #10.
This commit is contained in:
@@ -11,3 +11,7 @@ input, textarea {
|
|||||||
h3 {
|
h3 {
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
}
|
}
|
||||||
|
div.tab-pane h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,10 +5,16 @@
|
|||||||
|
|
||||||
tabButtons.map(function(button) {
|
tabButtons.map(function(button) {
|
||||||
button.addEventListener('click', function() {
|
button.addEventListener('click', function() {
|
||||||
active = document.querySelector('li a.active.button')
|
|
||||||
|
// only get the active buttons from the current tabs control
|
||||||
|
tabnav = button.closest('ul.tab-nav');
|
||||||
|
active = document.querySelector('#' + tabnav.id + ' li a.active.button')
|
||||||
if (active) active.classList.remove('active');
|
if (active) active.classList.remove('active');
|
||||||
button.classList.add('active');
|
button.classList.add('active');
|
||||||
active = document.querySelector('.tab-pane.active')
|
|
||||||
|
// only get the active panes from the current tabs control
|
||||||
|
tabcontent = tabnav.nextSibling.nextSibling
|
||||||
|
active = document.querySelector('#' + tabcontent.id + ' .tab-pane.active')
|
||||||
if (active) active.classList.remove('active');
|
if (active) active.classList.remove('active');
|
||||||
document.querySelector(button.getAttribute('href')).classList.add('active');
|
document.querySelector(button.getAttribute('href')).classList.add('active');
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -6,6 +6,11 @@
|
|||||||
<a href="/monitor" class="button button-primary">Refresh</a><br/>
|
<a href="/monitor" class="button button-primary">Refresh</a><br/>
|
||||||
<p>Hint: these numbers are not very accurate.</p>
|
<p>Hint: these numbers are not very accurate.</p>
|
||||||
|
|
||||||
|
Total investment: {{total_investment|floatformat:2}} EUR<br/>
|
||||||
|
Virtual value of wallet: {{current_value|floatformat:2}} EUR<br/>
|
||||||
|
Total tax free: {{total_tax_free|floatformat:2}} EUR<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
{% for c in cryptos %}
|
{% for c in cryptos %}
|
||||||
<input type="checkbox" id="acc{{ c.crypto }}" />
|
<input type="checkbox" id="acc{{ c.crypto }}" />
|
||||||
<label for="acc{{ c.crypto }}">
|
<label for="acc{{ c.crypto }}">
|
||||||
@@ -15,41 +20,16 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{% if c.bought %}
|
|
||||||
We have bought {{ c.crypto }} for {{ c.bought|floatformat:2 }} EUR<br/>
|
|
||||||
{% endif %}
|
|
||||||
{% if c.sold %}
|
|
||||||
We have sold {{ c.crypto }} for {{ c.sold|floatformat:2 }} EUR<br/>
|
|
||||||
{% endif %}
|
|
||||||
{% if c.amount_kept %}
|
|
||||||
Current value of our {{ c.amount_kept|floatformat:3 }} {{ c.crypto }} is {{ c.current_value|floatformat:2 }} EUR<br/>
|
|
||||||
{% endif %}
|
|
||||||
{% if c.bought_recently %}
|
|
||||||
We have bought within the last 12 months: {{ c.bought_recently|floatformat:3 }} {{ c.crypto }}<br/>
|
|
||||||
{% endif %}
|
|
||||||
{% if c.bought_tax_free %}
|
|
||||||
We can sell without paying taxes: {{ c.bought_tax_free|floatformat:3 }} {{ c.crypto }} for {{ c.value_tax_free|floatformat:2 }} EUR<br/>
|
|
||||||
{% endif %}
|
|
||||||
<br/><a href="/transactions/show?crypto={{ c.crypto }}">My transactions</a><br/>
|
|
||||||
|
|
||||||
{% if c.rates %}
|
{% if c.rates %}
|
||||||
<table>
|
<ul class="tab-nav" id="tabnav{{ c.crypto }}">
|
||||||
{% for r in c.rates %}
|
|
||||||
<tr>
|
|
||||||
<td>{{ r.dateRelative }}</td>
|
|
||||||
<td>{{ r.date|date:'Y-m-d' }}</td>
|
|
||||||
<td>{{ r.rateEUR|floatformat:0 }} EUR/{{ c.crypto }}</td>
|
|
||||||
<td>{% if r.diffPercentage %}
|
|
||||||
{{ r.diffPercentage|floatformat:1 }}%
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<ul class="tab-nav">
|
|
||||||
<li>
|
<li>
|
||||||
<a class="button" href="#h48{{ c.crypto }}">48 hours</a>
|
<a class="button" href="#info{{ c.crypto }}">Info</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="button" href="#rates{{ c.crypto }}">Rates Text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="button active" href="#h48{{ c.crypto }}">48 hours</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" href="#d3{{ c.crypto }}">3 days</a>
|
<a class="button" href="#d3{{ c.crypto }}">3 days</a>
|
||||||
@@ -67,33 +47,28 @@
|
|||||||
<a class="button" href="#y1{{ c.crypto }}">1 year</a>
|
<a class="button" href="#y1{{ c.crypto }}">1 year</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content" id="tabcontent{{ c.crypto }}">
|
||||||
<div class="tab-pane" id="h48{{ c.crypto }}">
|
|
||||||
48 hours
|
<div class="tab-pane" id="Info{{ c.crypto }}">
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=48" loading="lazy">
|
<h4>Info</h4>
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="d3{{ c.crypto }}">
|
{% if c.bought %}
|
||||||
3 days
|
We have bought {{ c.crypto }} for {{ c.bought|floatformat:2 }} EUR<br/>
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=72" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="w1{{ c.crypto }}">
|
|
||||||
1 week
|
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=168" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="m1{{ c.crypto }}">
|
|
||||||
1 month
|
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=30" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="m6{{ c.crypto }}">
|
|
||||||
6 months
|
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=180" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="y1{{ c.crypto }}">
|
|
||||||
1 year
|
|
||||||
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=360" loading="lazy">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if c.sold %}
|
||||||
|
We have sold {{ c.crypto }} for {{ c.sold|floatformat:2 }} EUR<br/>
|
||||||
|
{% endif %}
|
||||||
|
{% if c.amount_kept %}
|
||||||
|
Current value of our {{ c.amount_kept|floatformat:3 }} {{ c.crypto }} is {{ c.current_value|floatformat:2 }} EUR<br/>
|
||||||
|
{% endif %}
|
||||||
|
{% if c.bought_recently %}
|
||||||
|
We have bought within the last 12 months: {{ c.bought_recently|floatformat:3 }} {{ c.crypto }}<br/>
|
||||||
|
{% endif %}
|
||||||
|
{% if c.bought_tax_free %}
|
||||||
|
We can sell without paying taxes: {{ c.bought_tax_free|floatformat:3 }} {{ c.crypto }} for {{ c.value_tax_free|floatformat:2 }} EUR<br/>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<br/><a href="/transactions/show?crypto={{ c.crypto }}">My transactions</a><br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
Google: <br/>
|
Google: <br/>
|
||||||
@@ -101,16 +76,61 @@
|
|||||||
<a href='https://www.google.com/search?channel=crow2&client=firefox-b-d&q={{ c.crypto }}+in+usd%3D' target='_blank'>{{ c.crypto }} in USD</a><br/>
|
<a href='https://www.google.com/search?channel=crow2&client=firefox-b-d&q={{ c.crypto }}+in+usd%3D' target='_blank'>{{ c.crypto }} in USD</a><br/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane" id="Rates{{ c.crypto }}">
|
||||||
|
<h4>Rates</h4>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
{% for r in c.rates %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ r.dateRelative }}</td>
|
||||||
|
<td>{{ r.date|date:'Y-m-d' }}</td>
|
||||||
|
<td>{{ r.rateEUR|floatformat:0 }} EUR/{{ c.crypto }}</td>
|
||||||
|
<td>{% if r.diffPercentage %}
|
||||||
|
{{ r.diffPercentage|floatformat:1 }}%
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane active" id="h48{{ c.crypto }}">
|
||||||
|
<h4>48 hours</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=48" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="d3{{ c.crypto }}">
|
||||||
|
<h4>3 days</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=72" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="w1{{ c.crypto }}">
|
||||||
|
<h4>1 week</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_hours=168" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="m1{{ c.crypto }}">
|
||||||
|
<h4>1 month</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=30" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="m6{{ c.crypto }}">
|
||||||
|
<h4>6 months</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=180" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="y1{{ c.crypto }}">
|
||||||
|
<h4>1 year</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=360" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="y1{{ c.crypto }}">
|
||||||
|
<h4>10 years</h4>
|
||||||
|
<img src="/graph?crypto={{ c.crypto }}&fiat=EUR&number_of_days=3600" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<br/><br/><br/>
|
<br/><br/><br/>
|
||||||
|
|
||||||
<h3>Total wallet</h3>
|
|
||||||
|
|
||||||
Total investment: {{total_investment|floatformat:2}} EUR<br/>
|
|
||||||
Virtual value of wallet: {{current_value|floatformat:2}} EUR<br/>
|
|
||||||
Total tax free: {{total_tax_free|floatformat:2}} EUR<br/>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user