When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the index name and YTD change on smaller screens.
My application is built using Flask and Bootstrap, so I'm unsure if achieving this without tools like React or Vue is possible. Can this be accomplished using @media queries or browser JavaScript?
Here's a snippet from the index.html file:
{% extends 'base.html' %}
{% block body %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="indices-container">
<div class="row">
{% for index in total_payload.get('indexes').get('meta_data') %}
<div class="col-sm-2 text-center">
{% set d = total_payload.get('indexes').get(index) %}
{{ "{} ${:.2f}".format(index, d['current_price']) }}
{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}
{{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>
{% endfor %}
</div>
</div>
<div class="sp500-table-container">
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm" id="sp500Table">
<thead class="thead-light">
<tr> {% for col in total_payload.get('companies').get('meta_data') %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody> {% for num, r in enumerate(total_payload.get('companies').get('sp500companies')) %}
<tr>
<td>{{ num+1 }}</td>
<td>{{ r.get('Symbol') }}</td>
<td>{{ r.get('Security') }}</td>
<td><a href="{{ r.get('sec_filings') }}" target="_blank">link</a></td>
<td>{{ r.get('Sector') }}</td>
<td>{{ r.get('SubSector') }}</td>
<td>{{ r.get('Headquarters') }}</td>
<td>{{ r.get('DateFirstAdded') }}</td>
</tr> {% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.name-price").css("color", "red");
});
});
</script>
{% endblock %}
Snippet from the style.css file:
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
padding-bottom: 80px;
overflow: hidden;
}
footer {
padding-top: 80px;
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh;
width: 100vw;
overflow: auto;
position: relative;
padding-bottom: 16px;
margin: auto;
/* flex: 1; */
/* margin-bottom: 16px; */
}