StudioHub Style Guides

Branding

Logo Design

SMALL BLACK WHITE LARGE BLACK WHITE

Concept

Design

The logo's have been designed to follow a common set of principles and be recognised as part of a group of websites that form the UMG Platform. Stylized to a 'San Serif' format with narrow kerning, light in weight and flowing rounded curves, with short ascenders and descenders. Split between dark and light grey, each with a vibrant icon to help solidify the overall concept.

StudioHub - (O) Power Button, commonly used for powering up audio equipment.
SupplyChain - Arrow represents completed projects entering the Supply Chain.
RightsHub - (S) The plan view of two people shanking hands to consolidate the deal.

Usage

All logo's are vector-based (SVG) and are fully scaleable without losing quality. Any additional logos used in the solution, must be converted to Data Url's using this tool dataurlmaker. Please add the generated code to the 'images-data.less' file.

*Note: For each additional image, please refresh your browser, otherwise the subsequent image data-url gets corrupted.

When using any UMG Platform logo's, either for web or print, the colour scheme and lettering must remain exactly as the original specified in this document. Do not distort the apsect ratio or skew/rotate all or any section of the logo. The logo can be scaled up or down to any given size, but, there needs to be a minimum margin of 5 pixels around the logo wherever used. Colours from left to right are as follows:

Text to the Left : Hex: #333333, RGB : 51.51.51
Center Icons and Flags : Hex: #c93500, RGB : 201.53.0
Text to the Right : Hex: #999999, RGB : 153.153.153

Typography

Google's open source font 'Open Sans' is used exclusively across studio hub and no other font should be introduced with the current design specifications.

Open Sans has several variations in style and these are used as follows:

Google Open Source Fonts

Body Copy

Default : Open Sans Regular : 1.2em : #333333 : Line-Height 16 pixels
Bold (use a 'strong' tag for bold copy) : Open Sans Semi Bold : 1.2em : #333333 : Line-Height 16 pixels

Headings

H1 : Open Sans Light : 30 pixels : #666666
H2 : Open Sans Light : 24 pixels : #333333
H3 : Open Sans Regular : 16 pixels : #666666
H4 : Open Sans Semi-Bold : 12 pixels : #666666

Colour Usage

ALL Call-To-Actions

#c93500

#E03C00 - use on dark bg only #333333

Grey Pallete for Background Tints (Web-Safe)

#333333

#444444

#666666

#777777

#888888

#999999

#bbbbbb

#cccccc

#dddddd

#eeeeee

#f1f1f1

#f4f4f4

#f8f8f8

#fbfbfb

Validation Messages

#0093c3

HTTP Links

#3087C8

Milestones

#999999 [ not-applicable ]

#f13b3b [ not-done ]

#ebb701 [ in-progress ]

#039C25 [ done ]

Icons

MK Set

When adding a new slider menu item, please ensure you check the available icons below that you feel are relevant to the section. If there's not one available, please contact the Contact Author of this document. *Note: All images used across the platform are data url's, these can be referenced in the 'images-data.less' file.

Bootstrap Glyphicons

Please go to Bootstrap Glyphicons to view the complete set.

navigation

UMG Platform

The Platform Navigation serves a few different purposes. It allows those users with sufficient permissions to switch between the different workspace and also acts as a breadcumb and overall site navigation.

Main Navigation

Below is an example of the main site Navigation which sits within the light grey section of the Header (Overview, Progress, Recordings...). This is a very simple single-level component with a count injected at the end. There are some further features that are added such as status markers within Product Approvals section.

Quick Links

Usage

The Quick Links Navigation contains useful section-focused links such as Comments, Print and Team Members.

Sliders

General

Sliders are neatly tucked away to the side in order to save space.

Activity Stream

Is what it says on the tin really. A handy way to gain more information about recent activities such as Milestone changes and Apprpval Pregress.

Tools

Tools are accessible throughout the site and should always reflect the section you're in. It enables users to Activate and Create Projects, Create and Search for Deals, Manage stuff such as Label logos and Teams etc..

My Tasks

My Tasks is a quick way to gather info about you're next steps and tasks that require your action. There is also a badge to indicate the number of tasks you have remaining.

Markup

HTML5

