Skip to content

Commit

Permalink
home page UI changes (#369)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayeshamk
ayeshamk committed May 17, 2021
1 parent 9611376 commit dc07995
Show file tree
Hide file tree
Showing 8 changed files with 869 additions and 827 deletions.
1 change: 1 addition & 0 deletions server_py/flatgov/flatgov/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
'committeeReport',
'ckeditor',
"ckeditor_uploader",
'sorl.thumbnail',

]

Expand Down
35 changes: 26 additions & 9 deletions server_py/flatgov/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.bill-btn-primary {
background-color:#781A36!important;
border-color: #1d4e70!important;
border-color: #2D4059!important;
border-radius: 10px;

}
Expand All @@ -21,7 +21,7 @@
}

.tab-content {
background-color: #1D4E70 !important;
background-color: #2D4059 !important;
border-radius: 0px 15px 15px 15px !important;
color: white;
}
Expand All @@ -34,7 +34,7 @@
}

.section-container {
background-color: #1D4E70;
background-color: #2D4059;
border-radius: 10px;
}

Expand Down Expand Up @@ -93,6 +93,11 @@ div.dataTables_wrapper div.dataTables_filter input {

}

.dark-blue-navbar {
background-color: #2D4059;
height: 120px;
}

#wrap {
background-color: #2D4059;
border-radius: 10px;
Expand Down Expand Up @@ -156,15 +161,26 @@ div.dataTables_wrapper div.dataTables_scroll {
box-shadow: 3px 4px 4px #d4d4d4;
}

.navbar-link {
color: white !important;
padding: 0px 15px 5px 15px;
margin: 0px 10px 0px 10px;
text-decoration: none !important;

}
.light-gray-nav-link .active {
color: #495057;
background-color: #d4d4d4;
border-color: noner;
}

.navbar-link.active {
border-bottom: 5px solid white;
}

.nav-link.active {
background-color: #1D4E70 !important;
border-color: #1D4E70 !important;
background-color: #2D4059 !important;
border-color: #2D4059 !important;
color: white !important;
}

Expand Down Expand Up @@ -195,9 +211,9 @@ div.dataTables_wrapper div.dataTables_scroll {
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
outline: none;
}

Expand Down Expand Up @@ -313,7 +329,7 @@ span.twitter-typeahead .tt-suggestion:focus {
#bill-search {
padding-right: 40px;
border:1px solid var(--select-border);
border-radius: 5px;
border-radius: 8px;
}

.bill-tooltip {
Expand Down Expand Up @@ -366,6 +382,7 @@ span.twitter-typeahead .tt-suggestion:focus {
position: absolute;
right: 20px;
top: 10px;
color: black;
}

@media only screen and (min-width: 768px) {
Expand Down
Binary file added server_py/flatgov/static/images/home-bannder.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added server_py/flatgov/static/images/home-banner-crop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 4 additions & 6 deletions server_py/flatgov/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,10 @@

<body>
<div class="">
<div class="row d-flex justify-content-center">
<div class="col-md-10">
{% block content %}
{% endblock %}
</div>
</div>

{% block content %}
{% endblock %}

</div>
<footer>
Footer
Expand Down
1,378 changes: 691 additions & 687 deletions server_py/flatgov/templates/bills/detail.html
View file

Large diffs are not rendered by default.

200 changes: 109 additions & 91 deletions server_py/flatgov/templates/home/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,128 @@
{% extends 'base.html' %}
{% load bill_filters %}
{% load static %}

{% block content %}
<div class="light-gray-body my-5">
<div class="p-4">
<h1>Bill Map</h1>
<p class="lead">
We put federal legislation in context by showing congressional actions, the history of legislation, and what might happen next.
</p>
</div>
</div>
<div class="d-flex flex-nowrap light-gray-body mb-4 flex-column">
<div class="search p-4">
<div>
<h1 style="display: inline;">Search</h1>
<!--div class="dropdown pull-right" style="display: inline;" id="congressdropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Congress
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for congress in congressrange %}
{% if forloop.first %}
<a class="dropdown-item active" href="#">{{congress}}</a>
{% else %}
<a class="dropdown-item" href="#">{{congress}}</a>
{% endif %}
{% endfor %}
{% load thumbnail %}
<div class="row">
<div class="" style="height: 500px; overflow: hidden">
<img class="img-fluid" src="{% static '/images/home-banner-crop.png' %}" style="" alt="">
</div>
<div class="col-md-10 position-absolute mt-3 w-50" style="left: 8%; max-width: 600px">
<div class="" style="margin:0; padding: 0">
<div class="p-4">
<h1 style="font-weight: bolder;">Bill Map</h1>
<p class="lead">
We put federal legislation in context by showing congressional actions, the history of legislation, and what might happen next.
</p>
</div>
</div>
</div-->

</div>
<!-- <p>Search for Legislation</p> -->
<div class="row">
<div class="col-md-8 col-sm-12 mt-2">
<div class="search-input-group input-group input-group-lg">
<!-- <input id="bill-search" type="text" class="form-control typeahead" placeholder="Examples: s5, hr5, hres5, hjres5, hconres5, sjres5, sconres5, sres5"> -->
<input id="bill-search" type="text" class="form-control typeahead" placeholder="Search for Legislation">

<span id="search-icon">
<span>
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>
</div>
</div>
<div class="row d-flex justify-content-center" style="background-color: #2D4059">
<div class="col-md-10">
<div class="d-flex flex-nowrap text-white mb-4 flex-column">
<div class="search p-4 pl-5 pr-5">
<div class="text-center mb-3">
<h1 class="text-center mb-2" style="display: inline; font-weight: 900">Search for Legislation</h1>
<!--div class="dropdown pull-right" style="display: inline;" id="congressdropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Congress
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for congress in congressrange %}
{% if forloop.first %}
<a class="dropdown-item active" href="#">{{congress}}</a>
{% else %}
<a class="dropdown-item" href="#">{{congress}}</a>
{% endif %}
{% endfor %}
</div>
</div-->

