Wiki source code of Service Navigator
Version 22.13 by Veronika Kocher on Thursday, 03 Sep 2026 9:18
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{html}} | ||
| 2 | <div style="max-width:1400px;margin:0 auto;"> | ||
| 3 | |||
| 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> | ||
| 7 | |||
| 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> | ||
| 11 | |||
| 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;"> | ||
| 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> | ||
| 17 | |||
| 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" | ||
| 27 | style="flex:1 1 520px;min-width:260px;padding:11px 13px;border:1px solid #cfc8bd;border-radius:6px;background:#fffdf9;font-size:16px;" | ||
| 28 | /> | ||
| 29 | <button type="submit" class="btn btn-primary" style="padding:11px 22px;">Search</button> | ||
| 30 | </div> | ||
| 31 | </form> | ||
| 32 | </section> | ||
| 33 | |||
| 34 | <h2 style="font-size:24px;margin:0 0 16px 0;color:#35312d;">Find services by what you need to do</h2> | ||
| 35 | |||
| 36 | <div style=" | ||
| 37 | display:grid; | ||
| 38 | grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); | ||
| 39 | gap:18px; | ||
| 40 | align-items:stretch; | ||
| 41 | "> | ||
| 42 | |||
| 43 | <!-- 1. PEOPLE, EQUALITY, HEALTH & WORK --> | ||
| 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;"> | ||
| 45 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 49 | |||
| 50 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 51 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 55 | </ul> | ||
| 56 | |||
| 57 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 58 | HR · staff development · equal treatment · diversity · disability · accessibility · health · labour law | ||
| 59 | </div> | ||
| 60 | </div> | ||
| 61 | <div style="padding:0 18px 18px 18px;"> | ||
| 62 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore People & Work</span> | ||
| 63 | </div> | ||
| 64 | </section> | ||
| 65 | |||
| 66 | <!-- 2. IT & DIGITAL SERVICES --> | ||
| 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;"> | ||
| 68 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 72 | |||
| 73 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 74 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 78 | </ul> | ||
| 79 | |||
| 80 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 81 | Accounts · IT support · software · digital tools · infrastructure · IT project coordination | ||
| 82 | </div> | ||
| 83 | </div> | ||
| 84 | <div style="padding:0 18px 18px 18px;"> | ||
| 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> | ||
| 86 | </div> | ||
| 87 | </section> | ||
| 88 | |||
| 89 | <!-- 3. ROOMS, BUILDINGS & CAMPUS --> | ||
| 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;"> | ||
| 91 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 95 | |||
| 96 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 97 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 101 | </ul> | ||
| 102 | |||
| 103 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 104 | Facility management · estates · room coordination · building services · safety · house rules · campus operations | ||
| 105 | </div> | ||
| 106 | </div> | ||
| 107 | <div style="padding:0 18px 18px 18px;"> | ||
| 108 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Rooms & Campus</span> | ||
| 109 | </div> | ||
| 110 | </section> | ||
| 111 | |||
| 112 | <!-- 4. ART & RESEARCH SERVICES --> | ||
| 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;"> | ||
| 114 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 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> | ||
| 120 | |||
| 121 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 122 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 126 | </ul> | ||
| 127 | |||
| 128 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 129 | Research projects · research data management · rights & ethics · repositories · publication · preservation | ||
| 130 | </div> | ||
| 131 | </div> | ||
| 132 | <div style="padding:0 18px 18px 18px;"> | ||
| 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> | ||
| 134 | </div> | ||
| 135 | </section> | ||
| 136 | |||
| 137 | <!-- 5. STUDY, TEACHING & CURRICULUM --> | ||
| 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;"> | ||
| 139 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 143 | |||
| 144 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 145 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 149 | </ul> | ||
| 150 | |||
| 151 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 152 | Student affairs · teaching quality · curriculum development · final projects · student workspace | ||
| 153 | </div> | ||
| 154 | </div> | ||
| 155 | <div style="padding:0 18px 18px 18px;"> | ||
| 156 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Study & Teaching</span> | ||
| 157 | </div> | ||
| 158 | </section> | ||
| 159 | |||
| 160 | <!-- 6. RESEARCH & DISCOVERY RESOURCES --> | ||
| 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;"> | ||
| 162 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 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 | |||
| 174 | <div style="font-size:12px;color:#6a655e;line-height:1.5;"> | ||
| 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;"> | ||
| 179 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Research & Discovery</span> | ||
| 180 | </div> | ||
| 181 | </section> | ||
| 182 | |||
| 183 | <!-- 7. PURCHASING, FINANCE & LOGISTICS --> | ||
| 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;"> | ||
| 185 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 189 | |||
| 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> | ||
| 196 | |||
| 197 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 198 | Procurement · controlling · accounting · resource planning · mail & logistics · transport · relocations | ||
| 199 | </div> | ||
| 200 | </div> | ||
| 201 | <div style="padding:0 18px 18px 18px;"> | ||
| 202 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Finance & Logistics</span> | ||
| 203 | </div> | ||
| 204 | </section> | ||
| 205 | |||
| 206 | <!-- 8. LEGAL, DATA PROTECTION & GOVERNANCE --> | ||
| 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;"> | ||
| 208 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 212 | |||
| 213 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 214 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 218 | </ul> | ||
| 219 | |||
| 220 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 221 | Legal affairs · data protection · freedom of information · governance · institutional rules | ||
| 222 | </div> | ||
| 223 | </div> | ||
| 224 | <div style="padding:0 18px 18px 18px;"> | ||
| 225 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Legal & Governance</span> | ||
| 226 | </div> | ||
| 227 | </section> | ||
| 228 | |||
| 229 | <!-- 9. COMMUNICATION, MEDIA & EVENTS --> | ||
| 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;"> | ||
| 231 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 235 | |||
| 236 | <div style="font-weight:700;margin-bottom:6px;">I need to…</div> | ||
| 237 | <ul style="margin:0 0 14px 18px;padding:0;"> | ||
| 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> | ||
| 241 | </ul> | ||
| 242 | |||
| 243 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 244 | Press & communications · publications · print materials · event management · Open House · festival | ||
| 245 | </div> | ||
| 246 | </div> | ||
| 247 | <div style="padding:0 18px 18px 18px;"> | ||
| 248 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Communication & Events</span> | ||
| 249 | </div> | ||
| 250 | </section> | ||
| 251 | |||
| 252 | <!-- 10. INTERNATIONAL OFFICE --> | ||
| 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;"> | ||
| 254 | <div style="padding:18px 18px 14px 18px;flex: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> | ||
| 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 | |||
| 266 | <div style="font-size:12px;color:#6a655e;line-height:1.45;"> | ||
| 267 | Mobility · exchange · international cooperation · international support | ||
| 268 | </div> | ||
| 269 | </div> | ||
| 270 | <div style="padding:0 18px 18px 18px;"> | ||
| 271 | <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore International Office</span> | ||
| 272 | </div> | ||
| 273 | </section> | ||
| 274 | |||
| 275 | |||
| 276 | </div> | ||
| 277 | |||
| 278 | <aside style="margin-top:26px;padding:14px 16px;border:1px solid #cfe8ef;border-left:4px solid #21b6d7;background:#eaf6f9;border-radius:6px;"> | ||
| 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. | ||
| 282 | </div> | ||
| 283 | </aside> | ||
| 284 | |||
| 285 | </div> | ||
| 286 | {{/html}} | ||
| 287 | |||
| 288 | {{html clean="false"}} | ||
| 289 | <!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> | ||
| 290 | <style data-sn-horizontal-box-harmonizer="1"> | ||
| 291 | [data-sn-equal-height-managed="1"]{box-sizing:border-box} | ||
| 292 | @media(max-width:767px){ | ||
| 293 | [data-sn-equal-height-managed="1"]{min-height:0!important} | ||
| 294 | } | ||
| 295 | </style> | ||
| 296 | <script data-sn-horizontal-box-harmonizer="1"> | ||
| 297 | (function(){ | ||
| 298 | "use strict"; | ||
| 299 | |||
| 300 | var MOBILE_MAX=767; | ||
| 301 | var ROW_TOLERANCE=4; | ||
| 302 | var MIN_W=150; | ||
| 303 | var MIN_H=36; | ||
| 304 | |||
| 305 | var root= | ||
| 306 | document.getElementById("xwikicontent")|| | ||
| 307 | document.querySelector(".xwiki-rendering-content")|| | ||
| 308 | document.querySelector("main")|| | ||
| 309 | document.body; | ||
| 310 | |||
| 311 | if(!root)return; | ||
| 312 | |||
| 313 | var managed=new Set(); | ||
| 314 | var raf=0; | ||
| 315 | |||
| 316 | function num(v){ | ||
| 317 | var n=parseFloat(v); | ||
| 318 | return Number.isFinite(n)?n:0; | ||
| 319 | } | ||
| 320 | |||
| 321 | function visible(el){ | ||
| 322 | if(!el||el.nodeType!==1)return false; | ||
| 323 | var s=getComputedStyle(el); | ||
| 324 | if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false; | ||
| 325 | var r=el.getBoundingClientRect(); | ||
| 326 | return r.width>=MIN_W&&r.height>=MIN_H; | ||
| 327 | } | ||
| 328 | |||
| 329 | function excluded(el){ | ||
| 330 | return !el.matches||el.matches( | ||
| 331 | "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]" | ||
| 332 | ); | ||
| 333 | } | ||
| 334 | |||
| 335 | function namedLikeBox(el){ | ||
| 336 | var c=typeof el.className==="string"?el.className:""; | ||
| 337 | return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c); | ||
| 338 | } | ||
| 339 | |||
| 340 | function boxLike(el){ | ||
| 341 | if(!visible(el)||excluded(el))return false; | ||
| 342 | var s=getComputedStyle(el); | ||
| 343 | var r=el.getBoundingClientRect(); | ||
| 344 | var border= | ||
| 345 | num(s.borderTopWidth)+num(s.borderRightWidth)+ | ||
| 346 | num(s.borderBottomWidth)+num(s.borderLeftWidth); | ||
| 347 | var radius=Math.max( | ||
| 348 | num(s.borderTopLeftRadius),num(s.borderTopRightRadius), | ||
| 349 | num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius) | ||
| 350 | ); | ||
| 351 | var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent"; | ||
| 352 | var shadow=s.boxShadow&&s.boxShadow!=="none"; | ||
| 353 | return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180); | ||
| 354 | } | ||
| 355 | |||
| 356 | function pickTarget(child){ | ||
| 357 | if(!visible(child))return null; | ||
| 358 | if(boxLike(child))return child; | ||
| 359 | |||
| 360 | var cr=child.getBoundingClientRect(); | ||
| 361 | var q=[]; | ||
| 362 | Array.from(child.children||[]).forEach(function(el){ | ||
| 363 | q.push({el:el,depth:1}); | ||
| 364 | }); | ||
| 365 | |||
| 366 | var best=null,bestScore=-1; | ||
| 367 | |||
| 368 | while(q.length){ | ||
| 369 | var item=q.shift(); | ||
| 370 | var el=item.el; | ||
| 371 | if(!visible(el))continue; | ||
| 372 | |||
| 373 | var r=el.getBoundingClientRect(); | ||
| 374 | |||
| 375 | if(r.width>=cr.width*.72&&boxLike(el)){ | ||
| 376 | var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width)); | ||
| 377 | var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80); | ||
| 378 | var score=widthFit*5+topFit*2+Math.min(r.height,600)/600; | ||
| 379 | if(score>bestScore){ | ||
| 380 | best=el; | ||
| 381 | bestScore=score; | ||
| 382 | } | ||
| 383 | } | ||
| 384 | |||
| 385 | if(item.depth<3){ | ||
| 386 | Array.from(el.children||[]).forEach(function(next){ | ||
| 387 | q.push({el:next,depth:item.depth+1}); | ||
| 388 | }); | ||
| 389 | } | ||
| 390 | } | ||
| 391 | |||
| 392 | return best; | ||
| 393 | } | ||
| 394 | |||
| 395 | function reset(){ | ||
| 396 | managed.forEach(function(el){ | ||
| 397 | el.style.removeProperty("min-height"); | ||
| 398 | el.removeAttribute("data-sn-equal-height-managed"); | ||
| 399 | }); | ||
| 400 | managed.clear(); | ||
| 401 | } | ||
| 402 | |||
| 403 | function horizontalLayout(parent){ | ||
| 404 | if(!visible(parent))return false; | ||
| 405 | var s=getComputedStyle(parent); | ||
| 406 | if(s.display==="grid"||s.display==="inline-grid")return true; | ||
| 407 | if(s.display==="flex"||s.display==="inline-flex"){ | ||
| 408 | return s.flexDirection==="row"||s.flexDirection==="row-reverse"; | ||
| 409 | } | ||
| 410 | return false; | ||
| 411 | } | ||
| 412 | |||
| 413 | function rowGroups(entries){ | ||
| 414 | var groups=[]; | ||
| 415 | entries.slice().sort(function(a,b){ | ||
| 416 | return a.rect.top-b.rect.top||a.rect.left-b.rect.left; | ||
| 417 | }).forEach(function(entry){ | ||
| 418 | var group=null; | ||
| 419 | for(var i=0;i<groups.length;i++){ | ||
| 420 | if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){ | ||
| 421 | group=groups[i]; | ||
| 422 | break; | ||
| 423 | } | ||
| 424 | } | ||
| 425 | if(!group){ | ||
| 426 | group={top:entry.rect.top,entries:[]}; | ||
| 427 | groups.push(group); | ||
| 428 | } | ||
| 429 | group.entries.push(entry); | ||
| 430 | }); | ||
| 431 | return groups; | ||
| 432 | } | ||
| 433 | |||
| 434 | function run(){ | ||
| 435 | reset(); | ||
| 436 | |||
| 437 | if(window.innerWidth<=MOBILE_MAX)return; | ||
| 438 | |||
| 439 | var parents=Array.from(root.querySelectorAll("*")).filter(function(el){ | ||
| 440 | return el.children&&el.children.length>=2&&horizontalLayout(el); | ||
| 441 | }); | ||
| 442 | |||
| 443 | parents.forEach(function(parent){ | ||
| 444 | var entries=[]; | ||
| 445 | |||
| 446 | Array.from(parent.children).forEach(function(child){ | ||
| 447 | if(!visible(child))return; | ||
| 448 | var target=pickTarget(child); | ||
| 449 | if(!target)return; | ||
| 450 | entries.push({ | ||
| 451 | target:target, | ||
| 452 | rect:target.getBoundingClientRect() | ||
| 453 | }); | ||
| 454 | }); | ||
| 455 | |||
| 456 | if(entries.length<2)return; | ||
| 457 | |||
| 458 | rowGroups(entries).forEach(function(group){ | ||
| 459 | if(group.entries.length<2)return; | ||
| 460 | |||
| 461 | var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;}); | ||
| 462 | if(lefts[lefts.length-1]-lefts[0]<80)return; | ||
| 463 | |||
| 464 | var targets=[]; | ||
| 465 | var seen=new Set(); | ||
| 466 | |||
| 467 | group.entries.forEach(function(e){ | ||
| 468 | if(!seen.has(e.target)){ | ||
| 469 | seen.add(e.target); | ||
| 470 | targets.push(e.target); | ||
| 471 | } | ||
| 472 | }); | ||
| 473 | |||
| 474 | if(targets.length<2)return; | ||
| 475 | |||
| 476 | var max=0; | ||
| 477 | targets.forEach(function(el){ | ||
| 478 | max=Math.max(max,el.getBoundingClientRect().height); | ||
| 479 | }); | ||
| 480 | |||
| 481 | max=Math.ceil(max); | ||
| 482 | if(max<MIN_H)return; | ||
| 483 | |||
| 484 | targets.forEach(function(el){ | ||
| 485 | el.style.setProperty("min-height",max+"px"); | ||
| 486 | el.setAttribute("data-sn-equal-height-managed","1"); | ||
| 487 | managed.add(el); | ||
| 488 | }); | ||
| 489 | }); | ||
| 490 | }); | ||
| 491 | } | ||
| 492 | |||
| 493 | function schedule(){ | ||
| 494 | if(raf)cancelAnimationFrame(raf); | ||
| 495 | raf=requestAnimationFrame(function(){ | ||
| 496 | raf=requestAnimationFrame(function(){ | ||
| 497 | raf=0; | ||
| 498 | run(); | ||
| 499 | }); | ||
| 500 | }); | ||
| 501 | } | ||
| 502 | |||
| 503 | addEventListener("resize",schedule,{passive:true}); | ||
| 504 | addEventListener("load",schedule,{once:true}); | ||
| 505 | |||
| 506 | root.addEventListener("click",function(){ | ||
| 507 | setTimeout(schedule,0); | ||
| 508 | },true); | ||
| 509 | |||
| 510 | if(document.fonts&&document.fonts.ready){ | ||
| 511 | document.fonts.ready.then(schedule); | ||
| 512 | } | ||
| 513 | |||
| 514 | schedule(); | ||
| 515 | setTimeout(schedule,250); | ||
| 516 | setTimeout(schedule,900); | ||
| 517 | })(); | ||
| 518 | </script> | ||
| 519 | <!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> | ||
| 520 | {{/html}} |