diff --git a/sass/Makefile b/sass/Makefile new file mode 100644 index 0000000..c97ef13 --- /dev/null +++ b/sass/Makefile @@ -0,0 +1,4 @@ +SRC=$(wildcard *.scss) + +all: $(SRC) + sass include.scss ../static/css/site.css diff --git a/static/sass/committee.scss b/sass/committee.scss similarity index 100% rename from static/sass/committee.scss rename to sass/committee.scss diff --git a/static/sass/details.scss b/sass/details.scss similarity index 74% rename from static/sass/details.scss rename to sass/details.scss index f6bf596..4017150 100644 --- a/static/sass/details.scss +++ b/sass/details.scss @@ -13,28 +13,30 @@ img { border: 1px solid $midgray; - max-width: 100%; + width: 100%; } } .actions { + display: flex; + flex-direction: row; + flex-wrap: wrap; margin: $pad-m 0; a { + flex: 0 0 auto; + margin-bottom: $pad-m; + margin-right: $pad-m; text-decoration: none; - font-size: 12px; - font-weight: normal; } } .details { - color: $text; + border: 1px solid $midgray; + border-radius: $pad-s; font-size: 12px; - font-weight: normal; margin: $pad-m 0; padding: $pad-l; - border-radius: $pad-s; - border: 1px solid $midgray; span { color: $midgray; diff --git a/sass/globals.scss b/sass/globals.scss new file mode 100644 index 0000000..21bfc8d --- /dev/null +++ b/sass/globals.scss @@ -0,0 +1,105 @@ +$purple: #563d7c; +$gold: #fdd017; +$lightgray: #f8f8f8; +$midgray: #969499; +$darkgray: #4b4a4d; +$text: #252526; +$shadowgray: rgba(0, 0, 0, .8); +$lightshadowgray: rgba(0, 0, 0, 0.2); + +// size constants +$pad-s: 2px; +$pad-m: 8px; +$pad-l: 16px; +$pad-xl: 36px; + +html, +body { + background-color: $lightgray; + color: $text; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif; + height: 100vh; + margin: 0; + padding: 0; + width: 100vw; +} + +body { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + + +.nav { + align-items: center; + box-shadow: 0px 3px 12px $shadowgray; + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + flex: 0 0 auto; + height: 50px; + padding: $pad-l; + background-color: $purple; + color: $gold; + z-index: 10; + + h3 { + font-weight: normal; + font-size: 16px; + margin: 0; + } + + a { + color: $gold; + text-decoration: none; + font-size: 16px; + margin-left: $pad-m; + &:hover { + color: darken($gold, 20%); + text-decoration: initial; + } + } +} + +.content { + align-items: center; + display: flex; + flex: 1 1 auto; + flex-direction: column; + position: relative; + overflow-y: auto; + min-height: 1; +} + +.container { + background-color: #fff; + box-shadow: 0px 3px 12px $lightshadowgray; + display: flex; + flex: 0 0 auto; + flex-direction: column; + min-height: 1; +} + +.btn { + background-color: #fff; + border-radius: $pad-s; + border: 1px solid $midgray; + box-sizing: border-box; + color: $purple; + cursor: pointer; + display: inline-block; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif; + font-size: 12px; + font-weight: normal; + padding: $pad-m $pad-l; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + + + &:hover { + background-color: lighten($purple, 35%); + } +} diff --git a/static/sass/include.scss b/sass/include.scss similarity index 100% rename from static/sass/include.scss rename to sass/include.scss diff --git a/static/sass/items.scss b/sass/items.scss similarity index 75% rename from static/sass/items.scss rename to sass/items.scss index a692c48..ea56693 100644 --- a/static/sass/items.scss +++ b/sass/items.scss @@ -1,15 +1,17 @@ section { color: $midgray; + flex: 0 0 auto; font-weight: lighter; font-size: 16px; - margin-top: 2*$pad-xl; - margin-bottom: -2*$pad-xl + $pad-l; - max-width: 960px; - margin-right: auto; - margin-left: auto; + margin-top: $pad-xl; + text-align: center; } .items { + display: flex; + flex-direction: column; + flex: 1 0 auto; + a.page { display: inline-block; margin: $pad-m; @@ -30,13 +32,33 @@ section { } } +.pagination { + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: $pad-l; + padding: 0 $pad-xl; + width: 100%; +} + .item { + display: flex; + flex-direction: column; padding: $pad-m $pad-xl; margin: 0px; border-bottom: 1px solid $midgray; box-sizing: border-box; width: 100%; + + .committeeAndCost { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + } + .committee { color: $midgray; font-size: 12px; @@ -49,10 +71,11 @@ section { } .details-row { - margin: $pad-m 0; + color: $text; font-size: 16px; font-weight: lighter; - color: $text; + line-height: 24px; + margin: $pad-m 0; padding: 0px; b { @@ -103,12 +126,6 @@ section { } } -@media (min-width: 800px) { - .item .cost { - float: right; - } -} - .empty { margin: $pad-l; color: $midgray; @@ -141,4 +158,9 @@ $button-size: 24px; height: 36; font-size: 28; } + + &:hover { + background-color: darken($purple, 10%); + box-shadow: 0 0 12px rgba(0,0,0,.16),0 12px 12px rgba(0,0,0,.32); + } } diff --git a/static/sass/login.scss b/sass/login.scss similarity index 84% rename from static/sass/login.scss rename to sass/login.scss index a5ab8d3..1a00c6c 100644 --- a/static/sass/login.scss +++ b/sass/login.scss @@ -14,17 +14,18 @@ body.login { h3 { font-size: 24px; - margin-bottom: $pad-m; + margin-bottom: 0; } h2 { font-size: 28px; - margin-top: -$pad-l; + margin: 0 auto; } .btn { background-color: $gold; color: $purple; + font-size: 16px; &:hover { background-color: darken($gold, 15%); diff --git a/sass/new.scss b/sass/new.scss new file mode 100644 index 0000000..20588ee --- /dev/null +++ b/sass/new.scss @@ -0,0 +1,54 @@ +h1 { + font-size: 18px; + font-weight: lighter; + color: $purple; + margin: $pad-l; +} + +hr { + margin: $pad-l; + color: $midgray; +} + +.inputRow { + box-sizing: border-box; + margin-bottom: $pad-l; + padding: 0 $pad-xl; + + label { + color: $midgray; + font-weight: bold; + font-size: 12px; + margin-left: $pad-s; + } + + input, + select, + textarea { + box-sizing: border-box; + border: 1px solid $midgray; + font-size: 16px; + line-height: 24px; + padding: $pad-s; + width: 100%; + } + + textarea { + resize: vertical; + } +} + +.editActions { + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 $pad-xl; + width: 100%; +} + +.notes { + color: $midgray; + font-size: 12px; + margin: $pad-l $pad-xl; +} diff --git a/static/css/site.css b/static/css/site.css index 3ba8272..f8e2468 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -1,178 +1,254 @@ +html, body { - color: #252526; - font-family: sans-serif; background-color: #f8f8f8; - padding-bottom: 0px; - margin: 0px 16px; } + color: #252526; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; + height: 100vh; + margin: 0; + padding: 0; + width: 100vw; +} + +body { + box-sizing: border-box; + display: flex; + flex-direction: column; +} .nav { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 50px; + align-items: center; + box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.8); box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + flex: 0 0 auto; + height: 50px; padding: 16px; background-color: #563d7c; color: #fdd017; - box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.8); - z-index: 10; } - .nav h3 { - font-weight: lighter; - font-size: 16px; - margin: 0; } - .nav a { - float: right; - color: #fdd017; - text-decoration: none; - font-size: 16px; - margin-left: 8px; } + z-index: 10; +} +.nav h3 { + font-weight: normal; + font-size: 16px; + margin: 0; +} +.nav a { + color: #fdd017; + text-decoration: none; + font-size: 16px; + margin-left: 8px; +} +.nav a:hover { + color: #ad8b01; + text-decoration: initial; +} -.pull-right { - float: right; - margin: 16px; } +.content { + align-items: center; + display: flex; + flex: 1 1 auto; + flex-direction: column; + position: relative; + overflow-y: auto; + min-height: 1; +} .container { - margin-bottom: 36; } - .container > div { - margin-left: auto; - margin-right: auto; - margin-top: 64px; - max-width: 960; - background-color: #fff; - border: solid 1px #969499; - box-shadow: 0px 3px 9px rgba(51, 51, 51, 0.8); } + background-color: #fff; + box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.2); + display: flex; + flex: 0 0 auto; + flex-direction: column; + min-height: 1; +} .btn { + background-color: #fff; border-radius: 2px; border: 1px solid #969499; + box-sizing: border-box; color: #563d7c; + cursor: pointer; display: inline-block; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: normal; padding: 8px 16px; text-decoration: none; vertical-align: middle; - white-space: nowrap; } - .btn:hover { - background-color: #b19dcf; } + white-space: nowrap; +} +.btn:hover { + background-color: #b19dcf; +} .approve { - padding: 36; } - .approve .status { - font-size: 16px; - color: #969499; - font-weight: lighter; } - .approve .status span { - color: #252526; } - .approve img { - border: 1px solid #969499; - max-width: 100%; } + padding: 36px; +} +.approve .status { + font-size: 16px; + color: #969499; + font-weight: lighter; +} +.approve .status span { + color: #252526; +} +.approve img { + border: 1px solid #969499; + width: 100%; +} .actions { - margin: 8px 0; } - .actions a { - text-decoration: none; - font-size: 12px; - font-weight: normal; } + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 8px 0; +} +.actions a { + flex: 0 0 auto; + margin-bottom: 8px; + margin-right: 8px; + text-decoration: none; +} .details { - color: #252526; + border: 1px solid #969499; + border-radius: 2px; font-size: 12px; - font-weight: normal; margin: 8px 0; padding: 16px; - border-radius: 2px; - border: 1px solid #969499; } - .details span { - color: #969499; } +} +.details span { + color: #969499; +} form.committee { border-bottom: 1px solid #969499; padding: 16px; - margin-bottom: 0; } + margin-bottom: 0; +} section { color: #969499; + flex: 0 0 auto; font-weight: lighter; font-size: 16px; - margin-top: 72; - margin-bottom: -56px; - max-width: 960px; - margin-right: auto; - margin-left: auto; } + margin-top: 36px; + text-align: center; +} +.items { + display: flex; + flex-direction: column; + flex: 1 0 auto; +} .items a.page { display: inline-block; margin: 8px; text-decoration: none; color: #563d7c; font-size: 12px; - float: right; } + float: right; +} .items a.page:hover { - text-decoration: underline; } + text-decoration: underline; +} .items a.page.empty { color: #969499; text-decoration: none; - cursor: default; } + cursor: default; +} + +.pagination { + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 16px; + padding: 0 36px; + width: 100%; +} .item { - padding: 8px 36; + display: flex; + flex-direction: column; + padding: 8px 36px; margin: 0px; border-bottom: 1px solid #969499; box-sizing: border-box; - width: 100%; } - .item .committee { - color: #969499; - font-size: 12px; - font-weight: bold; - margin: 0px; } - .item a { - text-decoration: none; } - .item .details-row { - margin: 8px 0; - font-size: 16px; - font-weight: lighter; - color: #252526; - padding: 0px; } - .item .details-row b { - color: #4b4a4d; } - .item .details-row em { - color: #969499; - margin: 0 2px; } - .item .status { - color: #969499; - font-size: 12px; - margin: 0px; } - .item .cost { - display: inline-block; - text-align: center; - width: 120px; - height: 24px; - font-size: 12px; - color: #969499; - border-radius: 2px; - border: 1px solid #969499; - box-sizing: border-box; - padding: 4px; - margin: 4px 0; } - .item .approved { - background-color: #ffd9d9; } - .item .processed { - background-color: #d9ffd9; } - .item .rejected { - background-color: #969499; - color: #f8f8f8; } - .item .newItem { - background-color: #fff7d9; } + width: 100%; +} +.item .committeeAndCost { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.item .committee { + color: #969499; + font-size: 12px; + font-weight: bold; + margin: 0px; +} +.item a { + text-decoration: none; +} +.item .details-row { + color: #252526; + font-size: 16px; + font-weight: lighter; + line-height: 24px; + margin: 8px 0; + padding: 0px; +} +.item .details-row b { + color: #4b4a4d; +} +.item .details-row em { + color: #969499; + margin: 0 2px; +} +.item .status { + color: #969499; + font-size: 12px; + margin: 0px; +} +.item .cost { + display: inline-block; + text-align: center; + width: 120px; + height: 24px; + font-size: 12px; + color: #969499; + border-radius: 2px; + border: 1px solid #969499; + box-sizing: border-box; + padding: 4px; + margin: 4px 0; +} +.item .approved { + background-color: #ffd9d9; +} +.item .processed { + background-color: #d9ffd9; +} +.item .rejected { + background-color: #969499; + color: #f8f8f8; +} +.item .newItem { + background-color: #fff7d9; +} -@media (min-width: 800px) { - .item .cost { - float: right; } } .empty { margin: 16px; color: #969499; font-weight: lighter; font-size: 16px; - text-align: center; } + text-align: center; +} .btn-floating { position: fixed; @@ -186,78 +262,98 @@ section { z-index: 1000; border-radius: 50%; text-align: center; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); } - .btn-floating span { - display: block; - width: 36; - height: 36; - font-size: 28; } + box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); +} +.btn-floating span { + display: block; + width: 36; + height: 36; + font-size: 28; +} +.btn-floating:hover { + background-color: #3e2c5a; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.16), 0 12px 12px rgba(0, 0, 0, 0.32); +} body.login { background-color: #563d7c; - color: #fdd017; } + color: #fdd017; +} .login { text-align: center; - color: #fdd017; } - .login div { - margin-top: 30%; } - .login h3 { - font-size: 24px; - margin-bottom: 8px; } - .login h2 { - font-size: 28px; - margin-top: -16px; } - .login .btn { - background-color: #fdd017; - color: #563d7c; } - .login .btn:hover { - background-color: #c69f02; } + color: #fdd017; +} +.login div { + margin-top: 30%; +} +.login h3 { + font-size: 24px; + margin-bottom: 0; +} +.login h2 { + font-size: 28px; + margin: 0 auto; +} +.login .btn { + background-color: #fdd017; + color: #563d7c; + font-size: 16px; +} +.login .btn:hover { + background-color: #c69f02; +} h1 { font-size: 18px; font-weight: lighter; color: #563d7c; - margin: 16px; } + margin: 16px; +} hr { - margin: 16px; - color: #969499; } - -form div { - margin: 16px; } - form div * { - display: inline-block; } - form div label { - width: 180px; - color: #252526; - vertical-align: top; } - form div input, form div select, form div textarea { - width: 180px; } - form div.clear { - margin: -16px 0; - width: 180px; } - form div.clear:after { - content: ""; - display: table; - clear: both; } - -.rcol { margin: 16px; color: #969499; - font-weight: lighter; } +} -@media (min-width: 430px) { - form div { - width: 376px; } - form div label { - text-align: right; } - form div input, form div select, form div textarea { - width: 180px; - float: right; } } -@media (min-width: 800px) { - .rcol { - float: right; - width: 40%; } } +.inputRow { + box-sizing: border-box; + margin-bottom: 16px; + padding: 0 36px; +} +.inputRow label { + color: #969499; + font-weight: bold; + font-size: 12px; + margin-left: 2px; +} +.inputRow input, +.inputRow select, +.inputRow textarea { + box-sizing: border-box; + border: 1px solid #969499; + font-size: 16px; + line-height: 24px; + padding: 2px; + width: 100%; +} +.inputRow textarea { + resize: vertical; +} + +.editActions { + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 36px; + width: 100%; +} + +.notes { + color: #969499; + font-size: 12px; + margin: 16px 36px; +} /*# sourceMappingURL=site.css.map */ diff --git a/static/sass/Makefile b/static/sass/Makefile deleted file mode 100644 index 0d2a3fb..0000000 --- a/static/sass/Makefile +++ /dev/null @@ -1,4 +0,0 @@ -SRC=$(wildcard *.scss) - -all: $(SRC) - sass include.scss ../css/site.css diff --git a/static/sass/globals.scss b/static/sass/globals.scss deleted file mode 100644 index 0b78935..0000000 --- a/static/sass/globals.scss +++ /dev/null @@ -1,86 +0,0 @@ -$purple: #563d7c; -$gold: #fdd017; -$lightgray: #f8f8f8; -$midgray: #969499; -$darkgray: #4b4a4d; -$text: #252526; -$shadowgray: rgba(0, 0, 0, .8); - -// size constants -$pad-s: 2px; -$pad-m: 8px; -$pad-l: 16px; -$pad-xl: 36; - -body { - color: $text; - font-family: sans-serif; - background-color: $lightgray; - padding-bottom: 0px; - margin: 0px $pad-l; -} - -.nav { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 50px;; - box-sizing: border-box; - padding: 16px; - background-color: $purple; - color: $gold; - box-shadow: 0px 3px 12px $shadowgray; - z-index: 10; - - h3 { - font-weight: lighter; - font-size: 16px; - margin: 0; - } - - a { - float: right; - color: $gold; - text-decoration: none; - font-size: 16px; - margin-left: $pad-m; - } -} - -.pull-right { - float: right; - margin: $pad-l; -} - -.container { - margin-bottom: $pad-xl; - - & > div { - margin-left: auto; - margin-right: auto; - margin-top: 64px; - max-width: 960; - background-color: #fff; - border: solid 1px $midgray; - box-shadow: 0px 3px 9px lighten($shadowgray, 20%); - } - -} - -.btn { - border-radius: $pad-s; - border: 1px solid $midgray; - color: $purple; - - display: inline-block; - padding: $pad-m $pad-l; - text-decoration: none; - vertical-align: middle; - white-space: nowrap; - - - &:hover { - background-color: lighten($purple, 35%); - } -} diff --git a/static/sass/new.scss b/static/sass/new.scss deleted file mode 100644 index 60fd399..0000000 --- a/static/sass/new.scss +++ /dev/null @@ -1,74 +0,0 @@ -h1 { - font-size: 18px; - font-weight: lighter; - color: $purple; - margin: $pad-l; -} - -hr { - margin: $pad-l; - color: $midgray; -} - - -form { - div { - margin: $pad-l; - - * { - display: inline-block; - } - - label { - width: 180px; - color: $text; - vertical-align: top; - } - - input, select, textarea { - width: 180px; - } - - &.clear { - margin: -$pad-l 0; - width: 180px; - } - - &.clear:after { - content: ""; - display: table; - clear: both; - } - } -} - -.rcol { - margin: $pad-l; - color: $midgray; - font-weight: lighter; -} - -@media (min-width: 430px) { - form { - div { - width: 376px; - - - label { - text-align: right; - } - - input, select, textarea { - width: 180px; - float: right; - } - } - } -} - -@media (min-width: 800px) { - .rcol { - float: right; - width: 40%; - } -} diff --git a/templates/boilerplate.html b/templates/boilerplate.html index 9d1d1f9..dc16857 100644 --- a/templates/boilerplate.html +++ b/templates/boilerplate.html @@ -9,15 +9,19 @@
- logout - {% if fincom %} - manage - {% endif %}

The Aaron Gutierrez, '17, Fincom Web App

+
+ {% if fincom %} + manage + {% endif %} + logout +
-
- {% block main %} - {% endblock %} +
+
+ {% block main %} + {% endblock %} +
{% block bottom %} {% endblock %} diff --git a/templates/fincom/index.html b/templates/fincom/index.html index 8372d43..cbf9811 100644 --- a/templates/fincom/index.html +++ b/templates/fincom/index.html @@ -11,13 +11,13 @@

Delta Beta Chapter

Fincom Webapp

- {% if error %} -

{{ error }}

- {% endif %} - Login with your AndrewID + {% if error %} +

{{ error }}

+ {% endif %}
diff --git a/templates/items/details.html b/templates/items/details.html index 60dae23..5310573 100644 --- a/templates/items/details.html +++ b/templates/items/details.html @@ -8,7 +8,7 @@
{% if I.details %}
- Details:
+ Details
{{ I.details }}
{% endif %}
Status: {{ I.statusText }}
@@ -23,7 +23,9 @@ Back
- + + Click to view +
diff --git a/templates/items/edit.html b/templates/items/edit.html index 128040c..659519b 100644 --- a/templates/items/edit.html +++ b/templates/items/edit.html @@ -5,25 +5,24 @@ {% block main %}
-Back

Edit Reimbursements

{% csrf_token %} -
+
-
+
-
+
-
+
-
+
-
-
+
- -
+
-
-
- -
+
+ Back +
diff --git a/templates/items/item-email.html b/templates/items/item-email.html index e86b60d..ff5219e 100644 --- a/templates/items/item-email.html +++ b/templates/items/item-email.html @@ -30,7 +30,7 @@ Please review and then approve or reject the request from {{ submitter }} for {{
{% if I.approved or I.processed %} - Approved By: + Approved By: {% for u in I.approved_by.all %} {{ u.first_name }} {{ u.last_name }} {% endfor %} diff --git a/templates/items/item.html b/templates/items/item.html index aadc1d6..b7bfafc 100644 --- a/templates/items/item.html +++ b/templates/items/item.html @@ -1,18 +1,20 @@
-
- {{ I.comName }} -
- {% if I.approved %} -
- {% elif I.processed %} -
- {% elif I.rejected %} -
- {% else %} -
- {% endif %} - ${{ I.cost|floatformat:"2" }} +
+
+ {{ I.comName }}
+ {% if I.approved %} +
+ {% elif I.processed %} +
+ {% elif I.rejected %} +
+ {% else %} +
+ {% endif %} + ${{ I.cost|floatformat:"2" }} +
+
{{ I.event }}: diff --git a/templates/items/new.html b/templates/items/new.html index c215ae3..9c5d099 100644 --- a/templates/items/new.html +++ b/templates/items/new.html @@ -5,27 +5,23 @@ {% block main %}
-

Add New Reimbursements

+

New Reimbursement

-
- Make sure all information is accurate, you submit an itemized receipt, and - you select the correct committee. -
{% csrf_token %} -