# **03. Cards & Drawers**
###### tags: `Done`, `UI`

**Purpose:**
* Understand the purpose of drawers in 3.Finance.
* Understand the purpose of cards in 3.Finance.
* Understand how cards and drawers relate and behave with one another.

Content:

> Definitions
> References
> Drawers
> Cards
> Interaction patterns

## Definitions

* **Drawers** are like panels that enter the screen from the left or right to facilitate a function. Drawers contain actionable functions like navigation or means to perform transactions that will change the state of a card or space.
* **Cards** are again like panels, but in this instance, they reveal themselves from the bottom of the screen and do not contain any actionable data. Cards are for high level informative information; presenting a state of a widget, position or application.

## References
*References will be provided within each of the lower sections of this document.*

## Drawers

### Left Drawer = Navigation Drawer
This section focuses specifically on the left drawer, also referred to as the '**Navigation Drawer**'.

* The '**navigation drawer**' is located along the left edge of the screen.
* Contained within the drawer is the primary navigation for the 3.Finance landing page and app.
* In each instance (landing page or app), there are 4 navigational chapters or '**spaces**'.
* Each space consists of a specific message and/or activity.
* More details on spaces will be provided in other documents. (See documents: 7, 8, 9, 10 & 12)
* The navigation drawer has three (3) states:

* State 1: **Maximised state**. (Above)
* This state displays the full navigational menu, which includes:
* The '**3**' Logo
* The copy: '**Finance**'
* A directional '**Cheveron**'
* The '**Nav' bar**': A vertical bar containing '**Sliders**'
* Four (4) '**Sliders**': Each representing one '**Space**'
* Four (4) '**Titles**': Each representing one '**Space**'
* IF the user has not connected their wallet, they are in the walkthrough state. In this state, each '**Space**', when selected will display a description directly below that space's '**Title**'.
* **Note:** The walkthrough state will **not** contain a '**Hide**' button against each description.
* IF the user has connected their wallet, they are in the connected state. In this state, each '**Space**', when selected will display a '**Summary**' of the connected wallets possitions and/or recent activity.
* **Note:** The connected state will contain a '**Hide**' button against each summary.

* State 2: **Minimised state** (Above)
* This state displays a minimised view of the navigational menu, which includes:
* The '**3**' Logo
* The copy: '**Finance**'
* A directional '**Cheveron**'.
* The '**Nav' bar**': A vertical bar containing '**Sliders**'
* Four (4) '**Sliders**': Each representing one '**Space**'
* Four (4) '**Titles**': Each representing one '**Space**'
* The **Font** of these titles is reduced.
* A '**Show**' button is revealed in place of the '**Hide**' button.
* **Note:** This state is not possible when there is no connected wallet. Ie. When the view is in the '**Walkthrough**' state.

* State 3: **Collapsed state** (Above)
* This state displays a collapsed view of the navigational menu, which includes:
* The '**3**' Logo
* A directional '**Cheveron**'.
* The '**Nav' bar**': A vertical bar containing '**Sliders**'
* Four (4) '**Sliders**': Each representing one '**Space**'

### Interaction Patterns: Internal to Navigation Drawer
The following relate and are expected on both the **Landing Page** and **App** navigation drawers.

* **3 Logo**

* A user may select this at any time to return to the '**Landing Page**'.
* The user will return to the landing page in what ever '**Wallet**' state they were before the transition. Ie. Walkthrough or Connected.

* **Cheveron**

* This cheveron will dynamically change its indicated direction depending on the state of the navigation drawer. These changes will occur as follows:
* IF the navigation drawer is in its **Maximised state**, the cheveron will indicate a '**Left**' (<) direction.
* Selecting the cheveron in this state will initiate a transition to change the state of the navigation drawer from its **maximised state** to its **collapsed state**.
* IF the navigation drawer is in its **Minimised state**, the cheveron will indicate a '**Left**' (<) direction.
* Selecting the cheveron in this state will initiate a transition to change the state of the navigation drawer from its **minimised state** to its **collapsed state**.
* IF the navigation drawer is in its **Collapsed state**, the cheveron will indicate a '**Right**' (>) direction.
* Selecting the cheveron in this state will initiate a transition to change the state of the navigation drawer from its **collapsed state** to its **maximised state**.

* **Sliders**

