Zum Inhalt springen

Änderungen von Dokument Home

Zuletzt geändert von Steffen Rehfuß am 14.08.2026 18:48
Von Version 4.1
bearbeitet von Steffen Rehfuß
am 14.08.2026 18:47
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 2.1
bearbeitet von Steffen Rehfuß
am 14.08.2026 18:47
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -4,15 +4,14 @@
4 4  ## Einfach in den Seiten-Editor (Quelltext/Wiki) einfuegen.
5 5  ## =====================================================================
6 6  ##
7 -## ---- KONFIG 1: Blog-Space + Hero-Kategorie + Laufschrift-Kategorie ----
7 +## ---- KONFIG 1: Blog-Space + Hero-Kategorie ----
8 8  #set ($blogSpace = 'Blog') ## technischer Space-Name des Blogs
9 9  #set ($heroCategory = 'TOP') ## Kategorie, die gross dargestellt wird
10 -#set ($breakingCategory = 'Breaking News') ## Kategorie fuer die Laufschrift oben
11 11  ##
12 12  ## ---- KONFIG 2: Die 12 App-Buttons (Text / Icon / Link / Farbe) ----
13 13  ## icon = Font-Awesome-Name (ohne "fa-"). Farbe = beliebiger Hex-Wert.
14 14  #set ($apps = [
15 - {'label':'Haupt-Wiki', 'icon':'search', 'ref':'Main.WebHome', 'color':'#16a085'},
14 + {'label':'Abteilung I', 'icon':'search', 'ref':'abteilung01:Main.WebHome', 'color':'#16a085'},
16 16   {'label':'MyPage', 'icon':'key', 'ref':'MyPage.WebHome', 'color':'#2980b9'},
17 17   {'label':'Blog', 'icon':'star', 'ref':'Blog.WebHome', 'color':'#8e44ad'},
18 18   {'label':'Chatbot', 'icon':'pencil-square-o', 'url':"javascript:document.getElementById('toggle-chat-button').click();void(0);", 'color':'#16a085'},
... ... @@ -38,17 +38,14 @@
38 38  #end
39 39  #set ($postNames = $q.execute())
40 40  ##
41 -## ---- Hero (erster TOP-Post) + bis zu 4 Kachel-Posts + neuester Breaking-News-Post bestimmen ----
40 +## ---- Hero (erster TOP-Post) + bis zu 4 Kachel-Posts bestimmen ----
42 42  #set ($heroDoc = $NULL)
43 43  #set ($heroObj = $NULL)
44 44  #set ($tilePosts = [])
45 -#set ($breakingDoc = $NULL)
46 -#set ($breakingObj = $NULL)
47 47  #foreach ($pn in $postNames)
48 48   #set ($pd = $xwiki.getDocument($pn))
49 49   #set ($po = $pd.getObject('Blog.BlogPostClass'))
50 50   #set ($isTop = false)
51 - #set ($isBreaking = false)
52 52   #set ($cats = $po.getValue('category'))
53 53   #if ($cats)
54 54   #foreach ($c in $cats)
... ... @@ -57,15 +57,8 @@
57 57   #if ($cn == $heroCategory)
58 58   #set ($isTop = true)
59 59   #end
60 - #if ($cn == $breakingCategory)
61 - #set ($isBreaking = true)
62 - #end
63 63   #end
64 64   #end
65 - #if ($isBreaking && !$breakingDoc)
66 - #set ($breakingDoc = $pd)
67 - #set ($breakingObj = $po)
68 - #end
69 69   #if ($isTop && !$heroDoc)
70 70   #set ($heroDoc = $pd)
71 71   #set ($heroObj = $po)
... ... @@ -98,14 +98,6 @@
98 98   #set ($heroDate = $heroObj.getValue('publishDate'))
99 99  #end
100 100  ##
101 -## ---- Laufschrift-Daten aufbereiten ----
102 -#if ($breakingDoc)
103 - #set ($breakingTitle = $breakingDoc.getPlainTitle())
104 - #set ($breakingText = "$!breakingObj.getValue('extract')")
105 - #set ($breakingURL = $breakingDoc.getURL('view'))
106 - #set ($breakingDate = $breakingObj.getValue('publishDate'))
107 -#end
108 -##
109 109  {{html clean="false" wiki="false"}}
110 110  <style>
111 111  ## Seitenkopf (Titel + "Zuletzt geaendert" + Aktionsmenue) auf DIESER Seite ausblenden
... ... @@ -121,34 +121,6 @@
121 121  ## Fusszeile: Tags + "Gefaellt mir" + "Erstellt von / uebersetzt von" ausblenden
122 122  #xdocTags, .doc-tags, .like-container, .xdocCreation { display: none !important; }
123 123  .intra-wrap { width: 90%; max-width: 90%; margin: 0 auto; }
124 -.intra-ticker {
125 - display: flex; align-items: stretch; height: 38px;
126 - background: #c0392b; margin-bottom: 20px; overflow: hidden; border-radius: 8px;
127 -}
128 -.intra-ticker-label {
129 - flex: 0 0 auto; display: flex; align-items: center;
130 - background: #922b21; color: #fff !important; text-decoration: none;
131 - font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
132 - padding: 0 18px; white-space: nowrap;
133 -}
134 -.intra-ticker-viewport { flex: 1 1 auto; position: relative; overflow: hidden; }
135 -.intra-ticker-date {
136 - flex: 0 0 auto; display: flex; align-items: center;
137 - color: #ffd7d0 !important; font-size: 13px; font-weight: 700;
138 - padding: 0 6px 0 18px; white-space: nowrap;
139 -}
140 -.intra-ticker-track {
141 - position: absolute; top: 0; left: 100%; height: 100%;
142 - display: flex; align-items: center; white-space: nowrap;
143 - color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 600;
144 - padding: 0 18px;
145 - animation: intra-ticker-scroll 22s linear infinite;
146 -}
147 -.intra-ticker-track:hover { animation-play-state: paused; text-decoration: underline; }
148 -@keyframes intra-ticker-scroll {
149 - from { left: 100%; }
150 - to { left: -100%; }
151 -}
152 152  .intra-cols { display: flex; gap: 20px; align-items: stretch; }
153 153  .intra-main { flex: 2 1 0; min-width: 0; }
154 154  .intra-side { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
... ... @@ -156,13 +156,7 @@
156 156   position: relative; width: 100%; min-height: 360px; border-radius: 14px;
157 157   overflow: hidden; background: #223; background-size: cover; background-position: center;
158 158   box-shadow: 0 6px 18px rgba(0,0,0,.15); text-decoration: none; display: block;
159 - transition: transform .15s ease, box-shadow .15s ease;
160 160  }
161 -.intra-hero:hover {
162 - transform: translateY(-3px);
163 - box-shadow: 0 12px 28px rgba(0,0,0,.22);
164 -}
165 -.intra-hero:hover .intra-btn { filter: brightness(1.08); }
166 166  .intra-hero::after {
167 167   content: ""; position: absolute; inset: 0;
168 168   background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
... ... @@ -180,12 +180,32 @@
180 180  }
181 181  .intra-btn:hover { filter: brightness(1.08); }
182 182  .intra-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
130 +
183 183  .intra-app {
184 - display: flex; flex-direction: column; justify-content: space-between;
185 - border-radius: 10px; padding: 12px 12px 10px; min-height: 84px; color: #fff !important;
186 - text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
132 + display: flex;
133 + flex-direction: column;
134 + justify-content: space-between;
135 + border-radius: 10px;
136 + padding: 12px 12px 10px;
137 + min-height: 84px;
138 + color: #fff !important;
139 + text-decoration: none;
140 + transition: transform .15s ease,
141 + box-shadow .15s ease,
142 + filter .15s ease;
187 187  }
188 -.intra-app:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
144 +
145 +.intra-app:hover {
146 + transform: translateY(-2px);
147 + filter: brightness(.90); /* ca. 8 % dunkler */
148 + box-shadow: 0 6px 14px rgba(0,0,0,.18);
149 +}
150 +
151 +.intra-app:active {
152 + filter: brightness(.86);
153 +}
154 +
155 +
189 189  .intra-app-ic { font-size: 22px; line-height: 1; }
190 190  .intra-app-ic .fa { color: #fff; }
191 191  .intra-app-lbl { font-size: 13px; font-weight: 600; margin-top: 8px; }
... ... @@ -197,8 +197,6 @@
197 197  }
198 198  .intra-widget { background: #fff; border: 0.5px solid #e2e6ea; border-radius: 12px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(0,0,0,.06); margin-top: 35px; }
199 199  .intra-widget-h { font-size: 14px; font-weight: 700; color: #16324f; margin-bottom: 10px; }
200 -.intra-cal-link { color: #16324f; text-decoration: none; transition: color .15s ease; }
201 -.intra-cal-link:hover { color: #2c6fbb; }
202 202  .intra-tagcloud { line-height: 2; }
203 203  .intra-tag { display: inline-block; margin: 0 9px 4px 0; color: #2c6fbb; text-decoration: none; }
204 204  .intra-tag:hover { text-decoration: underline; }
... ... @@ -208,7 +208,6 @@
208 208  .intra-cal-item:hover .intra-cal-title { text-decoration: underline; }
209 209  .intra-cal-date { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #2c6fbb; min-width: 52px; letter-spacing: .02em; }
210 210  .intra-cal-title { font-size: 13px; color: #16324f; }
211 -.intra-cal-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; align-self: center; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; }
212 212  .intra-cal-empty { color: #8a97a6; font-size: 13px; }
213 213  .intra-tile {
214 214   display: flex; background: #fff; border-radius: 12px; overflow: hidden;
... ... @@ -235,7 +235,7 @@
235 235   position: relative;
236 236   transform-style: preserve-3d;
237 237   transition: transform .6s cubic-bezier(.2,.7,.2,1);
238 - transition-delay: .12s; /* kein Flip beim blossen Vorbeiziehen */
202 + transition-delay: 0s; /* Richtungserkennung im JS verhindert Fehl-Flips */
239 239  }
240 240  .intra-flip.is-back .intra-flip-inner { transform: rotateY(180deg); }
241 241  
... ... @@ -262,18 +262,6 @@
262 262  </style>
263 263  
264 264  <div class="intra-wrap">
265 -
266 - ## ----- LAUFSCHRIFT: neuester Post mit Kategorie "Breaking News" -----
267 - #if ($breakingDoc)
268 - <div class="intra-ticker">
269 - <a class="intra-ticker-label" href="$breakingURL">$escapetool.xml($breakingCategory)</a>
270 - #if ($breakingDate)<span class="intra-ticker-date">$datetool.format('dd.MM.yyyy', $breakingDate)</span>#end
271 - <div class="intra-ticker-viewport">
272 - <a class="intra-ticker-track" href="$breakingURL">$escapetool.xml($breakingTitle)#if($breakingText != '') — $escapetool.xml($breakingText)#end</a>
273 - </div>
274 - </div>
275 - #end
276 -
277 277   <div class="intra-cols">
278 278  
279 279   ## ===== LINKE SPALTE: Hero + 4 Blog-Kacheln =====
... ... @@ -330,20 +330,17 @@
330 330   <div class="intra-side">
331 331  
332 332   ## ----- 12 APP-BUTTONS -----
333 - <div class="intra-apps">
334 - #foreach ($app in $apps)
335 - #set ($href = '')
336 - #if ("$!app.ref" != '')
337 - #set ($href = $xwiki.getURL($app.ref))
338 - #elseif ("$!app.url" != '')
339 - #set ($href = $app.url)
340 - #end
341 - <a class="intra-app" style="background: $app.color;"#if($href != '') href="$href"#end>
342 - <span class="intra-app-ic"><span class="fa fa-$app.icon" aria-hidden="true"></span></span>
343 - <span class="intra-app-lbl">$escapetool.xml($app.label)</span>
344 - </a>
345 -#end
346 - </div>
285 + #foreach ($app in $apps)
286 + #set ($appHref = '')
287 + #if ($app.url && $app.url != '')
288 + #set ($appHref = $app.url)
289 + #elseif ($app.ref && $app.ref != '')
290 + #set ($appHref = $xwiki.getURL($app.ref, 'view')) ## <- hier greift die Aufloesung
291 + #end
292 + <a class="intra-app" style="background: $app.color;" href="#if($appHref != '')$appHref#else#end">
293 + ...
294 + </a>
295 + #end
347 347  
348 348  ## ----- NAECHSTE TERMINE (Mocca Calendar) / RUECKSEITE: TAGCLOUD -----
349 349  <div class="intra-flip-outer">
... ... @@ -352,19 +352,10 @@
352 352  
353 353   <!-- VORDERSEITE: Naechste Termine -->
354 354   <div class="intra-flip-face intra-flip-front">
355 - <div class="intra-widget-h"><a class="intra-cal-link" href="$xwiki.getURL('MoccaCalendar.WebHome', 'view')">Nächste Termine</a></div>
304 + <span class="intra-flip-hint">&#8942; Maus von unten</span>
305 + <div class="intra-widget-h">Nächste Termine</div>
356 356   <div class="intra-cal-list">
357 357   #set ($now = $datetool.date)
358 - ## ---- Kalenderfarben einmalig laden: Event-Elternseite (= Kalender) -> Farbe/Titel ----
359 - #set ($calXwql = "select doc.fullName, calendar.color, calendar.title from Document doc, doc.object(MoccaCalendar.MoccaCalendarClass) calendar")
360 - #set ($calResults = $services.query.xwql($calXwql).execute())
361 - #set ($calColorMap = {})
362 - #set ($calTitleMap = {})
363 - #foreach ($cr in $calResults)
364 - #set ($discard = $calColorMap.put("$cr.get(0)", "$!cr.get(1)"))
365 - #set ($discard = $calTitleMap.put("$cr.get(0)", "$!cr.get(2)"))
366 - #end
367 - #set ($defaultCalColor = '#8a97a6')
368 368   #set ($evtXwql = "from doc.object(MoccaCalendar.MoccaCalendarEventClass) as event where event.startDate >= :now and doc.hidden = false order by event.startDate asc")
369 369   #set ($evtNames = $services.query.xwql($evtXwql).bindValue('now', $now).setLimit(6).execute())
370 370   #if ($evtNames && $evtNames.size() > 0)
... ... @@ -375,18 +375,7 @@
375 375   #set ($eAllDay = $eo.getValue('allDay'))
376 376   #set ($eTitle = $ed.getPlainTitle())
377 377   #if ($eTitle == '')#set ($eTitle = "$!eo.getValue('title')")#end
378 - ## Kalender der Elternseite ermitteln (Events liegen als Kind-Seite unter ihrem Kalender)
379 - #set ($eParent = "$!ed.getParent()")
380 - #set ($eColor = $calColorMap.get($eParent))
381 - #if (!$eColor || $eColor == '')
382 - #set ($eColor = $defaultCalColor)
383 - #end
384 - #set ($eCalName = $calTitleMap.get($eParent))
385 - #if (!$eCalName || $eCalName == '')
386 - #set ($eCalName = $xwiki.getDocument($eParent).getPlainTitle())
387 - #end
388 388   <a class="intra-cal-item" href="$ed.getURL('view')">
389 - <span class="intra-cal-dot" style="background: $escapetool.xml($eColor);" title="$escapetool.xml($eCalName)"></span>
390 390   <span class="intra-cal-date">#if($eStart)$datetool.format('dd.MM.', $eStart)#if("$!eAllDay" != '1') $datetool.format('HH:mm', $eStart)#end#end</span>
391 391   <span class="intra-cal-title">$escapetool.xml($eTitle)</span>
392 392   </a>
... ... @@ -447,18 +447,21 @@
447 447   var box = document.getElementById('intra-flip-side');
448 448   if(!box){ return; }
449 449   var hoverCapable = !!(window.matchMedia && window.matchMedia('(hover: hover)').matches);
450 - ## Letzte bekannte Maus-Y-Position global mitverfolgen, um beim Betreten der Karte
451 - ## die Bewegungsrichtung zu kennen (Y waechst nach unten -> "von unten" = Y wird kleiner).
379 +
380 + // Letzte bekannte Maus-Y-Position global mitverfolgen, um beim Betreten der Karte
381 + // die Bewegungsrichtung zu kennen (Y waechst nach unten -> "von unten" = Y wird kleiner).
452 452   var lastY = null;
453 453   document.addEventListener('mousemove', function(e){ lastY = e.clientY; }, {passive:true});
384 +
454 454   box.addEventListener('mouseenter', function(e){
455 455   if (!hoverCapable) { return; }
456 - var enteredFromBelow = (lastY !== null && e.clientY < lastY);
387 + var enteredFromBelow = (lastY !== null && (lastY - e.clientY) > 2);
457 457   if (enteredFromBelow) {
458 458   box.classList.toggle('is-back');
459 459   }
460 460   lastY = e.clientY;
461 461   });
393 +
462 462   box.addEventListener('click', function(e){
463 463   if(e.target.closest('a')){ return; }
464 464   if(hoverCapable){ return; }