Skip to content

Commit

Permalink
update deploy with new detail sheet and August site edits
Browse files Browse the repository at this point in the history
  • Loading branch information
@katrina-cityofdetroit
katrina-cityofdetroit committed Sep 6, 2024
1 parent 6883aab commit a21ff75
Show file tree
Hide file tree
Showing 71 changed files with 4,613 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo Budget Form</title><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script><link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"><script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script><script defer="defer" src="bundle.js"></script></head><body><header><img src="d027d45141f87dc014af.png" alt="Logo" id="logo"><h1>FY2026 Budget Form</h1><h2 id="subtitle"></h2></header><div id="main-panel"><div id="welcome-page"><button class="btn step" id="step-upload">1. Upload your Excel data</button> <button class="btn step" id="step-revenue">2. Complete your baseline request</button> <button class="btn step" id="step-initiatives">3. Propose new initiatives</button> <button class="btn step" id="step-finish">4. Review and download submission</button></div><div id="prompt-div"><h3 id="prompt"></h3><br><input type="file" id="file-input" accept=".xls,.xlsx"/> <button class="btn" id="option1"></button> <button class="btn" id="option2"></button></div><div id="search-bar-container"></div><div class="table-container"></div><div id="tooltip"></div><div class="row"><div id="add-btn-div"><button class="btn btn-add" id="add-btn"></button></div></div><div id="accordion-div"><div id="baseline-accordion" class="summary-container"><h3 id="baseline-title" class="accordion-title">Baseline <span class="top-line-amount cost"></span></h3><div class="accordion summary-accordion"></div></div><div id="supp-accordion" class="summary-container"><h3 id="supp-title" class="accordion-title">Suplemental <span class="top-line-amount cost"></span></h3><div class="accordion summary-accordion"></div></div><div class="add-init-btn-div"><button class="btn btn-add-init">Add new initiative</button></div></div><div class="row"><div class="col-md-12"><div id="nav-btns"><button class="btn" id="btn-last"><strong>&lt;&lt; Previous</strong></button> <button class="btn" id="btn-next"><strong>Continue &gt;&gt;</strong></button></div></div></div></div><div id="sidebar-panel"><div class="sidebar-content"><br><h4 id="sidebar-title">Summary</h4><br><h5 class="section-header"><strong>Baseline</strong></h5><div id="baseline-stats"></div><h5 class="section-header"><strong>Supplemental</strong></h5><div id="supp-stats"></div></div></div><div class="modal fade" id="main-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modal-title"></h5><button type="button" id="modal-close-x" class="close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body" id="modal-body"></div></div></div></div></body></html>
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Budget Request Form</title><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script><link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"><script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script><script defer="defer" src="bundle.js"></script></head><body><header><img src="d027d45141f87dc014af.png" alt="Logo" id="logo"><h1 id="title"></h1><h2 id="subtitle"></h2></header><div id="main-panel"><div id="welcome-page"><button class="btn step" id="step-upload">1. Upload your Excel data</button> <button class="btn step" id="step-revenue">2. Complete your baseline request</button> <button class="btn step" id="step-initiatives">3. Propose new initiatives</button> <button class="btn step" id="step-finish">4. Review and download submission</button></div><div id="prompt-div"><h3 id="prompt"></h3><br><input type="file" id="file-input" accept=".xls,.xlsx"/> <button class="btn" id="option1"></button> <button class="btn" id="option2"></button></div><div id="filter-container"></div><div id="search-bar-container"></div><div class="table-container"></div><div id="tooltip"></div><div class="row"><div id="add-btn-div"><button class="btn btn-add" id="add-btn"></button></div></div><div id="accordion-div"><div id="baseline-accordion" class="summary-container"><h3 id="baseline-title" class="accordion-title">Baseline <span class="top-line-amount cost"></span></h3><div class="accordion summary-accordion"></div></div><div id="supp-accordion" class="summary-container"><h3 id="supp-title" class="accordion-title">Suplemental <span class="top-line-amount cost"></span></h3><div class="accordion summary-accordion"></div></div><div class="add-init-btn-div"><button class="btn btn-add-init">Add new initiative</button></div></div><div class="row"><div class="col-md-12"><div id="nav-btns"><button class="btn" id="btn-last"><strong>&lt;&lt; Previous</strong></button> <button class="btn" id="btn-next"><strong>Continue &gt;&gt;</strong></button></div></div></div><div id="upload-spinner" class="spinner" style="display:none"></div></div><div id="sidebar-panel"><div class="sidebar-content"><br><h4 id="sidebar-title">Summary</h4><br><h5 class="section-header"><strong>Baseline</strong></h5><div id="baseline-stats"></div><h5 class="section-header"><strong>Supplemental</strong></h5><div id="supp-stats"></div></div></div><div class="modal fade" id="main-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modal-title"></h5><button type="button" id="modal-close-x" class="close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body" id="modal-body"></div></div></div></div></body></html>
Binary file added src/assets/city-of-detroit-logo.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.
62 changes: 62 additions & 0 deletions src/css/common.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
:root {
/* colors */
--orange: #FB6523;
--yellow: #D99733;
--blue: #43748E;
--lightBlue: #b7c9e2;
--darkGray: #373A37;
--mediumGray: #D0D0D0;
--lightGray: #F2F2F2;
--white: #FBFDFB;
--black: #212121;
--green: #71BC78;
--citygreen: #004445;
--spiritgreen: #279989;
--palegreen: #9FD5B3;
--verypalegreen: #DFF5E3;
--accentyellow: #feb70d;
--nearblack: #18252a;
/* fonts */
font-family: 'Nunito', sans-serif;
font-size: 14px;
/* spacing */
--header-height : 105px;
--sidebar-width: 300px;
}

