Pre-Election Reporting Dates Template #3227

johnnyporkchops · 2019-10-02T20:22:13Z

Summary (required)

This is the full-width page Wagtail template and accompanying JS that will allow us to achieve the mocked up experience and responsive design in issue #3016

Resolves Design a new table in Wagtail to display the 2020 congressional pre-primary reports info #3016
Include a summary of proposed changes.

Related PR: Closing #3188 in favor of this PR

Impacted areas of the application

modified: fec/static/scss/components/_table-styles.scss
modified: home/models.py
modified: ../fec/static/js/polyfills.js
modified: ../package-lock.json
modified: ../package.json
modified: fec/templates/base.html

new: fec/static/js/pages/reporting-dates-tables.js
new: home/migrations/0105_auto_20191002_1534.py
new: home/templates/home/full_width_page.html
new: home/migrations/0105_auto_20191002_1534

To Do: (All but the first one here are easy fixes)

Resolve issue with using accordion on this page. Accordion does not work for the All footnotes section. data-init.js (required for the A11Y dialog) interferes with the accordion trigger. I have left the native HTML5 Details element here for now.
Tweak any styling or design changes requested by @jonella
Clean up JS, review comments for brevity and clarity
Decide the cell-border color that works for both white and zebra-striped rows
switch hex colors in SCSS with proper variables (ie: #ddd becomes $gray-medium or whatever)
SCSS - Remove as many !important rules as possible - some may not be necessary

Screenshots

Screenshots to come soon

How to test

Checkout feature/3016-reporting-dates-table-template
Steps 2 through 6 are designed to keep your local cfdm_cms_test database in tact for working with other branches. You can forego this and just test this on feature.

craetedb cfdm_cms_test_2019
Get the latest database dump from Google drive
pg_restore --dbname cfdm_cms_test_2019 --no-acl --no-owner <LOCAL PATH TO DUMP FILE NAME>
export DATABASE_URL=postgresql://:@/cfdm_cms_test_2019 (see step 14 to point back)
./manage.py migrate

CD to /fec-cms and rm -rf node_modules
npm install
npm run build
cd to fec-cms/fec/ and ./manage.py runserver
go to 127.0.0.1/admin
create a page of type FullWidthPage
create three html blocks and paste in the sections from the attached files into the three blocks. This step simulates the content team members copy/pasting from Excel but leaves out the actual spreadsheet part here.
sample-data.txt
When you are done, point your local database env var back to export cfdm_cms_test:
export DATABASE_URL=postgresql://:@/cfdm_cms_test or if you use a bash profile with your database env var saved, just run:
unset DATABASE_URL

codecov-io · 2019-10-02T21:25:00Z

Codecov Report

Merging #3227 into develop will increase coverage by 0.01%.
The diff coverage is 87.5%.

@@             Coverage Diff             @@
##           develop    #3227      +/-   ##
===========================================
+ Coverage     74.6%   74.62%   +0.01%     
===========================================
  Files          120      120              
  Lines         7160     7168       +8     
  Branches       633      633              
===========================================
+ Hits          5342     5349       +7     
- Misses        1818     1819       +1

Impacted Files	Coverage Δ
fec/home/models.py	`87.59% <87.5%> (-0.01%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b7192d...843f3d7. Read the comment docs.

patphongs · 2019-10-04T01:42:50Z

fec/home/templates/home/full_width_page.html

+{% endblock %}
+
+<article class="main container">
+


Can you add the main title in here? <h1 class="heading--main">{{ self.title }}</h1>

patphongs · 2019-10-04T02:01:56Z

fec/fec/static/scss/components/_table-styles.scss

+      border: none;
+      border-bottom: 1px solid $gray-light !important;
+      position: relative;
+      font-weight: bold;


Should this be removed? It's making the whole row bold in mobile and I'm assuming we only want the .th_append to be bold in mobile?

According to the mockup, I think they are supposed to be bold
https://user-images.githubusercontent.com/31663028/64990128-27c1fb00-d89d-11e9-8d89-57055218bbb5.png

I think we only want the column names to be bold, not the dates.

JonellaCulmer

I don't think we want the "All footers" section to be in an accordion. I'm not sure how it impacts how this page is printed, but that's a concern for Info. I don't mind having the footers all there in the event that some of our users find clicking on the numbers/symbols difficult to do for accessibility reasons. But I'm open to discussing it further. If we do proceed with an accordion, it has to be in our current style, which this is not.

johnnyporkchops · 2019-10-06T20:00:37Z

I think we should consider two page types for full-width page.

generic full-width page
full-width-table page( which would start out as being just for the reporting dates tables ) and eventually become a template for any tables we want to use the new mobile view option.
This way, if one wants to create a generic full width page without the dates tables, it will not include all of the javascript necessary to make the dates tables work.

patphongs · 2019-10-07T19:37:38Z

I think we should consider two page types for full-width page.

I agree, we should have two in a separate PR.

patphongs

@johnnyporkchops This looks great!

JonellaCulmer

Everything looks great! Thanks, @johnnyporkchops

rfultz · 2019-10-07T19:47:35Z

fec/fec/static/scss/components/_table-styles.scss

+  tr {
+    display: table-row ;
+    &.row_display {
+      display: table-row;


It isn't breaking anything but do we need this twice?

rfultz · 2019-10-07T19:49:31Z

fec/fec/static/scss/components/_table-styles.scss

+    border: 1px solid $gray-light;
+
+      &:first-child {
+        border-left:none;


What does the linter say about spaces after colons? It only affects anything when we're searching the code looking for something specific, like "border: "—really minor thing.

rfultz · 2019-10-07T19:51:18Z

fec/fec/static/scss/components/_table-styles.scss

+  }
+
+  tr.footnote_row {
+    /*background: $inverse !important;*/


Can we remove the comments of unused code? (Or explain why we want them? (I know I add and then forget too many comments))

rfultz · 2019-10-07T19:53:43Z

fec/fec/templates/base.html

+        pfScriptElem.src = "{% asset_for_js 'polyfills.js' %}";
+        document.head.appendChild(pfScriptElem);
+      }
+    </script>


Thank you! Sorry I forgot that one.

johnnyporkchops added 2 commits October 2, 2019 15:42

model, templat, migratione, JS, polyfills,scss

c0ae117

linter errors not caugh first time

4d8596c

johnnyporkchops mentioned this pull request Oct 2, 2019

Feature/3016 reporting dates table template #3188

Closed

6 tasks

move abortcontroller-polyfill to dev-dependencies

53dfba8

johnnyporkchops added 2 commits October 2, 2019 19:08

commit package-lock.json

80ec3e6

redo migration and clean up some JS

85b59ce

JonellaCulmer self-requested a review October 3, 2019 17:31

johnnyporkchops added 4 commits October 3, 2019 14:51

committing migration

d698c6b

fix linter errors clean up comments

0470eca

deleting redundent migration

3e3e342

temp modify tasks for feature-space deploy

d314c56

patphongs reviewed Oct 4, 2019

View reviewed changes

add img for x-close btn

042c377

johnnyporkchops requested a review from rfultz October 4, 2019 12:55

johnnyporkchops added 2 commits October 4, 2019 08:56

temp modify tasks for feature-space deploy

f02db3a

added title, SCSS vars

91d34d7

JonellaCulmer requested changes Oct 4, 2019

View reviewed changes

remove bold on cells in mobile

717cc51

johnnyporkchops added 7 commits October 6, 2019 22:47

remove unused script ref, scss changes

d9f4d0b

revert template and tasks.py

81f10b5

edit tasks.py for feature-space deploy

bba6c84

remove collapsible static footnotes div

e7d775e

revert tasks.py

5483502

edit tasks.py for feature deploy

f8826ef

remove headers links on first td

215364f

patphongs approved these changes Oct 7, 2019

View reviewed changes

revert tasks.py

843f3d7

JonellaCulmer approved these changes Oct 7, 2019

View reviewed changes

rfultz approved these changes Oct 7, 2019

View reviewed changes

JonellaCulmer merged commit 47679e1 into develop Oct 7, 2019

This was referenced Oct 7, 2019

Feature/3016 pre election reporting dates tables template #3248

Merged

[DO NOT MERGE]Resolve tech debt related to @extend rule on tables, new CMS table class #3115

Closed

johnnyporkchops mentioned this pull request Oct 22, 2019

Feature/pre-election tables, stripe rows by state #3288

Merged

This was referenced Nov 12, 2019

Tech debt related to @extend rule and structure of current table classes #2864

Closed

Refactor table styles, resolve tech debt related to @extend rule #3348

Merged

johnnyporkchops mentioned this pull request Sep 27, 2024

Tech-debt: Remove reporting-dates-tables.js by converting legacy tables to use new template and JS #6491

Closed

57 tasks

johnnyporkchops mentioned this pull request Oct 11, 2024

Remove legacy reporting dates JS #6512

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pre-Election Reporting Dates Template #3227

Pre-Election Reporting Dates Template #3227

johnnyporkchops commented Oct 2, 2019 •

edited by patphongs

Loading

codecov-io commented Oct 2, 2019 •

edited

Loading

patphongs Oct 4, 2019

patphongs Oct 4, 2019

johnnyporkchops Oct 4, 2019

JonellaCulmer Oct 4, 2019

JonellaCulmer left a comment

johnnyporkchops commented Oct 6, 2019

patphongs commented Oct 7, 2019

patphongs left a comment

JonellaCulmer left a comment

rfultz Oct 7, 2019

rfultz Oct 7, 2019

rfultz Oct 7, 2019

rfultz Oct 7, 2019

Pre-Election Reporting Dates Template #3227

Pre-Election Reporting Dates Template #3227

Conversation

johnnyporkchops commented Oct 2, 2019 • edited by patphongs Loading

Summary (required)

Impacted areas of the application

Screenshots

How to test

codecov-io commented Oct 2, 2019 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JonellaCulmer left a comment

Choose a reason for hiding this comment

johnnyporkchops commented Oct 6, 2019

patphongs commented Oct 7, 2019

patphongs left a comment

Choose a reason for hiding this comment

JonellaCulmer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnnyporkchops commented Oct 2, 2019 •

edited by patphongs

Loading

codecov-io commented Oct 2, 2019 •

edited

Loading