Primo - New UI - responsive logo

readme.md

Add a clickable and responsive logo to the new UI for ExLibris Primo

• Add a vertical logo as library-logo-vertical.png to your img/ folder
• Add a horizontal logo as library-logo-horizontal.png to your img/ folder
• Add a 1px x 1px transparent .png file as library-logo.png to your img/ folder
  • You can download our file from our staging server
  • https://swinburne-staging.hosted.exlibrisgroup.com/primo-explore/custom/SWIN2/img/library-logo.png
• Save or append the css to your css/custom1.css file
• Save or append the javascript to your js/custom.js

custom.js

(function () {
    "use strict";
    'use strict';

    var app = angular.module('viewCustom', ['angularLoad']);

    /****************************************************************************************************/
    /*In case of CENTRAL_PACKAGE - comment out the below line to replace the other module definition*/
    /*var app = angular.module('centralCustom', ['angularLoad']);*/
    /****************************************************************************************************/

	// Add Clickable Logo

	app.controller('prmLogoAfterController', [function () {
		var vm = this;
		vm.getIconLink = getIconLink;
		function getIconLink() {
			return vm.parentCtrl.iconLink;
		}
	}]);

	app.component('prmLogoAfter',{
		bindings: {parentCtrl: '<'},
		controller: 'prmLogoAfterController',
		template: `<div class="product-logo product-logo-local" layout="row" layout-align="start center" layout-fill id="banner" tabindex="0" role="banner"><a href="https://www.swinburne.edu.au/library"><img class="logo-image" alt="{{::('nui.header.LogoAlt' | translate)}}" ng-src="{{$ctrl.getIconLink()}}"/></a></div>`
	});

})();

custom1.css

/* Nav - top menu */

    /* Make logo clickable */
    prm-logo div.product-logo {
        display:none;
    }

    /*mobile logo*/
    .__xs prm-topbar prm-logo { 
        max-width: 300px;
    }

    prm-logo div.product-logo-local {
        display: flex;
        background: url(../../../custom/SWIN2/img/library-logo-horizontal.png) no-repeat 0 0;
        width: 300px;
        height: 100px;
        display: block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin-top: 3px;
        margin-left: 3px;
    }

    /*desktop logo*/
     prm-topbar prm-logo {
         max-width: 310px;
    }
    @media (min-width: 80em) {
        prm-logo div.product-logo-local {
            background: url(../../../custom/SWIN2/img/library-logo-vertical.png) no-repeat 0 0;
            width: 300px;
            height: 200px;
            margin-top: 0px;
            margin-left: 10px;
        }
   }