For business reasons, currently all sites under the UMG Platform are non-responsive and there is no mobile version available. This can be a problem when it comes to rendering the site on the various devices with varying screen resolution. In order to solve this challenge, the platform has been designed to use a 'fluid' layout using 'Unordered Lists' modified to reposition content depending on screen resolution, so that when viewed on a smaller screens, the page should wrap naturally and still maintain a structured layout without breaking the overall affect.

Below is an example of the HTML5 markup structure. UMG Platform uses a variation of this but in priciple, your page should have as few tags as possible. A wrapper 'Section' with and section components wrapped in 'Article Tags'. Any left section should be wrapped in an 'Aside' and Navigation wrapped in a 'Nav' tag and so on...

Example

HTML5 Markup

Unordered Lists

Inline Lists for Fluid Layout

add class "list-inline" to the ul

Always try and use inline-lists. These have been adapted to wrap content on smaller screens. You may also need to add a label tag, in this example it should go above the 'glyphicon-remove-circle'. If you do need to add a label, please also add a 'clear left' class to the remove glyph 'glyphicon-remove-circle clear-left'.

                <section>
                    <article ng-hide=”showingForm”>
                        <h2>Contributors</h2>
                        <ul class=”list-inline”>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>Paul Smith</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>Republic Records</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>16 July 1980</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                        </ul>
                    </article>
                    <form ng-show=”showingForm”>
                        <ul class=”list-inline”>
                            <li>
                                <label>Name</label>
                                <input placeholder=”Name” type=“text” />
                            </li>
                            <li>
                                <label>Label</label>
                                <input placeholder=”Label” type=“text” />
                            </li>
                            <li>
                                <label>D.O.B</label>
                                <input placeholder=”D.O.B” type=“text” />
                            </li>
                            <li>
                                <button class=”grey-button” type=“submit”>Cancel</button>
                                <button class=”submit” type=“submit”>Save</button>
                            </li>
                        </ul>
                    </form>
                </section>

Standard Lists

add class "standard-list" to the ul

Below is an example of a standard list. If your design requires this type of layout, please use the class name 'standard-list'. This will force any nested lists within a given inline-list to render in the standard layout. If you required a bullet list, please add the class 'list-bullet'.

                <section>
                    <article>
                        <h2>Contributors</h2>
                        <ul class=”list-standard”>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>Paul Smith</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>Republic Records</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-remove-circle"></i>
                                <strong>16 July 1980</strong>
                                <i class="glyphicon glyphicon-pencil glyphicon-inline"></i>
                            </li>
                        </ul>
                    </article>
                    <form ng-show=”editing”>
                        <ul class=”list-standard”>
                            <li>
                                <label>Name</label>
                                <input placeholder=”Name” type=“text” />
                            </li>
                            <li>
                                <label>Label</label>
                                <input placeholder=”Label” type=“text” />
                            </li>
                            <li>
                                <label>D.O.B</label>
                                <input placeholder=”D.O.B” type=“text” />
                            </li>
                            <li>
                                <button class=”grey-button” type=“submit”>Cancel</button>
                                <button class=”submit” type=“submit”>Save</button>
                            </li>
                        </ul>
                    </form>
                </section>

Tables

Full Width with Pop-Under

Most tables across UMG Platform should use this style table. Add the class 'table-striped' to the opening table tag.

*Note: You must include a table outer wrapper element with the class name 'alternating-background-wrapper'. The CSS within the solution will deal with the layout. Please also note that if you require the pop-under panel for 'table-striped' you must add your row repeater to the 'tbody' and NOT the 'tr' tag so as to encapsulate the upper and lower rows.

Table Striped

                <table class="table-striped">
                    <thead>
                        <tr>
                            <th><label> </label></th>
                            <th><label>#</label></th>
                            <th><label>Title</label></th>
                            <th><label>Parental<br>Advisory</label></th>
                            <th><label>Version<br>Title</label></th>
                            <th><label>Artist</label></th>
                            <th><label>ISRC</label></th>
                        </tr>
                    </thead>
                    <tbody> <!-- repeat the body element to encapsulate the lower pop-under row 'expanded-details' -->
                        <tr>
                            <td class="toggle" click.delegate="toggleCurrentRow(track)"></td> <!-- arrow to toggle bottom row 'expanded-details' -->
                            <td>10</td>
                            <td>Timothy Where You Been (Featuring Jet)</td>
                            <td>NotApplicable</td>
                            <td>Track Version</td>
                            <td>Timbaland, Jet</td>
                            <td>USUM70913840</td>
                        </tr>
                        <tr class="expanded-details" show.bind="IsExpanded"> <!-- 'expanded-details' row -->
                            <td colspan="7">
                                <section>
                                    <h2>Rights Restriction</h2>
                                    <table>
                                        <thead>
                                            <tr>
                                                <th><label>Restrictions</label></th>
                                                <th><label>Rights</label></th>
                                                <th><label>Countries</label></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Rights Restricted</td>
                                                <td>Ad-Funded, Streaming</td>
                                                <td>World</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </section>
                            </td>
                        </tr>
                    </tbody>
                </table>

