Skip to content

Commit

Permalink
better styling for the phase page
Browse files Browse the repository at this point in the history
  • Loading branch information
@smcalilly
smcalilly committed Feb 25, 2022
1 parent 6a639e3 commit 5508751
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 74 deletions.
2 changes: 1 addition & 1 deletion asset_dashboard/static/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ input[type="checkbox"] {
}

.map-container {
height: 80vh;
height: 85vh;
}

.map-thumbnail {
Expand Down
4 changes: 2 additions & 2 deletions asset_dashboard/static/js/components/maps/ListAssetsMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ function ListAssetsMap(props) {
<>
{
props?.assets &&
<div className='border border-secondary rounded'>
<div className=''>
<div className='row'>
<div className='col-4 m-3'>
<div className="d-flex align-items-center justify-content-between m-2">
<h3>Phase Assets</h3>
<a href={`${window.location.href}assets`} class="btn btn-warning ml-4">Edit Assets ></a>
<a href={`${window.location.href}assets`} class="text-info lead">Edit Assets ></a>
</div>
<div className='map-thumbnail'>
<BaseMap
Expand Down
6 changes: 3 additions & 3 deletions asset_dashboard/static/js/components/maps/SelectAssetsMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ function SelectAssetsMap(props) {
: null
}
<div className='row'>
<div className='col-4 border rounded border-secondary py-1 ml-3'>
<div className='col-4 border rounded border-secondary shadow-sm py-1 ml-3'>
<div className='row my-3'>
<div className='col'>
<div className='row m-1'>
Expand Down Expand Up @@ -228,7 +228,7 @@ function SelectAssetsMap(props) {
</div>
</div>
<div className='col'>
<div className='card text-center bg-light mb-4 border-secondary'>
<div className='card text-center bg-light mb-4 border-secondary shadow-sm'>
<div className='card-body'>
<h2 className='card-title'>{props.phase_name}</h2>
<div className=''>
Expand All @@ -245,7 +245,7 @@ function SelectAssetsMap(props) {
</div>
</div>

<div className='map-container border border-secondary rounded' aria-label='Asset Selection Map'>
<div className='map-container border border-secondary rounded shadow-sm' aria-label='Asset Selection Map'>
<BaseMap
center={[41.8781, -87.6298]}
zoom={11}
Expand Down
2 changes: 1 addition & 1 deletion asset_dashboard/static/js/components/tables/ExistingAssetsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function ExistingAssetsTable({ rows }) {
}

return (
<div className='border rounded border-secondary mt-4'>
<div className='border rounded border-secondary shadow-sm mt-4'>
<h3 className='m-3'>Phase Assets</h3>
{ajaxMessage
? <Message
Expand Down
179 changes: 118 additions & 61 deletions asset_dashboard/templates/asset_dashboard/partials/forms/add_edit_phase_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,78 +6,135 @@
{% endblock %}

{% block project %}
<form method="post">
{% csrf_token %}
<div class="row">
<div class="border border-secondary rounded shadow-sm p-3 col-8 m-2">

<form method="post">
{% csrf_token %}

{{ form.errors }}
{{ finances_form.errors }}

<div class="row justify-content-between mx-3">
<h3>{% if phase %}Update Phase{% else %}Create Phase{% endif %}</h3>
<input type="submit" value="Save Phase" class="btn btn-info">
</div>



<div class="row m-4">
<div class="col m-4">
<strong>Phase</strong>
{{ form.phase_type }}
</div>
<div class="col m-4">
<strong>Status</strong>
{{ form.status }}
</div>
</div>

<div class="row m-4">
<div class="col m-4">
<strong>Total Budget</strong>
<div class="mt-3">
{{ finances_form.budget }}
</div>
</div>
<div class="col m-4">
<strong>Estimated Bid Quarter</strong>
{{ form.estimated_bid_quarter }}
</div>
</div>
</form>

</div>
<div class="col border border-secondary rounded shadow-sm p-3 m-2">
<h3>Phase Funding</h3>
{% if phase_funding_year %}
<table class="table table-hover table-border py-4">
<thead>
<tr>
<th>Year</th>
<th>Funds</th>
<th></th>
</tr>
</thead>
<tbody>
{% for funding_year in object_list %}
<tr>
<td>{{ funding_year.year }}</td>
<td>{{ funding_year.funds }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>
{% if phase %}
This phase has no funding. <a href="#" class="text-info lead">Add funding ></a>
{% else %}
Create the phase so you can add funding.
{% endif %}
</p>
{% endif %}

</div>
</div>

{{ form.errors }}
{{ finances_form.errors }}

<div class="text-right">
<input type="submit" value="Save Phase" class="btn btn-info">
</div>
<div class="border border-secondary rounded shadow-sm p-3 mt-4">
<div class="col">
{% if not props %}
<h3 class="row">Phase Assets</h3>
<div class="row">
<p>
{% if phase and not props %}
This phase has no GIS assets. &nbsp;<a href="{% url 'create-update-assets' pk=phase.id %}" class="text-info lead">Add Assets ></a>
{% elif not phase and not props %}
Create the phase so you can add GIS assets.
{% else %}
<a href="{% url 'create-update-assets' pk=phase.id %}" class="text-info lead">Edit Assets ></a>
{% endif %}
</p>
</div>
{% else %}
<div id="map" class="mt-2">
<div class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
{% endif %}



<div class="row m-4">
<div class="col m-4">
<strong>Phase</strong>
{{ form.phase_type }}
</div>
<div class="col m-4">
<strong>Estimated Bid Quarter</strong>
{{ form.estimated_bid_quarter }}
</div>
<div class="col m-4">
<strong>Status</strong>
{{ form.status }}
</div>
{% if props %}

{% endif %}
</div>
</div>

<div class="row m-4">
<div class="col m-4">
<strong>Total Budget</strong>
<div class="mt-3">
{{ finances_form.budget }}

<!-- {% if props %}
<div id="map" class="mt-2">
<div class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</form>

{% if phase_funding_year %}
<table class="table table-hover table-border py-4">
<thead>
<tr>
<th>Year</th>
<th>Funds</th>
<th></th>
</tr>
</thead>
<tbody>
{% for funding_year in object_list %}
<tr>
<td>{{ funding_year.year }}</td>
<td>{{ funding_year.funds }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endif %} -->

{% if phase %}
<div class="">
<!-- <div class="d-flex align-items-center m-2 col">
<h4 class="my-2 mr-4">Phase Assets</h4>
<a href="{% url 'create-update-assets' pk=phase.id %}" class="btn btn-warning ml-4">Edit Assets ></a>
</div> -->


<div id="map">
<!-- Contents get replaced by mounted React.Component -->
<div class="text-center">
<i class="fa fa-lg fa-spinner fa-spin"></i><br><br>
<i class="pending">Loading map...</i><br><br>
</div>
<!-- {% if phase and not props %}
<div class="border border-secondary rounded shadow-sm p-3 mt-4">
<div class="col">
<h3 class="row">Phase Assets</h3>
<p>This phase has no GIS assets. &nbsp;<a href="{% url 'create-update-assets' pk=phase.id %}" class="text-info lead">Add Assets ></a></p>
</div>
</div>
{% endif %}
{% endif %} -->

{% endblock %}

{% block extra_js %}
Expand Down
8 changes: 4 additions & 4 deletions asset_dashboard/templates/asset_dashboard/partials/project_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@

<!-- Base view that contains the various forms for a Project. -->
{% block body %}
<div class="container">
<div class="col">
<h1 class="text-right display-4">{{ project.name }}</h1>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" id="overview" href="{% url 'project-detail' pk=project.pk %}">Overview</a>
<a class="nav-link text-info lead" id="overview" href="{% url 'project-detail' pk=project.pk %}">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" id="phases" href="{% url 'project-phases-list' pk=project.pk %}">Phases</a>
<a class="nav-link text-info lead" id="phases" href="{% url 'project-phases-list' pk=project.pk %}">Phases</a>
</li>
</ul>

<div class="tab-content container card p-4 shadow-sm" id="nav-tabContent">
<div class="tab-content card p-4 shadow-sm" id="nav-tabContent">
{% block project %}{% endblock %}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions asset_dashboard/templates/asset_dashboard/project_phases_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block project %}
<div>
<div class="text-right mb-4">
<a href="{% url 'create-phase' pk=project.id %}">Add Phase</a>
<a href="{% url 'create-phase' pk=project.id %}" class="lead text-info">Add Phase ></a>
</div>
<table class="table table-hover table-border py-4">
<thead>
Expand All @@ -22,7 +22,7 @@
<td>{{ phase.status }}</td>
<td>{{ phase.phasefinances__budget }}</td>
<td>{{ phase.estimated_bid_quarter }}</td>
<td><a href="{% url 'edit-phase' pk=phase.id %}">Edit</a></td>
<td><a href="{% url 'edit-phase' pk=phase.id %}" class="text-info lead">Edit</a></td>
</tr>
{% endfor %}
</tbody>
Expand Down

0 comments on commit 5508751

Please sign in to comment.