monopyly 1.4.6__py3-none-any.whl → 1.4.8__py3-none-any.whl

monopyly/static/css/style.css

@@ -7,7 +7,10 @@
 :root {
   --moneytree: #5e8f40;
   --moneytree-leaves: #85bb65;
+  --silver-dollar: #cccccc;
   --masthead-height: 50px;
+  --masthead-color: #2b2b2b;
+  --border-gray: #dddddd;
 }
 
 html {
@@ -94,7 +97,7 @@ header#masthead {
   border-width: 0 0 4px 3px;
   border-style: solid;
   border-color: var(--moneytree-leaves);
-  background-color: #2b2b2b;
+  background-color: var(--masthead-color);
   opacity: 0.9;
 }
 
@@ -117,7 +120,12 @@ header#masthead {
 }
 
 .monopyly-logo:hover {
-  color: #f5f5f5;
+  filter: brightness(0.95);
+}
+
+.monopyly-logo .development-mode {
+  font-weight: normal;
+  text-transform: none;
 }
 
 
@@ -161,7 +169,7 @@ footer#site-info {
 }
 
 #site-info p {
-  color: #cccccc;
+  color: var(--silver-dollar);
   font-size: 9pt;
   text-align: center;
 }
@@ -193,7 +201,7 @@ aside.sidebar {
   height: 100%;
   width: 10%;
   min-width: 50px;
-  margin-top: 50px; /* Account for content header */
+  margin-top: 50px; /* account for content header */
 }
 
 #content-header h1 {
@@ -201,12 +209,40 @@ aside.sidebar {
   box-sizing: border-box;
   margin: 0 0 30px 0;
   padding-bottom: 10px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-gray);
   text-align: center;
   font-size: 2em;
   letter-spacing: -2px;
 }
 
+#content-header h1.error {
+  text-align: left;
+}
+
+
+/*
+ * Provide styles for error pages
+ */
+.error span.code {
+  margin-left: 30px;
+  color: var(--silver-dollar);
+  font-weight: 300;
+  letter-spacing: 1px;
+}
+
+.custom-error-content p {
+  font-size: 18pt;
+}
+
+.standard-error-content {
+  margin-top: 50px;
+}
+
+.standard-error-content p.error-description {
+  font-size: 12pt;
+  font-style: oblique;
+}
+
 
 /*
  * General object characteristics
@@ -233,7 +269,8 @@ aside.sidebar {
 }
 
 .button-block {
-  border: 1px solid #dddddd;
+  margin: 15px 0;
+  border: 1px solid var(--border-gray);
   border-radius: 10px;
   box-shadow: 1px 1px 3px #bbbbbb;
   background-color: #eeeeee;
@@ -241,6 +278,14 @@ aside.sidebar {
   color: inherit;
 }
 
+.button-block:first-of-type {
+  margin-top: 0;
+}
+
+.button-block:last-of-type {
+  margin-bottom: 0;
+}
+
 .button-block:hover {
   filter: brightness(0.98);
   text-decoration: none;
@@ -253,16 +298,34 @@ aside.sidebar {
 .screenshot {
   width: 100%; /* override the markdown default */
   margin: 20px 0;
-  border: 1px solid #f3f3f3;
+  border: 1px solid #bbbbbb;
   box-shadow: 3px 3px 5px #bbbbbb;
 }
 
