Wiki source code of Service Navigator

Last modified by Veronika Kocher on Thursday, 03 Sep 2026 14:15

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Content
- Comments
- Attachments
- History
- Information
- Likes

version	line-number	content
18.1	1	{{html}}
	2	<div style="max-width:1400px;margin:0 auto;">
15.1	3
18.1	4	<p style="margin:0 0 8px 0;">
	5	Artistic and administrative services at the University support many different needs — from research projects and teaching to employment, IT, rooms, procurement, legal questions, international mobility and library services.
	6	</p>
15.1	7
18.1	8	<p style="margin:0 0 22px 0;">
	9	The <strong>Service Navigator</strong> is organised around what you need to do, not around the university's organisational chart.
	10	</p>
15.1	11
21.1	12	<section style="margin:0 0 28px 0;padding:16px 18px;border:1px solid #e3ded6;border-radius:10px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);">
	13	<h2 style="font-size:20px;margin:0 0 6px 0;color:#35312d;">Find a service</h2>
	14	<p style="margin:0 0 12px 0;color:#6a655e;">
18.1	15	Search by task, topic or question — for example <em>room, invoice, disability, DOI, event, employment, data protection</em> or <em>library</em>.
	16	</p>
15.1	17
18.1	18	<form action="https://xwiki.uni-ak.ac.at/bin/view/Main/SolrSearch" method="get" role="search" style="margin:0;">
	19	<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
	20	<label for="service-navigator-search" style="position:absolute;left:-10000px;">Search services</label>
	21	<input
	22	id="service-navigator-search"
	23	name="text"
	24	type="search"
	25	placeholder="What do you need help with?"
	26	autocomplete="off"
21.1	27	style="flex:1 1 520px;min-width:260px;padding:11px 13px;border:1px solid #cfc8bd;border-radius:6px;background:#fffdf9;font-size:16px;"
18.1	28	/>
	29	<button type="submit" class="btn btn-primary" style="padding:11px 22px;">Search</button>
	30	</div>
	31	</form>
	32	</section>
15.1	33
21.1	34	<h2 style="font-size:24px;margin:0 0 16px 0;color:#35312d;">Find services by what you need to do</h2>
15.1	35
18.1	36	<div style="
	37	display:grid;
	38	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	39	gap:18px;
	40	align-items:stretch;
17.1	41	">
15.1	42
19.1	43	<!-- 1. PEOPLE, EQUALITY, HEALTH & WORK -->
21.1	44	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #f0aa00;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	45	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	46	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">PEOPLE & WORK</div>
	47	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">People, Equality, Health & Work</h3>
	48	<p style="color:#6a655e;margin:0 0 14px 0;">Employment, equality, diversity, disability, accessibility and health.</p>
15.1	49
18.1	50	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	51	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	52	<li>ask about employment, working conditions or labour law</li>
	53	<li>get support concerning discrimination, equality or diversity</li>
	54	<li>address disability, accessibility or health at work</li>
18.1	55	</ul>
	56
21.1	57	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	58	HR · staff development · equal treatment · diversity · disability · accessibility · health · labour law
18.1	59	</div>
17.1	60	</div>
18.1	61	<div style="padding:0 18px 18px 18px;">
21.1	62	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore People & Work</span>
18.1	63	</div>
	64	</section>
15.1	65
19.1	66	<!-- 2. IT & DIGITAL SERVICES -->
21.1	67	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	68	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	69	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">IT & DIGITAL</div>
	70	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">IT & Digital Services</h3>
	71	<p style="color:#6a655e;margin:0 0 14px 0;">Accounts, systems, software, digital infrastructure and IT support.</p>
15.1	72
18.1	73	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	74	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	75	<li>access an account, system or digital service</li>
	76	<li>solve an IT problem</li>
	77	<li>plan or coordinate a digital or IT project</li>
18.1	78	</ul>
15.1	79
21.1	80	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	81	Accounts · IT support · software · digital tools · infrastructure · IT project coordination
18.1	82	</div>
17.1	83	</div>
18.1	84	<div style="padding:0 18px 18px 18px;">
21.1	85	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore IT & Digital Services</span>
18.1	86	</div>
	87	</section>
15.1	88
19.1	89	<!-- 3. ROOMS, BUILDINGS & CAMPUS -->
21.1	90	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	91	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	92	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">CAMPUS</div>
	93	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Rooms, Buildings & Campus</h3>
	94	<p style="color:#6a655e;margin:0 0 14px 0;">Rooms, buildings, facilities, campus use and operational support.</p>
15.1	95
18.1	96	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	97	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	98	<li>book or use a room</li>
	99	<li>report a building, equipment or safety issue</li>
	100	<li>find information about campus facilities or house rules</li>
18.1	101	</ul>
15.1	102
21.1	103	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	104	Facility management · estates · room coordination · building services · safety · house rules · campus operations
18.1	105	</div>
17.1	106	</div>
18.1	107	<div style="padding:0 18px 18px 18px;">
21.1	108	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Rooms & Campus</span>
18.1	109	</div>
	110	</section>
15.1	111
19.1	112	<!-- 4. ART & RESEARCH SERVICES -->
21.1	113	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	114	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	115	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">ART & RESEARCH</div>
	116	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Art & Research Services</h3>
22.12	117	<p style="color:#6a655e;margin:0 0 8px 0;">Cross-unit guidance for planning, managing, publishing, sharing and preserving artistic and research projects.</p>
	118	<!-- ARSN_ROOT_SCOPE_ROUTING_V1 -->
	119	<div style="font-size:12px;color:#506168;line-height:1.45;margin:0 0 14px 0;padding:7px 9px;background:#eef7f9;border-radius:5px;"><strong>Central project & funding hub:</strong> Support Kunst und Forschung · specialist responsibilities remain with the relevant service units.</div>