* With respect to the first slider; (**Slider 1**)
* A user may click or tap slider 1 at any time to select it.
* Selecting **slider 1** will auto-transition the UI to reflect the content associated with '**Slider 1**'.
* With respect to all other sliders;
* A user may click or tap any of these sliders to select each.
* Selecting any of these sliders will auto-transition the UI to reflect the content associated with the selected slider.
* A user may click+hold+drag any of these sliders to manually-transition the UI from the preselected slider to the currently engaged slider.
* In these instances, all transitions are the same but the timing of those transitions are controlled by the user interaction.
* General interaction patterns:
* A slider that is already selected can not be unselected.
* As a transition occurs, the preselected slider will unselect; causing a colour change. (From white to electric green)
* As a transition occurs, the engaged slider will select; causing a colour change. (From electric green to white)
* Where applicable, an ease out should be applied.

* **Titles**

* The following relates to all titles:
* A user may click or tap a title at any time to select it.
* Selecting any title will auto-transition the UI to reflect the content associated with the selected title.
* Selecting a title will initiate the '**Slider**' transition.
* Titles will move in sync with their associated slider.
* General interaction patterns:
* A title that is already selected can not be unselected.
* As a transition occurs, the preselected title will unselect; causing a colour change. (From white to electric green)
* As a transition occurs, the engaged title will select; causing a colour change. (From electric green to white)
* Where applicable, an ease out should be applied.

* **Description or Summary**

* If the navigation drawer is in its **Maximised state** and;
* If there is no connected wallet, ie. The UI is in the **Walkthrough state** then;
* A **description** will be visible beneath each **Title** of and in the visible navigation menu.
* There are no user engaged interactions with this description.
* During transitions between spaces;
* This description will move in sync with its associated **title**.
* This description will hide itself at the start of a transition IF the **title** and **slider** to which it relates is being unselected. (Deactivated)
* This description will reveal itself at the end of a transition IF the **title** and **slider** to which it relates is being selected. (Activated)
* If the navigation drawer is in its **Maximised state** and'
* If there is a connected wallet, ie. The UI is in the **Connected state** then;
* A **summary** will be visible beneath each **Title** of and in the visible navigation menu.
* There will be a '**Hide**' button in line with and adjacent to the summary header.
* Selecting '**Hide**' will cause the summary to fade from view in sync with the navigation drawer transitioning from its '**maximised state**' to its '**minimised state**'
* As this transition occurs, the titles will dynamically reduce the hight of their copy.
* A '**Show**' button will reveal as the transition comes to an end.
* Selecting the **Show** button will reverse the transition described above.
* There will be no futhre user engaged interactions with this summary.
* During transitions between spaces;
* This summary will move in sync with its associated **title**.
* This summary will hide itself at the start of a transition IF the **title** and **slider** to which it relates is being unselected. (Deactivated)
* This summary will reveal itself at the end of a transition IF the **title** and **slider** to which it relates is being selected. (Activated)

> For information regarding the content and function of a Summary, please review the document specific to each Space. (Each space will have its own summary)

### Right Drawer = Action Drawer
This section focuses specifically on the right drawer, also referred to as the '**Action Drawer**'.

* The '**action drawer**' is, from time to time; visible along the right edge of the screen.
* The **action drawer** is only **revealed** when a '**Card**' has been selected.
* When a '**Card**' is de-selected, the action drawer will **hide**.
* When a '**Card**' is selected and an alternative card is selected, the action drawer will remain in view and its content will update if and where necessary.
* Contained within the drawer is a secondary and tirtiary navigation.
* The secondary navigation is located at the top of the action drawer.
* The tirtiary navigation and all related content, is only visible when a the user has connected a wallet.
* The tirtiary navigation is located directly below the drawers '**Help text**' if '**Help text**' is turned on via '**Settings**' or below the drawers '**Sub-title Prompt**' if '**Help text**' is turned off via '**Settings**'.
* The tirtiary navigation is only applicable within the **App** and is not applicable to the **Landing Page**.
* A description of the content and function of each available action drawer can be found in other documents. To learn more, see the following documents: 7, 8, 9 & 10)

## Cards
This section looks at each of the cards and their states available across each of the **Spaces** available within the 3.Finance **App**.

> This section will not look at '**Widgets**' as; although these are designed similarly to cards, they will be covered under a different document. (Document 11 - Micro Sites)

