Changes for page Art & Research Services Navigator
Last modified by Veronika Kocher on Friday, 18 Sep 2026 16:47
From version 40.1
edited by Veronika Kocher
on Thursday, 03 Sep 2026 15:57
on Thursday, 03 Sep 2026 15:57
Change comment:
There is no comment for this version
To version 39.21
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:18
on Thursday, 03 Sep 2026 9:18
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -2,12 +2,14 @@ 2 2 3 3 The **Art & Research Services Navigator** helps you find the right guidance, services and resources for each stage of your project. 4 4 5 -{{info title="Support for Your Project:"}} 5 +{{info title="How responsibilities work"}} 6 +The navigator brings services together around the project lifecycle and the researcher's task. It is a navigation layer across university services, not a separate organisational unit. 6 6 7 - 8 - **Support Kunst und Forschung (SKF)** provides guidance for projects and grant applications and collaborates with the appropriate university services as needed. 8 +**Support Kunst und Forschung (SKF)** supports project and funding activities — especially project development, funding and calls, proposals, and coordination of funded projects — and, where useful, connects them with the University's relevant services. 9 9 10 - The Navigator guides you through the project phases to the resources and points of contact relevant to your project. 10 +Depending on the question, these may include the **University Library / Research Data Management & Repository**, **IT**, **Legal and Data Protection**, **Finance and Personnel**, **Publications and Communication**, **Event Management**, the **International Office** and other services. 11 + 12 +The **institute, department or other host unit** remains the artistic or academic home of the project. The navigator brings these offers together along the project stages so you can start from your need rather than from the organisational chart. 11 11 {{/info}} 12 12 13 13 ... ... @@ -638,132 +638,21 @@ 638 638 ))) 639 639 640 640 {{html clean="false"}} 641 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 642 - 643 -<style data-sn-service-navigator-master="1"> 644 -/* ========================================================= 645 - MASTER TYPOGRAPHY 646 - ========================================================= */ 647 -#xwikicontent h1, 648 -#xwikicontent h2, 649 -#xwikicontent h3, 650 -#xwikicontent h4, 651 -#xwikicontent h5, 652 -#xwikicontent h6, 653 -#xwikicontent .box-title, 654 -#xwikicontent [role="heading"], 655 -#xwikicontent h1 a, 656 -#xwikicontent h2 a, 657 -#xwikicontent h3 a, 658 -#xwikicontent h4 a, 659 -#xwikicontent h5 a, 660 -#xwikicontent h6 a, 661 -#xwikicontent .box-title a, 662 -#xwikicontent [role="heading"] a{ 663 - text-align:left!important; 664 - text-justify:auto!important; 665 - word-spacing:normal!important; 643 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 644 +<style data-sn-horizontal-box-harmonizer="1"> 645 +[data-sn-equal-height-managed="1"]{box-sizing:border-box} 646 +@media(max-width:767px){ 647 + [data-sn-equal-height-managed="1"]{min-height:0!important} 666 666 } 667 - 668 -/* ========================================================= 669 - COMING SOON / IN VORBEREITUNG 670 - ========================================================= */ 671 -.sn-coming-soon-badge{ 672 - display:inline-block; 673 - vertical-align:middle; 674 - margin-left:10px; 675 - padding:4px 8px; 676 - border-radius:14px; 677 - border:1px solid #efd9cc; 678 - background:#fff4ee; 679 - color:#8a4d36; 680 - font-size:11px; 681 - font-weight:700; 682 - letter-spacing:.055em; 683 - line-height:1.2; 684 - white-space:nowrap; 685 -} 686 - 687 -/* ========================================================= 688 - NATIVE / DETAIL CALLOUT GEOMETRY 689 - Preserve existing backgrounds. 690 - ========================================================= */ 691 -#xwikicontent .arsn-info, 692 -#xwikicontent .dmp-info, 693 -#xwikicontent .ido-info, 694 -#xwikicontent .pp-info, 695 -#xwikicontent .infomessage{ 696 - box-sizing:border-box!important; 697 - border-left:4px solid #21b6d7!important; 698 - border-radius:8px; 699 - text-align:left!important; 700 - word-spacing:normal!important; 701 -} 702 - 703 -#xwikicontent .arsn-warn, 704 -#xwikicontent .dmp-warn, 705 -#xwikicontent .ido-warn, 706 -#xwikicontent .pp-warn, 707 -#xwikicontent .warn, 708 -#xwikicontent .warning, 709 -#xwikicontent .warningmessage, 710 -#xwikicontent .errormessage{ 711 - box-sizing:border-box!important; 712 - border-left:4px solid #e94b13!important; 713 - border-radius:8px; 714 - text-align:left!important; 715 - word-spacing:normal!important; 716 -} 717 - 718 -[data-sn-master-equal-height], 719 -[data-sn-master-first-row]{ 720 - box-sizing:border-box; 721 -} 722 - 723 -/* ========================================================= 724 - FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS 725 - ========================================================= */ 726 -#xwikicontent .arsn-area-label[data-sn-three-line="1"]{ 727 - display:grid!important; 728 - grid-template-columns:minmax(0,1fr)!important; 729 - grid-auto-rows:auto!important; 730 - width:100%!important; 731 - max-width:none!important; 732 - box-sizing:border-box!important; 733 - justify-items:start!important; 734 - align-items:start!important; 735 - gap:2px!important; 736 - text-align:left!important; 737 - text-align-last:left!important; 738 - text-justify:auto!important; 739 - word-spacing:normal!important; 740 - white-space:normal!important; 741 -} 742 -#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number, 743 -#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title, 744 -#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{ 745 - display:block!important; 746 - width:100%!important; 747 - margin:0!important; 748 - text-align:left!important; 749 - text-align-last:left!important; 750 - text-justify:auto!important; 751 - word-spacing:normal!important; 752 - white-space:normal!important; 753 -} 754 754 </style> 755 - 756 -<script data-sn-service-navigator-master="1"> 650 +<script data-sn-horizontal-box-harmonizer="1"> 757 757 (function(){ 758 758 "use strict"; 759 759 760 - var PAGE_KIND="overview"; 761 - var PLACEHOLDER=false; 762 - var PLACEHOLDER_LABEL="COMING SOON"; 763 - 764 764 var MOBILE_MAX=767; 765 - var ROW_TOLERANCE=6; 766 - var RESIZE_DEBOUNCE=220; 655 + var ROW_TOLERANCE=4; 656 + var MIN_W=150; 657 + var MIN_H=36; 767 767 768 768 var root= 769 769 document.getElementById("xwikicontent")|| ... ... @@ -773,1268 +773,212 @@ 773 773 774 774 if(!root)return; 775 775 776 - var managedHeight=new Set(); 777 - var managedMargin=new Set(); 778 - var originalHeight=new WeakMap(); 779 - var originalMargin=new WeakMap(); 667 + var managed=new Set(); 668 + var raf=0; 780 780 781 - var resizeTimer=0; 782 - var running=false; 783 - 784 - var THEMES=[ 785 - { 786 - name:"BLUE", 787 - accent:"#21b6d7", 788 - bg:"#eaf7fb", 789 - text:"#315d68", 790 - labels:[ 791 - "HIER STARTEN", 792 - "ENTSCHEIDEN", 793 - "ÜBERPRÜFEN & ANPASSEN", 794 - "START HERE", 795 - "DECIDE", 796 - "REVIEW & ADAPT" 797 - ] 798 - }, 799 - { 800 - name:"RED", 801 - accent:"#e94b13", 802 - bg:"#fff1ec", 803 - text:"#8a4d36", 804 - labels:[ 805 - "PLANEN & ORGANISIEREN", 806 - "ORGANISIEREN & DOKUMENTIEREN", 807 - "PUBLIZIEREN & PRÄSENTIEREN", 808 - "PLAN & ORGANISE", 809 - "PLAN & ORGANIZE", 810 - "ORGANISE & DOCUMENT", 811 - "ORGANIZE & DOCUMENT", 812 - "PUBLISH & PRESENT" 813 - ] 814 - }, 815 - { 816 - name:"YELLOW", 817 - accent:"#f0aa00", 818 - bg:"#fff8e7", 819 - text:"#785b17", 820 - labels:[ 821 - "SCHÜTZEN & KLÄREN", 822 - "STANDARDISIEREN & IDENTIFIZIEREN", 823 - "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 824 - "PROTECT & CLARIFY", 825 - "STANDARDISE & IDENTIFY", 826 - "STANDARDIZE & IDENTIFY", 827 - "OPEN, REUSE & MAKE FINDABLE" 828 - ] 829 - }, 830 - { 831 - name:"GREEN", 832 - accent:"#38b76a", 833 - bg:"#edf9f1", 834 - text:"#3f7451", 835 - labels:[ 836 - "INFRASTRUKTUR EINRICHTEN", 837 - "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 838 - "SPEICHERN & ZUGRIFF STEUERN", 839 - "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 840 - "SET UP INFRASTRUCTURE", 841 - "SET UP INFRASTRUCTURE & COLLABORATION", 842 - "STORE & CONTROL ACCESS", 843 - "REPOSITORY, PRESERVE & HAND OVER" 844 - ] 845 - } 846 - ]; 847 - 848 - function num(value){ 849 - var n=parseFloat(value); 670 + function num(v){ 671 + var n=parseFloat(v); 850 850 return Number.isFinite(n)?n:0; 851 851 } 852 852 853 - function norm(value){ 854 - return String(value||"") 855 - .replace(/\s+/g," ") 856 - .trim() 857 - .toUpperCase(); 858 - } 859 - 860 860 function visible(el){ 861 861 if(!el||el.nodeType!==1)return false; 862 - 863 - var style=getComputedStyle(el); 864 - var rect=el.getBoundingClientRect(); 865 - 866 - return ( 867 - style.display!=="none"&& 868 - style.visibility!=="hidden"&& 869 - rect.width>20&& 870 - rect.height>4 871 - ); 677 + var s=getComputedStyle(el); 678 + if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false; 679 + var r=el.getBoundingClientRect(); 680 + return r.width>=MIN_W&&r.height>=MIN_H; 872 872 } 873 873 874 - function saveStyle(el,map,property){ 875 - if(map.has(el))return; 876 - 877 - map.set(el,{ 878 - value:el.style.getPropertyValue(property), 879 - priority:el.style.getPropertyPriority(property) 880 - }); 881 - } 882 - 883 - function restoreStyle(el,map,property){ 884 - var original=map.get(el); 885 - 886 - if(original&&original.value){ 887 - el.style.setProperty( 888 - property, 889 - original.value, 890 - original.priority||"" 891 - ); 892 - }else{ 893 - el.style.removeProperty(property); 894 - } 895 - } 896 - 897 - function resetRuntime(){ 898 - managedHeight.forEach(function(el){ 899 - restoreStyle( 900 - el, 901 - originalHeight, 902 - "min-height" 903 - ); 904 - el.removeAttribute( 905 - "data-sn-master-equal-height" 906 - ); 907 - }); 908 - 909 - managedMargin.forEach(function(el){ 910 - restoreStyle( 911 - el, 912 - originalMargin, 913 - "margin-top" 914 - ); 915 - el.removeAttribute( 916 - "data-sn-master-first-row" 917 - ); 918 - }); 919 - 920 - managedHeight.clear(); 921 - managedMargin.clear(); 922 - } 923 - 924 - function themeFor(text){ 925 - var value=norm(text); 926 - 927 - for(var i=0;i<THEMES.length;i++){ 928 - for(var j=0;j<THEMES[i].labels.length;j++){ 929 - var label=THEMES[i].labels[j]; 930 - 931 - if( 932 - value===label|| 933 - value.indexOf(label+" ")===0|| 934 - value.indexOf(label+" -")===0|| 935 - value.indexOf(label+" ·")===0 936 - ){ 937 - return THEMES[i]; 938 - } 939 - } 940 - } 941 - 942 - return null; 943 - } 944 - 945 - /* ======================================================= 946 - BORDERLESS FILLED RED/ORANGE CTA BUTTONS 947 - ======================================================= */ 948 - 949 - function colourDistance(a,b){ 950 - return Math.sqrt( 951 - Math.pow(a[0]-b[0],2)+ 952 - Math.pow(a[1]-b[1],2)+ 953 - Math.pow(a[2]-b[2],2) 683 + function excluded(el){ 684 + return !el.matches||el.matches( 685 + "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]" 954 954 ); 955 955 } 956 956 957 - function makeFilledRedOrangeCTAsBorderless(){ 958 - var RED_ORANGE=[233,75,19]; 959 - 960 - Array.from( 961 - root.querySelectorAll( 962 - 'a,button,[role="button"],input[type="submit"],input[type="button"]' 963 - ) 964 - ).forEach(function(el){ 965 - if(!visible(el))return; 966 - 967 - var style=getComputedStyle(el); 968 - var rgb=parseRGB(style.backgroundColor); 969 - 970 - if(!rgb)return; 971 - 972 - if( 973 - colourDistance( 974 - rgb, 975 - RED_ORANGE 976 - )>55 977 - ){ 978 - return; 979 - } 980 - 981 - var rect=el.getBoundingClientRect(); 982 - 983 - if( 984 - rect.width<80|| 985 - rect.height<24 986 - ){ 987 - return; 988 - } 989 - 990 - el.style.setProperty( 991 - "border", 992 - "none", 993 - "important" 994 - ); 995 - 996 - el.style.setProperty( 997 - "border-left", 998 - "none", 999 - "important" 1000 - ); 1001 - 1002 - el.style.setProperty( 1003 - "border-top", 1004 - "none", 1005 - "important" 1006 - ); 1007 - 1008 - el.style.setProperty( 1009 - "border-right", 1010 - "none", 1011 - "important" 1012 - ); 1013 - 1014 - el.style.setProperty( 1015 - "border-bottom", 1016 - "none", 1017 - "important" 1018 - ); 1019 - 1020 - el.style.setProperty( 1021 - "box-shadow", 1022 - "none", 1023 - "important" 1024 - ); 1025 - }); 689 + function namedLikeBox(el){ 690 + var c=typeof el.className==="string"?el.className:""; 691 + return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c); 1026 1026 } 1027 1027 1028 - /* ======================================================= 1029 - FULL-WIDTH THREE-LINE AREA LABELS 1030 - ======================================================= */ 1031 - 1032 - function compactText(value){ 1033 - return String(value||"") 1034 - .replace(/\s+/g," ") 1035 - .trim(); 1036 - } 1037 - 1038 - function makeThreeLineAreaLabels(){ 1039 - Array.from( 1040 - root.querySelectorAll( 1041 - ".arsn-area-label" 1042 - ) 1043 - ).forEach(function(label){ 1044 - if( 1045 - label.getAttribute( 1046 - "data-sn-three-line" 1047 - )==="1" 1048 - ){ 1049 - return; 1050 - } 1051 - 1052 - var number= 1053 - label.querySelector( 1054 - ":scope > .arsn-area-number" 1055 - ); 1056 - 1057 - var action= 1058 - label.querySelector( 1059 - ":scope > .arsn-area-action" 1060 - ); 1061 - 1062 - if( 1063 - !number|| 1064 - !action 1065 - ){ 1066 - return; 1067 - } 1068 - 1069 - var clone= 1070 - label.cloneNode(true); 1071 - 1072 - var cloneNumber= 1073 - clone.querySelector( 1074 - ":scope > .arsn-area-number" 1075 - ); 1076 - 1077 - var cloneAction= 1078 - clone.querySelector( 1079 - ":scope > .arsn-area-action" 1080 - ); 1081 - 1082 - if(cloneNumber){ 1083 - cloneNumber.remove(); 1084 - } 1085 - 1086 - if(cloneAction){ 1087 - cloneAction.remove(); 1088 - } 1089 - 1090 - var titleText= 1091 - compactText( 1092 - clone.textContent 1093 - ); 1094 - 1095 - if(!titleText){ 1096 - return; 1097 - } 1098 - 1099 - var numberNode= 1100 - number.cloneNode(true); 1101 - 1102 - var actionNode= 1103 - action.cloneNode(true); 1104 - 1105 - var titleNode= 1106 - document.createElement( 1107 - "span" 1108 - ); 1109 - 1110 - titleNode.className= 1111 - "sn-area-label-title"; 1112 - 1113 - titleNode.textContent= 1114 - titleText; 1115 - 1116 - while(label.firstChild){ 1117 - label.removeChild( 1118 - label.firstChild 1119 - ); 1120 - } 1121 - 1122 - label.appendChild( 1123 - numberNode 1124 - ); 1125 - 1126 - label.appendChild( 1127 - titleNode 1128 - ); 1129 - 1130 - label.appendChild( 1131 - actionNode 1132 - ); 1133 - 1134 - label.setAttribute( 1135 - "data-sn-three-line", 1136 - "1" 1137 - ); 1138 - 1139 - var head= 1140 - label.closest( 1141 - ".arsn-area-head" 1142 - ); 1143 - 1144 - if(head){ 1145 - head.style.setProperty( 1146 - "width", 1147 - "100%", 1148 - "important" 1149 - ); 1150 - 1151 - head.style.setProperty( 1152 - "max-width", 1153 - "100%", 1154 - "important" 1155 - ); 1156 - 1157 - head.style.setProperty( 1158 - "box-sizing", 1159 - "border-box", 1160 - "important" 1161 - ); 1162 - } 1163 - }); 1164 - } 1165 - 1166 - /* ======================================================= 1167 - PLACEHOLDER BADGE 1168 - ======================================================= */ 1169 - 1170 - function applyPlaceholderBadge(){ 1171 - if(!PLACEHOLDER)return; 1172 - 1173 - if( 1174 - document.querySelector( 1175 - ".sn-coming-soon-badge" 1176 - ) 1177 - ){ 1178 - return; 1179 - } 1180 - 1181 - var title= 1182 - document.querySelector( 1183 - "#document-title" 1184 - )|| 1185 - document.querySelector( 1186 - "h1" 1187 - ); 1188 - 1189 - if(!title)return; 1190 - 1191 - var badge= 1192 - document.createElement( 1193 - "span" 1194 - ); 1195 - 1196 - badge.className= 1197 - "sn-coming-soon-badge"; 1198 - 1199 - badge.textContent= 1200 - PLACEHOLDER_LABEL; 1201 - 1202 - badge.setAttribute( 1203 - "aria-label", 1204 - PLACEHOLDER_LABEL 694 + function boxLike(el){ 695 + if(!visible(el)||excluded(el))return false; 696 + var s=getComputedStyle(el); 697 + var r=el.getBoundingClientRect(); 698 + var border= 699 + num(s.borderTopWidth)+num(s.borderRightWidth)+ 700 + num(s.borderBottomWidth)+num(s.borderLeftWidth); 701 + var radius=Math.max( 702 + num(s.borderTopLeftRadius),num(s.borderTopRightRadius), 703 + num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius) 1205 1205 ); 1206 - 1207 - title.appendChild( 1208 - badge 1209 - ); 705 + var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent"; 706 + var shadow=s.boxShadow&&s.boxShadow!=="none"; 707 + return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180); 1210 1210 } 1211 1211 1212 - /*=======================================================1213 - DETAIL PAGE OWN-ACCENT PROPAGATION1214 - ======================================================= */710 + function pickTarget(child){ 711 + if(!visible(child))return null; 712 + if(boxLike(child))return child; 1215 1215 1216 - function parseRGB(value){ 1217 - var match=String(value||"").match( 1218 - /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 1219 - ); 1220 - 1221 - if(!match)return null; 1222 - 1223 - return [ 1224 - Number(match[1]), 1225 - Number(match[2]), 1226 - Number(match[3]) 1227 - ]; 1228 - } 1229 - 1230 - function distance(a,b){ 1231 - return Math.sqrt( 1232 - Math.pow(a[0]-b[0],2)+ 1233 - Math.pow(a[1]-b[1],2)+ 1234 - Math.pow(a[2]-b[2],2) 1235 - ); 1236 - } 1237 - 1238 - function paletteMatch(cssColor){ 1239 - var rgb=parseRGB(cssColor); 1240 - 1241 - if(!rgb)return null; 1242 - 1243 - var palette=[ 1244 - {hex:"#21b6d7",rgb:[33,182,215]}, 1245 - {hex:"#e94b13",rgb:[233,75,19]}, 1246 - {hex:"#f0aa00",rgb:[240,170,0]}, 1247 - {hex:"#38b76a",rgb:[56,183,106]} 1248 - ]; 1249 - 1250 - var best=null; 1251 - var bestDistance=Infinity; 1252 - 1253 - palette.forEach(function(item){ 1254 - var d=distance(rgb,item.rgb); 1255 - 1256 - if(d<bestDistance){ 1257 - best=item; 1258 - bestDistance=d; 1259 - } 714 + var cr=child.getBoundingClientRect(); 715 + var q=[]; 716 + Array.from(child.children||[]).forEach(function(el){ 717 + q.push({el:el,depth:1}); 1260 1260 }); 1261 1261 1262 - return bestDistance<=30 1263 - ?best 1264 - :null; 1265 - } 720 + var best=null,bestScore=-1; 1266 1266 1267 - function propagateDetailAccents(){ 1268 - if(PAGE_KIND!=="detail")return; 722 + while(q.length){ 723 + var item=q.shift(); 724 + var el=item.el; 725 + if(!visible(el))continue; 1269 1269 1270 - Array.from( 1271 - root.querySelectorAll( 1272 - ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 1273 - ".arsn-source,.dmp-source,.ido-source,.pp-source" 1274 - ) 1275 - ).forEach(function(el){ 1276 - if(!visible(el))return; 727 + var r=el.getBoundingClientRect(); 1277 1277 1278 - var style=getComputedStyle(el); 1279 - 1280 - if( 1281 - num(style.borderTopWidth)>=2 1282 - ){ 1283 - var match= 1284 - paletteMatch( 1285 - style.borderTopColor 1286 - ); 1287 - 1288 - if(match){ 1289 - el.style.setProperty( 1290 - "border-left", 1291 - "4px solid "+match.hex, 1292 - "important" 1293 - ); 729 + if(r.width>=cr.width*.72&&boxLike(el)){ 730 + var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width)); 731 + var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80); 732 + var score=widthFit*5+topFit*2+Math.min(r.height,600)/600; 733 + if(score>bestScore){ 734 + best=el; 735 + bestScore=score; 1294 1294 } 1295 1295 } 1296 - }); 1297 1297 1298 - // Warning families: explicit safety override. 1299 - Array.from( 1300 - root.querySelectorAll( 1301 - ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 1302 - ".warn,.warning,.warningmessage,.errormessage" 1303 - ) 1304 - ).forEach(function(el){ 1305 - if(!visible(el))return; 1306 - 1307 - el.style.setProperty( 1308 - "border-left", 1309 - "4px solid #e94b13", 1310 - "important" 1311 - ); 1312 - }); 1313 - 1314 - // Info families: explicit orientation override. 1315 - Array.from( 1316 - root.querySelectorAll( 1317 - ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 1318 - ) 1319 - ).forEach(function(el){ 1320 - if(!visible(el))return; 1321 - 1322 - el.style.setProperty( 1323 - "border-left", 1324 - "4px solid #21b6d7", 1325 - "important" 1326 - ); 1327 - }); 1328 - } 1329 - 1330 - /* ======================================================= 1331 - OVERVIEW SEMANTIC THEME PALETTE 1332 - ======================================================= */ 1333 - 1334 - function smallestThemeHeaders(){ 1335 - return Array.from( 1336 - root.querySelectorAll( 1337 - "div,span,p,strong,h3,h4,h5,h6" 1338 - ) 1339 - ).filter(function(el){ 1340 - if(!visible(el))return false; 1341 - if(!themeFor(el.textContent))return false; 1342 - 1343 - return !Array.from( 1344 - el.children||[] 1345 - ).some(function(child){ 1346 - return !!themeFor( 1347 - child.textContent 1348 - ); 1349 - }); 1350 - }); 1351 - } 1352 - 1353 - function findOverviewCard(header){ 1354 - var node=header.parentElement; 1355 - var candidates=[]; 1356 - 1357 - while(node&&node!==root){ 1358 - var rect=node.getBoundingClientRect(); 1359 - var style=getComputedStyle(node); 1360 - 1361 - var border= 1362 - num(style.borderTopWidth)+ 1363 - num(style.borderRightWidth)+ 1364 - num(style.borderBottomWidth)+ 1365 - num(style.borderLeftWidth); 1366 - 1367 - if( 1368 - rect.width>=220&& 1369 - rect.width<=800&& 1370 - rect.height>=120&& 1371 - border>=1 1372 - ){ 1373 - candidates.push(node); 739 + if(item.depth<3){ 740 + Array.from(el.children||[]).forEach(function(next){ 741 + q.push({el:next,depth:item.depth+1}); 742 + }); 1374 1374 } 1375 - 1376 - node=node.parentElement; 1377 1377 } 1378 1378 1379 - if(!candidates.length)return null; 1380 - 1381 - candidates.sort(function(a,b){ 1382 - return ( 1383 - b.getBoundingClientRect().height- 1384 - a.getBoundingClientRect().height 1385 - ); 1386 - }); 1387 - 1388 - return candidates[0]; 746 + return best; 1389 1389 } 1390 1390 1391 - function rowCandidates(link,card){ 1392 - var result=[]; 1393 - var cardRect= 1394 - card.getBoundingClientRect(); 1395 - 1396 - var node=link; 1397 - 1398 - while(node&&node!==card){ 1399 - if(visible(node)){ 1400 - var rect= 1401 - node.getBoundingClientRect(); 1402 - 1403 - if( 1404 - rect.height<=105&& 1405 - rect.width>= 1406 - cardRect.width*.50&& 1407 - rect.width<= 1408 - cardRect.width*1.03 1409 - ){ 1410 - result.push(node); 1411 - } 1412 - } 1413 - 1414 - node=node.parentElement; 1415 - } 1416 - 1417 - return result; 1418 - } 1419 - 1420 - function chooseOuterRow( 1421 - candidates, 1422 - link 1423 - ){ 1424 - if(!candidates.length){ 1425 - return link; 1426 - } 1427 - 1428 - var bordered= 1429 - candidates.filter(function(el){ 1430 - return ( 1431 - num( 1432 - getComputedStyle(el) 1433 - .borderLeftWidth 1434 - )>=1 1435 - ); 1436 - }); 1437 - 1438 - var pool= 1439 - bordered.length 1440 - ?bordered 1441 - :candidates; 1442 - 1443 - pool.sort(function(a,b){ 1444 - var ar= 1445 - a.getBoundingClientRect(); 1446 - 1447 - var br= 1448 - b.getBoundingClientRect(); 1449 - 1450 - return ( 1451 - ar.left-br.left|| 1452 - br.width-ar.width 1453 - ); 749 + function reset(){ 750 + managed.forEach(function(el){ 751 + el.style.removeProperty("min-height"); 752 + el.removeAttribute("data-sn-equal-height-managed"); 1454 1454 }); 1455 - 1456 - return pool[0]||link; 754 + managed.clear(); 1457 1457 } 1458 1458 1459 - function applyOverviewPalette(){ 1460 - if(PAGE_KIND!=="overview"){ 1461 - return []; 757 + function horizontalLayout(parent){ 758 + if(!visible(parent))return false; 759 + var s=getComputedStyle(parent); 760 + if(s.display==="grid"||s.display==="inline-grid")return true; 761 + if(s.display==="flex"||s.display==="inline-flex"){ 762 + return s.flexDirection==="row"||s.flexDirection==="row-reverse"; 1462 1462 } 1463 - 1464 - var headers= 1465 - smallestThemeHeaders() 1466 - .map(function(el){ 1467 - return { 1468 - el:el, 1469 - theme: 1470 - themeFor( 1471 - el.textContent 1472 - ), 1473 - card: 1474 - findOverviewCard( 1475 - el 1476 - ) 1477 - }; 1478 - }) 1479 - .filter(function(row){ 1480 - return !!row.card; 1481 - }); 1482 - 1483 - var unique=[]; 1484 - var seenHeaders=new Set(); 1485 - 1486 - headers.forEach(function(row){ 1487 - var key= 1488 - row.theme.name+ 1489 - "|"+ 1490 - Math.round( 1491 - row.card 1492 - .getBoundingClientRect() 1493 - .left 1494 - )+ 1495 - "|"+ 1496 - Math.round( 1497 - row.el 1498 - .getBoundingClientRect() 1499 - .top 1500 - ); 1501 - 1502 - if(!seenHeaders.has(key)){ 1503 - seenHeaders.add(key); 1504 - unique.push(row); 1505 - } 1506 - }); 1507 - 1508 - unique.forEach(function(row){ 1509 - var headerRect= 1510 - row.el 1511 - .getBoundingClientRect(); 1512 - 1513 - row.el.style.setProperty( 1514 - "background", 1515 - row.theme.bg, 1516 - "important" 1517 - ); 1518 - 1519 - row.el.style.setProperty( 1520 - "color", 1521 - row.theme.text, 1522 - "important" 1523 - ); 1524 - 1525 - row.el.style.setProperty( 1526 - "text-align", 1527 - "left", 1528 - "important" 1529 - ); 1530 - 1531 - row.el.style.setProperty( 1532 - "word-spacing", 1533 - "normal", 1534 - "important" 1535 - ); 1536 - 1537 - var later= 1538 - unique 1539 - .filter(function(other){ 1540 - return ( 1541 - other.card===row.card&& 1542 - other.el 1543 - .getBoundingClientRect() 1544 - .top> 1545 - headerRect.top+2 1546 - ); 1547 - }) 1548 - .sort(function(a,b){ 1549 - return ( 1550 - a.el 1551 - .getBoundingClientRect() 1552 - .top- 1553 - b.el 1554 - .getBoundingClientRect() 1555 - .top 1556 - ); 1557 - }); 1558 - 1559 - var stopTop= 1560 - later.length 1561 - ?later[0].el 1562 - .getBoundingClientRect() 1563 - .top 1564 - :Infinity; 1565 - 1566 - Array.from( 1567 - row.card.querySelectorAll("a") 1568 - ).forEach(function(link){ 1569 - if(!visible(link))return; 1570 - 1571 - var rect= 1572 - link.getBoundingClientRect(); 1573 - 1574 - if( 1575 - rect.top<= 1576 - headerRect.bottom-2|| 1577 - rect.top>= 1578 - stopTop-2 1579 - ){ 1580 - return; 1581 - } 1582 - 1583 - var candidates= 1584 - rowCandidates( 1585 - link, 1586 - row.card 1587 - ); 1588 - 1589 - var target= 1590 - chooseOuterRow( 1591 - candidates, 1592 - link 1593 - ); 1594 - 1595 - candidates.forEach(function(el){ 1596 - el.style.setProperty( 1597 - "border-left", 1598 - "0 solid transparent", 1599 - "important" 1600 - ); 1601 - }); 1602 - 1603 - target.style.setProperty( 1604 - "border-left", 1605 - "3px solid "+ 1606 - row.theme.accent, 1607 - "important" 1608 - ); 1609 - 1610 - target.style.setProperty( 1611 - "box-sizing", 1612 - "border-box", 1613 - "important" 1614 - ); 1615 - }); 1616 - }); 1617 - 1618 - return unique; 764 + return false; 1619 1619 } 1620 1620 1621 - /* ======================================================= 1622 - OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1623 - ======================================================= */ 1624 - 1625 - function alignOverviewCards(headers){ 1626 - if( 1627 - PAGE_KIND!=="overview"|| 1628 - window.innerWidth<=MOBILE_MAX 1629 - ){ 1630 - return; 1631 - } 1632 - 1633 - var cards=[]; 1634 - var seen=new Set(); 1635 - 1636 - headers.forEach(function(row){ 1637 - if(!seen.has(row.card)){ 1638 - seen.add(row.card); 1639 - cards.push(row.card); 1640 - } 1641 - }); 1642 - 1643 - if(cards.length<2){ 1644 - return; 1645 - } 1646 - 1647 - // Group cards by actual top position. 767 + function rowGroups(entries){ 1648 1648 var groups=[]; 1649 - 1650 - cards.forEach(function(card){ 1651 - var top= 1652 - card.getBoundingClientRect().top; 1653 - 769 + entries.slice().sort(function(a,b){ 770 + return a.rect.top-b.rect.top||a.rect.left-b.rect.left; 771 + }).forEach(function(entry){ 1654 1654 var group=null; 1655 - 1656 1656 for(var i=0;i<groups.length;i++){ 1657 - if( 1658 - Math.abs( 1659 - groups[i].top-top 1660 - )<=ROW_TOLERANCE 1661 - ){ 774 + if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){ 1662 1662 group=groups[i]; 1663 1663 break; 1664 1664 } 1665 1665 } 1666 - 1667 1667 if(!group){ 1668 - group={ 1669 - top:top, 1670 - cards:[] 1671 - }; 780 + group={top:entry.rect.top,entries:[]}; 1672 1672 groups.push(group); 1673 1673 } 1674 - 1675 - group.cards.push(card); 783 + group.entries.push(entry); 1676 1676 }); 785 + return groups; 786 + } 1677 1677 1678 - groups.forEach(function(group){ 1679 - if(group.cards.length<2){ 1680 - return; 1681 - } 788 + function run(){ 789 + reset(); 1682 1682 1683 - var firstHeaders= 1684 - group.cards.map(function(card){ 1685 - var candidates= 1686 - headers 1687 - .filter(function(row){ 1688 - return row.card===card; 1689 - }) 1690 - .sort(function(a,b){ 1691 - return ( 1692 - a.el 1693 - .getBoundingClientRect() 1694 - .top- 1695 - b.el 1696 - .getBoundingClientRect() 1697 - .top 1698 - ); 1699 - }); 791 + if(window.innerWidth<=MOBILE_MAX)return; 1700 1700 1701 - return candidates.length 1702 - ?candidates[0] 1703 - :null; 1704 - }); 793 + var parents=Array.from(root.querySelectorAll("*")).filter(function(el){ 794 + return el.children&&el.children.length>=2&&horizontalLayout(el); 795 + }); 1705 1705 1706 - if( 1707 - !firstHeaders.some(function(row){ 1708 - return !row; 1709 - }) 1710 - ){ 1711 - var targetTop= 1712 - Math.max.apply( 1713 - Math, 1714 - firstHeaders.map(function(row){ 1715 - return ( 1716 - row.el 1717 - .getBoundingClientRect() 1718 - .top- 1719 - row.card 1720 - .getBoundingClientRect() 1721 - .top 1722 - ); 1723 - }) 1724 - ); 797 + parents.forEach(function(parent){ 798 + var entries=[]; 1725 1725 1726 - firstHeaders.forEach(function(row){ 1727 - var relativeTop= 1728 - row.el 1729 - .getBoundingClientRect() 1730 - .top- 1731 - row.card 1732 - .getBoundingClientRect() 1733 - .top; 1734 - 1735 - var delta= 1736 - targetTop-relativeTop; 1737 - 1738 - if(delta>1){ 1739 - saveStyle( 1740 - row.el, 1741 - originalMargin, 1742 - "margin-top" 1743 - ); 1744 - 1745 - var current= 1746 - num( 1747 - getComputedStyle( 1748 - row.el 1749 - ).marginTop 1750 - ); 1751 - 1752 - row.el.style.setProperty( 1753 - "margin-top", 1754 - ( 1755 - current+delta 1756 - )+"px" 1757 - ); 1758 - 1759 - row.el.setAttribute( 1760 - "data-sn-master-first-row", 1761 - "1" 1762 - ); 1763 - 1764 - managedMargin.add( 1765 - row.el 1766 - ); 1767 - } 800 + Array.from(parent.children).forEach(function(child){ 801 + if(!visible(child))return; 802 + var target=pickTarget(child); 803 + if(!target)return; 804 + entries.push({ 805 + target:target, 806 + rect:target.getBoundingClientRect() 1768 1768 }); 1769 - } 1770 - 1771 - var maxHeight=0; 1772 - 1773 - group.cards.forEach(function(card){ 1774 - maxHeight= 1775 - Math.max( 1776 - maxHeight, 1777 - card 1778 - .getBoundingClientRect() 1779 - .height 1780 - ); 1781 1781 }); 1782 1782 1783 - maxHeight= 1784 - Math.ceil(maxHeight); 810 + if(entries.length<2)return; 1785 1785 1786 - group.cards.forEach(function(card){ 1787 - saveStyle( 1788 - card, 1789 - originalHeight, 1790 - "min-height" 1791 - ); 812 + rowGroups(entries).forEach(function(group){ 813 + if(group.entries.length<2)return; 1792 1792 1793 - card.style.setProperty( 1794 - "min-height", 1795 - maxHeight+"px" 1796 - ); 815 + var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;}); 816 + if(lefts[lefts.length-1]-lefts[0]<80)return; 1797 1797 1798 - card.setAttribute( 1799 - "data-sn-master-equal-height", 1800 - "1" 1801 - ); 818 + var targets=[]; 819 + var seen=new Set(); 1802 1802 1803 - managedHeight.add( 1804 - card 1805 - ); 1806 - }); 1807 - }); 1808 - } 1809 - 1810 - /* ======================================================= 1811 - DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1812 - ======================================================= */ 1813 - 1814 - function equaliseDetailGrids(){ 1815 - if( 1816 - PAGE_KIND!=="detail"|| 1817 - window.innerWidth<=MOBILE_MAX 1818 - ){ 1819 - return; 1820 - } 1821 - 1822 - var selectors=[ 1823 - ".arsn-grid", 1824 - ".arsn-grid-2", 1825 - ".arsn-grid-3", 1826 - ".dmp-grid", 1827 - ".ido-grid", 1828 - ".pp-grid" 1829 - ]; 1830 - 1831 - selectors.forEach(function(selector){ 1832 - Array.from( 1833 - root.querySelectorAll(selector) 1834 - ).forEach(function(grid){ 1835 - var children= 1836 - Array.from( 1837 - grid.children||[] 1838 - ).filter(visible); 1839 - 1840 - if(children.length<2){ 1841 - return; 1842 - } 1843 - 1844 - var groups=[]; 1845 - 1846 - children.forEach(function(child){ 1847 - var top= 1848 - child 1849 - .getBoundingClientRect() 1850 - .top; 1851 - 1852 - var group=null; 1853 - 1854 - for(var i=0;i<groups.length;i++){ 1855 - if( 1856 - Math.abs( 1857 - groups[i].top-top 1858 - )<=ROW_TOLERANCE 1859 - ){ 1860 - group=groups[i]; 1861 - break; 1862 - } 821 + group.entries.forEach(function(e){ 822 + if(!seen.has(e.target)){ 823 + seen.add(e.target); 824 + targets.push(e.target); 1863 1863 } 826 + }); 1864 1864 1865 - if(!group){ 1866 - group={ 1867 - top:top, 1868 - items:[] 1869 - }; 1870 - groups.push(group); 1871 - } 828 + if(targets.length<2)return; 1872 1872 1873 - group.items.push(child); 830 + var max=0; 831 + targets.forEach(function(el){ 832 + max=Math.max(max,el.getBoundingClientRect().height); 1874 1874 }); 1875 1875 1876 - groups.forEach(function(group){ 1877 - if(group.items.length<2){ 1878 - return; 1879 - } 835 + max=Math.ceil(max); 836 + if(max<MIN_H)return; 1880 1880 1881 - var maxHeight=0; 1882 - 1883 - group.items.forEach(function(item){ 1884 - maxHeight= 1885 - Math.max( 1886 - maxHeight, 1887 - item 1888 - .getBoundingClientRect() 1889 - .height 1890 - ); 1891 - }); 1892 - 1893 - maxHeight= 1894 - Math.ceil(maxHeight); 1895 - 1896 - group.items.forEach(function(item){ 1897 - saveStyle( 1898 - item, 1899 - originalHeight, 1900 - "min-height" 1901 - ); 1902 - 1903 - item.style.setProperty( 1904 - "min-height", 1905 - maxHeight+"px" 1906 - ); 1907 - 1908 - item.setAttribute( 1909 - "data-sn-master-equal-height", 1910 - "1" 1911 - ); 1912 - 1913 - managedHeight.add(item); 1914 - }); 838 + targets.forEach(function(el){ 839 + el.style.setProperty("min-height",max+"px"); 840 + el.setAttribute("data-sn-equal-height-managed","1"); 841 + managed.add(el); 1915 1915 }); 1916 1916 }); 1917 1917 }); 1918 1918 } 1919 1919 1920 - /* ======================================================= 1921 - RUN / RESPONSIVE SCHEDULING 1922 - ======================================================= */ 1923 - 1924 - function run(){ 1925 - if(running)return; 1926 - 1927 - running=true; 1928 - 1929 - try{ 1930 - resetRuntime(); 1931 - applyPlaceholderBadge(); 1932 - propagateDetailAccents(); 1933 - 1934 - var headers= 1935 - applyOverviewPalette(); 1936 - 1937 - makeThreeLineAreaLabels(); 1938 - makeFilledRedOrangeCTAsBorderless(); 1939 - 1940 - if( 1941 - window.innerWidth> 1942 - MOBILE_MAX 1943 - ){ 1944 - alignOverviewCards( 1945 - headers 1946 - ); 1947 - 1948 - equaliseDetailGrids(); 1949 - } 1950 - }finally{ 1951 - running=false; 1952 - } 847 + function schedule(){ 848 + if(raf)cancelAnimationFrame(raf); 849 + raf=requestAnimationFrame(function(){ 850 + raf=requestAnimationFrame(function(){ 851 + raf=0; 852 + run(); 853 + }); 854 + }); 1953 1953 } 1954 1954 1955 - function onResize(){ 1956 - if(resizeTimer){ 1957 - clearTimeout( 1958 - resizeTimer 1959 - ); 1960 - } 857 + addEventListener("resize",schedule,{passive:true}); 858 + addEventListener("load",schedule,{once:true}); 1961 1961 1962 - resizeTimer= 1963 - setTimeout( 1964 - function(){ 1965 - resizeTimer=0; 1966 - run(); 1967 - }, 1968 - RESIZE_DEBOUNCE 1969 - ); 1970 - } 860 + root.addEventListener("click",function(){ 861 + setTimeout(schedule,0); 862 + },true); 1971 1971 1972 - async function waitForReady(){ 1973 - if( 1974 - document.readyState!=="complete" 1975 - ){ 1976 - await new Promise(function(resolve){ 1977 - window.addEventListener( 1978 - "load", 1979 - resolve, 1980 - {once:true} 1981 - ); 1982 - }); 1983 - } 1984 - 1985 - if( 1986 - document.fonts&& 1987 - document.fonts.ready 1988 - ){ 1989 - try{ 1990 - await document.fonts.ready; 1991 - }catch(error){} 1992 - } 1993 - 1994 - var images= 1995 - Array.from( 1996 - root.querySelectorAll("img") 1997 - ); 1998 - 1999 - await Promise.all( 2000 - images.map(function(img){ 2001 - if(img.complete){ 2002 - return Promise.resolve(); 2003 - } 2004 - 2005 - return new Promise(function(resolve){ 2006 - var done=function(){ 2007 - resolve(); 2008 - }; 2009 - 2010 - img.addEventListener( 2011 - "load", 2012 - done, 2013 - {once:true} 2014 - ); 2015 - 2016 - img.addEventListener( 2017 - "error", 2018 - done, 2019 - {once:true} 2020 - ); 2021 - }); 2022 - }) 2023 - ); 2024 - 2025 - run(); 864 + if(document.fonts&&document.fonts.ready){ 865 + document.fonts.ready.then(schedule); 2026 2026 } 2027 2027 2028 - window.addEventListener( 2029 - "resize", 2030 - onResize, 2031 - {passive:true} 2032 - ); 2033 - 2034 - waitForReady(); 868 + schedule(); 869 + setTimeout(schedule,250); 870 + setTimeout(schedule,900); 2035 2035 })(); 2036 2036 </script> 2037 - 2038 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 873 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 2039 2039 {{/html}} 2040 2040