15.1	120
18.1	121	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	122	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	123	<li>develop or plan an artistic or research project</li>
	124	<li>manage research data, documentation or collaboration</li>
	125	<li>publish, cite, share or preserve outputs</li>
18.1	126	</ul>
15.1	127
21.1	128	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	129	Research projects · research data management · rights & ethics · repositories · publication · preservation
18.1	130	</div>
17.1	131	</div>
18.1	132	<div style="padding:0 18px 18px 18px;">
19.1	133	<a href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/" class="btn btn-primary btn-block">Explore Art & Research Services</a>
18.1	134	</div>
	135	</section>
15.1	136
19.1	137	<!-- 5. STUDY, TEACHING & CURRICULUM -->
21.1	138	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	139	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	140	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">STUDY & TEACHING</div>
	141	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Study, Teaching & Curriculum</h3>
	142	<p style="color:#6a655e;margin:0 0 14px 0;">Support for studying, teaching, curricula and the learning environment.</p>
15.1	143
18.1	144	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	145	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	146	<li>clarify a study-related question</li>
	147	<li>develop or change teaching or curricula</li>
	148	<li>find support for final projects or accessibility in study</li>
18.1	149	</ul>
15.1	150
21.1	151	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	152	Student affairs · teaching quality · curriculum development · final projects · student workspace
18.1	153	</div>
17.1	154	</div>
18.1	155	<div style="padding:0 18px 18px 18px;">
21.1	156	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Study & Teaching</span>
18.1	157	</div>
	158	</section>
15.1	159
20.1	160	<!-- 6. RESEARCH & DISCOVERY RESOURCES -->
21.1	161	<section style="display:flex;flex-direction:column;min-height:340px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
20.1	162	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	163	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">FIND · SEARCH · DISCOVER</div>
	164	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Research & Discovery Resources</h3>
	165	<p style="color:#6a655e;margin:0 0 14px 0;">Find literature, databases, archives, collections, repositories and specialist research resources across the University.</p>
20.1	166
	167	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	168	<ul style="margin:0 0 14px 18px;padding:0;">
	169	<li>find literature, media, databases or digital resources</li>
	170	<li>research archival, artistic or institutional collections</li>
	171	<li>discover repositories, specialist archives and research databases</li>
	172	</ul>
	173
21.1	174	<div style="font-size:12px;color:#6a655e;line-height:1.5;">
20.1	175	University Library & supA · licensed databases · University Archive & Art Collection · online collection databases · Oskar Kokoschka Centre · Viktor J. Papanek Foundation · Venedig Biennale Archiv Austria · Weibel Institute & Peter Weibel Archive · Ursula Blickle Video Archive · Angewandte Repository
	176	</div>
	177	</div>
	178	<div style="padding:0 18px 18px 18px;">
21.1	179	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Research & Discovery</span>
20.1	180	</div>
	181	</section>
	182
	183	<!-- 7. PURCHASING, FINANCE & LOGISTICS -->
21.1	184	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	185	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	186	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">PURCHASE & MOVE</div>
	187	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Purchasing, Finance & Logistics</h3>
	188	<p style="color:#6a655e;margin:0 0 14px 0;">Buy, pay, budget, send, transport and move things.</p>
15.1	189
18.1	190	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	191	<ul style="margin:0 0 14px 18px;padding:0;">
	192	<li>purchase materials or services</li>
	193	<li>clarify an invoice, budget or financial process</li>
	194	<li>send, transport or move items</li>
	195	</ul>
15.1	196
21.1	197	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
18.1	198	Procurement · controlling · accounting · resource planning · mail & logistics · transport · relocations
	199	</div>
17.1	200	</div>
18.1	201	<div style="padding:0 18px 18px 18px;">
21.1	202	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Finance & Logistics</span>
18.1	203	</div>
	204	</section>
15.1	205
20.1	206	<!-- 8. LEGAL, DATA PROTECTION & GOVERNANCE -->
21.1	207	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #f0aa00;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	208	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	209	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">RIGHTS & RULES</div>
	210	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Legal, Data Protection & Governance</h3>
	211	<p style="color:#6a655e;margin:0 0 14px 0;">Legal questions, privacy, information rights and institutional rules.</p>
15.1	212
18.1	213	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	214	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	215	<li>clarify a legal or contractual question</li>
	216	<li>deal with personal data or privacy</li>
	217	<li>understand an institutional rule or information-access requirement</li>
18.1	218	</ul>
15.1	219
21.1	220	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	221	Legal affairs · data protection · freedom of information · governance · institutional rules
18.1	222	</div>
17.1	223	</div>
18.1	224	<div style="padding:0 18px 18px 18px;">
21.1	225	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Legal & Governance</span>
18.1	226	</div>
	227	</section>
15.1	228
20.1	229	<!-- 9. COMMUNICATION, MEDIA & EVENTS -->
21.1	230	<section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #e94b13;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
18.1	231	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	232	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">COMMUNICATE & ORGANISE</div>
	233	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Communication, Media & Events</h3>
	234	<p style="color:#6a655e;margin:0 0 14px 0;">Communicate, publish, print, promote and organise events.</p>
15.1	235
18.1	236	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	237	<ul style="margin:0 0 14px 18px;padding:0;">
19.1	238	<li>communicate or publicise something</li>
	239	<li>produce a publication, flyer or printed material</li>
	240	<li>organise or support an event</li>
18.1	241	</ul>
15.1	242
21.1	243	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	244	Press & communications · publications · print materials · event management · Open House · festival
18.1	245	</div>
	246	</div>
	247	<div style="padding:0 18px 18px 18px;">
21.1	248	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Communication & Events</span>
18.1	249	</div>
	250	</section>
