-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnewBills.html
95 lines (86 loc) · 3.99 KB
/
newBills.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Latest Bills</title>
<!-- Bootstrap Style -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom Style -->
<link href="https://getbootstrap.com/docs/4.4/examples/offcanvas/offcanvas.css" rel="stylesheet">
<style>
.usGradient {
background: rgb(121,9,9);
background: linear-gradient(90deg, rgba(121,9,9,1) 0%, rgba(255,255,255,1) 80%, rgba(0,16,255,1) 100%);
}
.container {
width: 50%;
max-width: 680px;
padding: 0 15px;
}
</style>
</head>
<body class="bg-secondary">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<a href="/" class="text-white">Home</a>
<br>
<a href="/members" class="text-white">Members</a>
</div>
</div>
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0 text-white" href="/">CongressApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 rounded shadow-sm usGradient">
<img class="mr-3" src="/CongressSeal.svg" alt="" width="48" height="48">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Latest Bills</h6>
<small>116th US Congress</small>
</div>
</div>
<div id="latestBills" class="my-3 p-3 bg-dark rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0 text-white">Latest Bills</h6>
</div>
</main>
<footer class="footer mt-auto py-3 bg-secondary">
<div class="container">
<span class="text-dark">Created By <a href="https://github.com/packwatcher">packwatcher</a> on Github</span>
</div>
</footer>
<!-- Bootstrap Scripts -->
<script src="/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="/popper.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
fetch("/api/latest/bills")
.then(res => res.json())
.then(res => {
for(i = 0; i < res.num_results; i++) {
document.getElementById("latestBills").innerHTML += billElement(res.bills[i])
}
})
const billElement = obj => `
<div class="media text-muted pt-3 border-bottom border-gray">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect width="100%" height="100%" fill="#${getColor(obj.sponsor_party)}"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em"></text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 text-white">
<strong class="d-block text-white">${obj.sponsor_title} ${obj.sponsor_name}</strong>
${obj.short_title}
</p>
<a class="btn btn-primary btn-sm" href="/bill#${obj.bill_slug}" role="button">More Info »</a>
</div>
`
function getColor(party) {
if(party === "R") return "dc3545"
if(party === "D") return "007bff"
if(party === "I") return "6c757d"
}
</script>
</body>
</html>