Design Pattern Library
Looking for an easy way to get started and contribute to Archive.org? Help us document the existing UI components on Archive.org!
Archive.org has tons of discrete UI elements which are not yet components in this repo. This Design Pattern Library audits all the different types of visual UI components that exist on the live Archive.org website so that they may eventually be converted into isolated React components within this iaux repo.
Inspired by Wikimedia's style guide and Open Library's Design Pattern Library.
- 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!
- We are not looking for design changes at the current moment of time and rather would like to focus on making components easier to create. For consistency, try not to design components on a per page basis!
Want to help us document one of Archive.org's UI components for our Design Pattern Library?
This is an example of a UI component on openlibrary.org (one of our other projects).
The documentation for a UI component includes:
- a
name— in this case it’s calledDecorated-Carousel(required) - a
location(required) which is an example URL or page where the component may be found on the website - a
short description(optional) of what the component is - a
screenshotof the UI component (required)
If you look through the website’s css/html, you may see a class name which describes the component. This is probably the right name to include in the docs for the component, even if it’s not the best name — if you have a suggestion for a better name, please include both! It’s important to include the CSS name(s) (even if it’s not the best name) because this is what will help us find the component in our code.
Generally, a component will be a visual element which occurs repeatedly on the website (like a special button, a dropdown menu, a box containing download options, etc)
This is actually kind of a hack, sorry! You can't drag screenshots directly into this document. Here's what I do:
- Open a new window to http://github.com/internetarchive/iaux/issues/new
- The Issues UI does allow you to drag a image into the comment section of the issue!
- When you drag and drop your screenshot into the issue, it should appear as something like
 - Copy this snippet and paste it into this Design Pattern Library in the appropriate section for the component you are documenting.