15.1	251
19.1	252	<!-- 10. INTERNATIONAL OFFICE -->
21.1	253	<section style="display:flex;flex-direction:column;min-height:300px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
19.1	254	<div style="padding:18px 18px 14px 18px;flex:1;">
21.1	255	<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">GO INTERNATIONAL</div>
	256	<h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">International Office</h3>
	257	<p style="color:#6a655e;margin:0 0 14px 0;">International mobility, exchange and international support.</p>
19.1	258
	259	<div style="font-weight:700;margin-bottom:6px;">I need to…</div>
	260	<ul style="margin:0 0 14px 18px;padding:0;">
	261	<li>plan an international stay or exchange</li>
	262	<li>ask about mobility opportunities</li>
	263	<li>find support for an international context</li>
	264	</ul>
	265
21.1	266	<div style="font-size:12px;color:#6a655e;line-height:1.45;">
19.1	267	Mobility · exchange · international cooperation · international support
	268	</div>
	269	</div>
	270	<div style="padding:0 18px 18px 18px;">
21.1	271	<span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore International Office</span>
19.1	272	</div>
	273	</section>
	274
	275
18.1	276	</div>
	277
22.1	278	<aside style="margin-top:26px;padding:14px 16px;border:1px solid #cfe8ef;border-left:4px solid #21b6d7;background:#eaf6f9;border-radius:6px;">
18.1	279	<strong>Not sure where to start?</strong>
	280	<div style="margin-top:4px;">
	281	Use the search at the top of the page or choose the card that best matches what you are trying to do. A service may deliberately appear in more than one area when this makes it easier to find.
17.1	282	</div>
18.1	283	</aside>
15.1	284
17.1	285	</div>
15.1	286	{{/html}}
22.13	287
22.16	288	{{html clean="false"}}
	289	<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
22.15	290
22.16	291	<style data-sn-service-navigator-master="1">
	292	/* =========================================================
	293	MASTER TYPOGRAPHY
	294	========================================================= */
22.15	295	#xwikicontent h1,
	296	#xwikicontent h2,
	297	#xwikicontent h3,
	298	#xwikicontent h4,
	299	#xwikicontent h5,
	300	#xwikicontent h6,
	301	#xwikicontent .box-title,
	302	#xwikicontent [role="heading"],
	303	#xwikicontent h1 a,
	304	#xwikicontent h2 a,
	305	#xwikicontent h3 a,
	306	#xwikicontent h4 a,
	307	#xwikicontent h5 a,
	308	#xwikicontent h6 a,
	309	#xwikicontent .box-title a,
	310	#xwikicontent [role="heading"] a{
	311	text-align:left!important;
	312	text-justify:auto!important;
	313	word-spacing:normal!important;
	314	}
	315
22.16	316	/* =========================================================
	317	COMING SOON / IN VORBEREITUNG
	318	========================================================= */
	319	.sn-coming-soon-badge{
	320	display:inline-block;
	321	vertical-align:middle;
	322	margin-left:10px;
	323	padding:4px 8px;
	324	border-radius:14px;
	325	border:1px solid #efd9cc;
	326	background:#fff4ee;
	327	color:#8a4d36;
	328	font-size:11px;
	329	font-weight:700;
	330	letter-spacing:.055em;
	331	line-height:1.2;
	332	white-space:nowrap;
	333	}
	334
	335	/* =========================================================
	336	NATIVE / DETAIL CALLOUT GEOMETRY
	337	Preserve existing backgrounds.
	338	========================================================= */
	339	#xwikicontent .arsn-info,
	340	#xwikicontent .dmp-info,
	341	#xwikicontent .ido-info,
	342	#xwikicontent .pp-info,
	343	#xwikicontent .infomessage{
22.15	344	box-sizing:border-box!important;
22.16	345	border-left:4px solid #21b6d7!important;
	346	border-radius:8px;
22.15	347	text-align:left!important;
	348	word-spacing:normal!important;
	349	}
	350
22.16	351	#xwikicontent .arsn-warn,
	352	#xwikicontent .dmp-warn,
	353	#xwikicontent .ido-warn,
	354	#xwikicontent .pp-warn,
	355	#xwikicontent .warn,
	356	#xwikicontent .warning,
	357	#xwikicontent .warningmessage,
22.15	358	#xwikicontent .errormessage{
22.16	359	box-sizing:border-box!important;
	360	border-left:4px solid #e94b13!important;
	361	border-radius:8px;
	362	text-align:left!important;
	363	word-spacing:normal!important;
22.15	364	}
	365