Scrolling

JavaScript Version

To enable the JavaScript Scrolling feature please add 'data-perfect-scrollbars' to your container element.

More Reliable Bespoke Version

The JavaScript version above doesn't always work as it should do and is a bit buggy, therefore I wrote a more simple CSS-Based version, implemention detailed below.

Remember to set a min-height and max-height class

Sticky Header

Fixed Table Headers

In some scenarios you may want to fix the header when scrolling page with a large amount of data. In this case there is a directive available in the solution called 'stickyElement'. To use it you'll need to pass in the sticky-element attribute.

Example of the Sticky Header

Controls

Buttons

Forms and General Use

Please enure you use the below buttons when creating forms and wherever a strong call-to-action is required. There is one variation which can be found under the 'Popups' section where the buttons span the content area but mostly they will be displayed as shown below.

Class Names

White classname = submit-white
Charcoal classname = grey-button
Red classname = submit
Read Only classname = read-only
For correct v-alignment withing a UL class = 'list-inline', add the classname submit-inline

Please note that if the buttons appear in the 'inline-list' UL (UL class = inline-list), then for the correct vertical alignment, please add the classname 'submit-inline' to the button itself. Also, if using the grey and red buttons together in the same 'li' element, please ensure that the charcoal button is on the left and the red button is on the right. This is to ensure consistency, if it's the other way around then the margins won't kick-in and they will be shunted together.

Bootstrap Icons

Used as buttons in some cases for editing 'glyphicon-pencil', deleting 'glyphicon-remove-circle' etc. I also created a bespoke set of icons which can be found under Navigation/Other (Mainly used for Navigation) but there's an additional set that can be found in the solution, within the 'images-data.less' file. These can be used in conjunction with the Bootstrap Icons

Popups

Cloud Help - only used for more info

There are a few variations of the cloud-help directive depending on how you want to use it. It can be found in the solution here: Areas/Common/Modules/Popups/CloudPopup.cshtml

Note: This popup should only ever be used as a tooltip for more detailed information. Refer to the Label Landing Page in LWS for a working example.

Position center bottom of icon
Position bottom left of icon
Position bottom right of icon

Position center top of icon
Position top left of icon
Position top right of icon

Markup

        
            <!--
            PLEASE NOTE THAT THIS POPUP SHOULD ONLY EVER BE USED FOR DISPLAYING READONLY DATA FOR EXAMPLE 
            INFROMATION ABOUT A PRODUCER NAME AND TELEPHONE NUMBER ECT. IF YOU REQUIRE A POPUP
            TO DISPLAY FORM DATA, PLEASE USE THE 'status-popup-wrapper-right'
                
            YOU CAN CHANGE THE POSITION OF THE BELOW POPUP BY CHANGING THE 'position' PARAMETER. 
            CLASS NAMES ARE AS FOLLOWS:

                position="top"
                position="bottom"
                position="top-right"
                position="bottom-right"
                position="top-left"
                position="bottom-left"
                
                THERE'S ALSO A READ-ONLY PARAM AND AN H3 TITLE TAG IF NEEDED.
            -->
            <div class="relative float-left">
                <a class="call-to-action no-wrap margin-left" cloud-popup-handle="showMeMoreInt_{{ master.Id }}">({{ master.InternalVersionTitles.length }}) titles</a>
                <cloud-popup name="showMeMoreInt_{{ master.Id }}" read-only="false" title="" position="bottom" stop-propagation>
                   <ul>
                       <li>Your Content Here...</li>
                   </ul>
                </cloud-popup>
            </div>
            <!-- OPTION IF EXCLAMATION MARK IS REQUIRED -->
            <div>
                <strong class="float-left">view additional info</strong>
                <span class="exclamation relative" cloud-popup-handle="additionalInfo_{{ master.Id }}">
                    <cloud-popup name="additionalInfo_{{ master.Id }}" read-only="false" title="" position="bottom" stop-propagation>
                        <ul>
                            <li>{{song.AdditionalInformation}}</li>
                        </ul>
                    </cloud-popup>
                </span>
            </div>