classes: It's current css classes are item-ia and collection-ia
location: It can be found on https://archive.org homepage
classes: Its current css class is sortbar
Used for: Sorting search results based on the selected parameter and changing search results display (either 'show as thumbnails' or 'show as lists')
location: https://archive.org/search.php?query=hello%20world
Screens greater than 991px
Screens less than equal to 991px
classes: Its current css classes are item-ia and hov
Used for: Displaying media results in search results. Includes the statbar, hidden-list--SIN(search by text contents or tv news captions) and author-text(search by metadata) components.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css class is statbar
Used for: Displaying media, viewing, favourite and comment stats. Used in the searchResultCard--media component.
location: https://archive.org/search.php?query=hello%20world
hidden-list--sin
classes: Its current css classes are hidden-lists and SIN
Used for: Displaying text (search by text contents)/words from transcript (search by TV news captions) with search keywords. Used in the searchResultCard--media component when searched by text contents or TV news captions.
location: https://archive.org/search.php?query=hello%20world&sin=TXT, https://archive.org/details/tv?q=hello%20world
Search by text contents
Search by TV news captions
classes: Its current css classes are by, C, C4.
Used for: Displaying author names. Used in the searchResultCard--media component (search by metadata).
location: https://archive.org/search.php?query=hello%20world
classes: Its current css classes are item-parent and hoverin.
Used for: Displaying the collection the card is part of when a user hovers over it. Used in the searchResultCard--media component.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css classes are item-ia and account-ia
Used for: Displaying account results in search results
location: https://archive.org/details/@hello_world_hello
classes: Its current css class is co-top-row
Used for: Displaying count of search results. Used in the column-facet component.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css class is time-graf
Used for: Graphing the number of results for each year. Used in the column-facet component when searched by TV news captions.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css class is columns-facets
Used for: Displaying count of search results, a time graph (if searched by TV news captions) and filtering search results. Includes the result-counter and time-graph component (if searched by TV captions).
locations: https://archive.org/search.php?query=hello%20world, https://archive.org/search.php?query=hello%20world&sin=TXT, https://archive.org/details/tv?q=hello%20world
Search by metadata
Search by text
Search by TV news captions
classes: Its current css class is searchbar
Used for: Containing the search bar, go button and search options radio buttons(when searched by metadata or text-contents). Used in the search-container component.
locations: https://archive.org/search.php?query=hello%20world, https://archive.org/details/tv?q=hello%20world
Desktop
Mobile
classes: Its current css class is search-actions
Used for: Giving a user the option to share, favourite or play all the results. Used in the search-container component.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css classes are container, container-ia, width-max and search-bar-section
Used for: Containing all search related items. Includes the search-bar and search-actions components.
location: https://archive.org/search.php?query=hello%20world
classes: Its current css classes are boxy and item-stats-summary
Used for: Displaying the number of borrows and favourites till date
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are boxy and item-download-options.
Used for: Displaying the different versions a media can be downloaded in.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are boxy and collection-list.
Used for: Displaying the different collections in which the following media can be found in.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are boxy and item-upload-info.
Used for: Displaying username of uploader and date on which the media was uploaded.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css class is reviews.
Used for: Displaying the reviews of the media.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are container and container-ia width-max.
Used for: Suggesting similar media to a user, based on metadata.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are favorite-button and button.
Used for: Favouriting a media
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css class is button and id is share-button.
Used for: Getting social links to share the media
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css class is button and id is flag-button.
Used for: Revealing a list of options for flagging a media
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css class is dropdown-menu and id is flag-popover.
Used for: Listing options for flagging a media.
location: https://archive.org/details/libraryunquiethi00batt
classes: Its current css classes are table, table-striped, table-condensed and table-hover
Used for: Displaying list of community forum posts
location: https://archive.org/details/opensource_movies&tab=forum
Desktop
Mobile
classes: Its current css class is range-maker
Used for: Sorting collection based on title name or creatorName with letters
location: https://archive.org/details/uoftpreservation?sort=titleSorter
location: https://archive.org/details/uoftpreservation?sort=creatorSorter
classes: It encompasses different elements each with their classes
Description: It is container for different elements like <button> etc
Used for: sharing the various components types(collection and Items) with help of thirdparties
classes: Its current css classes are navbar, navbar-inverse and navbar-static-top
Used for: The top navigation bar of the website
location: https://archive.org/
Desktop
classes: Its current css classes are nav-abouts
Used for: The about section of the navigation bar
location: https://archive.org/
classes: Its current css classes are nav, navbar-nav and navbar-main
Used for: The main section of the top nav-bar
location: https://archive.org/
Desktop
Mobile
classes: Its current css classe is in and id nav-tophat
Used for: The top section of navbar. This is visible on clicking any icon on navbar-main
location: https://archive.org/ Desktop
Mobile
classes: It comprises of the following CSS classes welcome, container, container-ia width-max and account-uniform
Description: Welcome container in details page
Location: https://archive.org/details/@mekarpeles
Desktop
Mobile
classes: It comprises of the following CSS classes ikind in and id ikind--publicdate
Description: Table on the details page
Location: https://archive.org/details/@mekarpeles
Desktop
Mobile
tile-action & hidden-lists --join waitlist
classes: Its current class tile-action & hidden-lists
Used for It is used for showing the title of the book and author name
Location: https://archive.org/details/inlibrary
classes: Its current classes thats-left , item-details-metadata, col-sm-8 col-sm-pull-4
Used for It is used for showing the title of the book and author name
Location: https://archive.org/details/libraryunquiethi00batt#maincontent
classes: Its current classes thats-left and item-details-metadata
Used for It is used for showing the details about the book. That include publication data, publisher, language, ISBN and so on
Location: https://archive.org/details/libraryunquiethi00batt#maincontent
classes: Its current classes welcome-left
Used for It is used for showing the heading part of any collection. It includes the title of the collection, the logo of the collection and short description
Location: https://archive.org/details/librivoxaudio
classes: Its current classes activity-box
Used for It is used to show the activity of any collection
Location: https://archive.org/details/etree&tab=about
classes: Its current classes about-box
Used for It is used to give the full description of the collection
Location: https://archive.org/details/etree&tab=about
classes: Its current classes about-box and inline CSS
Used for It is used for showing the created date, Archivist name, and profile picture
Location: https://archive.org/details/etree&tab=about
classes: Its current classes about-box and items_list person
Used for It is used for showing the ADDITIONAL CONTRIBUTORS
Location: https://archive.org/details/etree&tab=about
classes: Its current classes grafs and about-box
Used for It is used for showing the total views and statistics
Location: https://archive.org/details/etree&tab=about
classes: Its current classes grafs and about-box
Used for It is used for showing the total items and statistics
Location: https://archive.org/details/etree&tab=about
classes: Its current classes grafs and about-box
Used for It is used for showing the total DISCONTINUED VIEWS and statistics
Location: https://archive.org/details/etree&tab=about
classes: Its current classes grafs about-box js-top-regions-table
Used for It is used for showing top regions of last 30 lats
Location: https://archive.org/details/etree&tab=about
classes: Its current class is thats-right col-sm-4 col-sm-push-8
Description: It is used to mark favorite, share and flag a particular post
Location: https://archive.org/details/electricsheep-flock-244-32500-2
classes: It has CSS class ToS
Description: The absolute footer of the home page
Location: https://archive.org/
Desktop
Mobile Not displayed on mobile due to infinite scroll