Patterns ++++++++ Patterns are what emerge when using the foundation elements together with basic objects like buttons and alerts, more complex Javascript components from `Bootstrap `__ like tooltips and dropdowns, and AJAX components from `PrimeFaces `__ like datatables and commandlinks. .. contents:: |toctitle| :local: Navbar ====== The `Navbar component `__ from Bootstrap spans the top of the application and contains the logo/branding, aligned to the left, plus search form and links, aligned to the right. When logged in, the account name is a dropdown menu, linking the user to account-specific content and the log out link. .. raw:: html

.. code-block:: html Breadcrumbs =========== The breadcrumbs are displayed under the header, and provide a trail of links for users to navigate the hierarchy of containing objects, from file to dataset to Dataverse collection. It utilizes a JSF `repeat component `_ to iterate through the breadcrumbs. .. raw:: html

Name of a Dataverse collection

Name of Another Dataverse collection

.. code-block:: html

...

Tables ====== Most tables use the `DataTable components `__ from PrimeFaces and are styled using the `Tables component `__ from Bootstrap. .. raw:: html

Dataset	Summary	Published
3.0	Files (Changed File Metadata: 1); View Details	March 8, 2017
2.0	Additional Citation Metadata: (1 Added); View Details	January 25, 2017
1.1	Additional Citation Metadata: (1 Added); View Details	October 25, 2016
1.0	This is the first published version.	September 19, 2016

.. code-block:: html ... Forms ===== Forms fulfill various functions across the site, but we try to style them consistently. We use the ``.form-horizontal`` layout, which uses ``.form-group`` to create a grid of rows for the labels and inputs. The consistent style of forms is maintained using the `Forms component `__ from Bootstrap. Form elements like the `InputText component `__ from PrimeFaces are kept looking clean and consistent across each page. .. raw:: html

Username

.. code-block:: html

#{bundle['user.username']}

Here are additional form elements that are common across many pages, including required asterisks, icon tooltips, placeholder text, input info message with popover link, and validation error message. .. raw:: html

This field supports only certain HTML tags.

Text

Description Text is required.

Date

.. code-block:: html

#{subdsf.datasetFieldType.localeTitle}

#{subdsf.validationMessage}

Buttons ======= There are various types of buttons for various actions, so we have many components to use, including the `CommandButton component `__ and `CommandLink component `__ from PrimeFaces, as well as the basic JSF `Link component `__ and `OutputLink component `__. Those are styled using the `Buttons component `__, `Button Groups component `__ and `Buttons Dropdowns component `__ from Bootstrap. Action Buttons -------------- For action buttons on a page, we include an icon and text label. .. raw:: html

.. code-block:: html

Action Buttons Block -------------------- For the main actions on a page, we use a container block to group them together. They use the Bootstrap justified button groups style class ``.btn-group.btn-group-justified`` in order to create a group of buttons that stretch at equal sizes to span the entire width of its parent. The Bootstrap theme provides a ``.btn-primary`` style class to highlight the primary action for the user. This stronger color provides extra visual weight and identifies the primary action in a set of buttons on the page. In this example button group from the file page, you can see the Download and Explore options are listed together, providing a more scalable solution to configurable options. .. raw:: html

Contact Owner

.. code-block:: html

Contact Owner

Form Buttons ------------ Form buttons typically appear at the bottom of a form, aligned to the left. They do not have icons, just text labels. The primary button is styled differently. .. raw:: html

.. code-block:: html

Icon-Only Buttons ----------------- There are a few places where we use icon-only buttons with no text label. For these buttons, we do utilize tooltips that display on hover, containing a text label. We use the style class ``.no-text`` with the ``.glyphicon`` class to fix spacing issues from margins and padding applied to buttons with text labels. .. raw:: html

.. code-block:: html Another variation of icon-only buttons uses the ``.btn-link`` style class from Bootstrap, styling it more like a link while maintaining button behavior. The button group provides space for up to three buttons for a file in the table, and if there are more than three action button, they utilize the "kebab" More Options button dropdown with the ``.glyphicon-option-vertical`` icon. .. raw:: html

.. code-block:: html

Pagination ========== We use the `Pagination component `__ from Bootstrap for paging through search results. .. raw:: html

.. code-block:: html

Labels ====== The `Labels component `__ from Bootstrap is used for publication status (DRAFT, In Review, Unpublished, Deaccessioned), and Dataset version, as well as Tabular Data Tags (Survey, Time Series, Panel, Event, Genomics, Network, Geospatial). .. raw:: html

      Version 2.0
      DRAFT
      In Review
      Geospatial
      Unpublished
      Deaccessioned

    

.. code-block:: html Version 2.0 DRAFT In Review Geospatial Unpublished Deaccessioned Alerts ====== For our help/information, success, warning, and error message blocks we use a custom built UI component based on the `Alerts component `__ from Bootstrap. .. raw:: html

Edit Dataset Metadata - Add more metadata about this dataset to help others easily find it.

Success! – The metadata for this dataset has been updated.

File Upload in Progress – This dataset is locked while the data files are being transferred and verified.

Error – The username, email address, or password you entered is invalid. Need assistance accessing your account? If you believe this is an error, please contact Root Support for assistance.

.. code-block:: html

...

Message Classes --------------- Style classes can be added to ``p``, ``div``, ``span`` and other elements to add emphasis to inline message blocks. .. raw:: html

Select Dataverse collections to feature on the homepage of this Dataverse collection.

Search query returned 1,000 datasets!

Permissions with an asterisk icon indicate actions that can be performed by users not logged into the Dataverse installation.

Are you sure you want to remove all roles for user dataverseUser?

Please select two versions to view the differences.

.. code-block:: html

...

Images ====== For images, we use the `GraphicImage component `__ from PrimeFaces, or the basic JSF `GraphicImage component `__. To display images in a responsive way, they are styled with ``.img-responsive``, an `Images CSS class `__ from Bootstrap. .. raw:: html

.. code-block:: html Panels ====== The most common of our containers, the `Panels component `__ from Bootstrap is used to add a border and padding around sections of content like metadata blocks. Displayed with a header and/or footer, it can also be used with the `Collapse plugin `__ from Bootstrap. .. raw:: html

                Basic panel example
            
                    Panel Heading  
                
                                Label
                            Value

.. code-block:: html

Basic panel example

Panel Heading

Label

Value

Tabs ==== Tabs are used to provide content panes on a page that allow the user to view different sections of content without navigating to a different page. We use the `TabView component `__ from PrimeFaces, which is styled using the `Tab component `__ from Bootstrap. .. raw:: html

.. code-block:: html ... ... Modals ====== Modals are dialog prompts that act as popup overlays, but don't create a new browser window. We use them for confirmation on a delete to make sure the user is aware of the consequences of their actions. We also use them to allow users to execute simple actions on a page without requiring them to navigate to and from a separate page. Buttons usually provide the UI prompt. A user clicks the button, which then opens a `Dialog component `__ or `Confirm Dialog component `__ from PrimeFaces that displays the modal with the necessary information and actions to take. The modal is styled using the `Modal component `__ from Bootstrap, for a popup window that prompts a user for information, with overlay and a backdrop, then header, content, and buttons. We can use style classes from Bootstrap for large (``.bs-example-modal-lg``) and small (``.bs-example-modal-sm``) width options. .. raw:: html

.. code-block:: html .. |image1| image:: ./img/dataverse-project.png :class: img-responsive