Note: Remember to change to position attribute to either 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'.

Popups

Set Status Popups - used for managing content

There are a few variations of the set-status-popup depending on how you want to use it. To view current usage, run a search in the solution against *html for 'set-status-popup'. The actual directive name is 'SetStatusPopup.cshtml'

Note: The HTML below contains all variations depending on whether you want to display the popup on the top, right, bottom or left of the call-to-action.

Markup

            <!--
            THE BELOW CLASS 'status-popup-wrapper-right' WILL POSITION THE POPUP TO THE RIGHT OF YOUR 'call-to-action'.
            YOU CAN HAVE THE POPUP APPEAR ON THE TOP, RIGHT, BOTTOM OR LEFT.
            FOR EXAMPLE, JUST CHANGE THIS CLASS TO 'status-popup-wrapper-left'

            PLEASE NOTE THAT THIS POPUP SHOULD ONLY EVER BE USED FOR DISPLAYING FORM DATA. IF YOU REQUIRE A POPUP
            TO DISPLAY READONLY DATA, FOR EXAMPLE INFROMATION ABOUT A PRODUCER NAME AND TELEPHONE NUMBER ECT, PLEASE
            USE THE <cloud-popup> DIRECTIVE
            -->

        <section class="status-popup-wrapper-right">
        <a class="glyphicon glyphicon-pencil" data-set-status-popup-handle="someVar_{{ someId }}"></a>
                <!--<a class="call-to-action" data-set-status-popup-handle="someVar_{{ someId }}">You May Want a Link?</a>-->
        <set-status-popup name="someVar_{{ someId }}" article-class="" on-open="popupStatus=true" on-close="popupStatus=false">
        <form name="myForm" ng-submit="myForm.$valid" novalidate>
        <ul class="list-inline">
        <li>
        <input type="radio" />



        <label>Must Appear After Radio</label>
                            </li>
        <li>
        <input type="checkbox" />



        <label>Must Appear After Checkbox</label>
                            </li>
        <li>
        <label>Must Be Before Input</label>
        <input class="clear-left" type="text" value="" />



                            </li>
        <li>
                                <!-- Example Validation for Email with Required Marker -->
        <label for="Email">@Text.Label("Email")</label>
        <input type="email" name="EmailAddress" placeholder="Email" data-ng-model="myFormModel.EmailAddress" />



        <required-marker field="myForm.EmailAddress"></required-marker>
        <email-error field="myForm.EmailAddress"></email-error>
                            </li>
        <li>
        <button type="submit" class="submit" data-set-status-popup-close="someVar_{{ someId }}" data-ng-click="var.whatEverMethod() && myForm.$valid">Save</button>
                            </li>
                        </ul>
                    </form>
                </set-status-popup>
            </section>
            
            <!--
            THE BELOW VERSION IS ONLY USED ONCE AT THE TOP OF EVERY PAGE WITHIN STUDIOHUB THAT 
            REQUIRES AN INITIAL SETUP STAGE, FOR EXAMPLE ADDING A NEW SET OF DATA TO THE PAGE.
            -->

        <header>
        <section class="status-popup-wrapper-bottom">
        <button class="submit-white" data-set-status-popup-handle="someVar_{{ someId }}">Create Verification Request</button>
        <set-status-popup name="someVar_{{ someId }}" article-class="" on-open="popupStatus=true" on-close="popupStatus=false">
        <form name="myForm" ng-submit="myForm.$valid" novalidate>
        <div class="margin-bottom-xlarge clear-left full-width-element">
        <h3>Title Must Appear Before List</h3>
        <ul class="list-inline">
        <li>
        <input type="radio" />



        <label>Must Appear After Radio</label>
                                    </li>
        <li>
        <input type="checkbox" />



        <label>Must Appear After Checkbox</label>
                                    </li>
        <li>
        <label>Must Be Before Input</label>
        <input class="clear-left" type="text" value="" />



                                    </li>
        <li>
                                        <!-- Example Validation for Email with Required Marker -->
        <label for="Email">@Text.Label("Email")</label>
        <input type="email" name="EmailAddress" placeholder="Email" data-ng-model="myFormModel.EmailAddress" />



        <required-marker field="myForm.EmailAddress"></required-marker>
        <email-error field="myForm.EmailAddress"></email-error>
                                    </li>
                                </ul>
                            </div>
        <div class="double">
        <button type="button" class="grey-button" data-set-status-popup-close="someVar_{{ someId }}">@Text.Label("Cancel")</button>
        <button type="submit" class="submit" ng-show="myForm.$valid" data-ng-click="var.whatEverMethod() && myForm.$valid">Save</button>
        <button type="submit" class="readOnly" ng-show="!myForm.$valid">Save</button>
                            </div>
                        </form>
                    </set-status-popup>
                </section>
            </header>

