From 564ac92cfe6d8ee70e373d969d7b4812f1bd26f4 Mon Sep 17 00:00:00 2001
From: mrschnei <mrschnei@umich.edu>
Date: Tue, 28 Jul 2020 16:56:00 -0400
Subject: [PATCH] Updated the UI for the home page and point submissions
---
servicePoints/templates/index.html | 260 ++++++++++++++---------------
1 file changed, 128 insertions(+), 132 deletions(-)
diff --git a/servicePoints/templates/index.html b/servicePoints/templates/index.html
index e21b0de..4740b27 100644
--- a/servicePoints/templates/index.html
+++ b/servicePoints/templates/index.html
@@ -1,151 +1,147 @@
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="/css/style.css">
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <style>
- .dropbtn {
- background-color: #333;
- color: #f2f2f2;
- padding: 12px;
- margin-right: 20px;
- font-size: 16px;
- border: none;
- cursor: pointer;
- }
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
- .dropdown {
- position: relative;
- display: inline-block;
- float: right;
- }
-
- .dropdown-content {
- display: none;
- position: absolute;
- background-color: #f1f1f1;
- min-width: 160px;
- overflow: auto;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- right: 0;
- z-index: 1;
- }
-
- .dropdown-content a {
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- }
-
- .dropdown a:hover {
- background-color: #ddd;
- }
-
- .show {
- display: block;
- }
-
- .topnav {
- background-color: #333;
- position: fixed;
- top: 0;
- width: 100%;
- }
-
- .topnav button:hover {
- background: rgba(0,0,0,0.2);
- }
-
- main {
- margin-top: 75px;
- }
-
- .topitem {
- color: #f2f2f2;
- float: left;
- display: block;
- font-size: 16px;
- padding: 14px 16px;
- }
- </style>
</head>
<body>
- <div class="topnav">
- <div class="topitem">
- Username: {{username}}
- </div>
- <div class="topitem">
- Organization: {{org}}
- </div>
- <div class="topitem">
- Hours: {{hours}}
+ <div class="jumbotron text-center" style="margin-bottom:0; ">
+ <h1>ServicePoints!</h1>
+ <p>Connect with your Org</p>
+ </div>
+
+ <nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7952b3;">
+ <a class="navbar-brand" href="#">Home</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="collapsibleNavbar">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item">
+ <a class="nav-link" href="/accounts/blood/">Blood Drives</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/accounts/food/">Food Drives</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/accounts/mask/">Mask Making</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/accounts/tutorsu/">Tutoring</a>
+ </li>
+ </ul>
+ <ul class="navbar-nav">
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Settings
+ </a>
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+ <a class="dropdown-item" href="/accounts/profile/">View Profile</a>
+ {% if leader == 1 %}
+ <a class="dropdown-item" href="/accounts/manageOrg/">Manage Org</a>
+ {% endif %}
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="/accounts/logout/">Logout</a>
+ </div>
+ </li>
+ </ul>
</div>
- <div class="dropdown">
- <button onclick="myFunction()" class="dropbtn">Settings</button>
+ </nav>
- <div id="myDropdown" class="dropdown-content">
- <a href="/accounts/profile/">Profile</a>
- <hr />
+ <div class="container" style="margin-top:30px">
+ <div class="row">
+ <div class="col-sm-8">
+ <div>
+ <h2>Pending Service Points:</h2>
+ <div>
+ <h5>Masks</h5>
+ <p>Points: 10</p>
+ <p>Include some notes or the submitted picture or the date submitted</p>
+ </div>
+ <div>
+ <h5>Food Drive</h5>
+ <p>Points: 10</p>
+ <p>Include some notes or the submitted picture or the date submitted</p>
+ </div>
+ </div>
+ <h2>Your Past Service</h2>
+ <div>
+ <h5>Masks</h5>
+ <p>Points: 10</p>
+ <p>Include some notes or the submitted picture or the date submitted</p>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <p>
+ <a href="" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#pointsModal" style="background-color:#03DAC6;">Submit Points</a>
+ </p>
+ <p>
+ <a class="btn btn-default btn-lg btn-block" href="#" role:"button" style="background-color:#03DAC6;">Submit a Service Opportunity</a>
+ </p>
{% if leader == 1 %}
- <a href="/accounts/manageOrg/">Manage Org</a>
- <hr />
+ <p>
+ <a class="btn btn-default btn-lg btn-block" href="/accounts/viewRequests/" role:"button" style="background-color:#03DAC6;">Review Submissions</a>
+ </p>
+ <p>
+ <a class="btn btn-default btn-lg btn-block" href="/accounts/viewMemberPoints/" role:"button" style="background-color:#03DAC6;">View Points</a>
+ </p>
{% endif %}
- <a href="/accounts/logout/">Logout</a>
-
+ <h2>Your Info: </h2>
+ <p>Username: {{username}}</p>
+ <p>Organization: {{org}}</p>
+ <p>Hours: {{hours}}</p>
+ <hr class="d-sm-none">
</div>
</div>
</div>
- <main>
- <h1 style="text-align:center">Welcome to ServicePoints!</h1>
- <p>
- <a href="/accounts/mask/">
- <img src=/images/mask.png alt="mask">
- </a>
- <a href="/accounts/blood/">
- <img src=/images/blood.png alt="blood">
- </a>
- <a href="/accounts/food/">
- <img src=/images/food.png alt="food">
- </a>
- <a href="/accounts/tutorsu/">
- <img src=/images/tutor.png alt="tutorsu">
- </a>
- <a href="/accounts/submitPoints/">
- <img src=/images/submit.png alt="mask">
- </a>
- {% if leader == 1 %}
- <a href="/accounts/viewMemberPoints/">
- <img src=/images/view.png alt="view">
- </a>
- <a href="/accounts/viewRequests/">
- <img src=/images/approval.png alt="requests">
- </a>
- {% endif %}
- </p>
- </main>
+ <div class="modal fade" id="pointsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="myModalLabel">Submit Points</h4>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <form action="/accounts/submitPoints/" method="post" enctype="multipart/form-data">
+ <div class="form-group">
+ <label for="service">Select the type of service:</label>
- <script>
- /* When the user clicks on the button,
- toggle between hiding and showing the dropdown content */
- function myFunction() {
- document.getElementById("myDropdown").classList.toggle("show");
- }
+ <select name="service" id="service" class="form-control">
+ <option value="mask">Mask-Making</option>
+ <option value="blood">Donating Blood</option>
+ <option value="tutor">Tutoring</option>
+ <option value="food">Donating Food</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="file">Photo for proof of service</label>
+ <input type="file" name="file">
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <input type="submit" class="btn btn-primary" name="update" value="Submit" />
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="jumbotron text-center" style="margin-bottom:0; ">
+ </div>
+ <!-- Optional JavaScript -->
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
- // Close the dropdown if the user clicks outside of it
- window.onclick = function (event) {
- if (!event.target.matches('.dropbtn')) {
- var dropdowns = document.getElementsByClassName("dropdown-content");
- var i;
- for (i = 0; i < dropdowns.length; i++) {
- var openDropdown = dropdowns[i];
- if (openDropdown.classList.contains('show')) {
- openDropdown.classList.remove('show');
- }
- }
- }
- }
- </script>
</body>
</html>
--
GitLab