├── README.md ├── UX ├── common │ ├── AppLauncher │ │ ├── design.md │ │ └── img │ │ │ ├── ApplicationSelector-01.png │ │ │ ├── ApplicationSelector-02.png │ │ │ └── ApplicationSelector-03.png │ ├── Command-Buttons │ │ ├── design.md │ │ └── img │ │ │ ├── Button-Layout-1A.png │ │ │ ├── Button-Layout-1B.png │ │ │ ├── Button-Layout-2A.png │ │ │ ├── Button-Layout-2B.png │ │ │ └── Button-Layout-2C.png │ ├── HybridDashboards │ │ ├── design.md │ │ └── img │ │ │ └── HybridDashboards-01.png │ └── Tags │ │ ├── design.md │ │ └── img │ │ ├── AdvancedTags-01.png │ │ ├── AdvancedTags-02.png │ │ ├── MultiValue.png │ │ ├── SimpleTags-01.png │ │ ├── SimpleTags-Empty.png │ │ └── SingleValue.png ├── template │ └── design.md ├── ui-classic │ └── automation │ │ └── ansible │ │ ├── ansible.md │ │ └── img │ │ ├── ansible-credentials-create-cloud-aws.png │ │ ├── ansible-credentials-create-cloud-azureclassic.png │ │ ├── ansible-credentials-create-cloud-azureresmgr.png │ │ ├── ansible-credentials-create-cloud-cloudforms.png │ │ ├── ansible-credentials-create-cloud-gce.png │ │ ├── ansible-credentials-create-cloud-openstack.png │ │ ├── ansible-credentials-create-cloud-rackspace.png │ │ ├── ansible-credentials-create-cloud-satellite.png │ │ ├── ansible-credentials-create-cloud-vcenter.png │ │ ├── ansible-credentials-create-machine.png │ │ ├── ansible-credentials-create-network.png │ │ ├── ansible-credentials-view-emptystate.png │ │ ├── ansible-credentials-view.png │ │ ├── ansible-playbooks-view-emptystate.png │ │ ├── ansible-playbooks-view.png │ │ ├── ansible-repositories-add.png │ │ ├── ansible-repositories-view-emptystate.png │ │ └── ansible-repositories-view.png └── ui-service │ ├── Catalogs │ ├── design.md │ └── img │ │ ├── Catalogs-CreateFlow-01.png │ │ ├── Catalogs-CreateFlow-02.png │ │ ├── Catalogs-DeleteConfirmation.png │ │ ├── Catalogs-EditFlow-01.png │ │ ├── Catalogs-EditFlow-02.png │ │ ├── Catalogs-ExpandedListView.png │ │ ├── Catalogs-ListView.png │ │ ├── Catalogs-ListViewTruncation.png │ │ ├── CatalogsAccessingCreate.png │ │ ├── CatalogsAccessingDelete.png │ │ ├── CatalogsAccessingEdit.png │ │ └── CatalogsAvailableActions.png │ ├── Dashboard │ ├── design.md │ └── img │ │ ├── Dashboard-01.png │ │ └── Dashboard-02.png │ ├── Framework │ ├── img │ │ ├── Framework-Services.png │ │ └── Framework.png │ ├── masthead.md │ └── navigation.md │ ├── MyOrders │ ├── design.md │ └── img │ │ ├── Order_01.png │ │ ├── Order_02.png │ │ ├── Order_03.png │ │ ├── Order_04.png │ │ └── Order_05.png │ ├── MyServices │ ├── design.md │ └── img │ │ ├── Services-AnsibleDetailView.png │ │ ├── Services-AnsibleTowerDetailView.png │ │ ├── Services-ChildDetailView.png │ │ ├── Services-DashboardDetailView.png │ │ ├── Services-ExpandedListView.png │ │ ├── Services-GenericDetailView.png │ │ ├── Services-LegacyDetailView.png │ │ ├── Services-ListView.png │ │ └── Services-ResourceDetails.png │ └── designer │ ├── BlueprintDetails │ ├── design.md │ └── img │ │ ├── ActionsAndDelays-01.png │ │ └── ActionsAndDelays-02.png │ ├── Dialogs │ ├── design.md │ └── img │ │ ├── DialogEditor-01.png │ │ ├── DialogEditor-02.png │ │ ├── DialogEditor-03.png │ │ ├── DialogEditor-04.png │ │ ├── DialogEditor-05.png │ │ ├── DialogEditor-06.png │ │ ├── DialogEditor-07.png │ │ ├── DialogEditor-08.png │ │ └── DialogEditor-09.png │ ├── design.md │ └── img │ ├── CanvasExport-01.png │ ├── CanvasPanZoom-01.png │ ├── CanvasPanZoom-02.png │ ├── CanvasPanZoom-03.png │ ├── CanvasPanZoom-04.png │ └── CanvasPanZoom-05.png ├── _config.yml ├── _layouts └── default.html └── assets └── css └── style.scss /README.md: -------------------------------------------------------------------------------- 1 | # ManageIQ Design documentation 2 | Design documents and UX mockups for ManageIQ. 3 | 4 | Access documentation for specific sections by clicking on the links below 5 | 6 | ## Common UI Components 7 | - [App Launcher](https://manageiq.github.io/manageiq-design/UX/common/AppLauncher/design) 8 | - [Hybrid Dashboards](https://manageiq.github.io/manageiq-design/UX/common/HybridDashboards/design) 9 | - [Tags](https://manageiq.github.io/manageiq-design/UX/common/Tags/design) 10 | - [Command Buttons](https://manageiq.github.io/manageiq-design/UX/common/Button-Layout/design) 11 | 12 | ## Operations UI 13 | - Automation 14 | - [Ansible](https://manageiq.github.io/manageiq-design/UX/ui-classic/automation/ansible/ansible) 15 | 16 | ## Service UI 17 | ### Primary Navigation Items 18 | - [Dashboard](https://manageiq.github.io/manageiq-design/UX/ui-service/Dashboard/design) 19 | - [My Services](https://manageiq.github.io/manageiq-design/UX/ui-service/MyServices/design) 20 | - [My Orders](https://manageiq.github.io/manageiq-design/UX/ui-service/MyOrders/design) 21 | - Service Catalog (Remains unchanged from previous release) 22 | 23 | ### Application Framework 24 | - [Masthead](https://manageiq.github.io/manageiq-design/UX/ui-service/Framework/masthead) 25 | - [Navigation](https://manageiq.github.io/manageiq-design/UX/ui-service/Framework/navigation) 26 | 27 | ## Service Designer Documentation 28 | 29 | - [Designer](https://manageiq.github.io/manageiq-design/UX/ui-service/designer/design) 30 | - [Blueprint Details](https://manageiq.github.io/manageiq-design/UX/ui-service/designer/BlueprintDetails/design) 31 | - [Dialogs](https://manageiq.github.io/manageiq-design/UX/ui-service/designer/Dialogs/design) 32 | - [Catalogs](https://manageiq.github.io/manageiq-design/UX/ui-service/Catalogs/design) 33 | 34 | ## Conceptual Designs 35 | 36 | - [(W.I.P.) oVirt/RHV Provisioning Wizard](http://talk.manageiq.org/t/ux-design-rhv-provisioning/3079) 37 | 38 | 39 | **Note:** This link will navigate to an external site where comments can be captured. 40 | 41 | # License 42 | 43 | This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) 44 | -------------------------------------------------------------------------------- /UX/common/AppLauncher/design.md: -------------------------------------------------------------------------------- 1 | # Application Launcher 2 | 3 | * The Application Launcher should be used when more than one interface is available. 4 | * This widget makes it easier for the user to switch between different user interfaces without logging out. 5 | * The Application Launcher should be accessible from the masthead. 6 | * The example below shows how a user may launch the Operations UI from within the Service UI. 7 | ![Application Launcher Dropdown](img/ApplicationSelector-02.png) 8 | 9 | ## Properties 10 | ![Application Launcher](img/ApplicationSelector-03.png) 11 | 12 | 1. **App Launcher Icon:** The "fa-th" icon from the Font Awesome icon library should be used to represent the Application launcher. Clicking on the icon will open a menu allowing the user to select a different interface to launch. 13 | 2. **Menu Items:** The menu displays any available user interfaces (depending on permissions). The user interfaces are represented with a label (UI name) and associated icon. The current interface being used should not show up in the menu. The Home option should appear at the bottom of the list and should send the user to a generic landing page with all UI options and links to product documentation. If a user does not have access to any additional interfaces, the Application Launcher icon should be hidden from the masthead. 14 | 3. **Selecting:** When a user hovers over the UI Name or Icon, both should be highlighted as links, with a button border appearing as well. Clicking the option will launch the selected UI in a new browser window or browser tab, based on the browser preferences of the user. 15 | 4. **Tooltip:** As a user hovers over the UI Name or Icon, a [Tooltip](https://www.patternfly.org/pattern-library/widgets/#tooltip) should be available to explain what the action will do. 16 | -------------------------------------------------------------------------------- /UX/common/AppLauncher/img/ApplicationSelector-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/AppLauncher/img/ApplicationSelector-01.png -------------------------------------------------------------------------------- /UX/common/AppLauncher/img/ApplicationSelector-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/AppLauncher/img/ApplicationSelector-02.png -------------------------------------------------------------------------------- /UX/common/AppLauncher/img/ApplicationSelector-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/AppLauncher/img/ApplicationSelector-03.png -------------------------------------------------------------------------------- /UX/common/Command-Buttons/design.md: -------------------------------------------------------------------------------- 1 | # Command Buttons 2 | * Action buttons are found across a bar towards the top of most pages. 3 | * Action buttons may be system generated (default) or may be customized by the user. 4 | * In cases where both system generated and customized buttons exist, they should be presented in the following order from left to right: 5 | - Custom single button 6 | - Custom button group 7 | - Default single button 8 | - Default button group 9 | 10 | ![Button Layout](img/Button-Layout-1A.png) 11 | * Button bars should span across the entire page and should sit underneath the breadcrumbs bar (if it exists). 12 | * When there is no breadcrumbs bar, the button bar may be at the top of the page. 13 | 14 | ![Button Layout](img/Button-Layout-1B.png) 15 | * When a PF toolbar is being used, the action buttons may share this space with any filter or sort capabilities. This will occur on most list views, card views, and table views. 16 | 17 | **NOTE:** Users should be **required** to supply an icon for custom button groups to accommodate for collapsing to an icon only view when needed. 18 | 19 | ## Responsive States 20 | * When space becomes an issue, action buttons should be condensed to accommodate. 21 | * Accommodations should be made in the following sequence: 22 | - **Step 1:** Remove labels from ALL button groups (default and custom) 23 | - **Step 2:** Group all standalone buttons in a kebab. Left most buttons should be placed at the top of the list inside the kebab. 24 | - **Step 3:** Starting with the right most button group, add button groups one at a time to the kebab menu. Change this menu to a dropdown accordion that can handle secondary menu items. 25 | 26 | ![Button Layout](img/Button-Layout-2A.png) 27 | 28 | ![Button Layout](img/Button-Layout-2B.png) 29 | 30 | ![Button Layout](img/Button-Layout-2C.png) 31 | -------------------------------------------------------------------------------- /UX/common/Command-Buttons/img/Button-Layout-1A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Command-Buttons/img/Button-Layout-1A.png -------------------------------------------------------------------------------- /UX/common/Command-Buttons/img/Button-Layout-1B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Command-Buttons/img/Button-Layout-1B.png -------------------------------------------------------------------------------- /UX/common/Command-Buttons/img/Button-Layout-2A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Command-Buttons/img/Button-Layout-2A.png -------------------------------------------------------------------------------- /UX/common/Command-Buttons/img/Button-Layout-2B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Command-Buttons/img/Button-Layout-2B.png -------------------------------------------------------------------------------- /UX/common/Command-Buttons/img/Button-Layout-2C.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Command-Buttons/img/Button-Layout-2C.png -------------------------------------------------------------------------------- /UX/common/HybridDashboards/design.md: -------------------------------------------------------------------------------- 1 | # Hybrid Dashboard 2 | 3 | - Hybrid Dashboards can exist in multiple places 4 | - They are available to all users 5 | - This area is provided so that users can quickly view important information from a mixture of report-based and real-time sources 6 | 7 | ## View Dashboard 8 | 9 | ### Dashboard Cards 10 | ![Image Title/Mockup Name](img/HybridDashboards-01.png) 11 | - Report-based cards should remain as they currently are. 12 | - Cards based on real-time data should replace the note in the lower left corner with the phrase "Real-time Data" 13 | - If a real-time card still needs to make requests or check for new data periodically rather than "push" updating, the card should include a button to refresh on command. 14 | 15 | ## Customer Feedback 16 | 17 | ### Customer Feedback Received 18 | - Overview of customer feedback received 19 | 20 | ### Necessary Customer Feedback 21 | - Questions to follow up with customers 22 | -------------------------------------------------------------------------------- /UX/common/HybridDashboards/img/HybridDashboards-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/HybridDashboards/img/HybridDashboards-01.png -------------------------------------------------------------------------------- /UX/common/Tags/design.md: -------------------------------------------------------------------------------- 1 | # Tags - Common Component 2 | * Tags are used in multiple areas throughout the UI. 3 | * Tags are made up of two parts, a category and value. Some categories allow for more than one value to be associated. 4 | * Tags can be applied to a single item or multiple items at one time depending on the use case. 5 | * In all cases, the tag selection mechanism and tag labels should be visually consistent. 6 | * As tags are added, they should be placed at the bottom of the list. Once saved, the tags should be reordered into alphabetic order so upon returning to the tags area, users can easily scan the list. 7 | 8 | ## Simple Tags 9 | ![Image of a Simple Tag.](img/SimpleTags-01.png) 10 | 11 | 1. **Selection:** 12 | * **Implementation Details:** Use the [Bootstrap Combobox](http://www.patternfly.org/pattern-library/widgets/#bootstrap-combobox) for the tag selection so users can either use the list presented or type to filter the list of options. 13 | * Once a category has been chosen, the value field should be enabled. 14 | 15 | 2. **Labels:** 16 | * Once the user selects a value from the list, the tag label should be added below the selection boxes. 17 | * The entire label should have a dark border with the category left aligned. 18 | * The value should be displayed to the right of the category, with a lighter border to distinguish it. 19 | * Each value should have an x icon right aligned to allow for removing it. 20 | 21 | ![Image of Label with a Single Value.](img/SingleValue.png) 22 | * If the tag category only has one associated value, clicking the x on that value will remove the entire tag. 23 | 24 | 3. **Multi-Value Tags:** 25 | * **Implementation Details:** Use the [Bootstrap Multiple Select](http://www.patternfly.org/pattern-library/widgets/#bootstrap-select) for the value selection. 26 | * For categories that can have more than one value associated, the the multiple select widget will indicate values already selected. 27 | * Values can be removed by either deselecting items in the list or by clicking the x next to the tag. 28 | * Additional values are added to the right of the initial value and each has an x icon for removal. 29 | 30 | ![Image of Label with Multiple Values.](img/MultiValue.png) 31 | 32 | 4. **Empty State:** 33 | * When there are no tags associated with an item, the empty state should show the following text: "There are no tags associated" in the area where tags would be added. 34 | 35 | ![Image of a Simple Tag.](img/SimpleTags-Empty.png) 36 | 37 | ## Tagging Multiple Items 38 | 39 | ![Image of Advanced Tags.](img/AdvancedTags-01.png) 40 | 41 | * When tagging multiple items at once, there should be an additional section showing the items that will be affected by the changes. 42 | * In the example shown, Services are being tagged, so the service icons would appear under the "Affected Services" label below all of the listed tags. 43 | * In cases where a category has too many values associated with it, the darker blue background may wrap to the next line to accommodate for additional values. 44 | 45 | ![Image of Advanced Tags.](img/AdvancedTags-02.png) 46 | -------------------------------------------------------------------------------- /UX/common/Tags/img/AdvancedTags-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/AdvancedTags-01.png -------------------------------------------------------------------------------- /UX/common/Tags/img/AdvancedTags-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/AdvancedTags-02.png -------------------------------------------------------------------------------- /UX/common/Tags/img/MultiValue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/MultiValue.png -------------------------------------------------------------------------------- /UX/common/Tags/img/SimpleTags-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/SimpleTags-01.png -------------------------------------------------------------------------------- /UX/common/Tags/img/SimpleTags-Empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/SimpleTags-Empty.png -------------------------------------------------------------------------------- /UX/common/Tags/img/SingleValue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/common/Tags/img/SingleValue.png -------------------------------------------------------------------------------- /UX/template/design.md: -------------------------------------------------------------------------------- 1 | # Feature 2 | 3 | - "xxx" are a secondary navigation item under xxx. 4 | - This area is for the "a role", and is not visible to the "b role". 5 | - This area is provided so the role can: 6 | - a 7 | - b 8 | 9 | ## Use Case (i.e. View Catalogs) 10 | 11 | ### Mockup Name 12 | ![Image Title/Mockup Name](img/CamelCase-01.png) 13 | - Notes 14 | 15 | #### Implementation Details 16 | - Note PatternFly design patterns 17 | - Note icon references 18 | 19 | ## Customer Feedback 20 | 21 | ### Customer Feedback Received 22 | - Overview of customer feedback received 23 | 24 | ### Necessary Customer Feedback 25 | - Questions to follow up with customers 26 | -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/ansible.md: -------------------------------------------------------------------------------- 1 | # Ansible 2 | The following low fidelity mockups depict the initial designs of ansible integration. 3 | 4 | Ansible is a secondary navigation item under Automation. 5 | 6 | Ansible has three tertiary navigation items: 7 | 1. [Credentials](ansible#ansible-repositories) 8 | 1. [Playbooks](ansible#ansible-playbooks) 9 | 1. [Repositories](ansible#ansible-repositories) 10 | 11 | ## Ansible Credentials 12 | The Credentials page includes: 13 | - **Breadcrumb bar:** Automation > Ansible > Credentials 14 | - **Table view:** 15 | ![template](img/ansible-credentials-view.png) 16 | 17 | The table includes the following columns: 18 | - **Name:** 19 | - **Description:** 20 | - **Type:** 21 | - **Owners:** 22 | 23 | ### Filtering & Sorting 24 | Filtering is supported on the following fields: 25 | - Name (default) 26 | - tbd 27 | 28 | Sorting is supporting on the following fields: 29 | - Name (default) 30 | - tbd 31 | 32 | ### Table Interaction 33 | Clicking on a row should show details of the Credential. 34 | 35 | When no repositories exist, use the PatternFly Empty State Pattern 36 | ![template](img/ansible-credentials-view-emptystate.png) 37 | 38 | ### Available Action Buttons 39 | 40 | #### Create Credentials 41 | The following types of credentials can be created: 42 | 1. [AWS Cloud Credentials](ansible#aws-cloud-credentials) 43 | 1. [Google Compute Engine Cloud Credentials](ansible#google-compute-engine-cloud-credentials) 44 | 1. [Microsoft Azure Classic Cloud Credentials](ansible#microsoft-azure-classic-cloud-credentials) 45 | 1. [Microsoft Azure Resource Manager Cloud Credentials](ansible#microsoft-azure-resource-manager-cloud-credentials) 46 | 1. [OpenStack Cloud Credentials](ansible#openstack-cloud-credentials) 47 | 1. [Rackspace Cloud Credentials](ansible#rackspace-cloud-credentials) 48 | 1. [Red Hat CloudForms Cloud Credentials](ansible#red-hat-cloudforms-cloud-credentials) 49 | 1. [Red Hat Satellite 6 Cloud Credentials](ansible#red-hat-satellite-6-cloud-credentials) 50 | 1. [VMware vCenter Cloud Credentials](ansible#vmware vCenter-cloud-redentials) 51 | 1. [Machine Credentials](ansible#machine-credentials) 52 | 1. [Network Credentials](ansible#network-credentials) 53 | 54 | ##### AWS Cloud Credentials 55 | ![template](img/ansible-credentials-create-cloud-aws.png) 56 | 57 | ##### Google Compute Engine Cloud Credentials 58 | ![template](img/ansible-credentials-create-cloud-gce.png) 59 | 60 | ##### Microsoft Azure Classic Cloud Credentials 61 | ![template](img/ansible-credentials-create-cloud-azureclassic.png) 62 | 63 | ##### Microsoft Azure Resource Manager Cloud Credentials 64 | ![template](img/ansible-credentials-create-cloud-azureresmgr.png) 65 | 66 | ##### OpenStack Cloud Credentials 67 | ![template](img/ansible-credentials-create-cloud-openstack.png) 68 | 69 | ##### Rackspace Cloud Credentials 70 | ![template](img/ansible-credentials-create-cloud-rackspace.png) 71 | 72 | ##### Red Hat CloudForms Cloud Credentials 73 | ![template](img/ansible-credentials-create-cloud-cloudforms.png) 74 | 75 | ##### Red Hat Satellite 6 Cloud Credentials 76 | ![template](img/ansible-credentials-create-cloud-satellite.png) 77 | 78 | ##### VMware vCenter Cloud Credentials 79 | ![template](img/ansible-credentials-create-cloud-vcenter.png) 80 | 81 | ##### Machine Credentials 82 | ![template](img/ansible-credentials-create-machine.png) 83 | 84 | ##### Network Credentials 85 | ![template](img/ansible-credentials-create-network.png) 86 | 87 | #### Edit Credentials 88 | tbd 89 | 90 | #### Delete Credentials 91 | tbd 92 | 93 | ## Ansible Playbooks 94 | The Playbooks page includes: 95 | - **Breadcrumb bar:** Automation > Ansible > Credentials 96 | - **Table view:** 97 | ![template](img/ansible-playbooks-view.png) 98 | 99 | The table includes the following columns: 100 | - **Name:** 101 | - **Repository:** 102 | - **Synch Date:** 103 | - **Last Modified Date:** 104 | 105 | Filtering is supported on the following fields: 106 | - Name (default) 107 | - tbd 108 | 109 | Sorting is supporting on the following fields: 110 | - Name (default) 111 | - tbd 112 | 113 | - When no Ansible Playbooks exist, use the PatternFly Empty State Pattern 114 | ![template](img/ansible-playbooks-view-emptystate.png) 115 | 116 | ### Available Actions 117 | 118 | ## Ansible Repositories 119 | 120 | The Repositories page includes 121 | - **Breadcrumb bar:** Automation > Ansible > Repositories 122 | - **Table view:** 123 | ![template](img/ansible-repositories-view.png) 124 | 125 | The table includes the following columns: 126 | - **Name:** 127 | - **URL:** 128 | - **# of Playbooks:** 129 | - **Synch Date:** 130 | - **Last Modified Date:** 131 | - **Clean:** 132 | - **Delete on Update:** 133 | - **Update on Launch:** 134 | 135 | Filtering is supported on the following fields: 136 | - Name (default) 137 | - tbd 138 | 139 | Sorting is supporting on the following fields: 140 | - Name (default) 141 | - tbd 142 | 143 | - When no repositories exist, use the PatternFly Empty State Pattern 144 | ![template](img/ansible-repositories-view-emptystate.png) 145 | 146 | ### Available Actions 147 | 1. [Add](ansible#add-repository) 148 | 2. [Edit](ansible#edit-repository) 149 | 3. [Remove](ansible#remove-repository) 150 | 4. [Synch](ansible#synch-repository) 151 | 152 | #### Add Repository 153 | ![template](img/ansible-repositories-add.png) 154 | 155 | The following fields are available: 156 | - **Name** (required): 157 | - **Description:** Optional description associated with the repository 158 | - **SCM Type:** For initial release, "git" is the only available value for SCM type, thus will be pre-selected and this field will be disabled 159 | - **URL** (required): URL of the git repository 160 | - **SCM Credentials:** SCM credentials to be used for this repository 161 | - **SCM Branch:** Optional text area 162 | - **SCM Update Options** 163 | - **Clean:** Checkbox indicating whether to use clean 164 | - **Delete on Update:** Checkbox indicating whether to use delete on update 165 | - **Update on Launch:** Checkbox indicating whether to use update on launch 166 | 167 | Available buttons: 168 | - **Cancel:** 169 | - **Add:** This button should be disabled until required fields are input. 170 | 171 | #### Edit Repository 172 | tbd 173 | 174 | #### Remove Repository 175 | tbd 176 | 177 | #### Synch Repository 178 | tbd 179 | -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-aws.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-azureclassic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-azureclassic.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-azureresmgr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-azureresmgr.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-cloudforms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-cloudforms.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-gce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-gce.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-openstack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-openstack.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-rackspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-rackspace.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-satellite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-satellite.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-vcenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-cloud-vcenter.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-machine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-machine.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-create-network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-create-network.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-view-emptystate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-view-emptystate.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-credentials-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-credentials-view.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-playbooks-view-emptystate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-playbooks-view-emptystate.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-playbooks-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-playbooks-view.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-repositories-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-repositories-add.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-repositories-view-emptystate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-repositories-view-emptystate.png -------------------------------------------------------------------------------- /UX/ui-classic/automation/ansible/img/ansible-repositories-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-classic/automation/ansible/img/ansible-repositories-view.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/design.md: -------------------------------------------------------------------------------- 1 | # Catalogs 2 | 3 | - "Catalogs" are a secondary navigation item under designer. 4 | - This area is for the service designer, and is not visible to the end user. 5 | - This area is provided so the service designer can: 6 | - perform CRUD operations on catalogs. 7 | - organize their services in catalogs. 8 | 9 | ## View Existing Catalogs 10 | - The default view is an expanded list view 11 | - Eventually a table view should be offered, which is based off of the Angular PatternFly Table ( coming in 2017 with PF4 ) 12 | 13 | ### View Catalog - List View 14 | ![View Catalogs - List View](img/Catalogs-ListView.png) 15 | - Notes 16 | 17 | #### Implementation Details 18 | - Reference Angular PatternFly Expandable List View component 19 | 20 | ### View Catalog - Expanded List Item 21 | ![View Catalogs - Expanded List Item](img/Catalogs-ExpandedListView.png) 22 | - Expandable list view should display the details of the services inside the catalog. The icon, name, description and dialog information should be available. 23 | - Ideally we would like to be able to filter by service name. 24 | 25 | ### View Catalog - Dealing with Truncation 26 | ![View Catalogs - Dealing with Truncation](img/Catalogs-ListViewTruncation.png) 27 | - For descriptions longer than the available text area, allow a hover to read the full description. This should be followed for any fields that get cut off. 28 | 29 | ### View Catalog - Table View 30 | - to be designed 31 | 32 | #### Implementation Details 33 | - Reference Angular PatternFly Table component (tbd) 34 | 35 | ## Catalog Actions 36 | ![Catalog Actions](img/CatalogsAvailableActions.png) 37 | 38 | - The Configuration button group which is available in the Operations UI should be supported in the Service UI 39 | - The button group should be available based on roles 40 | - Available catalog actions are: Create, Edit and Delete 41 | - Create should always be enabled 42 | - Edit should only be enabled if a single item is selected 43 | - Delete should be enabled if one or more catalogs are selected 44 | 45 | ## Create Catalog 46 | 47 | ### Accessing Create 48 | ![Accessing Create](img/CatalogsAccessingCreate.png) 49 | - The Create action menu is available in the Configuration button group 50 | - Create should always be enabled 51 | 52 | #### Implementation Details 53 | - Note that this is not yet a part of PatternFly - we may want to look into getting support 54 | 55 | ### Create Catalog Flow 56 | ![Create Catalog Flow - Screen 1](img/Catalogs-CreateFlow-01.png) 57 | - The create flow is accomplished in a page, not in a modal 58 | - Include a breadcrumb on the page 59 | - Services should be assigned to the catalog through a new design pattern, the dual pane selector 60 | 61 | #### Implementation Details 62 | - Use the [PatternFly proposed dual pane selector](https://github.com/patternfly/patternfly-design/pull/36). This is a proposed design, with no implementation at this point. Note that the initial implementation should not include filter/search/find 63 | 64 | ### Create Catalog 65 | ![Create Catalog Flow - Screen 2](img/Catalogs-CreateFlow-02.png) 66 | - As soon as all required fields are created, the Save button should be enabled 67 | 68 | ## Edit Catalog 69 | 70 | ### Accessing Edit 71 | ![Accessing Edit](img/CatalogsAccessingEdit.png) 72 | - The Edit action menu is available in the Configuration button group 73 | - Edit should only be enabled if one catalog is selected 74 | 75 | ### Edit Catalog Flow 76 | ![Edit Catalog Flow - Screen 1](img/Catalogs-EditFlow-01.png) 77 | - The Edit Catalog flow is exactly the same as the Create flow, except that all required input is already input from the start, so the Save and Cancel buttons are disabled 78 | 79 | ![Edit Catalog Flow - Screen 2](img/Catalogs-EditFlow-02.png) 80 | - Once anything is modified, the Save and Cancel buttons should be enabled 81 | 82 | ## Delete Catalog 83 | 84 | ### Accessing Delete 85 | ![Accessing Delete](img/CatalogsAccessingDelete.png) 86 | - The Delete action menu is available in the Configuration button group 87 | - Delete is enabled if one or more catalogs are selected 88 | 89 | ### Delete Confirmation Dialog 90 | ![Delete Confirmation Dialog](img/Catalogs-DeleteConfirmation.png) 91 | - A delete confirmation dialog should be issued 92 | 93 | #### Implementation Details 94 | - This delete confirmation dialog should conform to the proposed PatternFly design pattern. 95 | -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-CreateFlow-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-CreateFlow-01.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-CreateFlow-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-CreateFlow-02.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-DeleteConfirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-DeleteConfirmation.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-EditFlow-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-EditFlow-01.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-EditFlow-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-EditFlow-02.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-ExpandedListView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-ExpandedListView.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-ListView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-ListView.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/Catalogs-ListViewTruncation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/Catalogs-ListViewTruncation.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/CatalogsAccessingCreate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/CatalogsAccessingCreate.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/CatalogsAccessingDelete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/CatalogsAccessingDelete.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/CatalogsAccessingEdit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/CatalogsAccessingEdit.png -------------------------------------------------------------------------------- /UX/ui-service/Catalogs/img/CatalogsAvailableActions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Catalogs/img/CatalogsAvailableActions.png -------------------------------------------------------------------------------- /UX/ui-service/Dashboard/design.md: -------------------------------------------------------------------------------- 1 | # Dashboard 2 | 3 | - Dashboard is a primary navigation item 4 | - The dashboard is visible to all users 5 | - It provides easy-to-view, high-level information about the user's services and orders 6 | 7 | ## View Dashboard 8 | 9 | ### Dashboard 10 | ![Image Title/Mockup Name](img/Dashboard-01.png) 11 | 12 | #### Implementation Details 13 | - The yellow, green, and red rows are missing 20px of padding along the bottom. 14 | 15 | ## Future Possibilities 16 | 17 | ### Dashboard 18 | 19 | ![Image Title/Mockup Name](img/Dashboard-02.png) 20 | 21 | - Exact numbers of requests and services can be collapsed onto a single card 22 | - If it is possible to store and retrieve past data, the dashboard should be updated to include trend information 23 | 24 | ### Implementation Details 25 | - Data that add up to a whole should be represented with either an area chart or a donut chart 26 | - When the data is useful for looking at historical trends, it should be displayed in an area chart. 27 | - When data is useful primarily because of its current state, it should be displayed in a donut chart. 28 | 29 | 30 | 31 | ## Customer Feedback 32 | 33 | ### Customer Feedback Received 34 | - Overview of customer feedback received 35 | 36 | ### Necessary Customer Feedback 37 | - Questions to follow up with customers 38 | -------------------------------------------------------------------------------- /UX/ui-service/Dashboard/img/Dashboard-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Dashboard/img/Dashboard-01.png -------------------------------------------------------------------------------- /UX/ui-service/Dashboard/img/Dashboard-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Dashboard/img/Dashboard-02.png -------------------------------------------------------------------------------- /UX/ui-service/Framework/img/Framework-Services.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Framework/img/Framework-Services.png -------------------------------------------------------------------------------- /UX/ui-service/Framework/img/Framework.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/Framework/img/Framework.png -------------------------------------------------------------------------------- /UX/ui-service/Framework/masthead.md: -------------------------------------------------------------------------------- 1 | # Masthead 2 | 3 | The Service UI uses the PatternFly [Masthead](https://www.patternfly.org/pattern-library/application-framework/masthead/#_) pattern. 4 | ![Image of a SSUI Framework](img/Framework.png) 5 | 6 | The following items are on the masthead: 7 | - Shopping Cart 8 | - Notifications 9 | - Application Launcher 10 | - Help 11 | - User 12 | -------------------------------------------------------------------------------- /UX/ui-service/Framework/navigation.md: -------------------------------------------------------------------------------- 1 | # Navigation 2 | 3 | The Service UI uses the PatternFly [Vertical Navigation](http://www.patternfly.org/pattern-library/navigation/vertical-navigation/#_) pattern. 4 | * Selections should be visually indicated for primary navigation items. 5 | 6 | ![Image of a Framework with Selection](img/Framework-Services.png) 7 | 8 | * The primary navigation items are: 9 | * Dashboard 10 | * My Services 11 | * My Orders 12 | * Service Catalog 13 | -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/design.md: -------------------------------------------------------------------------------- 1 | # My Orders 2 | 3 | - My Orders is a primary navigation item 4 | - Administrators 5 | - View and approve or deny orders for other users 6 | - End Users 7 | - View status of placed orders 8 | 9 | ## Admin user 10 | 11 | ### Review Orders 12 | ![Image Title/Mockup Name](img/Order_01.png) 13 | - The Admin User sees all orders that have been placed. 14 | 15 | ### Approve Order 16 | ![Image Title/Mockup Name](img/Order_02.png) 17 | - The Administrator can check and approve the requests in an order. 18 | 19 | 20 | #### Implementation Details 21 | - The orders list should use the [List View with simple expansion](https://www.patternfly.org/pattern-library/content-views/list-view/#/api#expanding-rows) pattern 22 | - Clicking the checkbox on an order should expand the order and select all the requests in the order. 23 | - The box on an order should be checked if and only if all the requests in the order are checked. 24 | 25 | ## End user 26 | 27 | ### View Orders 28 | ![Image Title/Mockup Name](img/Order_03.png) 29 | - The End User sees only orders that they have placed 30 | - They can check the status of their currently pending requests and view all past orders and their component requests 31 | 32 | ### View Requests 33 | ![Image Title/Mockup Name](img/Order_04.png) 34 | - Users can cancel orders, or edit and remove component requests 35 | 36 | ### Edit a request 37 | ![Image Title/Mockup Name](img/Order_05.png) 38 | - Clicking the edit button takes the user to a view of the request with editable dialog fields. 39 | 40 | ## Customer Feedback 41 | 42 | ### Customer Feedback Received 43 | - Overview of customer feedback received 44 | 45 | ### Necessary Customer Feedback 46 | - Questions to follow up with customers 47 | -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/img/Order_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyOrders/img/Order_01.png -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/img/Order_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyOrders/img/Order_02.png -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/img/Order_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyOrders/img/Order_03.png -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/img/Order_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyOrders/img/Order_04.png -------------------------------------------------------------------------------- /UX/ui-service/MyOrders/img/Order_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyOrders/img/Order_05.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/design.md: -------------------------------------------------------------------------------- 1 | # My Services 2 | * My Services are a primary navigation item. 3 | * This area is for the end user 4 | * This area is provided so the user can view the current state and details of their services. 5 | 6 | ## Table View 7 | * A Table View is the secondary view that should be added once the PatternFly Angular Table is available. The table will show additional fields that may be missing from the List View. 8 | * Bulk actions can be accessed through the button groups at the top of the list. 9 | 10 | ## List View 11 | * A List View is the default view for My Services and it will not show all fields in this view. 12 | * Bulk actions can be accessed through the button groups at the top of the list. 13 | * Custom button groups will be added to the left of the standard button groups. To conserve space, the button group labels are removed in this view. 14 | * All actions will also be available in the kebab menu for acting on a single service. 15 | ![Image of List View.](img/Services-ListView.png) 16 | * The Service Names are links and will bring the user to a service details page. 17 | * Resources will be shown for legacy services when a VM, Network, or Storage resource exists. For Ansible services, the playbook name should appear for this column instead and for Ansible Tower services, the template name should appear here. 18 | * **Implementation Details:** Reference the Angular PatternFly Expandable List View Component. 19 | 20 | ## List View - Expanded Row 21 | ![Image of Expanded List View.](img/Services-ExpandedListView.png) 22 | * Clicking anywhere on the row (aside from other links or buttons) will expand the row 23 | * Child Services are listed in the expanded portion. If no Child Services exist for a particular service, expand should not work and the caret icon should be hidden for that row. 24 | * Child Services are also links and will bring the user to the child service details page. 25 | 26 | ## Service Details (drilldown page) 27 | * When a single service is chosen, the service details page will be loaded. 28 | * The breadcrumbs will change to show My Services as a link back to the List View. 29 | * The service details will include the following view types: summary view, utilization dashboard, and topology view. The default should be the Summary View. 30 | 31 | ### Service Details - Summary View 32 | * Actions can be accessed through the button groups at the top of the page. Custom button groups will be added to the left of the standard button groups. Button labels should be included in this view. 33 | * The following sections will be displayed on the summary view page: 34 | 1. **Properties:** 35 | ![Image of Detail View for a Service.](img/Services-GenericDetailView.png) 36 | 37 | * The properties section at the top of the summary view will be consistent for ALL services. 38 | * Properties will consist of general information, including tags. Utilization properties will be excluded from this section and will show up in the dashboard view instead. 39 | 40 | 2. **Resources** (optional): 41 | ![Image of Detail View for a Legacy Service.](img/Services-LegacyDetailView.png) 42 | 43 | * Resources will be divided into sections or headings (Compute, Network, and Storage). Each section can expand and collapse, with a compact list view of resources underneath. 44 | * If no resources exist for a particular service, this section should be **hidden.** 45 | * The resources list view will have access control actions available for launching a console and all other resource actions will be listed under the kebab menu. 46 | * Individual resources will be listed as links so users can drill down to a specific resource details view. 47 | 48 | ![Image of Detail View for a Resource.](img/Services-ResourceDetails.png) 49 | 50 | 3. **Results** (optional): 51 | * This section is only displayed for Ansible and Ansible Tower services. For legacy services, this section should be hidden. 52 | 53 | ![Image of Detail View for an Ansible Service.](img/Services-AnsibleDetailView.png) 54 | 55 | * The Results section will have a basic set of information regarding the service, including a credentials section for machine credentials, network credentials, cloud credentials etc. 56 | * This basic set of information will include additional fields for Ansible Tower Services 57 | 58 | ![Image of Detail View for an Ansible Tower Service.](img/Services-AnsibleTowerDetailView.png) 59 | 60 | * The basic information is followed by a compact list view of plays from the most recent play. 61 | * The Standard Out section will include a log of the most recent information available from the time the page was loaded. If the play is still in progress, a status will appear on the right, along with a button to "Watch Live" details of the play. This live version will be displayed in a modal. 62 | 4. **Relationships:** 63 | * Child Services will be listed as links here and will bring the user to the Child Service Summary View. 64 | 65 | ![Image of Detail View for a Child Service.](img/Services-ChildDetailView.png) 66 | 67 | * The breadcrumbs will change to show My Services and the Parent Service as links. 68 | * The service details page will be in the same format as the Parent Service Detail page. 69 | 70 | 71 | ### Service Details - Dashboard View 72 | * The dashboard view will display a utilization trend card with the CPU, Memory, and Storage data. 73 | ![Image of Dashboard View for a Service.](img/Services-DashboardDetailView.png) 74 | 75 | ## Customer Feedback Received 76 | - Overview of customer feedback received 77 | -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-AnsibleDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-AnsibleDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-AnsibleTowerDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-AnsibleTowerDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-ChildDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-ChildDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-DashboardDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-DashboardDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-ExpandedListView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-ExpandedListView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-GenericDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-GenericDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-LegacyDetailView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-LegacyDetailView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-ListView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-ListView.png -------------------------------------------------------------------------------- /UX/ui-service/MyServices/img/Services-ResourceDetails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/MyServices/img/Services-ResourceDetails.png -------------------------------------------------------------------------------- /UX/ui-service/designer/BlueprintDetails/design.md: -------------------------------------------------------------------------------- 1 | # Blueprint Details 2 | 3 | - Blueprint Details is a modal available from the blueprint designer canvas 4 | - This modal is for the service designer 5 | - This modal is provided so the service designer can: 6 | - View and edit the details of the current blueprint 7 | - Set the provision and action orders of the current blueprint 8 | 9 | ## Set Actions and Delays 10 | 11 | ### Actions and Delays 12 | ![Image Title/Mockup Name](img/ActionsAndDelays-01.png) 13 | - Action order will include the ability to select the action that each item takes when it starts and stops, as well as the waiting period after performing that action. 14 | - Dragging an item across a divider will change its provision or action order to match the other items in the group. 15 | - Checking the “Same as Provision Order” box will automatically place action order items in the same order as the provision order, but leave them interactive. Dragging an action order item will uncheck the box. 16 | 17 | #### Implementation Details 18 | - Action and provision order will adopt the [Drag and Drop](https://github.com/patternfly/patternfly-design/blob/master/pattern-library/forms-and-controls/drag-and-drop/design/design.md) PatternFly standards. 19 | 20 | ### Actions and Delays Alternate 21 | ![Image Title/Mockup Name](img/ActionsAndDelays-02.png) 22 | - If word widths become an issue when translated, an alternative symbol-based version could be used instead. 23 | 24 | ## Customer Feedback 25 | 26 | ### Customer Feedback Received 27 | - Overview of customer feedback received 28 | 29 | ### Necessary Customer Feedback 30 | - Questions to follow up with customers 31 | -------------------------------------------------------------------------------- /UX/ui-service/designer/BlueprintDetails/img/ActionsAndDelays-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/BlueprintDetails/img/ActionsAndDelays-01.png -------------------------------------------------------------------------------- /UX/ui-service/designer/BlueprintDetails/img/ActionsAndDelays-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/BlueprintDetails/img/ActionsAndDelays-02.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/design.md: -------------------------------------------------------------------------------- 1 | # Dialogs 2 | 3 | - "Dialogs" is a secondary item under the "Designer" category 4 | - This area is for the Service Designer and is not visible to other users 5 | - This area is provided so the Designer can create and edit service dialogs 6 | 7 | ## Dialog Editor 8 | 9 | ### Blank Dialog Editor 10 | 11 | ![Blank dialog editor](img/DialogEditor-01.png) 12 | - When the user creates a new dialog, they are brought to this screen with a single tab and section already populated. 13 | 14 | #### Implementation Details 15 | - The Dialog Editor should follow the same conventions as the blueprint editor when generating names for new dialogs and dialog elements. (e.g. "Untitled Dialog") 16 | 17 | ### Placing a dialog element 18 | ![Placing an element](img/DialogEditor-02.png) 19 | - Hovering over an element in the toolbar or on the canvas should show a grab handle and outline of the element 20 | 21 | ![Element being placed](img/DialogEditor-03.png) 22 | - The user may click and drag the element to a specific place, or click on it once which will place it at the end of the lowest section on the current tab 23 | 24 | ### Editing an element 25 | ![Element with revealed edit button](img/DialogEditor-04.png) 26 | - Elements can be duplicated and deleted by selecting them and clicking the duplicate and delete buttons in the toolbar. 27 | - Hovering over a placed element will show the edit icon 28 | 29 | ![Element editor modal](img/DialogEditor-05.png) 30 | - Clicking the edit icon should bring up the element editor modal 31 | 32 | #### Implementation Details 33 | - The title of the modal should be "Edit [type of element]" 34 | 35 | ### Stretch Featues (Optional) 36 | ![Editor with properties panel](img/DialogEditor-06.png) 37 | - Space and technology permitting, the element editor modal should be replaced with an element properties panel that enables the user to edit the selected element in real time. 38 | - Undo and Redo features would be required for this to be effective 39 | - Checking the "Preview Dialog" option would hide the toolbox and properties panel and display the dialog as it would appear when it is being used. 40 | 41 | 42 | ### Additional Functionality 43 | ![Adding help text to an element](img/DialogEditor-07.png) 44 | - Filling in the Help Text field on an element will provide the consumer with information about the purpose of the element and how it should be populated. 45 | 46 | ![An element with help text](img/DialogEditor-08.png) 47 | - If an element has a populated Help Text field (not undefined) the rendered element in the dialog will be accompanied by a [Field Level Help](https://www.patternfly.org/pattern-library/forms-and-controls/field-level-help/#_) icon. 48 | - Elements with undefined Help Text will not have this icon 49 | 50 | ![Enabling searchability in a dropdown](img/DialogEditor-09.png) 51 | - Dropdown elements will have an additional parameter that if turned on, will enable the [search capabilities](https://www.patternfly.org/pattern-library/widgets/#bootstrap-select) of the dropdown 52 | 53 | ## Customer Feedback 54 | 55 | ### Customer Feedback Received 56 | - Overview of customer feedback received 57 | 58 | ### Necessary Customer Feedback 59 | - Questions to follow up with customers 60 | -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-01.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-02.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-03.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-04.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-05.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-06.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-07.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-08.png -------------------------------------------------------------------------------- /UX/ui-service/designer/Dialogs/img/DialogEditor-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/Dialogs/img/DialogEditor-09.png -------------------------------------------------------------------------------- /UX/ui-service/designer/design.md: -------------------------------------------------------------------------------- 1 | # Service Designer 2 | 3 | - "xxx" are a secondary navigation item under xxx. 4 | - This area is for the "a role", and is not visible to the "b role". 5 | - This area is provided so the role can: 6 | - a 7 | - b 8 | 9 | 10 | 11 | ## Exporting the Canvas 12 | 13 | ![Image Title/Mockup Name](img/CanvasExport-01.png) 14 | - Export/download options will be available in the project-level actions kebab. 15 | 16 | #### Implementation Details 17 | - This feature will make use of the browser’s “downloads” section. 18 | - Downloads should be named according to the style “My_New_Blueprint.pdf” 19 | 20 | 21 | 22 | ## Pan/Zoom the Canvas 23 | 24 | ### Maximum Zoom 25 | ![Maximum canvas zoom](img/CanvasPanZoom-01.png) 26 | - Clicking on the - and + buttons will zoom the canvas out and in, respectively. 27 | - The default zoom level will be considered 100% zoom. The + button is disabled at this zoom level. 28 | 29 | #### Implementation Details 30 | - Icons 31 | - fa-plus 32 | - fa-minus 33 | 34 | ### 75% Zoom 35 | ![75 percent canvas zoom](img/CanvasPanZoom-02.png) 36 | - Clicking the button once will cause the canvas to transition to 75% of the original zoom level. 37 | 38 | ### 50% Zoom 39 | ![50 percent canvas zoom](img/CanvasPanZoom-03.png) 40 | - Zooming out a second time will redraw the canvas at 50% of the original size. This will be the most zoomed-out state of the canvas. 41 | 42 | 43 | ### Before Panning 44 | ![Canvas before panning](img/CanvasPanZoom-04.png) 45 | 46 | #### Implementation Details 47 | - When the canvas is not zoomed out all the way, hovering over the canvas background will change the mouse pointer to “cursor:all-scroll”. 48 | - When it is zoomed out all the way, the cursor property will be set to “cursor: default”. 49 | 50 | ### After Panning 51 | ![Canvas after panning](img/CanvasPanZoom-05.png) 52 | - Clicking and dragging on the canvas background when the cursor is in the all-scroll state will pan the canvas. 53 | 54 | ## Customer Feedback 55 | 56 | ### Customer Feedback Received 57 | - Overview of customer feedback received 58 | 59 | ### Necessary Customer Feedback 60 | - Questions to follow up with customers 61 | -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasExport-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasExport-01.png -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasPanZoom-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasPanZoom-01.png -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasPanZoom-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasPanZoom-02.png -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasPanZoom-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasPanZoom-03.png -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasPanZoom-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasPanZoom-04.png -------------------------------------------------------------------------------- /UX/ui-service/designer/img/CanvasPanZoom-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManageIQ/manageiq-design/74c8d4edeb7e67f8049c37f43034ee513764bdb7/UX/ui-service/designer/img/CanvasPanZoom-05.png -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate 2 | baseurl: /manageiq-design 3 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{ site.title | default: site.github.repository_name }} 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | View on GitHub 21 | 22 |