Note: Remember to change to position attribute to either 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'.

Set Status Popups for General Forms

Used throughout StudioHub for managing Form Data.

Expand & Collapse Multiple Panels

Version when no Id

                span class="toggle-masters">
                <a class="call-to-action margin-right" ng-click="setExpandedForAllSections(true)" ng-hide="areAllExpanded()">expand-all</a>
                <a class="call-to-action margin-right" ng-click="setExpandedForAllSections(false)" ng-show="isAnyExpanded()">collapse-all</a>
                </span>

                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': generalExpanded }">
                    <h2 data-ng-click="generalExpanded=!generalExpanded">General</h2>
                    <section-general data-ng-if="generalExpanded"></section-general>
                </section>
                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': rightsExpanded }">
                    <h2 data-ng-click="rightsExpanded=!rightsExpanded">Rights</h2>
                    <section-rights data-ng-if="rightsExpanded"></section-rights>
                </section>
                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': contributorsExpanded }">
                    <h2 data-ng-click="contributorsExpanded=!contributorsExpanded">Contributors</h2>
                    <section-contributors data-ng-if="contributorsExpanded"></section-contributors>
                </section>
                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': sessionsExpanded }">
                    <h2 data-ng-click="sessionsExpanded=!sessionsExpanded">Sessions</h2>
                    <section-sessions data-ng-if="sessionsExpanded"></section-sessions>
                </section>
                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': writersExpanded }">
                    <h2 data-ng-click="writersExpanded=!writersExpanded">Writers</h2>
                    <section-writers data-ng-if="writersExpanded"></section-writers>
                </section>
                <section class="masters-data toggleClosed" data-ng-class="{ 'toggleOpen': creditsExpanded }">
                    <h2 data-ng-click="creditsExpanded=!creditsExpanded">Credits</h2>
                    <section-credits data-ng-if="creditsExpanded"></section-credits>
                </section>

                JavaScript
                ----------

                $scope.areAllExpanded = function () {
                return  $scope.generalExpanded && $scope.sessionsExpanded && $scope.rightsExpanded &&
                $scope.contributorsExpanded && $scope.writersExpanded && $scope.creditsExpanded;
                };

                $scope.isAnyExpanded = function () {
                return  $scope.generalExpanded || $scope.sessionsExpanded || $scope.rightsExpanded ||
                $scope.contributorsExpanded || $scope.writersExpanded || $scope.creditsExpanded;
                };

                $scope.setExpandedForAllSections = function (expanded) {
                $scope.generalExpanded = $scope.sessionsExpanded = $scope.rightsExpanded =
                $scope.contributorsExpanded = $scope.writersExpanded = $scope.creditsExpanded =
                $scope.expandAll = expanded;
                };

Version when have an Id

                <a class="call-to-action expandLink" data-ng-click="toggleAll('expand')">expand all</a>
                <a class="call-to-action collapseLink" data-ng-click="toggleAll('collapse')">collapse all</a>
                
                JavaScript
                ----------

                var rowsExpanded = {};
                var modes = { expand: 'expand', collapse: 'collapse' };
                var expandMode = modes.expand;

                $scope.toggleRow = function (itemId) {
                rowsExpanded[itemId] = rowsExpanded[itemId] ? false : true;
                };

                $scope.toggleAll = function (toMode) {
                var toggleItemExpansion = function (item) {
                rowsExpanded[item.Id] = toMode === modes.expand ? true : false;
                };
                $scope.songs.forEach(toggleItemExpansion);
                $scope.orphanSongs.forEach(toggleItemExpansion);
                $scope.commitments.forEach(toggleItemExpansion);
                $scope.childlessCommitments.forEach(toggleItemExpansion);
                expandMode = toMode === modes.expand ? modes.collapse : modes.expand;
                };

                $scope.canToggleAll = function (toMode) {
                return expandMode === toMode;
                };

                $scope.canToggle = function (itemId, toMode) {
                switch (toMode) {
                case modes.expand:
                return !rowsExpanded[itemId];
                case modes.collapse:
                return rowsExpanded[itemId] === true;
                default:
                throw new Error('Don\'t know mode ' + toMode);
                }
                };

                $scope.toggle = function (itemId, toMode) {
                return rowsExpanded[itemId] = toMode === modes.expand ? true : false;
                };

                $scope.expanded = function (itemId) {
                return rowsExpanded[itemId] === true;
                };

