Design Pattern Library

Jon Robson edited this page Jan 16, 2019 · 96 revisions

The design pattern library, audits all the different types of components that exist in the existing openlibrary codebase.

Eventually, we'd love to move these components to open library's developer design page.

Inspired by Wikimedia's style guide.

Note: this list is unstable and likely to change at any given time, while we refactor the frontend UI. If you want to help us document components, please jump in with your image uploads and documenting where these components are in use!

You can also help by contributing to the associated mega-issue #1092 and making sure the codebase reflects this document.

Components

These are components on Open Library to be made modular and documented:

Book

screen shot 2018-09-21 at 4 25 39 pm

Is used in the Carousel component to display books. Note, the button inside this component is bespoke (a book-cta) - see #1158.

ContentHead

Can appear once at the top of any page.

screen shot 2018-10-07 at 4 06 10 pm

Consists of the page title, an inline "count" and a set of tools.

Other elements can be rendered under the tools but are not part of the component.

CtaBtn

<div class="cta-btn">CTABtn</div>

screen shot 2019-01-15 at 10 25 48 pm screen shot 2019-01-15 at 10 15 16 pm

cta-btn--unavailable

screen shot 2019-01-15 at 10 14 54 pm

cta-btn--available

screen shot 2019-01-15 at 10 15 53 pm

<div class="cta-btn cta-btn--available">CTABtn</div>

with badge

<div class="cta-btn">
  Join waiting list
  <div class="cta-btn__badge">4</div>
</div>

screen shot 2019-01-16 at 8 11 39 am

Example Example 2

Cover

screen shot 2018-09-28 at 2 48 08 pm

Extremely similar to the Book compoonent. Seen on https://openlibrary.org/subjects/science

Makes use of buttonCta

ButtonBtn

screen shot 2018-09-21 at 5 12 42 pm

As seen in component PageBanner

modifiers

If this button is not large enough for add the large modifier ('btn--large')

e.g. the read ebook button on a book page

screen shot 2018-11-02 at 4 20 35 pm

notes

See #1158

ButtonGeneric

screen shot 2018-09-21 at 5 14 15 pm

As seen in the sign up button! See #1158

ButtonGhost

Appears in the iaBar

screen shot 2018-09-24 at 5 44 40 pm

ButtonBrowserDefault (was ButtonSearch) -

It is used to submit the search query. Uses slightly modified default browser styles.

Seen - https://openlibrary.org/search?q=harry+potter , https://openlibrary.org/search

search-button

ButtonCta

Styled with .cta-btn, this button is a little Dr Jekyll and Hyde in how it is defined, but it always looks similar, only varying by color.

ButtonLink

Currently used in the EditToolbar component.

screen shot 2018-10-11 at 9 40 32 am

Borrow variant

Used to indicate if a book is available for borrow

Seen - https://openlibrary.org/search?q=harry_potter

borrow

Read variant

Used to read a book from the online reader

Seen - https://openlibrary.org/search?q=sas

read

Waitlist variant

There are many form of this button and is used to join a waitlist

Seen - https://openlibrary.org/search?q=sas

join_waitlist

join_waitlist_number

BorrowBookForm

(please help document me!)

BorrowTable

A table listing BorrowTable

Used on the following pages:

Carousel

Arrows are fonts rendered via the slick library. This carousel contains several CategoryItems

Carousel

Decorated-Carousel

A decorated carousel has background:

Carousel-decorated

This is used on [the works page]:

(https://openlibrary.org/works/OL69395W/Historie_of_the_raigne_of_King_Henry_the_Seventh).

Carousel-section

A carousel section wraps a carousel and a heading.

Carousel-section

CategoryItem

screen shot 2018-09-24 at 5 40 54 pm

(appears on home page)

Chart

As on subject page

screen shot 2018-09-28 at 9 38 25 am

ChartStats

As seen on stats

screen shot 2018-11-20 at 5 38 47 pm

ColorBoxOverlay

An overlay that expands images. Visible when clicking the image of the author on their page. Author page

screen shot 2018-09-15 at 10 46 02 am

Also used when clicking the image of a book cover on a book page.

screen shot 2018-09-15 at 10 48 35 am

Also used when adding an item to a reading list via a Dropper component:

screen shot 2018-09-19 at 5 32 12 pm

(Uses rules #colorbox, #cboxOverlay, #cboxWrapper)

dataTables

(please help document me!)

Diff

Renders a diff

screen shot 2018-09-15 at 10 05 48 am

Edit-Toolbar

Any wiki page that can be edited will have an edit toolbar

screen shot 2018-10-11 at 9 41 46 am

EditionsTable

EditionsTable

.lists variant

When inside a .lists element this renders differently. (please help document me!)

HeadedLinkList

A list of links with a heading as seen on https://openlibrary.org/subjects

screen shot 2018-09-28 at 2 14 56 pm

We currently make use of .contentQuarter elements to arrange these side by side but it would be useful to have them modeled as their own component and deal with layout separately.

See also: LinkBox

Manage-Covers

screen shot 2018-11-01 at 10 11 41 pm

Shows when logged in and with JS enabled when you hover over a cover.

Page-History

screen shot 2018-09-15 at 9 47 20 am

shows at the bottom of any wiki page, showing the revision history of that page.

(https://openlibrary.org/works/OL69395W/Historie_of_the_raigne_of_King_Henry_the_Seventh).

RevisionHistoryTable

Confusingly, a similar table renders on the revision history page

RevisionHistoryTable

iaBar

Internet Archive Bar: A bar that appears at the top of all pages. Makes use of a ButtonGhost.

screen shot 2018-09-24 at 5 43 24 pm

MyBooks

Combines MyBooksList and MyBooksMenu In use on https://openlibrary.org/account/books/want-to-read

MyBooksList

MyBooksList

MyBooksMenu

screen shot 2018-12-26 at 2 19 50 pm

In use on https://openlibrary.org/account/books/want-to-read

OLform

Used to render forms in OpenLibrary (please help document me!) Some examples:

olform

edit olform

ReadingLog-stats

Undocumented component.

Used in openlibrary/templates/stats/readinglog.html

ReaderStats

screen shot 2018-12-15 at 1 20 01 pm

Example url: https://openlibrary.org/books/OL16180205M/Harry_Potter_and_the_Sorcerer's_Stone

LinkBox

Similar to HeadedLinkList but used to show related links, which are listed inline with a smaller heading. This element does not use a ul element, but does function in a very similar way.

Seen on https://openlibrary.org/subjects/science and on book pages

screen shot 2018-09-28 at 2 25 40 pm

screen shot 2018-10-06 at 7 59 56 am

See also HeadedLinkList

All Pages

HeaderBar

The header bar appears at the top of every page.

HeaderBar

FlashMessage

Can be displayed on any page via JS to report feedback to a user after some form has been posted.

screen shot 2018-12-13 at 6 13 32 pm

FlashMessageBookAdded

screen shot 2018-12-13 at 6 13 07 pm

FlashMessageError

screen shot 2018-12-13 at 6 12 42 pm

Footer

The footer appears at the top of every page.

Footer

RatingsForm

screen shot 2018-10-12 at 1 00 18 pm

ResultCovers (DEPRECATED)

Similar to Carousel but implemented differently using jCarousel. Renders on the subjects page, borrow page

and used for the "you might also like" and "more by " carousels on a works page

ResultsCovers

SearchResultContainer

screen shot 2018-11-08 at 8 30 13 pm

example

Contains: #SearchResultItem, #widgetbox and #LinkBox

SearchResultItem

screen shot 2018-09-15 at 9 44 34 am

example

SearchResultItemCTA

screen shot 2018-12-26 at 2 32 53 pm

e.g. https://openlibrary.org/account/books/want-to-read

SearchResultsInstantResult

Shows up when you search from the header

screen shot 2018-09-15 at 9 45 05 am

TabsPanel

A tab component. See author page for an example.

screen shot 2018-11-21 at 8 28 22 am

StatsChart

Can be found on the home page. Graph rendered via an HTML canvas.

StatsChart

PageBanner

1 2

Edition (book)

A mega component which puts together various other components. Appears on book page

screen shot 2018-10-12 at 1 07 49 pm

ListEntry

screen shot 2018-11-25 at 11 26 59 am

Seen on lists page.

ListsPageCta

screen shot 2018-11-25 at 10 43 12 am

Seen on lists page.

ListsLists

On works page and books pages:

screen shot 2018-09-18 at 11 01 54 am

[pictured: dropit tool]

ShareLinks

screen shot 2018-09-19 at 5 01 42 pm

Appears on book page. I don't believe it appears anywhere else (??)

Dropper

The dropper is an enhanced substitution select element. At time of writing it does not work without JavaScript (see #1147).

screen shot 2018-09-19 at 5 10 04 pm

Dropper-list

screen shot 2018-11-27 at 8 09 30 am

A variant of the dropper exists for things that are not books. Can be seen on subjects and authors pages.

Dropper with dropdown

(See also ReadStatuses component, shown in image)

screen shot 2018-09-19 at 5 11 16 pm

with activated-check

screen shot 2018-09-19 at 5 11 57 pm

When referring to "Drop click" we are referring to this part of the element:

screen shot 2018-09-19 at 5 16 48 pm

Mode-options

Radio buttons to toggle between different 3 different options

Seen - https://openlibrary.org/search , https://openlibrary.org/search?q=harry+potter

mode-options

Books Page

Books Actions Menu

BookActionsMenu

Read Panel

Appears on books page.

screen shot 2018-10-11 at 5 20 57 pm

Definition List

Definition markup can be used to generate a definition list See https://www.w3.org/MarkUp/html3/deflists.html

screen shot 2018-10-11 at 5 23 36 pm

ReadStatuses

Shown when you click the Droppercomponent.

screen shot 2018-10-11 at 5 33 55 pm

WidgetBox

Widget boxes are used for layout. They consist of a header, a hint and a component (which might be a list or another component on this page)

The screenshot shows a WidgetBox with an unordered list and a WidgetBox containing a ListsLists. screen shot 2018-10-19 at 3 32 17 pm

NavEdition

Appears at the top of book pages. Will probably be merged in future with another component once identified.

screen shot 2018-10-23 at 6 03 09 pm

WmdButtonBar

screen shot 2018-11-09 at 3 40 53 pm

Seen on http://localhost:8080/people/openlibrary7774?m=edit

WmdPromptDialog

screen shot 2018-11-09 at 4 30 43 pm

When editing a profile page, and clicking the link button in the wmd button bar this overlay shows. JavaScript is required.

PageHeadingSearchBox

A form within the page that allows searching the site.

screen shot 2018-11-16 at 3 58 36 pm

Seen on http://openlibary.org/subjects/romance

Must appear at the top of the page.

UI-Dialog

Deprecated, but in use when removing lists on books pages. See also colorbox

screen shot 2019-01-11 at 1 41 48 pm

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.