-.grouping {
+.group-stack {
+  margin: 15px 10px 25px;
+  padding: 20px 30px;
   border-radius: 15px;
   box-shadow: 0 0 20px #eeeeee;
   background-color: #eef5eb;
 }
 
+.group-stack .stack-title {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 15px 0;
+  padding: 0 15px;
+  font-size: 1.1em;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.group-stack .stack-title-info {
+  margin-left: 15px;
+  color: #888888;
+  font-weight: 400;
+}
+
 .paid-notice {
   color: var(--moneytree-leaves);
   font-weight: bold;
@@ -491,7 +554,8 @@ form .autocomplete-box {
   z-index: 99;
   width: 100%;
   padding-right: 10px;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--silver-dollar);
+  box-sizing: border-box;
   background-color: white;
 }
 
@@ -502,7 +566,7 @@ form .autocomplete-box .item {
 }
 
 form .autocomplete-box .item:hover {
-  background-color: #cccccc;
+  background-color: var(--silver-dollar);
 }
 
 form .autocomplete-box .item.active {
@@ -643,7 +707,7 @@ form .autocomplete-box .item.active {
   position: relative;
   right: -100%;
   width: min-content;
-  transition: 0.4s;
+  transition: 0.4s 0.2s;
 }
 
 .slide-text-gadget:hover .sleeve {
@@ -653,7 +717,7 @@ form .autocomplete-box .item.active {
 .slide-text-gadget .sleeve .main {
   position: absolute;
   transform: translateX(-100%);
-  transition: 0.2s;
+  transition: 0.2s 0.2s;
 }
 
 .slide-text-gadget:hover .sleeve .main {
@@ -746,8 +810,8 @@ form .autocomplete-box .item.active {
 .toggle-switch-gadget .option .slider .switch {
   position: relative;
   left: 0;
-  width: 50%;
   height: 100%;
+  width: 50%;
   box-sizing: border-box;
   border-radius: 50%;
   background-color: #eeeeee;
@@ -772,7 +836,7 @@ form .autocomplete-box .item.active {
  * Style generic box tables
  */
 .box-table {
-  border: 2px solid #dddddd;
+  border: 2px solid var(--border-gray);
 }
 
 .box-table .icon-button {
@@ -789,8 +853,8 @@ form .autocomplete-box .item.active {
 }
 
 .box-table .box-row {
-  border-top: 0.5px solid #dddddd;
-  border-bottom: 0.5px solid #dddddd;
+  border-top: 0.5px solid var(--border-gray);
+  border-bottom: 0.5px solid var(--border-gray);
   background-color: #f5f5f5;
 }
 
@@ -822,7 +886,7 @@ form .autocomplete-box .item.active {
 }
 
 #card-filter .card:hover {
-  background-color: #cccccc;
+  background-color: var(--silver-dollar);
   text-decoration: none;
 }
 
@@ -878,7 +942,7 @@ form .autocomplete-box .item.active {
   position: absolute;
   height: 100%;
   width: 100%;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--silver-dollar);
   border-radius: 20px;
   box-shadow: 1px 1px 3px #222222;
   text-align: center;
@@ -949,7 +1013,7 @@ form .autocomplete-box .item.active {
 }
 
 .credit-card.inactive .card-face.front {
-  color: #cccccc;
+  color: var(--silver-dollar);
   filter: brightness(0.9);
 }
 
@@ -1088,7 +1152,7 @@ form .autocomplete-box .item.active {
 
 .transactions-table .titles,
 .transactions-table .transaction {
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-gray);
 }
 
 .transactions-table .titles {
@@ -1612,13 +1676,12 @@ form .autocomplete-box .item.active {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: stretch;
   gap: 10px;
   width: 100%;
 }
 @media screen and (max-width: 1500px) {
   .details .primary-info {
-    display: flex;
     align-items: center;
   }
 }
@@ -1639,14 +1702,16 @@ form .autocomplete-box .item.active {
 .details .summary-container {
   display: flex;
   justify-content: center;
-  min-width: 45%;
+  width: 45%;
+  min-width: 500px;
   margin: 0 0 0 0;
 }
 
 .details .summary-box {
   display: flex;
   flex-direction: column;
-  width: min-content;
+  width: 500px;
+  box-sizing: border-box;
   padding: 40px 50px 60px;
   border-radius: 25px;
   box-shadow: 1px 1px 5px #dddddd;
@@ -1656,7 +1721,6 @@ form .autocomplete-box .item.active {
 .details .summary-box .balance {
   display: flex;
   justify-content: space-between;
-  min-width: 325px;
   margin: 20px 0;
   font-size: 72pt;
   font-weight: bold;
@@ -1664,10 +1728,6 @@ form .autocomplete-box .item.active {
   text-align: center;
 }
 
-.details .summary-box .balance .dollar-sign {
-  margin-right: 5px;
-}
-
 .details .summary-box .projected-balance .amount {
   color: var(--moneytree);
   font-weight: 500;
@@ -1698,12 +1758,13 @@ form .autocomplete-box .item.active {
 }
 
 .details .transactions-container {
-  width: 50%;
+  width: 52.5%;
   order: 2;
   min-width: 500px;
 }
 @media screen and (max-width: 1500px) {
   .details .transactions-container {
+    width: 50%;
     order: 1;
     margin-top: 50px;
   }
@@ -1820,10 +1881,10 @@ form .autocomplete-box .item.active {
 #homepage-block {
   margin-bottom: 20px;
   padding: 0 0 30px 0;
-  background-color: #dddddd;
-  border: 1px solid #d8d8d8;
+  background-color: gainsboro;
+  border: 1px solid lightgray;
   border-radius: 6px;
-  box-shadow: 2px 2px 5px #cccccc;
+  box-shadow: 2px 2px 5px var(--silver-dollar);
 }
 
 #homepage-block h2 {
@@ -1873,7 +1934,7 @@ form .autocomplete-box .item.active {
   margin: 20px;
   padding: 50px;
   border: 1px solid #f5f5f5;
-  box-shadow: 2px 2px 5px #cccccc;
+  box-shadow: 2px 2px 5px var(--silver-dollar);
   background-color: #fafafa;
 }
 
@@ -1961,6 +2022,38 @@ form .autocomplete-box .item.active {
   margin-top: 50px;
 }
 
+#readme .warning {
+  padding: 15px 25px;
+  border: 1px solid var(--silver-dollar);
+  border-radius: 10px;
+  box-shadow: 2px 2px 3px var(--silver-dollar);
+  background-color: #f2d7a5;
+}
+
+#readme .warning h5 {
+  margin: 0 0 5px 0;
+}
+
+#changelog {
+  width: 80%;
+  margin: 0 auto;
+}
+
+#changelog h1 {
+  font-size: 32pt;
+  text-align: center;
+}
+
+#changelog h2 {
+  border-bottom: 1px solid var(--border-gray);
+}
+
+#changelog a.latest-release {
+  display: block;
+  margin: 30px 0;
+  font-size: 1.5em;
+}
+
 #story .signature {
   margin-bottom: 100px;
   font-weight: bold;
@@ -1969,6 +2062,14 @@ form .autocomplete-box .item.active {
 }
 
 
+/*
+ * Customization for the 'Credits' page
+ */
+.affiliation-disclaimer {
+  margin-top: 80px;
+}
+
+
 /*
  * Customization for the 'Profile' page
  */
@@ -2002,7 +2103,7 @@ form .autocomplete-box .item.active {
   flex-basis: 100%;
   margin-right: 0;
   padding-bottom: 50px;
-  border-bottom: 0.5px solid #dddddd;
+  border-bottom: 0.5px solid var(--border-gray);
 }
 
 #profile .banking.profile-section .bank-list {
@@ -2025,15 +2126,9 @@ form .autocomplete-box .item.active {
 /*
  * Customization for the 'Bank Accounts' page
  */
-#bank-container .bank-block {
-  margin: 25px 0;
-  padding: 30px;
-}
-
-#bank-container .bank-block h3 {
-  margin-top: 0;
+#bank-container .bank-stack .stack-title {
   padding: 0 30px;
-  /*text-align: center;*/
+  text-align: left;
 }
 
 #bank-container .account-block {
@@ -2068,7 +2163,7 @@ form .autocomplete-box .item.active {
 #account-type-container {
   width: 30%;
   min-width: 350px;
-  border: 2px solid #dddddd;
+  border: 2px solid var(--border-gray);
   background-color: #f5f5f5;
 }
 
@@ -2078,13 +2173,13 @@ form .autocomplete-box .item.active {
 }
 
 #account-type-container .account-types {
-  border-top: 2px solid #dddddd;
+  border-top: 2px solid var(--border-gray);
 }
 
 #account-type-container .account-type {
   padding: 10px;
-  border-top: 0.5px solid #dddddd;
-  border-bottom: 0.5px solid #dddddd;
+  border-top: 0.5px solid var(--border-gray);
+  border-bottom: 0.5px solid var(--border-gray);
 }
 
 
@@ -2105,10 +2200,22 @@ form#bank-account .hidden {
   align-items: center
 }
 
-#bank-account-summaries-container .bank {
-  margin: 0 0 10px;
+#bank-account-summaries-container h2.bank {
+  margin: 0 0 5px;
+  font-size: 1.6em;
+  letter-spacing: 1px;
+  text-transform: uppercase;
   text-align: center;
+}
+
+#bank-account-summaries-container h3.balance {
+  margin: 0 0 10px;
+  color: gray;
+  font-size: 1em;
+  font-weight: 300;
   text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 1px;
 }
 
 #bank-account-summaries {
@@ -2117,29 +2224,21 @@ form#bank-account .hidden {
   width: 100%;
 }
 
-#bank-account-summaries .account-type-block {
+#bank-account-summaries .account-type-stack {
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 60%;
   min-width: 400px;
-  margin: 10px auto;
-  padding: 25px;
+  margin: 15px auto 25px;
 }
 
 #bank-account-summaries .account-block {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 15px;
   padding: 30px 10%;
 }
 
-#bank-account-summaries a.account-block:last-of-type {
-  margin-bottom: 0;
-}
-
 #bank-account-summaries .account-block .title {
   font-size: 16pt;
 }