* There are three (3) types of cards. These types are:
* Deposit cards
* Emission cards
* Money App cards
* The state of a card depends on two variables:
* The state of the UI: **Walkthrough** or **Connected** and;
* The user interaction state:
* **Default** (no user interaction)
* **Rollover** (user hovers over card)
* **Selected** (user interacts with card)
* There is one further card state that is not user driven:
* **Highlighted** (when a selected card requires input from or export to other card(s) that are visible on screen.
* The content within each card, depending on the aforementioned variables, is as follows:


* Above. Deposits card: 4 **walkthrough** states.
* From top down: Selected, Default, Rollover, Highlighted.


* Above. Deposit card: 4 **connected** states.
* From top down: Selected, Default, Rollover, Highlighted.


* Above. Emission card: 4 **walkthrough** states.
* From top down: Selected, Default, Rollover, Highlighted.


* Above. Emission card: 4 **connected** states.
* From top down: Selected, Default, Rollover, Highlighted.

> **Note:** The above states are for FTU (first time use), where the user has not yet '**Signaled**' how an emission is to be compounded. Once a user has performed their first harvest and has subsequently '**Signalled**' how the emission is to be harvested in the future, the view of each card will change to:

> **Note:** Emission cards have not yet been designed. A temporary placeholder will be used until the Money App space has been further researched and crafted.


* Above. Emission card: 4 **connected** states.
* From top down: Selected, Default, Rollover, Highlighted.

> **Note:** Although the above view displays 4 icons, this is only to illustrate that there is a possibility for up to 4 icons to be reflected in the shown area. This is because there is planned future functionality that includes a community perspective of these cards. For MVP; only the **Individual** view will be available to users and in this view, only the first '*slot*' will be visible. Ie. only 1 icon, but any of the 4 icons displayed could be visible in '*slot 1*'.


* Above. NFT cards: 4 **connected** states.
* From top down: Selected, Default, Rollover, Highlighted.

> **Note:** NFT cards do not have a walkthrough state. This is bc. NFTs are not reflected until a wallet is connected. Only those NFTs that reside in the connected wallet are then reflected in the UI.

### Interaction Patterns: Internal to Cards
The following relate and are expected in the **App** only.
Further, the following relate to both walkthrough and connected card states.

* On a user engaged rollover, the default state will transition to the rollover state. The following will occur in unison:
* The card background will remain consistent.
* The outline of the card background will undergo a colour transition: from brand colours '**Dark Steel**' to '**Electric Green**'.
* The content in column 2 and (if applicable) column 3 of the card will transition upwards. As this occurs, a secondary line of data will be revealed.
* On user engaged click or tap anywhere within the boundary of the card, including the '**More**' button, the following will occur in unison:
* The card background will under go a colour transition: from '**2A2E3B**' (85% Opcity) to '**FFFEFF**' (20%).
* The outline of the card background will undergo a colour transition: from brand colours '**Dark Steel**' to '**White**'.

> **Note:**
> All content within the card will remain visible.

> Transition to the '**Highlighted**' state occurs automatically and only with cards within the '**Collateral**' groups.

## Interaction Patterns: Between Cards and Drawers
This section describes the relationship each of the aforementioned drawers and cards have and the interaction patterns that result.

**Rules that define relationships:**

1. IF the **navigation drawer** is in either the **maximised** or **minimised** state then the **action drawer** must be in its **hidden** state.
2. IF the **navigation drawer** is in the **maximised** state, the cards width will be equal to 8 columns of the 12 column design grid.
3. IF the **navigation drawer** is in the **minimised** or **collapsed** states, the card width will be equal to 10 columns of the 12 column design grid.
4. IF the **action drawer** is in its **revealed** state, the **navigation drawer** must be in its **collapsed** state.
5. IF the **action drawer** is in its **revealed** state, the cards width will be equal to 8 columns of the 12 column design grid.

**Interaction Pattern rules:**

* Whenever one drawers state changes, the opposite drawer and cards must react in unison. Transitioning in sync with each other according to the aformentioned rules.
* There should be **NO** elasticity between drawers and cards. Ie. they need to start and end their transitions together, without any lag.
* If an ease in or out is used, ALL transitioning elements must follow the same ease pattern.
* Transition timing must also be matched. If the main element transitions over 0.9 seconds, all elements internal and external to the main element must transition or complete their transition within the defined period.

> **Note:**
> Please allow for transition timings to be adjustable. During the UI/UX review, we may amend these transitions to speed up or slow down.

END