Changes for page Service Navigator

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -367,6 +367,38 @@
367	367	[data-sn-master-first-row]{
368	368	box-sizing:border-box;
369	369	}
	370	+
	371	+/* =========================================================
	372	+ FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS
	373	+ ========================================================= */
	374	+#xwikicontent .arsn-area-label[data-sn-three-line="1"]{
	375	+ display:grid!important;
	376	+ grid-template-columns:minmax(0,1fr)!important;
	377	+ grid-auto-rows:auto!important;
	378	+ width:100%!important;
	379	+ max-width:none!important;
	380	+ box-sizing:border-box!important;
	381	+ justify-items:start!important;
	382	+ align-items:start!important;
	383	+ gap:2px!important;
	384	+ text-align:left!important;
	385	+ text-align-last:left!important;
	386	+ text-justify:auto!important;
	387	+ word-spacing:normal!important;
	388	+ white-space:normal!important;
	389	+}
	390	+#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number,
	391	+#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title,
	392	+#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{
	393	+ display:block!important;
	394	+ width:100%!important;
	395	+ margin:0!important;
	396	+ text-align:left!important;
	397	+ text-align-last:left!important;
	398	+ text-justify:auto!important;
	399	+ word-spacing:normal!important;
	400	+ white-space:normal!important;
	401	+}
