Design and implement citation UI

[dethe]

This is the issue for design of the UI for citation extraction.

It is not clear to me at this point whether citations will require backend support or can be done entirely on the front-end using existing data, but for now I'm assuming they will have a back-end API.

In order to integrate this into the UI of the site, the first step must be a sketch of where the integration will be and how it will work, before any development work is done. We can discuss and iterate on the sketch until folks are happy with it.

When the sketch is approved, technical considerations for implementation are:

1. Developed as a PR to be merged into the main codebase
2. Uses HTML/CSS/JS based on existing Participedia code and styles. State, if any, managed via React.

[Jetroid]

RE: Sketch

I found it easier to simply insert elements into the HTML using Inspect Element than draw a sketch. Hope that's okay. For a few of these examples I am using this icon as a standin for an icon to mean 'Cite this case'.

Integration

There are four options for integration that come to mind for me. We could implement one or many of them.

1. ) An icon near the share to social media icons:

2. ) A button at the bottom of the case:

3. ) A button near the edit this page button:

4. ) A button at the bottom of the 'data' section:

How it could work

In terms of how the UI would work, unless there are problems with it, we think that the demo worked quite nicely, ie a modal box that dims the background.

With appropriate media queries, there is no reason this wouldn't work on mobile devices:

Edited 2018/02/03 to rehost images

[jesicarson]

Thanks!

Option 2 or 4 works for me. @andreadelrio please add a "Cite this case" button to our inventory of buttons for the site. (ref: https://github.com/participedia/frontend/issues/592).

The modal box works fine too. @andreadelrio I'm sure has a standard for dimming the background (ie what we're working on for the feature tour and what we do for the login popup), should be consistent.

[scottofletcher]

Just a note from a non-tech guy (ie. disregard as you wish): the citation for PPedia articles should mirror that of Wikipedia: authorship is not attributed to the entry creator (since they might not have actually written anything) but to "Wikipedia contributors" (or, in this case, Participedia contributors). That goes for all PPedia content published as a case, method, or organization. Blog entries will be different (I presume?)

[andreadelrio]

@Jetroid For when you need to implement the button (as in option 2 and 4) you'd just need to use material-ui's RaisedButton with the classname customButton. Use property primary for dark grey buttons or secondary for red buttons.

[Jetroid]

Thanks for the info, @andreadelrio. :+1:

[cherry-ix]

Just a quick update. At present our modal citation UI looks like this:

We have added dropdown menus for selecting the formatting and export formatting of the citations (similar to what Zotero offers) along with an 'export citation' that becomes active once an export format has been selected.

We are very close to beginning integration with the participedia site.

[scottofletcher]

Sorry for pestering - can we have "Participedia contributors" as the author in the final version?

[Jetroid]

@scottofletcher Acknowledged. @mjones204's demo frontend here is drawing data from our older backend. We've already changed that for our newer version. :+1:

[scottofletcher]

Great, thanks guys!

[Jetroid]

@andreadelrio What is the standard for dimming with a modal box?

[andreadelrio]

@Jetroid I'd use the one Auth0 uses. You can see it when when you log in to the site.