Changes for page Plan Your Data Management

Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45

From version 4.11
edited by Veronika Kocher
on Thursday, 03 Sep 2026 13:04
Change comment: There is no comment for this version
To version 4.13
edited by Veronika Kocher
on Thursday, 03 Sep 2026 15:54
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -26,7 +26,7 @@
26 26  <section class="dmp-card" style="margin-bottom:18px;overflow:hidden;border-left:6px solid #e94b13;">
27 27  <div class="dmp-hero"><img src="https://xwiki.uni-ak.ac.at/bin/download/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/WebHome/enable.png" alt="Planning research data, materials and outputs across the project lifecycle"></div>
28 28  <div style="padding:18px 21px 20px">
29 -<div class="dmp-eye" style="color:#8a4d36;margin-bottom:5px">ENABLE · DATA MANAGEMENT PLAN</div>
29 +<div class="dmp-eye" style="color:#8a4d36;margin-bottom:5px">PREPARE · DATA MANAGEMENT PLAN</div>
30 30  <h2 style="font-size:27px;line-height:1.2;margin:0 0 8px;color:#2c2926">Turn data management into a working project routine — not a form you fill in once</h2>
31 31  <p style="margin:0;color:#5e5953;line-height:1.6;max-width:1160px">A practical Data Management Plan (DMP) records how your project will organise, store, protect, document, share, preserve or dispose of its data and materials. For artistic and arts-based research, this can include physical objects, audiovisual material, software, performances, process documentation and artistic outputs as well as conventional research data.</p>
32 32  </div>
... ... @@ -339,6 +339,38 @@
339 339  [data-sn-master-first-row]{
340 340   box-sizing:border-box;
341 341  }
342 +
343 +/* =========================================================
344 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS
345 + ========================================================= */
346 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{
347 + display:grid!important;
348 + grid-template-columns:minmax(0,1fr)!important;
349 + grid-auto-rows:auto!important;
350 + width:100%!important;
351 + max-width:none!important;
352 + box-sizing:border-box!important;
353 + justify-items:start!important;
354 + align-items:start!important;
355 + gap:2px!important;
356 + text-align:left!important;
357 + text-align-last:left!important;
358 + text-justify:auto!important;
359 + word-spacing:normal!important;
360 + white-space:normal!important;
361 +}
362 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number,
363 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title,
364 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{
365 + display:block!important;
366 + width:100%!important;
367 + margin:0!important;
368 + text-align:left!important;
369 + text-align-last:left!important;
370 + text-justify:auto!important;
371 + word-spacing:normal!important;
372 + white-space:normal!important;
373 +}
342 342  </style>
343 343  
344 344  <script data-sn-service-navigator-master="1">
... ... @@ -531,6 +531,227 @@
531 531   }
532 532  
533 533   /* =======================================================
566 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS
567 + ======================================================= */
568 +
569 + function colourDistance(a,b){
570 + return Math.sqrt(
571 + Math.pow(a[0]-b[0],2)+
572 + Math.pow(a[1]-b[1],2)+
573 + Math.pow(a[2]-b[2],2)
574 + );
575 + }
576 +
577 + function makeFilledRedOrangeCTAsBorderless(){
578 + var RED_ORANGE=[233,75,19];
579 +
580 + Array.from(
581 + root.querySelectorAll(
582 + 'a,button,[role="button"],input[type="submit"],input[type="button"]'
583 + )
584 + ).forEach(function(el){
585 + if(!visible(el))return;
586 +
587 + var style=getComputedStyle(el);
588 + var rgb=parseRGB(style.backgroundColor);
589 +
590 + if(!rgb)return;
591 +
592 + if(
593 + colourDistance(
594 + rgb,
595 + RED_ORANGE
596 + )>55
597 + ){
598 + return;
599 + }
600 +
601 + var rect=el.getBoundingClientRect();
602 +
603 + if(
604 + rect.width<80||
605 + rect.height<24
606 + ){
607 + return;
608 + }
609 +
610 + el.style.setProperty(
611 + "border",
612 + "none",
613 + "important"
614 + );
615 +
616 + el.style.setProperty(
617 + "border-left",
618 + "none",
619 + "important"
620 + );
621 +
622 + el.style.setProperty(
623 + "border-top",
624 + "none",
625 + "important"
626 + );
627 +
628 + el.style.setProperty(
629 + "border-right",
630 + "none",
631 + "important"
632 + );
633 +
634 + el.style.setProperty(
635 + "border-bottom",
636 + "none",
637 + "important"
638 + );
639 +
640 + el.style.setProperty(
641 + "box-shadow",
642 + "none",
643 + "important"
644 + );
645 + });
646 + }
647 +
648 + /* =======================================================
649 + FULL-WIDTH THREE-LINE AREA LABELS
650 + ======================================================= */
651 +
652 + function compactText(value){
653 + return String(value||"")
654 + .replace(/\s+/g," ")
655 + .trim();
656 + }
657 +
658 + function makeThreeLineAreaLabels(){
659 + Array.from(
660 + root.querySelectorAll(
661 + ".arsn-area-label"
662 + )
663 + ).forEach(function(label){
664 + if(
665 + label.getAttribute(
666 + "data-sn-three-line"
667 + )==="1"
668 + ){
669 + return;
670 + }
671 +
672 + var number=
673 + label.querySelector(
674 + ":scope > .arsn-area-number"
675 + );
676 +
677 + var action=
678 + label.querySelector(
679 + ":scope > .arsn-area-action"
680 + );
681 +
682 + if(
683 + !number||
684 + !action
685 + ){
686 + return;
687 + }
688 +
689 + var clone=
690 + label.cloneNode(true);
691 +
692 + var cloneNumber=
693 + clone.querySelector(
694 + ":scope > .arsn-area-number"
695 + );
696 +
697 + var cloneAction=
698 + clone.querySelector(
699 + ":scope > .arsn-area-action"
700 + );
701 +
702 + if(cloneNumber){
703 + cloneNumber.remove();
704 + }
705 +
706 + if(cloneAction){
707 + cloneAction.remove();
708 + }
709 +
710 + var titleText=
711 + compactText(
712 + clone.textContent
713 + );
714 +
715 + if(!titleText){
716 + return;
717 + }
718 +
719 + var numberNode=
720 + number.cloneNode(true);
721 +
722 + var actionNode=
723 + action.cloneNode(true);
724 +
725 + var titleNode=
726 + document.createElement(
727 + "span"
728 + );
729 +
730 + titleNode.className=
731 + "sn-area-label-title";
732 +
733 + titleNode.textContent=
734 + titleText;
735 +
736 + while(label.firstChild){
737 + label.removeChild(
738 + label.firstChild
739 + );
740 + }
741 +
742 + label.appendChild(
743 + numberNode
744 + );
745 +
746 + label.appendChild(
747 + titleNode
748 + );
749 +
750 + label.appendChild(
751 + actionNode
752 + );
753 +
754 + label.setAttribute(
755 + "data-sn-three-line",
756 + "1"
757 + );
758 +
759 + var head=
760 + label.closest(
761 + ".arsn-area-head"
762 + );
763 +
764 + if(head){
765 + head.style.setProperty(
766 + "width",
767 + "100%",
768 + "important"
769 + );
770 +
771 + head.style.setProperty(
772 + "max-width",
773 + "100%",
774 + "important"
775 + );
776 +
777 + head.style.setProperty(
778 + "box-sizing",
779 + "border-box",
780 + "important"
781 + );
782 + }
783 + });
784 + }
785 +
786 + /* =======================================================
534 534   PLACEHOLDER BADGE
535 535   ======================================================= */
536 536  
... ... @@ -1301,6 +1301,9 @@
1301 1301   var headers=
1302 1302   applyOverviewPalette();
1303 1303  
1557 + makeThreeLineAreaLabels();
1558 + makeFilledRedOrangeCTAsBorderless();
1559 +
1304 1304   if(
1305 1305   window.innerWidth>
1306 1306   MOBILE_MAX