Handy Snippets

Optional Comma

Used to comma separate strings, removing the last comma automatically. Currently used on roles (Song-Overview Page).

HTML

Match Element Heights

Used to dynamically find the tallest element in a given repeater and set all other elements within this repeater to its height (the tallest). Why would I need to do this? When stacking block elements horizontally, for example lists that are displayed inline-block, the elements that would normally wrap to the row below get stuck against the tallest (asuming there is a taller list-item before those that wrap).

HTML

Add Attributes

Bind additional attributes such as HTML or Text to a given string. For example, following a Song Title enclose a Version Title with parentheses.

HTML

Select Dropdown

Please ensure you use the correct implementation for dropdown selects. The is a lookup available for these called 'lookupSelect.js'.

HTML

Printing

Version Local to Your View

HTML

                <!-- ADD TO TYPESCRIPT -->
                public printSummaryReport = () => {
                    this.$scope.$broadcast('print-content');
                };
                <!-- ADD TO VIEW -->
                <a class="lab-cop-rep icons" data-ng-click="vm.printSummaryReport()"></a>
                <section ng-show="false" print-content>
                    <header>
                        <h1>Title</h1>
                        <button type="button" class="submit" onclick="printForm(this)">Print</button>
                    </header>
                    <header class="sub-header">
                        <img class="label-logo" data-ng-src="{{vm.getLabelFamilyLogoSrc()}}" />
                        <h2 class="clear-left">Artist: <strong>{{vm.verificationRequestToPrint.ArtistName}}</strong></h2>
                        <h2 class="clear-left">Project: <strong>{{vm.verificationRequestToPrint.ProjectName}}</strong></h2>
                    </header>
                    <section class="print-content">
                        <section class="print-content-inner">
                            <section class="page-break">
                                Your Content Here...
                            </section>
                        </section>
                    </section>
                </section>

Version Local to Your View and Inside an ng-repeat

HTML

                <!-- SET VAR AT TOP ON TS -->
                public verificationRequestToPrint: any = {};
                <!-- INJECT -->
                public $scope, private $timeout,
                <!-- ADD OUTSIDE CONSTRUCTOR -->
                public printSummaryReport = (verificationRequest) => {
                    this.verificationRequestToPrint = verificationRequest;
                this.$timeout(() => { this.$scope.$broadcast('print-content'); });
                };
                <!-- ADD TO VIEW -->
                <a class="lab-cop-rep icons" data-ng-click="vm.printSummaryReport(verificationRequest)"></a>
                <section ng-show="false" print-content>
                    <header>
                        <h1>Title</h1>
                        <button type="button" class="submit" onclick="printForm(this)">Print</button>
                    </header>
                    <header class="sub-header">
                        <img class="label-logo" data-ng-src="{{vm.getLabelFamilyLogoSrc()}}" />
                        <h2 class="clear-left">Artist: <strong>{{vm.verificationRequestToPrint.ArtistName}}</strong></h2>
                        <h2 class="clear-left">Project: <strong>{{vm.verificationRequestToPrint.ProjectName}}</strong></h2>
                    </header>
                    <section class="print-content">
                        <section class="print-content-inner">
                            <section class="page-break">
                                Your Content Here...
                            </section>
                        </section>
                    </section>
                </section>

Version Using Module and Quicklinks