/* Button styling */

.btn {
cursor: pointer;
padding: 6px;
margin-top: 5px;
margin-right : 2px;
margin-left: 2px;
border-radius: 10px;
background-color: gray;
color: white;
}

/* Font application for all text */
body, button, input, textarea, select, .sidebar, table {
font-family: var(--font-family), sans-serif;
}

#main-panel {
/* display: flex; */
/* flex-direction: column; */
justify-content: center; /* This will center content vertically */
min-height: calc(100vh - var(--header-height)) ;
/* max-width: calc(100vw - var(--sidebar-width)); */
padding-top: 25px;
padding-bottom: 25px;
margin: 0;
}

/* Font awesome */

i.fas.fa-check {
font-size: 1.5em;
color: var(--spiritgreen);
margin-right: 10px;
}
157 changes: 157 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Request Form</title>

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- JS excel library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
<!-- Datatables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<!-- Datatables JS -->
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>

<body>

<!-- Page header -->
<header>
<!-- City of Detroit logo -->
<img src="assets/city-of-detroit-logo.png" alt="Logo" id="logo">
<!-- Title and subtitle -->
<h1 id="title"></h1>
<h2 id="subtitle"></h2>
</header>

<!-- Main content -->
<div id="main-panel">

<!-- Welcome page buttons -->
<div id="welcome-page">
<button class="btn step" id="step-upload">
1. Upload your Excel data
</button>
<button class="btn step" id="step-revenue">
2. Complete your baseline request
</button>
<button class="btn step" id="step-initiatives">
3. Propose new initiatives
</button>
<button class="btn step" id="step-finish">
4. Review and download submission
</button>
</div>

<!-- Space for an initial prompt and response buttons -->
<div id="prompt-div">
<h3 id="prompt"></h3>
<br>
<!-- File upload -->
<input type="file" id="file-input" accept=".xls,.xlsx" />
<!-- Prompt buttons -->
<button class="btn" id="option1"></button>
<button class="btn" id="option2"></button>
</div>

