Plan Library Documentation

The Plan Library is a place to propose and analyze not-necessarily enacted redistricting plans, as opposed to the historical state pages (linked from the front page) which outline the history of a state's districts.

Overall Structure of the Library

Right now the Library is a static set of pages.

The Library Index

The index is at /library and contains the three files: index.js6 for any page-specific JavaScript index.scss for any page-specific CSS index.src.html for the markup

These three files are compiled on build, to create everything you see at {siteurl}/library (ie dev.planscore.org/library in development, and planscore.campaignlegal.org/library once it goes live)

###Recent Plans This section shares the cards.scss styles with the state library pages. To work properly, you'll be inserting list items into an unordered list:

<div class="card-deck">
  <ul>
    <!--Cards go here-->
  </ul>
</div>

The card itself can be copied here:

<!--BEGIN Card-->
<li class="card">
  <div class="state">
    <h3 class="state-name enacted">STATE_NAME</h3>
  </div>
  <div class="summary">
    <a href="PLAN_URL">View this STATE_NAME PLAN_TYPE</a>
    <div class="byline">Authored by: AUTHOR</div>
    <p>
      DESCRIPTION
    </p>
  </div>
  <div class="status">
    Added to PlanScore:
    <time datetime="2001-01-31">DATE_TIME</time>  
  </div>
</li>
<!--END Card-->

The values you need to find+replace are: STATE_NAME

PLAN_URL

PLAN_TYPE

AUTHOR

DESCRIPTION

DATE_TIME (Ex: "Jan 31st, 2001" as well as the datetime= property 2001-01-31)

The no_plans page is default

This page is where visitors are led when they choose a state without a unique plan page.

There is code in the global.js file (in the root), the goToStateLibraryIfExists() function, which hijacks the href destination, does a GET request to see if that state page exists, and if it does not, it redirects to this no_plans page.

potential features

One quick feature that could be added is to add a ?state_name query string, then you could pick that up in the no_plans page and use it to say which state doesn't have a plan.

Further down the road, this pattern should be abandoned entirely, in favor of the backend providing a list of which states have pages, and using the correct href within library/index.js6 initStatePicker.

State Library pages

Because there is no logic to generate state pages, they're each unique and managed one by one.

A state page should contain a blurb of information about the state, a map, and then a series of cards. Each card represents a potential proposed plan for that state.

Making a new state library page

1. There is a folder called library/_statetemplate which you can duplicate and rename to the state name, lowercase.

2. Open the index.src.html file within that new state folder and Find and Replace STATE_NAME with the actual state name, Capitalized. There is a button near the end where it is within an href= property, which should be in lowercase.

3. Replace the <!-- INTRO comment with an actual introduction or summary of the state.

4. Insert a map embed, by pasting over <!-- INSERT MAP EMBED CODE HERE, WITH class="map" --> then add class="map" to the embed, and modify the size to width="344" height="197". The demo pages use google maps, and the class is added right to the iframe, like so: <iframe class="map" src=... width="344" height="197" ...

5. If you need more than one plan, copy the card html, starting with <li class="card"> ending and including </li> and paste it into the section it pertains to US House State Senate or State House (each is labelled with a comment). It should go between a <ul> and the </ul> but outside of all other <li></li> tags.

6. Customize each card, by finding and replacing the unique values:

   PLAN_URL: url of plan on live site, typically /plan.html?TIMESTAMP (ex: /plan.html?20210629T164045.985413296Z which would lead to https://planscore.campaignlegal.org/plan.html?20210629T164045.985413296Z

   AUTHOR: organization or person who authored this plan

   DATETIME: The date the plan was uploaded, be sure to update both the property (for accessibility) and the text itself (for readability)

   PLAN_NOTES: Anything you want to say about the plan.

7. For enacted plan, there is a comment ENACT to add the class "enacted" to the <h3> of the STATE_NAME. This adds a small red badge:

<h3 class="state-name enacted">Colorado</h3>

Okay so now your page is looking good, but it won't be built so you can't see it.

8. Open webpack.config.js
9. Scroll on down to LIBRARY_JS6_FILES and add the ./library/STATE_NAME/index.js6, to the array.
10. Run npm run build or restart your npm run serve

The new state library page is now part of your build - try it out!

The Announcement

The announcement appears at the top of every page until a user dismisses it.

Once they do, it will stay closed for up to a week, which is stored in a cookie.

To update it, you need to edit the global.js JavaScript file, which contains JavaScript that every page needs.

Line 30 is the message itself Announcement text! in the example above. Line 31 has the html for the call to action. Update the href= to point it to any URL you'd like. Line 32 has the call to action text itself "Call to action!" in the example above.