<!--<a class="btn btn-primary" target="_blank" href="#" id="gobutton">GO!</a>-->
</div>
<br>
<p class="font-italic text-muted">
&nbsp;&nbsp;Examples: s5, hr5, hres5, hjres5, hconres5, sjres5, sconres5, sres5
</p>
</div>
<div class="col-md-4 col-sm-12 mt-2">
<div class="dropdown style="display: inline;" id="congressdropdown">
<div>
<select id="selectcongress" name="congress" class=" select" aria-label="Select Congress">
{% for congress in congressrange %}
{% if forloop.first %}
<option class="congress-item" value="{{congress}}" selected>{{congress|numstring_to_ordinal}}</option>
{% else %}
<option class="congress-item" value="{{congress}}">{{congress|numstring_to_ordinal}}</option>
{% endif %}
{% endfor %}
<!--option class="congress-item" value="all">Any Congress</option-->
</select>
<!-- <p>Search for Legislation</p> -->
<div class="row">
<div class="col-md-8 col-sm-12 mt-2">
<div class="search-input-group input-group input-group-lg">
<!-- <input id="bill-search" type="text" class="form-control typeahead" placeholder="Examples: s5, hr5, hres5, hjres5, hconres5, sjres5, sconres5, sres5"> -->
<input id="bill-search" type="text" class="form-control typeahead" placeholder="Search for Legislation">

<span id="search-icon">
<span>
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>

<!--<a class="btn btn-primary" target="_blank" href="#" id="gobutton">GO!</a>-->
</div>
<br>
<p class="font-italic text-muted">
&nbsp;&nbsp;Examples: s5, hr5, hres5, hjres5, hconres5, sjres5, sconres5, sres5
</p>
</div>
<div class="col-md-4 col-sm-12 mt-2">
<div class="dropdown style="display: inline;" id="congressdropdown">
<div>
<select id="selectcongress" name="congress" class=" select" aria-label="Select Congress">
{% for congress in congressrange %}
{% if forloop.first %}
<option class="congress-item" value="{{congress}}" selected>{{congress|numstring_to_ordinal}}</option>
{% else %}
<option class="congress-item" value="{{congress}}">{{congress|numstring_to_ordinal}}</option>
{% endif %}
{% endfor %}
<!--option class="congress-item" value="all">Any Congress</option-->
</select>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="text-center">
<a data-toggle="collapse" class="advanced-search-toggle" href="#bill-text-div" role="button" aria-expanded="false" aria-controls="bill-text-div">
<i class="fa fa-caret-down" aria-hidden="true">
</i>
</a>
</div>
</div>

</div>

<div class="text-center">
<a data-toggle="collapse" class="advanced-search-toggle" href="#bill-text-div" role="button" aria-expanded="false" aria-controls="bill-text-div">
<i class="fa fa-caret-down" aria-hidden="true">
</i>
</a>
</div>
</div>


<div id="bill-text-div" class="collapse light-gray-body mb-4">
<div class="search p-4">
<div class="form-group text-center my-0">
<form action="" method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<input class="btn btn-outline-primary" type="submit" value="Find similar bills">
</form>
</div>
</div>
</div>

<div>
<div id="wrap" class="p-4 mt-5">
<div id="calendar" style=""></div>
<div style="clear:both"></div>
<div class="row d-flex justify-content-center">

</div>
<div class="" id="">
<div class="card card-body d-flex flex-row" id="calendar-key">
<div class="mr-5">Calendar key</div>
</div>
<div class="col-md-10">


<div id="bill-text-div" class="collapse light-gray-body mb-4">
<div class="search p-4">
<div class="form-group text-center my-0">
<form action="" method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<input class="btn btn-outline-primary" type="submit" value="Find similar bills">
</form>
</div>
</div>
</div>

<div>
<div id="wrap" class="p-4 mt-5">
<div id="calendar" style=""></div>
<div style="clear:both"></div>

</div>
<div class="" id="">
<div class="card card-body d-flex flex-row" id="calendar-key">
<div class="mr-5">Calendar key</div>
</div>
</div>
</div>
<div class="my-5"></div>

</div>
</div>
<div class="my-5"></div>
{% endblock %}

{% block extra_js %}
Expand Down
Loading

0 comments on commit dc07995

Please sign in to comment.