22.16	366	[data-sn-master-equal-height],
	367	[data-sn-master-first-row]{
22.14	368	box-sizing:border-box;
22.13	369	}
22.17	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	}
22.13	402	</style>
22.15	403
22.16	404	<script data-sn-service-navigator-master="1">
22.13	405	(function(){
	406	"use strict";
	407
22.16	408	var PAGE_KIND="overview";
	409	var PLACEHOLDER=false;
	410	var PLACEHOLDER_LABEL="COMING SOON";
	411
22.13	412	var MOBILE_MAX=767;
22.14	413	var ROW_TOLERANCE=6;
22.15	414	var RESIZE_DEBOUNCE=220;
22.13	415
	416	var root=
	417	document.getElementById("xwikicontent")\|\|
	418	document.querySelector(".xwiki-rendering-content")\|\|
	419	document.querySelector("main")\|\|
	420	document.body;
	421
	422	if(!root)return;
	423
22.16	424	var managedHeight=new Set();
	425	var managedMargin=new Set();
	426	var originalHeight=new WeakMap();
	427	var originalMargin=new WeakMap();
22.15	428
	429	var resizeTimer=0;
22.16	430	var running=false;
22.15	431
22.16	432	var THEMES=[
	433	{
	434	name:"BLUE",
	435	accent:"#21b6d7",
	436	bg:"#eaf7fb",
	437	text:"#315d68",
	438	labels:[
	439	"HIER STARTEN",
	440	"ENTSCHEIDEN",
	441	"ÜBERPRÜFEN & ANPASSEN",
	442	"START HERE",
	443	"DECIDE",
	444	"REVIEW & ADAPT"
	445	]
	446	},
	447	{
	448	name:"RED",
	449	accent:"#e94b13",
	450	bg:"#fff1ec",
	451	text:"#8a4d36",
	452	labels:[
	453	"PLANEN & ORGANISIEREN",
	454	"ORGANISIEREN & DOKUMENTIEREN",
	455	"PUBLIZIEREN & PRÄSENTIEREN",
	456	"PLAN & ORGANISE",
	457	"PLAN & ORGANIZE",
	458	"ORGANISE & DOCUMENT",
	459	"ORGANIZE & DOCUMENT",
	460	"PUBLISH & PRESENT"
	461	]
	462	},
	463	{
	464	name:"YELLOW",
	465	accent:"#f0aa00",
	466	bg:"#fff8e7",
	467	text:"#785b17",
	468	labels:[
	469	"SCHÜTZEN & KLÄREN",
	470	"STANDARDISIEREN & IDENTIFIZIEREN",
	471	"ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
	472	"PROTECT & CLARIFY",
	473	"STANDARDISE & IDENTIFY",
	474	"STANDARDIZE & IDENTIFY",
	475	"OPEN, REUSE & MAKE FINDABLE"
	476	]
	477	},
	478	{
	479	name:"GREEN",
	480	accent:"#38b76a",
	481	bg:"#edf9f1",
	482	text:"#3f7451",
	483	labels:[
	484	"INFRASTRUKTUR EINRICHTEN",
	485	"INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
	486	"SPEICHERN & ZUGRIFF STEUERN",
	487	"REPOSITORIUM, ERHALTEN & ÜBERGEBEN",
	488	"SET UP INFRASTRUCTURE",
	489	"SET UP INFRASTRUCTURE & COLLABORATION",
	490	"STORE & CONTROL ACCESS",
	491	"REPOSITORY, PRESERVE & HAND OVER"
	492	]
22.14	493	}
22.16	494	];
22.14	495
22.16	496	function num(value){
	497	var n=parseFloat(value);
	498	return Number.isFinite(n)?n:0;
22.13	499	}
	500
22.16	501	function norm(value){
	502	return String(value\|\|"")
22.15	503	.replace(/\s+/g," ")
	504	.trim()
	505	.toUpperCase();
	506	}
	507
22.16	508	function visible(el){
	509	if(!el\|\|el.nodeType!==1)return false;
22.13	510
22.16	511	var style=getComputedStyle(el);
	512	var rect=el.getBoundingClientRect();
22.15	513
	514	return (
22.16	515	style.display!=="none"&&
	516	style.visibility!=="hidden"&&
	517	rect.width>20&&
	518	rect.height>4
22.15	519	);
22.13	520	}
	521
22.16	522	function saveStyle(el,map,property){
22.14	523	if(map.has(el))return;
	524
	525	map.set(el,{
22.16	526	value:el.style.getPropertyValue(property),
	527	priority:el.style.getPropertyPriority(property)
22.14	528	});
	529	}
	530
22.16	531	function restoreStyle(el,map,property){
22.14	532	var original=map.get(el);
	533
	534	if(original&&original.value){
	535	el.style.setProperty(
	536	property,
	537	original.value,
	538	original.priority\|\|""
	539	);
	540	}else{
22.16	541	el.style.removeProperty(property);
22.14	542	}
	543	}
	544
22.15	545	function resetRuntime(){
22.16	546	managedHeight.forEach(function(el){
	547	restoreStyle(
22.14	548	el,
22.16	549	originalHeight,
22.14	550	"min-height"
	551	);
	552	el.removeAttribute(
22.16	553	"data-sn-master-equal-height"
22.14	554	);
	555	});
	556
22.16	557	managedMargin.forEach(function(el){
	558	restoreStyle(
22.14	559	el,
22.16	560	originalMargin,
22.14	561	"margin-top"
	562	);
	563	el.removeAttribute(
22.16	564	"data-sn-master-first-row"
22.14	565	);
	566	});
	567
22.16	568	managedHeight.clear();
	569	managedMargin.clear();
	570	}
22.15	571
22.16	572	function themeFor(text){
	573	var value=norm(text);
22.15	574
22.16	575	for(var i=0;i<THEMES.length;i++){
	576	for(var j=0;j<THEMES[i].labels.length;j++){
	577	var label=THEMES[i].labels[j];
	578
	579	if(
	580	value===label\|\|
	581	value.indexOf(label+" ")===0\|\|
	582	value.indexOf(label+" -")===0\|\|
	583	value.indexOf(label+" ·")===0
	584	){
	585	return THEMES[i];
	586	}
	587	}
	588	}
	589
	590	return null;
22.14	591	}
	592
22.16	593	/* =======================================================
22.17	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	/* =======================================================
22.16	815	PLACEHOLDER BADGE
	816	======================================================= */
22.15	817
22.16	818	function applyPlaceholderBadge(){
	819	if(!PLACEHOLDER)return;
22.15	820
	821	if(
22.16	822	document.querySelector(
	823	".sn-coming-soon-badge"
	824	)
22.15	825	){
22.16	826	return;
22.15	827	}
	828
22.16	829	var title=
	830	document.querySelector(
	831	"#document-title"
	832	)\|\|
	833	document.querySelector(
	834	"h1"
	835	);
22.15	836
22.16	837	if(!title)return;
22.15	838
22.16	839	var badge=
	840	document.createElement(
	841	"span"
	842	);
	843
	844	badge.className=
	845	"sn-coming-soon-badge";
	846
	847	badge.textContent=
	848	PLACEHOLDER_LABEL;
	849
	850	badge.setAttribute(
	851	"aria-label",
	852	PLACEHOLDER_LABEL
22.15	853	);
	854
22.16	855	title.appendChild(
	856	badge
	857	);
	858	}
22.15	859
22.16	860	/* =======================================================
	861	DETAIL PAGE OWN-ACCENT PROPAGATION
	862	======================================================= */
22.15	863
22.16	864	function parseRGB(value){
	865	var match=String(value\|\|"").match(
	866	/rgba?\(\s([\d.]+)\s,\s([\d.]+)\s,\s*([\d.]+)/i
22.15	867	);
22.16	868
	869	if(!match)return null;
	870
	871	return [
	872	Number(match[1]),
	873	Number(match[2]),
	874	Number(match[3])
	875	];
22.15	876	}
	877
22.16	878	function distance(a,b){
	879	return Math.sqrt(
	880	Math.pow(a[0]-b[0],2)+
	881	Math.pow(a[1]-b[1],2)+
	882	Math.pow(a[2]-b[2],2)
	883	);
	884	}
22.13	885
22.16	886	function paletteMatch(cssColor){
	887	var rgb=parseRGB(cssColor);
22.14	888
22.16	889	if(!rgb)return null;
22.14	890
22.16	891	var palette=[
	892	{hex:"#21b6d7",rgb:[33,182,215]},
	893	{hex:"#e94b13",rgb:[233,75,19]},
	894	{hex:"#f0aa00",rgb:[240,170,0]},
	895	{hex:"#38b76a",rgb:[56,183,106]}
	896	];
22.13	897
22.14	898	var best=null;
22.16	899	var bestDistance=Infinity;
22.13	900
22.16	901	palette.forEach(function(item){
	902	var d=distance(rgb,item.rgb);
22.13	903
22.16	904	if(d<bestDistance){
	905	best=item;
	906	bestDistance=d;
	907	}
	908	});
22.14	909
22.16	910	return bestDistance<=30
	911	?best
	912	:null;
	913	}
22.13	914
22.16	915	function propagateDetailAccents(){
	916	if(PAGE_KIND!=="detail")return;
	917
	918	Array.from(
	919	root.querySelectorAll(
	920	".arsn-call,.dmp-call,.ido-call,.pp-call,"+
	921	".arsn-source,.dmp-source,.ido-source,.pp-source"
	922	)
	923	).forEach(function(el){
	924	if(!visible(el))return;
	925
	926	var style=getComputedStyle(el);
	927
22.14	928	if(
22.16	929	num(style.borderTopWidth)>=2
22.14	930	){
22.16	931	var match=
	932	paletteMatch(
	933	style.borderTopColor
22.14	934	);
	935
22.16	936	if(match){
	937	el.style.setProperty(
	938	"border-left",
	939	"4px solid "+match.hex,
	940	"important"
22.14	941	);
22.13	942	}
	943	}
22.16	944	});
22.13	945
22.16	946	// Warning families: explicit safety override.
	947	Array.from(
	948	root.querySelectorAll(
	949	".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
	950	".warn,.warning,.warningmessage,.errormessage"
	951	)
	952	).forEach(function(el){
	953	if(!visible(el))return;
22.13	954
22.16	955	el.style.setProperty(
	956	"border-left",
	957	"4px solid #e94b13",
	958	"important"
	959	);
	960	});
22.13	961
22.16	962	// Info families: explicit orientation override.
	963	Array.from(
	964	root.querySelectorAll(
	965	".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
	966	)
	967	).forEach(function(el){
	968	if(!visible(el))return;
22.14	969
22.16	970	el.style.setProperty(
	971	"border-left",
	972	"4px solid #21b6d7",
	973	"important"
	974	);
	975	});
	976	}
22.14	977
22.16	978	/* =======================================================
	979	OVERVIEW SEMANTIC THEME PALETTE
	980	======================================================= */
22.14	981
22.16	982	function smallestThemeHeaders(){
	983	return Array.from(
	984	root.querySelectorAll(
	985	"div,span,p,strong,h3,h4,h5,h6"
	986	)
	987	).filter(function(el){
	988	if(!visible(el))return false;
	989	if(!themeFor(el.textContent))return false;
22.14	990
22.16	991	return !Array.from(
	992	el.children\|\|[]
	993	).some(function(child){
	994	return !!themeFor(
	995	child.textContent
	996	);
22.14	997	});
22.16	998	});
22.13	999	}
	1000
22.16	1001	function findOverviewCard(header){
	1002	var node=header.parentElement;
	1003	var candidates=[];
22.14	1004
22.16	1005	while(node&&node!==root){
	1006	var rect=node.getBoundingClientRect();
	1007	var style=getComputedStyle(node);
22.14	1008
22.16	1009	var border=
	1010	num(style.borderTopWidth)+
	1011	num(style.borderRightWidth)+
	1012	num(style.borderBottomWidth)+
	1013	num(style.borderLeftWidth);
22.14	1014
22.16	1015	if(
	1016	rect.width>=220&&
	1017	rect.width<=800&&
	1018	rect.height>=120&&
	1019	border>=1
	1020	){
	1021	candidates.push(node);
	1022	}
22.14	1023
22.16	1024	node=node.parentElement;
	1025	}
22.14	1026
22.16	1027	if(!candidates.length)return null;
22.14	1028
22.16	1029	candidates.sort(function(a,b){
	1030	return (
	1031	b.getBoundingClientRect().height-
	1032	a.getBoundingClientRect().height
22.15	1033	);
22.16	1034	});
22.14	1035
22.16	1036	return candidates[0];
22.14	1037	}
	1038
22.16	1039	function rowCandidates(link,card){
	1040	var result=[];
22.15	1041	var cardRect=
	1042	card.getBoundingClientRect();
22.14	1043
22.16	1044	var node=link;
22.14	1045
22.16	1046	while(node&&node!==card){
	1047	if(visible(node)){
	1048	var rect=
	1049	node.getBoundingClientRect();
22.14	1050
22.16	1051	if(
	1052	rect.height<=105&&
	1053	rect.width>=
	1054	cardRect.width*.50&&
	1055	rect.width<=
	1056	cardRect.width*1.03
	1057	){
	1058	result.push(node);
	1059	}
	1060	}
22.14	1061
22.16	1062	node=node.parentElement;
	1063	}
	1064
	1065	return result;
	1066	}
	1067
	1068	function chooseOuterRow(
	1069	candidates,
	1070	link
	1071	){
	1072	if(!candidates.length){
	1073	return link;
	1074	}
	1075
	1076	var bordered=
	1077	candidates.filter(function(el){
22.15	1078	return (
22.16	1079	num(
	1080	getComputedStyle(el)
	1081	.borderLeftWidth
	1082	)>=1
22.15	1083	);
	1084	});
22.14	1085
22.16	1086	var pool=
	1087	bordered.length
	1088	?bordered
	1089	:candidates;
22.14	1090
22.16	1091	pool.sort(function(a,b){
	1092	var ar=
	1093	a.getBoundingClientRect();
22.14	1094
22.16	1095	var br=
	1096	b.getBoundingClientRect();
22.14	1097
22.16	1098	return (
	1099	ar.left-br.left\|\|
	1100	br.width-ar.width
	1101	);
	1102	});
22.14	1103
22.16	1104	return pool[0]\|\|link;
	1105	}
22.14	1106
22.16	1107	function applyOverviewPalette(){
	1108	if(PAGE_KIND!=="overview"){
	1109	return [];
22.15	1110	}
22.14	1111
22.16	1112	var headers=
	1113	smallestThemeHeaders()
	1114	.map(function(el){
	1115	return {
	1116	el:el,
	1117	theme:
	1118	themeFor(
	1119	el.textContent
	1120	),
	1121	card:
	1122	findOverviewCard(
	1123	el
	1124	)
	1125	};
22.15	1126	})
22.16	1127	.filter(function(row){
	1128	return !!row.card;
	1129	});
22.14	1130
22.16	1131	var unique=[];
	1132	var seenHeaders=new Set();
22.14	1133
22.16	1134	headers.forEach(function(row){
	1135	var key=
	1136	row.theme.name+
	1137	"\|"+
	1138	Math.round(
	1139	row.card
	1140	.getBoundingClientRect()
	1141	.left
	1142	)+
	1143	"\|"+
	1144	Math.round(
	1145	row.el
	1146	.getBoundingClientRect()
	1147	.top
	1148	);
22.14	1149
22.16	1150	if(!seenHeaders.has(key)){
	1151	seenHeaders.add(key);
	1152	unique.push(row);
	1153	}
	1154	});
22.14	1155
22.16	1156	unique.forEach(function(row){
	1157	var headerRect=
	1158	row.el
	1159	.getBoundingClientRect();
22.14	1160
22.16	1161	row.el.style.setProperty(
	1162	"background",
	1163	row.theme.bg,
	1164	"important"
22.15	1165	);
	1166
22.16	1167	row.el.style.setProperty(
	1168	"color",
	1169	row.theme.text,
	1170	"important"
22.15	1171	);
	1172
22.16	1173	row.el.style.setProperty(
	1174	"text-align",
	1175	"left",
	1176	"important"
22.15	1177	);
22.14	1178
22.16	1179	row.el.style.setProperty(
	1180	"word-spacing",
	1181	"normal",
	1182	"important"
	1183	);
22.15	1184
22.16	1185	var later=
	1186	unique
	1187	.filter(function(other){
	1188	return (
	1189	other.card===row.card&&
	1190	other.el
	1191	.getBoundingClientRect()
	1192	.top>
	1193	headerRect.top+2
	1194	);
	1195	})
	1196	.sort(function(a,b){
	1197	return (
	1198	a.el
	1199	.getBoundingClientRect()
	1200	.top-
	1201	b.el
	1202	.getBoundingClientRect()
	1203	.top
	1204	);
	1205	});
22.15	1206
22.16	1207	var stopTop=
	1208	later.length
	1209	?later[0].el
	1210	.getBoundingClientRect()
	1211	.top
	1212	:Infinity;
22.15	1213
	1214	Array.from(
22.16	1215	row.card.querySelectorAll("a")
	1216	).forEach(function(link){
	1217	if(!visible(link))return;
22.15	1218
22.16	1219	var rect=
	1220	link.getBoundingClientRect();
22.15	1221
22.16	1222	if(
	1223	rect.top<=
	1224	headerRect.bottom-2\|\|
	1225	rect.top>=
	1226	stopTop-2
	1227	){
	1228	return;
	1229	}
22.15	1230
22.16	1231	var candidates=
	1232	rowCandidates(
	1233	link,
	1234	row.card
	1235	);
	1236
	1237	var target=
	1238	chooseOuterRow(
	1239	candidates,
	1240	link
	1241	);
	1242
	1243	candidates.forEach(function(el){
	1244	el.style.setProperty(
	1245	"border-left",
	1246	"0 solid transparent",
	1247	"important"
	1248	);
	1249	});
	1250
	1251	target.style.setProperty(
	1252	"border-left",
	1253	"3px solid "+
	1254	row.theme.accent,
	1255	"important"
22.15	1256	);
22.16	1257
	1258	target.style.setProperty(
	1259	"box-sizing",
	1260	"border-box",
	1261	"important"
22.15	1262	);
22.14	1263	});
22.16	1264	});
22.14	1265
22.16	1266	return unique;
22.15	1267	}
22.14	1268
22.16	1269	/* =======================================================
	1270	OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
	1271	======================================================= */
22.15	1272
22.16	1273	function alignOverviewCards(headers){
	1274	if(
	1275	PAGE_KIND!=="overview"\|\|
	1276	window.innerWidth<=MOBILE_MAX
	1277	){
	1278	return;
	1279	}
22.15	1280
22.16	1281	var cards=[];
	1282	var seen=new Set();
22.15	1283
22.16	1284	headers.forEach(function(row){
	1285	if(!seen.has(row.card)){
	1286	seen.add(row.card);
	1287	cards.push(row.card);
	1288	}
	1289	});
22.15	1290
22.16	1291	if(cards.length<2){
	1292	return;
	1293	}
22.15	1294
22.16	1295	// Group cards by actual top position.
	1296	var groups=[];
22.15	1297
22.16	1298	cards.forEach(function(card){
	1299	var top=
	1300	card.getBoundingClientRect().top;
22.15	1301
22.16	1302	var group=null;
22.15	1303
22.16	1304	for(var i=0;i<groups.length;i++){
22.15	1305	if(
22.16	1306	Math.abs(
	1307	groups[i].top-top
	1308	)<=ROW_TOLERANCE
22.15	1309	){
22.16	1310	group=groups[i];
	1311	break;
22.15	1312	}
22.16	1313	}
22.15	1314
22.16	1315	if(!group){
	1316	group={
	1317	top:top,
	1318	cards:[]
	1319	};
	1320	groups.push(group);
	1321	}
22.15	1322
22.16	1323	group.cards.push(card);
	1324	});
22.15	1325
22.16	1326	groups.forEach(function(group){
	1327	if(group.cards.length<2){
	1328	return;
	1329	}
22.15	1330
22.16	1331	var firstHeaders=
	1332	group.cards.map(function(card){
	1333	var candidates=
	1334	headers
	1335	.filter(function(row){
	1336	return row.card===card;
	1337	})
	1338	.sort(function(a,b){
	1339	return (
	1340	a.el
	1341	.getBoundingClientRect()
	1342	.top-
	1343	b.el
	1344	.getBoundingClientRect()
	1345	.top
	1346	);
	1347	});
22.15	1348
22.16	1349	return candidates.length
	1350	?candidates[0]
	1351	:null;
	1352	});
22.15	1353
22.16	1354	if(
	1355	!firstHeaders.some(function(row){
	1356	return !row;
	1357	})
	1358	){
	1359	var targetTop=
	1360	Math.max.apply(
	1361	Math,
	1362	firstHeaders.map(function(row){
	1363	return (
	1364	row.el
	1365	.getBoundingClientRect()
	1366	.top-
	1367	row.card
	1368	.getBoundingClientRect()
	1369	.top
	1370	);
	1371	})
	1372	);
22.13	1373
22.16	1374	firstHeaders.forEach(function(row){
	1375	var relativeTop=
	1376	row.el
	1377	.getBoundingClientRect()
	1378	.top-
	1379	row.card
	1380	.getBoundingClientRect()
	1381	.top;
22.14	1382
22.16	1383	var delta=
	1384	targetTop-relativeTop;
22.14	1385
22.16	1386	if(delta>1){
	1387	saveStyle(
	1388	row.el,
	1389	originalMargin,
	1390	"margin-top"
	1391	);
22.15	1392
22.16	1393	var current=
	1394	num(
	1395	getComputedStyle(
	1396	row.el
	1397	).marginTop
	1398	);
22.14	1399
22.16	1400	row.el.style.setProperty(
	1401	"margin-top",
	1402	(
	1403	current+delta
	1404	)+"px"
	1405	);
22.14	1406
22.16	1407	row.el.setAttribute(
	1408	"data-sn-master-first-row",
	1409	"1"
	1410	);
22.14	1411
22.16	1412	managedMargin.add(
	1413	row.el
	1414	);
	1415	}
	1416	});
	1417	}
22.14	1418
22.16	1419	var maxHeight=0;
22.14	1420
22.16	1421	group.cards.forEach(function(card){
	1422	maxHeight=
	1423	Math.max(
	1424	maxHeight,
	1425	card
	1426	.getBoundingClientRect()
	1427	.height
	1428	);
	1429	});
22.14	1430
22.16	1431	maxHeight=
	1432	Math.ceil(maxHeight);
22.14	1433
22.16	1434	group.cards.forEach(function(card){
	1435	saveStyle(
	1436	card,
	1437	originalHeight,
	1438	"min-height"
	1439	);
22.14	1440
22.16	1441	card.style.setProperty(
	1442	"min-height",
	1443	maxHeight+"px"
22.14	1444	);
	1445
22.16	1446	card.setAttribute(
	1447	"data-sn-master-equal-height",
	1448	"1"
	1449	);
22.14	1450
22.16	1451	managedHeight.add(
	1452	card
	1453	);
	1454	});
22.14	1455	});
	1456	}
	1457
22.16	1458	/* =======================================================
	1459	DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
	1460	======================================================= */
22.14	1461
22.16	1462	function equaliseDetailGrids(){
22.15	1463	if(
22.16	1464	PAGE_KIND!=="detail"\|\|
	1465	window.innerWidth<=MOBILE_MAX
22.15	1466	){
22.16	1467	return;
22.15	1468	}
22.14	1469
22.16	1470	var selectors=[
	1471	".arsn-grid",
	1472	".arsn-grid-2",
	1473	".arsn-grid-3",
	1474	".dmp-grid",
	1475	".ido-grid",
	1476	".pp-grid"
	1477	];
22.14	1478
22.16	1479	selectors.forEach(function(selector){
	1480	Array.from(
	1481	root.querySelectorAll(selector)
	1482	).forEach(function(grid){
	1483	var children=
	1484	Array.from(
	1485	grid.children\|\|[]
	1486	).filter(visible);
22.14	1487
22.16	1488	if(children.length<2){
	1489	return;
	1490	}
22.14	1491
22.16	1492	var groups=[];
22.14	1493
22.16	1494	children.forEach(function(child){
	1495	var top=
	1496	child
	1497	.getBoundingClientRect()
	1498	.top;
22.14	1499
22.16	1500	var group=null;
22.14	1501
22.16	1502	for(var i=0;i<groups.length;i++){
	1503	if(
	1504	Math.abs(
	1505	groups[i].top-top
	1506	)<=ROW_TOLERANCE
	1507	){
	1508	group=groups[i];
	1509	break;
	1510	}
	1511	}
22.14	1512
22.16	1513	if(!group){
	1514	group={
	1515	top:top,
	1516	items:[]
	1517	};
	1518	groups.push(group);
	1519	}
22.14	1520
22.16	1521	group.items.push(child);
	1522	});
22.14	1523
22.16	1524	groups.forEach(function(group){
	1525	if(group.items.length<2){
	1526	return;
	1527	}
22.13	1528
22.16	1529	var maxHeight=0;
22.15	1530
22.16	1531	group.items.forEach(function(item){
	1532	maxHeight=
	1533	Math.max(
	1534	maxHeight,
	1535	item
	1536	.getBoundingClientRect()
	1537	.height
	1538	);
	1539	});
22.15	1540
22.16	1541	maxHeight=
	1542	Math.ceil(maxHeight);
22.13	1543
22.16	1544	group.items.forEach(function(item){
	1545	saveStyle(
	1546	item,
	1547	originalHeight,
	1548	"min-height"
	1549	);
22.13	1550
22.16	1551	item.style.setProperty(
	1552	"min-height",
	1553	maxHeight+"px"
	1554	);
22.14	1555
22.16	1556	item.setAttribute(
	1557	"data-sn-master-equal-height",
	1558	"1"
	1559	);
22.13	1560
22.16	1561	managedHeight.add(item);
	1562	});
22.13	1563	});
22.16	1564	});
	1565	});
	1566	}
22.13	1567
22.16	1568	/* =======================================================
	1569	RUN / RESPONSIVE SCHEDULING
	1570	======================================================= */
22.13	1571
22.16	1572	function run(){
	1573	if(running)return;
22.13	1574
22.16	1575	running=true;
22.15	1576
22.16	1577	try{
	1578	resetRuntime();
	1579	applyPlaceholderBadge();
	1580	propagateDetailAccents();
22.15	1581
22.16	1582	var headers=
	1583	applyOverviewPalette();
22.15	1584
22.17	1585	makeThreeLineAreaLabels();
	1586	makeFilledRedOrangeCTAsBorderless();
	1587
22.16	1588	if(
	1589	window.innerWidth>
	1590	MOBILE_MAX
	1591	){
	1592	alignOverviewCards(
	1593	headers
	1594	);
22.13	1595
22.16	1596	equaliseDetailGrids();
	1597	}
22.15	1598	}finally{
22.16	1599	running=false;
22.15	1600	}
22.13	1601	}
	1602
22.16	1603	function onResize(){
22.15	1604	if(resizeTimer){
	1605	clearTimeout(
	1606	resizeTimer
	1607	);
	1608	}
22.14	1609
22.15	1610	resizeTimer=
	1611	setTimeout(
	1612	function(){
	1613	resizeTimer=0;
22.16	1614	run();
22.15	1615	},
	1616	RESIZE_DEBOUNCE
	1617	);
22.13	1618	}
	1619
22.16	1620	async function waitForReady(){
	1621	if(
	1622	document.readyState!=="complete"
	1623	){
	1624	await new Promise(function(resolve){
	1625	window.addEventListener(
	1626	"load",
	1627	resolve,
	1628	{once:true}
	1629	);
	1630	});
	1631	}
	1632
	1633	if(
	1634	document.fonts&&
	1635	document.fonts.ready
	1636	){
	1637	try{
	1638	await document.fonts.ready;
	1639	}catch(error){}
	1640	}
	1641
22.15	1642	var images=
	1643	Array.from(
	1644	root.querySelectorAll("img")
	1645	);
22.13	1646
22.16	1647	await Promise.all(
22.15	1648	images.map(function(img){
	1649	if(img.complete){
	1650	return Promise.resolve();
	1651	}
22.13	1652
22.15	1653	return new Promise(function(resolve){
	1654	var done=function(){
	1655	resolve();
	1656	};
	1657
	1658	img.addEventListener(
	1659	"load",
	1660	done,
	1661	{once:true}
	1662	);
	1663
	1664	img.addEventListener(
	1665	"error",
	1666	done,
	1667	{once:true}
	1668	);
	1669	});
	1670	})
	1671	);
	1672
22.16	1673	run();
22.13	1674	}
	1675
22.16	1676	window.addEventListener(
22.15	1677	"resize",
22.16	1678	onResize,
22.15	1679	{passive:true}
	1680	);
	1681
22.16	1682	waitForReady();
22.13	1683	})();
	1684	</script>
22.15	1685
22.16	1686	<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
	1687	{{/html}}
	1688

Wiki source code of Service Navigator

Applications

Navigation

My Recent Modifications