HTML

                <!-- ADD TO MODULE INSIDE STATE PROVIDER -->
                onEnter: function (headerData, songsOverviewService, currentSong, $timeout, $rootScope) {
                    var links = [
                        {
                            //See comment on songPrintOverview.js regarding complexities around song print view/song session info/songsOverviewService
                            title: 'Print',
                            'class': 'print-link',
                            onClick: function () {
                                $timeout(function () {
                                    $rootScope.$broadcast('print-song-approval-form');
                                    }, 0);
                                }
                            }
                        ];
                        headerData.setQuickLinks(links);
                    },
                    onExit: function (headerData) {
                        headerData.clearQuickLinks();
                }
                <!-- ADD TO TYPESCRIPT -->
                $scope.$on('print-song-approval-form', function (e, msg) {
                    this.showPrintView = true;
                    $timeout(() => {
                        $rootScope.$broadcast('print-content');
                    }, 0);
                });

                $scope.$on('print-content-close', function (e, msg) {
                    this.showPrintView = false;
                });
                <!-- ADD TO VIEW -->
                <section ng-show="false" print-content>
                    <header>
                        <h1>Title</h1>
                        <button type="button" class="submit" onclick="printForm(this)">Print</button>
                    </header>
                    <header class="sub-header">
                        <img class="label-logo" data-ng-src="{{vm.getLabelFamilyLogoSrc()}}" />
                        <h2 class="clear-left">Artist: <strong>{{vm.verificationRequestToPrint.ArtistName}}</strong></h2>
                        <h2 class="clear-left">Project: <strong>{{vm.verificationRequestToPrint.ProjectName}}</strong></h2>
                    </header>
                    <section class="print-content">
                        <section class="print-content-inner">
                            <section class="page-break">
                                Your Content Here...
                            </section>
                        </section>
                    </section>
                </section>

Validation

Client-Side

Popup & Asterix

In the example below you'll see a small popup that appears when a given field in invalid. We don't use this everywhere, only when a user will need instruction. Therefore in most cases you'll only need to include the mandatory indicator 'Blue Asterix'

Please remember to include the novalidate attribute to your form element (form name='myForm' novalidate) in order to disable the default HTML5 validation.

HTML

                <form name="myForm" novalidate data-ng-submit>
                    <!-- IMPORTANT: ALWAYS ADD THE "novalidate" ATTR TO YOUR FORM IN ORDER TO OVERRIDE STANDARD HTML5 VALIDATION -->
                    <ul>
                        <li>
                            <label for="Email">Email</label>
                            <input type="email" name="EmailAddress" placeholder="Email" data-ng-model="">
                            <span class="mandatory">*</span>
                            <!-- the code below is an existing directive used for email validation -->
                            <email-error field="myForm.EmailAddress"></email-error>
                            <!-- If you need to provide users with more details, please use the below code -->
                            <span class="errorMsg margin-left" data-ng-hide="myForm.$valid">
                                <span class="error-marker"></span>
                                <span class="error-txt">Add Your Comments Here...</span>
                            </span>
                        </li>
                    </ul>
                </form>

Server-Side

Coming Soon...

Branding

Logo Design

Concept

Design

Usage

Typography

Google Open Source Fonts

Body Copy

Headings

Colour Usage

ALL Call-To-Actions

Grey Pallete for Background Tints (Web-Safe)

Validation Messages

HTTP Links

Milestones

Icons

MK Set

Bootstrap Glyphicons

navigation

UMG Platform

Main Navigation

Quick Links

Usage

Sliders

General

Activity Stream

Tools

My Tasks

Markup

HTML5

Example

Unordered Lists

Inline Lists for Fluid Layout

add class "list-inline" to the ul

Standard Lists

add class "standard-list" to the ul

Tables

Full Width with Pop-Under

Table Striped

Scrolling

JavaScript Version

More Reliable Bespoke Version

Remember to set a min-height and max-height class

Sticky Header

Fixed Table Headers

Example of the Sticky Header

Controls

Buttons

Forms and General Use

Class Names

Bootstrap Icons

Popups

Cloud Help - only used for more info

Position center bottom of icon

Position bottom left of icon

Position bottom right of icon

Position center top of icon

Position top left of icon

Position top right of icon

Markup

Popups

Set Status Popups - used for managing content

Markup

Set Status Popups for General Forms

Expand & Collapse Multiple Panels

Version when no Id

Version when have an Id

Handy Snippets

Optional Comma

HTML

Match Element Heights

HTML

Add Attributes

HTML

Select Dropdown

HTML

Printing

Version Local to Your View

HTML

Version Local to Your View and Inside an ng-repeat