@@ -2408,27 +2507,21 @@ form#card #statement-due-day-field  {
   justify-content: space-around;
 }
 
-#credit-statements .card-column {
+#credit-statements .card-stack {
   display: flex;
   flex-direction: column;
   height: min-content;
-  margin: 15px 10px;
-  padding: 20px;
-  text-transform: uppercase;
-  text-align: center;
-  font-size: 1.1em;
 }
 
-#credit-statements-container .card-column .digits {
-  color: #888888;
+#credit-statements .card-stack .stack-title {
+  justify-content: center;
 }
 
 #credit-statements .statement-block {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
   width: 275px;
-  margin: 15px;
   padding: 45px 50px;
 }
 
@@ -2511,7 +2604,7 @@ form#pay input {
 }
 
 form#pay .form-inputs {
-  border: 1px solid #cccccc;
+  border: 1px solid var(--silver-dollar);
   border-radius: inherit;
 }
 
@@ -2677,7 +2770,7 @@ form#credit-transaction .merchant-field {
   border-radius: 20px;
   text-align: center;
   outline: none;
-  caret-color: #cccccc;
+  caret-color: var(--silver-dollar);
   transition: border 0.1s ease;
 }
 
@@ -2733,6 +2826,6 @@ form#credit-transaction .merchant-field {
 #transaction-tags .subtags {
   margin: 0 0 0 10px;
   padding-left: 40px;