<!-- Table -->

<!-- Filter Dropdowns for table content -->
<div id="filter-container"></div>

<!-- Location for table -->
<div id="search-bar-container"></div>
<div class="table-container"></div>

<!-- Placeholder for tooltip -->
<div id="tooltip"></div>

<!-- Add new row button -->
<div class="row">
<div id='add-btn-div'>
<button class="btn btn-add" id="add-btn"></button>
</div>
</div>

<!-- Summary page accordion -->
<div id='accordion-div'>
<div id='baseline-accordion' class="summary-container">
<h3 id="baseline-title" class="accordion-title">
Baseline
<span class="top-line-amount cost"></span>
</h3>
<div class="accordion summary-accordion"></div>
</div>
<div id="supp-accordion" class="summary-container">
<h3 id="supp-title" class="accordion-title">
Suplemental
<span class="top-line-amount cost"></span>
</h3>
<div class="accordion summary-accordion"></div>
</div>
<div class="add-init-btn-div">
<button class="btn btn-add-init">Add new initiative</button>
</div>
</div>

<!-- Navigation buttons -->
<div class="row">
<div class="col-md-12">
<div id="nav-btns">
<button class="btn" id="btn-last">
<strong>&lt;&lt; Previous</strong>
</button>
<button class="btn" id="btn-next">
<strong>Continue &gt;&gt;</strong>
</button>
</div>
</div>
</div>

<!-- Placeholder for progress wheel -->
<div id="upload-spinner" class="spinner" style="display: none;"></div>

</div>

<!-- Sidebar -->
<div id="sidebar-panel">
<div class="sidebar-content">
<br>
<h4 id="sidebar-title">Summary</h4>
<br>
<h5 class="section-header"><strong>Baseline</strong></h5>
<div id="baseline-stats"></div>
<!-- Supplemental data -->
<h5 class="section-header"><strong>Supplemental</strong></h5>
<div id="supp-stats"></div>
</div>
</div>

<!-- Modal for form or info -->
<div class="modal fade" id="main-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title"></h5>
<button type="button" id="modal-close-x" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modal-body">
</div>
</div>
</div>
</div>

</body>
</html>
83 changes: 83 additions & 0 deletions src/js/components/accordion/accordion.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
.summary-accordion {
width: 60%;
margin: auto;
}

.accordion-title {
margin-left: 20%;
font-weight: bold;
/* font-size: 20px; */
padding-bottom: 10px;
padding-left: 15px;
padding-top: 30px;
}

.accordion-button:active, .accordion-button:not(.collapsed) {
background-color: var(--palegreen);
color: var(--citygreen);
/* font-size: 20px; */
}

.accordion-table {
width: 100%;
font-size: 1.2em;
/* border-collapse: separate; This is required for rounded corners */
}

.accordion-table td:last-child {
text-align: right;
padding-right: 15px;
padding-bottom: 5px
}

.accordion-table tr {
border-bottom: 1px solid black;
border-top: none;
border-right: none;
border-left: none;
}

.accordion-table tr:last-child {
border-bottom: none;
background-color: var(--mediumGray);
height : 50px;
}

span.amount {
font-weight: bold;
position: absolute;
right: 0;
margin-right: 60px;
}

.accordion-header button {
font-size: 0.8em;
}

.btn-add-init {
background-color: var(--spiritgreen);
border-color: var(--citygreen);
/* position: absolute; */
right: 0;
/* margin-left: 20px; */
/* margin-right: calc(20vw + 15px); */
margin-top: 15px;
}

#supp-title {
margin-top: 20px;
}

.btn-add-init:hover {
background-color: var(--palegreen);
}
.add-init-btn-div{
text-align: center;
}

span.top-line-amount {
font-weight: bold;
position: absolute;
right: 0;
margin-right: calc(20vw + 20px);
}
Loading

0 comments on commit a21ff75

Please sign in to comment.