ManageIQ Design

23 | 24 | {% if site.show_downloads %} 25 |
26 | Download this project as a .zip file 27 | Download this project as a tar.gz file 28 |
29 | {% endif %} 30 |
31 |
32 | 33 | 34 |
35 |
36 | {{ content }} 37 |
38 |
39 | 40 | 41 | 48 | 49 | {% if site.google_analytics %} 50 | 58 | {% endif %} 59 | 60 | 61 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "{{ site.theme }}"; 5 | $font-size-base: 14; 6 | 7 | body { 8 | background-color: #063452; 9 | color: #363636; 10 | font-family: "Open Sans", Helvetica, Arial, sans-serif; 11 | font-size: $font-size-base; 12 | line-height: 1.66666667; 13 | } 14 | a { 15 | color: #0088ce; 16 | text-decoration: none; 17 | } 18 | a:hover, a:focus { 19 | color: #00659c; 20 | text-decoration: underline; 21 | } 22 | a:focus { 23 | outline: 5px auto -webkit-focus-ring-color; 24 | outline-offset: -2px; 25 | } 26 | h1, h2, h3, h4, h5, h6 { 27 | background: none; 28 | color: inherit; 29 | font-family: inherit; 30 | font-weight: 500; 31 | line-height: 1.1; 32 | } 33 | h1, h2, h3 { 34 | margin-top: 30px; 35 | margin-bottom: 10px; 36 | } 37 | h4, h5, h6 { 38 | font-weight: 600; 39 | margin-top: 20px; 40 | margin-bottom: 10px; 41 | } 42 | h1 { 43 | font-size: floor(($font-size-base * 2.6)); 44 | } 45 | h2 { 46 | font-size: floor(($font-size-base * 2.15)); 47 | } 48 | h3 { 49 | font-size: ceil(($font-size-base * 1.7)); 50 | } 51 | h4 { 52 | font-size: ceil(($font-size-base * 1.25)); 53 | } 54 | h5 { 55 | font-size: $font-size-base; 56 | } 57 | h6 { 58 | font-size: ceil(($font-size-base * 0.85)); 59 | } 60 | p { 61 | margin: 0 0 10px; 62 | } 63 | ul, ol { 64 | margin-top: 0; 65 | margin-bottom: 30px; 66 | } 67 | ul ul, ol ul, ul ol, ol ol { 68 | margin-bottom: 0; 69 | } 70 | code, kbd, pre, samp { 71 | font-family: Menlo, Monaco, Consolas, monospace; 72 | } 73 | code { 74 | background-color: #def3ff; 75 | border-radius: 1px; 76 | color: #004368; 77 | font-size: 90%; 78 | padding: 2px 4px; 79 | } 80 | pre { 81 | display: block; 82 | padding: 9.5px; 83 | margin: 0 0 10px; 84 | font-size: 11px; 85 | line-height: 1.66666667; 86 | word-break: break-all; 87 | word-wrap: break-word; 88 | color: #363636; 89 | background-color: #fafafa; 90 | border: 1px solid #ccc; 91 | border-radius: 1px; 92 | } 93 | pre code { 94 | padding: 0; 95 | font-size: inherit; 96 | color: inherit; 97 | white-space: pre-wrap; 98 | background-color: transparent; 99 | border-radius: 0; 100 | } 101 | img { 102 | max-width: 1000px; 103 | 104 | @media screen and (max-width: 1000px) { 105 | max-width: 100%; 106 | } 107 | } 108 | #main_content_wrap { 109 | background: #f9f9f9; 110 | border: none; 111 | } 112 | #header_wrap { 113 | background-color: #063451; 114 | background-image: linear-gradient(to right, #063451 0, #0c69a5 100%); 115 | } 116 | #footer_wrap { 117 | background-color: #063452; 118 | } 119 | 120 | #header_wrap .inner { 121 | max-width: 100%; 122 | padding: 10px; 123 | } 124 | 125 | #project_title a { 126 | color: #fff; 127 | font-family: "Open Sans", Helvetica, Arial, sans-serif; 128 | font-size: 36px; 129 | font-weight: 300; 130 | } 131 | 132 | .inner { 133 | max-width: 1000px; 134 | } 135 | --------------------------------------------------------------------------------