From eb04321277fe3fcfae8551a5ff5754e9ea4ed2e2 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 11:05:37 -0400 Subject: [PATCH 1/6] Toggler component --- js/components/toggler.js | 28 ++++++++++++++++++++++++++++ js/index.js | 3 ++- 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 js/components/toggler.js diff --git a/js/components/toggler.js b/js/components/toggler.js new file mode 100644 index 00000000..248de40a --- /dev/null +++ b/js/components/toggler.js @@ -0,0 +1,28 @@ +export default { + name: 'toggler', + + data: function () { + return { + isVisible: false + } + }, + + render: function (createElement) { + return createElement( this.$vnode.data.tag, [ + this.$scopedSlots.default({ + isVisible: this.isVisible, + toggle: this.toggle + }) + ]) + }, + + methods: { + toggle: function (e) { + this.isVisible = !this.isVisible + } + }, + + mounted: function () { + console.log(this) + } +} diff --git a/js/index.js b/js/index.js index 4ecd6aa7..64184bc1 100644 --- a/js/index.js +++ b/js/index.js @@ -8,13 +8,14 @@ import checkboxinput from './components/checkbox_input' import DetailsOfUse from './components/forms/details_of_use' import poc from './components/forms/poc' import financial from './components/forms/financial' +import toggler from './components/toggler' Vue.use(VTooltip) - const app = new Vue({ el: '#app-root', components: { + toggler, optionsinput, textinput, checkboxinput, From 3406a90539a9827fa703753c39edfdf899b0c586 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 11:05:52 -0400 Subject: [PATCH 2/6] Increase h3 size globally --- styles/core/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 8a1db5c6..fd101e90 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -24,7 +24,7 @@ $lead-font-size: 2rem; $title-font-size: 5.2rem; $h1-font-size: 4rem; $h2-font-size: 3rem; -$h3-font-size: 2rem; +$h3-font-size: 2.3rem; $h4-font-size: 1.7rem; $h5-font-size: 1.5rem; $h6-font-size: 1.3rem; From eccd9c98f42e18dd03148f6259416029ec6ec570 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 11:06:18 -0400 Subject: [PATCH 3/6] table style fixes --- styles/elements/_tables.scss | 44 +++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index e1602dfd..a1dd7427 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -8,6 +8,28 @@ @include panel-margin; min-width: 100%; + th, td { + &.table-cell--align-right { + text-align: right; + } + + &.table-cell--shrink { + width: 1%; + } + + &.table-cell--expand { + width: 100%; + } + + &.table-cell--hide-small { + display: none; + + @include media($medium-screen) { + display: table-cell; + } + } + } + tbody { tr { th, @@ -29,32 +51,12 @@ border-bottom-style: solid; } } - - .table-cell--align-right { - text-align: right; - } - - .table-cell--shrink { - width: 1%; - } - - .table-cell--expand { - width: 100%; - } - - .table-cell--hide-small { - display: none; - - @include media($medium-screen) { - display: table-cell; - } - } } } thead { tr { - th { + th, td { @include block-list-header; display: table-cell; } From b2be63dd0fcd429bc012bcca2e59d55f41d7bdd3 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 11:16:57 -0400 Subject: [PATCH 4/6] spend table styles --- styles/sections/_reports.scss | 108 +++++++++++++++++++++++++++++++++- 1 file changed, 107 insertions(+), 1 deletion(-) diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index 77383d8c..cc72ca73 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -6,13 +6,20 @@ } .funding-summary-row__col { - @include grid-pad; @include media($medium-screen) { + @include grid-pad; flex-grow: 1; display: flex; flex-direction: row; flex-basis: 50%; + + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } } align-items: stretch; @@ -171,3 +178,102 @@ } } } + + +.spend-table { + .spend-table__header { + @include panel-base; + @include panel-theme-default; + border-bottom: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + padding: $gap * 2; + + .spend-table__title { + @include h3; + margin: 0; + flex: 2; + } + + .spend-table__month-select { + margin: 0; + flex: 1; + } + } + + table { + th, td { + white-space: nowrap; + + button { + margin: 0; + } + + &.current-month { + background-color: $color-aqua-lightest; + } + + &.previous-month { + opacity: 0.65; + } + + &.meter-cell { + padding-left: 0; + + @include media($medium-screen) { + min-width: 12rem; + } + + meter { + width: 100%; + height: 3rem; + background: $color-white; + position: relative; + display: none; + + @include media($medium-screen) { + display: block; + } + + &::-webkit-meter-bar { + background: $color-white; + } + + &::before { + content: attr(title); + position: absolute; + top: .5rem; + left: $gap; + @include h5; + color: $color-white; + } + } + } + } + + .spend-table__workspace { + th, td { + font-weight: bold; + } + } + + .spend-table__project { + .spend-table__project__toggler { + @include icon-link-color($color-black-light, $color-gray-lightest); + margin-left: -$gap; + + .icon { + @include icon-size(12); + margin-right: $gap; + } + } + + .spend-table__project__env { + margin-left: $gap; + } + } + } +} From c6397c34ec48b0e855ba13cf3267751873f51064 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 11:17:13 -0400 Subject: [PATCH 5/6] spend table markup --- templates/workspace_reports.html | 106 +++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) diff --git a/templates/workspace_reports.html b/templates/workspace_reports.html index 3f15244d..d32cbec4 100644 --- a/templates/workspace_reports.html +++ b/templates/workspace_reports.html @@ -1,6 +1,7 @@ {% extends "base_workspace.html" %} {% from "components/alert.html" import Alert %} +{% from "components/icon.html" import Icon %} {% block workspace_content %} @@ -85,4 +86,109 @@ +
+
+

Total spend per month

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Spending scopeApril 2018May 2018June 2018
Workspace Total$58,000$60,000$62,000 + +
+
+ {% endblock %} From 3c20053268286ea1a417d78da682380f7d9ec49d Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 22 Aug 2018 13:29:25 -0400 Subject: [PATCH 6/6] remove unnecessary mounted function --- js/components/toggler.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/js/components/toggler.js b/js/components/toggler.js index 248de40a..74093dd3 100644 --- a/js/components/toggler.js +++ b/js/components/toggler.js @@ -20,9 +20,5 @@ export default { toggle: function (e) { this.isVisible = !this.isVisible } - }, - - mounted: function () { - console.log(this) } }