Startseite - XWiki

.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

.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

.intra-tagcloud { line-height: 2; }

203

.intra-tag { display: inline-block; margin: 0 9px 4px 0; color: #2c6fbb; text-decoration: none; }

204

.intra-tag:hover { text-decoration: underline; }

205

.intra-cal-list { display: flex; flex-direction: column; }

206

.intra-cal-item { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #eef1f4; text-decoration: none; }

207

.intra-cal-item:last-child { border-bottom: 0; }

208

.intra-cal-item:hover .intra-cal-title { text-decoration: underline; }

209

.intra-cal-date { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #2c6fbb; min-width: 52px; letter-spacing: .02em; }

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

.intra-cal-empty { color: #8a97a6; font-size: 13px; }

213

.intra-tile {

214

display: flex; background: #fff; border-radius: 12px; overflow: hidden;

215

box-shadow: 0 3px 12px rgba(0,0,0,.10); text-decoration: none; color: #1a1a1a; min-height: 128px;

216

transition: transform .15s ease, box-shadow .15s ease;

217

}

218

.intra-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }

219

.intra-tile-txt { flex: 1 1 auto; padding: 16px 18px; }

220

.intra-tile-txt h3 { margin: 6px 0 6px; font-size: 17px; color: #16324f; }

221

.intra-tile-ex { font-size: 13px; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

222

.intra-tile-date { font-size: 12px; color: #8a8a8a; margin-top: 10px; }

223

.intra-mini-chip { display:inline-block; font-size: 11px; font-weight: 700; color:#2c6fbb; letter-spacing:.05em; text-transform: uppercase; }

224

.intra-tile-img { flex: 0 0 40%; background-size: cover; background-position: center; background-color: #dde3ea; }

225

.intra-h { font-size: 15px; font-weight: 700; color: #16324f; margin: 26px 0 12px; }

226

@media (max-width: 860px) {

227

.intra-cols { flex-direction: column; }

228

.intra-apps { grid-template-columns: repeat(4, 1fr); }

229

.intra-tiles { grid-template-columns: 1fr; }

230

}

231

/* Aussenhuelle faengt den 3D-Ueberstand ab -> kein Scrollbalken-Flackern */

232

.intra-flip-outer { overflow: hidden; padding: 8px 12px 18px; margin-top: 24px; }

233

.intra-flip { perspective: 1600px; }

234

.intra-flip-inner {

235

position: relative;

236

transform-style: preserve-3d;

237

transition: transform .6s cubic-bezier(.2,.7,.2,1);

238

transition-delay: .12s; /* kein Flip beim blossen Vorbeiziehen */

239

}

240

.intra-flip.is-back .intra-flip-inner { transform: rotateY(180deg); }

241

242

.intra-flip-face {

243

-webkit-backface-visibility: hidden; backface-visibility: hidden;

244

box-sizing: border-box;

245

background: #fff; border: .5px solid #e2e6ea; border-radius: 12px;

246

box-shadow: 0 3px 12px rgba(0,0,0,.06); padding: 16px 18px;

247

}

248

.intra-flip-front { position: relative; min-height: 250px; } /* gibt die Hoehe vor */

249

.intra-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: auto; }

250

251

/* Rueckseite darf nicht durch die Vorderseite hindurch klickbar sein */

252

.intra-flip-back { pointer-events: none; }

253

.intra-flip.is-back .intra-flip-back { pointer-events: auto; }

254

.intra-flip.is-back .intra-flip-front { pointer-events: none; }

255

256

.intra-flip-hint {

257

position: absolute; top: 12px; right: 14px;

258

font-size: 10px; color: #8a97a6; background: #f2f5f8;

259

border: 1px solid #e2e6ea; padding: 2px 8px; border-radius: 20px;

260

pointer-events: none;

}

</style>

## ----- LAUFSCHRIFT: neuester Post mit Kategorie "Breaking News" -----

267

#if ($breakingDoc)

268

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

272

<a class="intra-ticker-track" href="$breakingURL">$escapetool.xml($breakingTitle)#if($breakingText != '') — $escapetool.xml($breakingText)#end</a>

</div>

</div>

#end

## ===== LINKE SPALTE: Hero + 4 Blog-Kacheln =====

280

281

282

## ----- HERO (grosser TOP-Post) -----

#if ($heroDoc)

<span class="intra-chip">$escapetool.xml($heroCategory)</span>

287

#if ($heroDate)<div class="intra-hero-date">$datetool.format('dd. MMMM yyyy', $heroDate)</div>#end

288

<h2>$escapetool.xml($heroTitle)</h2>

289

<span class="intra-btn">Weiterlesen</span>

</div>

</a>

#else

<div class="intra-hero"><div class="intra-hero-body"><h2>Noch kein Blog-Beitrag</h2></div></div>

294

#end

295

296

## ----- 4 BLOG-KACHELN (2 x 2), direkt unter dem Hero -----

297

<div class="intra-h">Aktuelles</div>

298

299

#foreach ($pn in $tilePosts)

300

#set ($td = $xwiki.getDocument($pn))

301

#set ($to = $td.getObject('Blog.BlogPostClass'))

302

#set ($tImg = '')

303

#foreach ($att in $td.getAttachmentList())

304

#if ($tImg == '' && $att.getMimeType().startsWith('image/'))

305

#set ($tImg = $td.getAttachmentURL($att.getFilename()))

306

#end

307

#end

308

#set ($tEx = "$!to.getValue('extract')")

309

#set ($tCat = '')

310

#set ($tcats = $to.getValue('category'))

311

#if ($tcats && $tcats.size() > 0)

312

#set ($fc = "$tcats.get(0)")

313

#set ($tCat = $fc.substring($mathtool.add($fc.lastIndexOf('.'), 1)))

314

#end

315

#set ($tDate = $to.getValue('publishDate'))

316

317

318

#if ($tCat != '')<span class="intra-mini-chip">$escapetool.xml($tCat)</span>#end

319

<h3>$escapetool.xml($td.getPlainTitle())</h3>

320

<div class="intra-tile-ex">$escapetool.xml($tEx)</div>

321

#if ($tDate)<div class="intra-tile-date">$datetool.format('dd.MM.yyyy', $tDate)</div>#end

</div>

</a>

#end

</div>

</div>

## ===== RECHTE SPALTE: 12 App-Buttons + Platz fuer weitere Funktion =====

330

331

332

## ----- 12 APP-BUTTONS -----

333

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)

#end

<span class="intra-app-lbl">$escapetool.xml($app.label)</span>

</a>

#end

</div>

## ----- NAECHSTE TERMINE (Mocca Calendar) / RUECKSEITE: TAGCLOUD -----

354

355

<div class="intra-widget-h"><a class="intra-cal-link" href="$xwiki.getURL('MoccaCalendar.WebHome', 'view')">Nächste Termine</a></div>

356

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

#set ($evtXwql = "from doc.object(MoccaCalendar.MoccaCalendarEventClass) as event where event.startDate >= :now and doc.hidden = false order by event.startDate asc")

369

#set ($evtNames = $services.query.xwql($evtXwql).bindValue('now', $now).setLimit(6).execute())

370

#if ($evtNames && $evtNames.size() > 0)

371

#foreach ($en in $evtNames)

372

#set ($ed = $xwiki.getDocument($en))

373

#set ($eo = $ed.getObject('MoccaCalendar.MoccaCalendarEventClass'))

374

#set ($eStart = $eo.getValue('startDate'))

375

#set ($eAllDay = $eo.getValue('allDay'))

376

#set ($eTitle = $ed.getPlainTitle())

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())

#end

<span class="intra-cal-date">#if($eStart)$datetool.format('dd.MM.', $eStart)#if("$!eAllDay" != '1') $datetool.format('HH:mm', $eStart)#end#end</span>

391

<span class="intra-cal-title">$escapetool.xml($eTitle)</span>

</a>

#end

#else

<span class="intra-cal-empty">Keine anstehenden Termine.</span>

#end

</div>

</div>

##

401

<div class="intra-flip-face intra-flip-back">##

402

<div class="intra-widget-h">Beliebte Themen</div>##

403

#set ($tagMap = $xwiki.tag.getTagCount())##

404

#if ($tagMap && $tagMap.size() > 0)##

405

#set ($top = [])##

406

#set ($maxCnt = 1)##

407

#set ($minCnt = 999999)##

408

#set ($tagCount = 0)##

409

#foreach ($e in $collectiontool.sort($tagMap.entrySet(), ['value:desc']))##

410

#if ($tagCount >= 40)#break#end##

411

#if ($e.key.toLowerCase() != 'id')##

412

#set ($discard = $top.add($e.key))##

413

#set ($tagCount = $mathtool.add($tagCount, 1))##

414

#if ($e.value > $maxCnt)#set ($maxCnt = $e.value)#end##

415

#if ($e.value < $minCnt)#set ($minCnt = $e.value)#end##

416

#end##

417

#end##

418

#set ($span = $mathtool.max(1, $mathtool.sub($maxCnt, $minCnt)))##

419

#set ($alpha = $collectiontool.sort($top))##

420

<div class="intra-tagcloud">##

421

#foreach ($tagName in $top)##

422

#set ($cnt = $tagMap.get($tagName))##

423

#set ($lvl = $mathtool.round($mathtool.div($mathtool.mul($mathtool.sub($cnt, $minCnt), 4), $span)))##

424

#set ($ord = $alpha.indexOf($tagName))##

425

<a class="intra-tag intra-tag-l${lvl}" style="order: ${ord};"##

426

href="$xwiki.getURL('Main.Tags', 'view', "do=viewTag&tag=$escapetool.url($tagName)")"##

427

title="$escapetool.xml($tagName): $cnt Seiten">##

428

<span class="intra-tag-name">$escapetool.xml($tagName)</span><span class="intra-tag-cnt">$cnt</span>##

</a>##

#end##

</div>##

#else##

<div class="intra-tagcloud"><span class="intra-cal-empty">Noch keine Tags vergeben.</span></div>##

#end##

</div>##

</div>

</div>

</div>

</div>

</div>

</div>

(function(){

var box = document.getElementById('intra-flip-side');

448

if(!box){ return; }

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).

452

var lastY = null;

453

document.addEventListener('mousemove', function(e){ lastY = e.clientY; }, {passive:true});

454

box.addEventListener('mouseenter', function(e){

455

if (!hoverCapable) { return; }

456

var enteredFromBelow = (lastY !== null && e.clientY < lastY);

457

if (enteredFromBelow) {

458

box.classList.toggle('is-back');

}

lastY = e.clientY;

});

box.addEventListener('click', function(e){

463

if(e.target.closest('a')){ return; }

464

if(hoverCapable){ return; }

465

box.classList.toggle('is-back');

});

})();

</script>

Wiki-Quellcode von Home