coyote-team / coyote Goto Github PK

ready to review queue should have describedby pointing to descriptions

This is an outline of the "low-hanging fruit" that will get coyote looking more like the design. For all of this please refer to the design sketches added via dropbox link at the bottom. 


First, all views and containers should be white background only.

Most views (list and object)

• B&W styling of check boxes WONTFIX browser standards vary, overly complicated
• B&W styling for dropdowns WONTFIX browser standards vary, overly complicated
• B&W styling of x to remove an assignment
• Remove background highlights, everything white
• Black row lines, single pixel all white background
• Assign on Queue page should be white w/ black outline (secondary button),
• Total numbers next to headers moved to be inline text, E.g. "Total: ####" or "Undescribed Images Queue: ####" (no grey label-like styling, inline the number to the header separated by a semicolon)
• ? all buttons should be this treatment except labels and instances of primary buttons, which are inverse black with white text. I am thinking list views use secondary buttons (EDIT/DELETE) Happy to discuss.
• View/Edit/Delete– use B&W buttons instead of icons
, no "view"

Admin view

• Approve/Reject/Edit button styling, use B&W buttons instead of icons
• container for description styling (white background black outline only
• Text styling on author
• ? Style Assign to button (smaller button, white with black outline)
• ? Number of descriptions, black outline, white background, black number


Page level (description/image)

• Remove info text from interface, this should go on a singular help page
• Style of WYSIWYG editor
• Pages should be labeled “Context”

Design Sketch for reference: 
https://www.dropbox.com/s/gzegi8q7fgp1v8f/14%20coyote%20design%20refinements%20%281%29.pdf?dl=0

New Description Design sketch next to Live (side by side):
https://www.dropbox.com/s/vpnckpo86d2cepb/Coyote%20design%20-%20mock%20up%20vs%20live%20-%20description%20page%20-%2020160924.jpg?dl=0

Thank you sorry it took a while to do a full assessment. There will be two more posts that will include things that I think we should try to do sooner than later, and then a third with the remaining work to match the design concept that contains greater complexities, such as the switch to a checkbox-based filter viewing on list pages.

• store license per description
• CC0 default, options?
• form field on edit, display with on show
• display in JSON

ref

• https://choosealicense.com/appendix/
• https://spdx.org/licenses/
• https://creativecommons.org/licenses/
• https://github.com/kmewhort/creative_commons_rails

• AJAX instant results layout for descriptions
• assign flow (should be table)
• describe flow
• RESTify remaining update/create/delete calls (see image, website)
• review flow (as transport)
• home hero and description
• typography treatment
• test use flow
• description view toggle
• descriptions table structure (use .sr-only)
• button and input styling

Other design ideas for the near to short term:

• more intense visual call to action for priority items (maybe red highlight?),
• display priority counts in queue headings on home page,
• do we want to show counts across image groups in queue headings?

Originated in #32

Hey @seeReadCode, can you please replace the Brought to you by Museum of Contemporary Art Chicago. line in the footer with Coyote is a project of the Museum of Contemporary Art Chicago. It has been generously supported by Lois and Steve Eisen.? Thanks!

Debug empty search result with large count and pagination

http://coyote.mcachicago.org/admin/users

Can this be alpha? It is very hard finding people as the list grows.

on description index and small table (see user or image)

• set max width on text
• word wrap

boolean based

This would likely make sense @sinabahram , no?

Other leaderboard component ideas:

• non-progress bar-able important metrics, such as ones that hopefully count from n to 0, e.g. the ready to review count,
• comparably show counts for top 5 describers as well as v. self,
• show badges, names for some of the bests, e.g. approval record, days active streak.

We would need agreement on the important metrics, and then a graphic treatment per metric type. Some of these ideas would require much more dev time than others to implement.

(originated in #32)

Sort by functionality for all columns in the Images list view, especially "Title" maybe related to #2 Seach by image.

Image priority boolean, priortize sort

Consider

• home page template
• image show template
• describe show template

Use the verb!

See #5

The import function was using the correct API root but the update function hasn't been, resulting in missing images.

Description Archive with thumbnail so that if image re-uploaded it could be copied over? Potential of re-linking archived descriptions to images...

Longdesc default per website (Identify default approach?)
When multiple descriptions are approved for publish (can this happen?) which description is used on the site?

Accessibility & Next Client: Testing.

• travis ci: test builds
• code climate: code quality
• coveralls: test coverage
• check to see if feed updated on codeclimate
• remove coveralls bc of test coverage in codeclimate?
• improve code quality to 3.8
• build passes?
• Update factories of models
• Set testing priorities
• create correct statuses in factory
• create correct meta in factory
• consider using airborne for JSON tests
• JSON tests for critical API endpoints (mainly images.json)
  • GET images/canonical_id filter
  • GET images/status filter & images/1
  • GET images/status default & images/1
  • GET images/priority filter
  • GET images/pagination
  • POST images
  • PUT/PATCH images/1.json
• decide how to integrate strategy tests
• https://github.com/Apipie/apipie-rails#examples-recording
• Controller tests for core actions
• controller test for PATCH to asset
• Model level tests http://everydayrails.com/2012/03/19/testing-series-rspec-models-factory-girl.html
• HTML view tests
  • Check if the valid asset lib is still working https://github.com/unboxed/be_valid_asset
  • Articulate and implement accessibility testing with Tenon
• Set coverage range benchmarks
• Resolve code quality issues listed below
• Consider Codeclimate within guard https://github.com/metavida/guard-codeclimate
• Consider Gemnasium https://gemnasium.com/
• webmock should allow code climate messages from travis

Means to adjust status in bulk

Hi, what order does the queue presented to admin represent?

Thank you!

• abstract and move this func to separate file https://github.com/coyote-team/coyote/blob/master/lib/tasks/coyote.rake
• abstract move this func to separate file] https://github.com/coyote-team/coyote/blob/master/app/models/description.rb#L79-L92
• abstract and move this funct to separate file https://github.com/coyote-team/coyote/blob/master/app/controllers/websites_controller.rb#L21-L82
• store strategy on website record
• add info to README for strategy interface usage and creation

Quick (un)assign to on image show and in table view

Logo, primary color, secondary color

Link from Coyote entry to the MCA context

Paginate descriptions and assignments on user pages

These are some modifications to improve usability while not going all the way with the design proposal, still working with the current functionality set and table view.

Tweaks to improve UI

• Use SEARCH/CLEAR buttons instead of icons below dropdown/search field block, currently magnifying glass and x
• Change thumbs up/thumbs down to APPROVE/REJECT buttons same as on admin page, white background black text (vertically stacked to keep column narrow) checkbox above this for selecting all
• Move dropdown and Field searches to the left of the table, this helps to keep content of dropdown from being cut off by column width
• Instead of underline on column header small arrow to indicate sort

If not a crazy ask at this phase to get us closer to the design proposal:

• Adjust Columns to double row hight on images in order to compact data into two rows to be able to reveal full description or caption on image view.
• Description view order of fields top row: Image, Status, Metum, Locale, Author; second row description (text), edit/delete
• Image view order of fields top row: Image, Priority, Status, Metum, Group, Tags, Date; second row caption, edit/delete (only admins can edit images)
• auto size box for writing text larger, or make default size larger?
  

Audit log of description edits

"Title" field is the caption field, update label to be caption.

Want to be able to search all content called from website for cross referencing

Reported by sina

dupe

I am posting in case y'all have good ideas around this, as it will be a common issue for collections websites.

http://coyote.mcachicago.org/images/12369
https://mcachicago.org/Collection/Items/Buckminster-Fuller-Inventions-Twelve-Around-One-1981-27
The caption isn't being pulled on collection objects.

I am checking with Tomas to see how we can get caption information from collection objects tied to the image. The trick is that captions are coming from a different source than the image and populating together on the collection object page. Fortunately context allows us to quickly see that information so it is easy enough to work around, but renders collection images un-searchable in coyote.

Thanks
A

see image/show, description/image, quickview

How should we render longdesc?

Iterate on queue layout–view layout adjustments

List view, versus medium/large thumbnail view? ACL and SC need to examine the presentation of the queues.

More to come.

It appears that Images have not been pulled since August 12, I am checking on our end to find out what changes could have caused this.

https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors

• plugin repo setup

Remaining issues moved to https://github.com/coyote-team/coyote-wp

References:

• http://wppb.io/
• https://wordpress.org/support/topic/cant-turn-off-longdesc-img-attribute

Also eventually consider:

• create wordpress.rb strategy

consider indexes, images/table, descriptions/table, descriptions/table_small

We are using https://github.com/seeread/easymarklet to simplify the iframe injection etc.

How are we injecting descriptions:

• override alt
• sighted widget (consider MCA)
• Eventually we may want to accept any objects with background images.

Clicking the bookmarklet

• with auth token available for ajax request
• displays images in a grid with describe overlays
• displays current version
• parses the website host
• and then gets website id (via get websites, then post if necessary)
• on describe click, gets image id (via get images with website id filter, then post if necessary), then opens describe window
• consider http://ignitersworld.com/lab/jsonQ.html
• allows user to dismiss overlay
• injects iframe with src of current bookmarklet
• change url method on image model to allow for absolute path without website, absolute starts with //, relative with /
• a bookmarklet generator for the home page that allows people to generate the bookmarklet code with their token in it'
• pre-populate description with alt
• add available image annotations to original page
• sighted description widget
• better error display
• message/redirect for if session not open
• design tweaks
• test across sites listed below
• check if iframe is there

Later

• add page url on follow up describes
• make overlay accessible (keyboardable, focus lock)
• move iframe focus
• accessible iframe dismissal
• how should we use group id?
• fuzzy matching for http/s?
• will need HTTPS on server, see #20
• can we remove user email/token from the bookmarklet and replace with a session check?

Short term

• 3x grid for home view
• leaderboard

Accomplished

• new fonts
• user dropdown
• fixed header
• better announcement treatment
• blue for input fields
• label treatments
• tabbed login/signup
• oo to word mark and back during page transition
• focus state for non-input keyboard v. mouse (ask sina for code)

• Chris: README instructions for install adapted from Vagrant

Previous and Next on the image level so that you don't have to go back to table

• update http://coyote.mcachicago.org/apipie/1.0/images.html with page_urls
• render a markdown file of onboarding info & instructions

Autocomplete select2 update check https://select2.github.io/announcements-4.0.html

Aria-describedby to image id on actions per row

More range of status: must have alt, must have long, independent and on per image basis (apply this to all languages)
Union of bools of alt and long, punting per locale

Aria-hidden on all icons

• width of description action placement for ready to review

Sort by status, title, priority
Sort by function available on alternate views too

This could possibly be resolved by ability to see context– #12