370	370	</style>
371	371
372	372	<script data-sn-service-navigator-master="1">
...	...	@@ -559,6 +559,227 @@
559	559	}
560	560
561	561	/* =======================================================
	594	+ BORDERLESS FILLED RED/ORANGE CTA BUTTONS
	595	+ ======================================================= */
	596	+
	597	+ function colourDistance(a,b){
	598	+ return Math.sqrt(
	599	+ Math.pow(a[0]-b[0],2)+
	600	+ Math.pow(a[1]-b[1],2)+
	601	+ Math.pow(a[2]-b[2],2)
	602	+ );
	603	+ }
	604	+
	605	+ function makeFilledRedOrangeCTAsBorderless(){
	606	+ var RED_ORANGE=[233,75,19];
	607	+
	608	+ Array.from(
	609	+ root.querySelectorAll(
	610	+ 'a,button,[role="button"],input[type="submit"],input[type="button"]'
	611	+ )
	612	+ ).forEach(function(el){
	613	+ if(!visible(el))return;
	614	+
	615	+ var style=getComputedStyle(el);
	616	+ var rgb=parseRGB(style.backgroundColor);
	617	+
	618	+ if(!rgb)return;
	619	+
	620	+ if(
	621	+ colourDistance(
	622	+ rgb,
	623	+ RED_ORANGE
	624	+ )>55
	625	+ ){
	626	+ return;
	627	+ }
	628	+
	629	+ var rect=el.getBoundingClientRect();
	630	+
	631	+ if(
	632	+ rect.width<80||
	633	+ rect.height<24
	634	+ ){
	635	+ return;
	636	+ }
	637	+
	638	+ el.style.setProperty(
	639	+ "border",
	640	+ "none",
	641	+ "important"
	642	+ );
	643	+
	644	+ el.style.setProperty(
	645	+ "border-left",
	646	+ "none",
	647	+ "important"
	648	+ );
	649	+
	650	+ el.style.setProperty(
	651	+ "border-top",
	652	+ "none",
	653	+ "important"
	654	+ );
	655	+
	656	+ el.style.setProperty(
	657	+ "border-right",
	658	+ "none",
	659	+ "important"
	660	+ );
	661	+
	662	+ el.style.setProperty(
	663	+ "border-bottom",
	664	+ "none",
	665	+ "important"
	666	+ );
	667	+
	668	+ el.style.setProperty(
	669	+ "box-shadow",
	670	+ "none",
	671	+ "important"
	672	+ );
	673	+ });
	674	+ }
	675	+
	676	+ /* =======================================================
	677	+ FULL-WIDTH THREE-LINE AREA LABELS
	678	+ ======================================================= */
	679	+
	680	+ function compactText(value){
	681	+ return String(value||"")
	682	+ .replace(/\s+/g," ")
	683	+ .trim();
	684	+ }
	685	+
	686	+ function makeThreeLineAreaLabels(){
	687	+ Array.from(
	688	+ root.querySelectorAll(
	689	+ ".arsn-area-label"
	690	+ )
	691	+ ).forEach(function(label){
	692	+ if(
	693	+ label.getAttribute(
	694	+ "data-sn-three-line"
	695	+ )==="1"
	696	+ ){
	697	+ return;
	698	+ }
	699	+
	700	+ var number=
	701	+ label.querySelector(
	702	+ ":scope > .arsn-area-number"
	703	+ );
	704	+
	705	+ var action=
	706	+ label.querySelector(
	707	+ ":scope > .arsn-area-action"
	708	+ );
	709	+
	710	+ if(
	711	+ !number||
	712	+ !action
	713	+ ){
	714	+ return;
	715	+ }
	716	+
	717	+ var clone=
	718	+ label.cloneNode(true);
	719	+
	720	+ var cloneNumber=
	721	+ clone.querySelector(
	722	+ ":scope > .arsn-area-number"
	723	+ );
	724	+
	725	+ var cloneAction=
	726	+ clone.querySelector(
	727	+ ":scope > .arsn-area-action"
	728	+ );
	729	+
	730	+ if(cloneNumber){
	731	+ cloneNumber.remove();
	732	+ }
	733	+
	734	+ if(cloneAction){
	735	+ cloneAction.remove();
	736	+ }
	737	+
	738	+ var titleText=
	739	+ compactText(
	740	+ clone.textContent
	741	+ );
	742	+
	743	+ if(!titleText){
	744	+ return;
	745	+ }
	746	+
	747	+ var numberNode=
	748	+ number.cloneNode(true);
	749	+
	750	+ var actionNode=
	751	+ action.cloneNode(true);
	752	+
	753	+ var titleNode=
	754	+ document.createElement(
	755	+ "span"
	756	+ );
	757	+
	758	+ titleNode.className=
	759	+ "sn-area-label-title";
	760	+
	761	+ titleNode.textContent=
	762	+ titleText;
	763	+
	764	+ while(label.firstChild){
	765	+ label.removeChild(
	766	+ label.firstChild
	767	+ );
	768	+ }
	769	+
	770	+ label.appendChild(
	771	+ numberNode
	772	+ );
	773	+
	774	+ label.appendChild(
	775	+ titleNode
	776	+ );
	777	+
	778	+ label.appendChild(
	779	+ actionNode
	780	+ );
	781	+
	782	+ label.setAttribute(
	783	+ "data-sn-three-line",
	784	+ "1"
	785	+ );
	786	+
	787	+ var head=
	788	+ label.closest(
	789	+ ".arsn-area-head"
	790	+ );
	791	+
	792	+ if(head){
	793	+ head.style.setProperty(
	794	+ "width",
	795	+ "100%",
	796	+ "important"
	797	+ );
	798	+
	799	+ head.style.setProperty(
	800	+ "max-width",
	801	+ "100%",
	802	+ "important"
	803	+ );
	804	+
	805	+ head.style.setProperty(
	806	+ "box-sizing",
	807	+ "border-box",
	808	+ "important"
	809	+ );
	810	+ }
	811	+ });
	812	+ }
	813	+
	814	+ /* =======================================================
562	562	PLACEHOLDER BADGE
563	563	======================================================= */
564	564
...	...	@@ -1329,6 +1329,9 @@
1329	1329	var headers=
1330	1330	applyOverviewPalette();
1331	1331
	1585	+ makeThreeLineAreaLabels();
	1586	+ makeFilledRedOrangeCTAsBorderless();
	1587	+
1332	1332	if(
1333	1333	window.innerWidth>
1334	1334	MOBILE_MAX