-  border-left: 1px solid #dddddd;
+  border-left: 1px solid var(--border-gray);
 }
 

monopyly/static/js/make-payment.js

@@ -17,7 +17,8 @@ import { executeAjaxRequest } from './modules/ajax.js';
 
 (function() {
 
-  const $container = $('#statement-summary-container');
+  const $summaryContainer = $('#statement-summary-container');
+  const $transactionContainer = $('#statement-transactions-container');
   prepareForm();
 
   function prepareForm() {
@@ -82,7 +83,8 @@ import { executeAjaxRequest } from './modules/ajax.js';
   function updateStatementPaymentAjaxRequest(rawData) {
     // Return the newly updated statement payment info
     function updateAction(response) {
-      $container.html(response)
+      $summaryContainer.html(response[0]);
+      $transactionContainer.html(response[1]);
       // Prepare the form again (in case statement is not paid in full)
       prepareForm();
     }

monopyly/templates/banking/account_summaries.html

@@ -1,21 +1,35 @@
 <div id="bank-account-summaries">
 
-  {% for account_type in type_accounts %}
-    <div class="account-type-block grouping">
+  {% for account_type, accounts in type_accounts|items %}
+    {# Use a scoped variable so that the accounts generator can be reused #}
+    {% with accounts = accounts|list %}
 
-      {% for account in type_accounts[account_type]|sort(attribute='last_four_digits') %}
+      <div class="account-type-stack group-stack">
 
-      <a class="account-block button-block" href="{{ url_for('banking.load_account_details', account_id=account.id) }}">
-          <div class="title">
-            <span class="digits">{{ account.last_four_digits }}</span>
-            <b>{{ account.account_type.type_name }}</b>
-          </div>
-          <div class="balance">${{ account.balance|currency }}</div>
-        </a>
+        <h2 class="stack-title">
+          {{ account_type.type_name }}
+          {% if accounts|length> 1 %}
+            <span class="stack-title-info">${{ accounts|sum(attribute='balance')|currency }}</span>
+          {% endif %}
+        </h2>
 
-      {% endfor %}
+        <div class="account-blocks">
+          {% for account in accounts|sort(attribute='last_four_digits') %}
 
-    </div>
+            <a class="account-block button-block" href="{{ url_for('banking.load_account_details', account_id=account.id) }}">
+              <div class="title">
+                <span class="digits">{{ account.last_four_digits }}</span>
+                <b>{{ account.account_type.type_name }}</b>
+              </div>
+              <div class="balance">${{ account.balance|currency }}</div>
+            </a>
+
+          {% endfor %}
+        </div>
+
+      </div>
+
+    {% endwith %}
   {% endfor %}
 
 </div>

monopyly/templates/banking/account_summaries_page.html

@@ -44,7 +44,8 @@
 {% block content %}
 
   <div id="bank-account-summaries-container">
-    <h2 class="bank">{{ bank.bank_name }} (${{ bank_balance|currency }})</h2>
+    <h2 class="bank">{{ bank.bank_name }}</h2>
+    <h3 class="balance">${{ bank_balance|currency }}</h3>
 
     {% include 'banking/account_summaries.html' %}
 

monopyly/templates/banking/account_summary.html

@@ -9,8 +9,13 @@
   </div>
 
   <div class="balance">
-    <div class="dollar-sign">$</div>
-    <div>{{ account.balance|currency }}</div>
+    {% with account_balance = account.balance|currency %}
+      {% set vbox_width = calculate_summary_balance_width(account_balance) %}
+      <svg viewBox="0 0 {{ vbox_width }} 100">
+        <text x="0" y="75" fill="currentColor">$</text>
+        <text x="75" y="75" fill="currentColor">{{ account_balance }}</text>
+      </svg>
+    {% endwith %}
   </div>
 
   {% if account.balance != account.projected_balance %}

monopyly/templates/banking/accounts_page.html

@@ -19,8 +19,8 @@
       {% set bank_accounts = bank.bank_accounts %}
       {% if bank_accounts %}
 
-        <div class="bank-block grouping">
-          <h3>{{ bank.bank_name }}</h3>
+        <div class="bank-stack group-stack">
+          <h2 class="stack-title">{{ bank.bank_name }}</h2>
 
           <div class="account-blocks box-table">
             {% for account in bank_accounts %}

monopyly/templates/core/credits.html

@@ -0,0 +1,32 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  Credits
+{% endblock %}
+
+{% block header %}
+  <h1>Credits</h1>
+{% endblock %}
+
+{% block content %}
+
+  <div class="credits">
+
+    <h3>Image Credits</h3>
+    <p>
+      The chain link icon was adapted from <a href="https://commons.wikimedia.org/wiki/File:Chain_link_icon.png">Wikipedia Commons</a>.
+      The original image was created by user Mdowdell and published under the <a href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">CC BY-SA 3.0 License</a>.
+    </p>
+
+  </div>
+
+  <div class="affiliation-disclaimer">
+
+    <h3>Disclaimer</h3>
+    <p>
+      At risk of stating the obvious, given that this is a <b>homemade personal finance manager</b>, the <i>Monopyly</i> app is in no way affiliated, associated, authorized, endorsed by, or in any way officially connected with Hasbro, the present publisher and trademark holder of the board game MONOPOLY.
+    </p>
+
+  </div>
+
+{% endblock %}

monopyly/templates/core/errors/400.html

@@ -0,0 +1,8 @@
+{% extends "core/errors/error.html" %}
+
+
+{% block custom_error_content %}
+
+  <p>Nice try, but something went wrong in that request.</p>
+
+{% endblock %}