Wijzigen voor document Huisstijl

Samenvatting

• Objecten (2 gewijzigd, 0 toegevoegd, 0 verwijderd)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

XWiki.JavaScriptExtension[0]

code

...	...	@@ -41,6 +41,14 @@
41	41	return kaarten;
42	42	}
43	43
	44	+ function zetIcoon(beeld) {
	45	+ beeld.classList.add('wb-kaart-geenbeeld');
	46	+ var icoon = document.createElement('span');
	47	+ icoon.className = 'fa fa-book wb-kaart-icoon';
	48	+ icoon.setAttribute('aria-hidden', 'true');
	49	+ beeld.appendChild(icoon);
	50	+ }
	51	+
44	44	function maakKaart(k) {
45	45	var kaart = document.createElement(k.link ? 'a' : 'div');
46	46	kaart.className = 'wb-kaart';
...	...	@@ -60,8 +60,8 @@
60	60	img.loading = 'lazy';
61	61	img.decoding = 'async';
62	62	var geenBeeld = function () {
63		- beeld.classList.add('wb-kaart-geenbeeld');
64	64	img.remove();
	72	+ zetIcoon(beeld);
65	65	};
66	66	img.addEventListener('error', geenBeeld);
67	67	// Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout.
...	...	@@ -72,7 +72,7 @@
72	72	});
73	73	beeld.appendChild(img);
74	74	} else {
75		- beeld.classList.add('wb-kaart-geenbeeld');
	83	+ zetIcoon(beeld);
76	76	}
77	77	var titel = document.createElement('span');
78	78	titel.className = 'wb-kaart-titel';

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -764,13 +764,13 @@
764	764	.wb-kaart:hover .wb-kaart-beeld img {
765	765	transform: scale(1.03);
766	766	}
767		-.wb-kaart-geenbeeld::before {
768		- content: "02d";
	767	+/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS:
	768	+ de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */
	769	+.wb-kaart-icoon {
769	769	position: absolute;
770	770	top: 50%;
771	771	left: 50%;
772	772	transform: translate(-50%, -50%);
773		- font-family: FontAwesome;
774	774	font-size: 34px;
775	775	color: #b86e00;
776	776	opacity: .5;
...	...	@@ -781,6 +781,25 @@
781	781	font-weight: 500;
782	782	line-height: 1.35;
783	783	}
	784	+/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */
	785	+@media (min-width: 1200px) {
	786	+ .wb-kaarten {
	787	+ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	788	+ gap: 26px;
	789	+ }
	790	+ .wb-kaart-beeld {
	791	+ aspect-ratio: 3 / 2;
	792	+ }
	793	+ .wb-kaart-titel {
	794	+ padding: 14px 18px 16px;
	795	+ font-size: 17px;
	796	+ }
	797	+}
	798	+@media (min-width: 1800px) {
	799	+ .wb-kaarten {
	800	+ grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	801	+ }
	802	+}
784	784
785	785	/* Zonder script: de tabel past in elk geval binnen het scherm */
786	786	#xwikicontent table.vgmtabel {
...	...	@@ -867,3 +867,35 @@
867	867	}
868	868	}
869	869
	889	+/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */
	890	+#xwikicontent table.xwiki-livetable {
	891	+ font-size: 14px;
	892	+}
	893	+#xwikicontent .xwiki-livetable-display-header th,
	894	+#xwikicontent .xwiki-livetable-display-body td {
	895	+ padding: 6px 8px;
	896	+}
	897	+#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td {
	898	+ word-break: normal;
	899	+ overflow-wrap: break-word;
	900	+ hyphens: manual;
	901	+}
	902	+#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL,
	903	+#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL {
	904	+ max-width: 160px;
	905	+ white-space: nowrap;
	906	+ overflow: hidden;
	907	+ text-overflow: ellipsis;
	908	+}
	909	+#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover,
	910	+#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover {
	911	+ white-space: normal;
	912	+ overflow-wrap: anywhere;
	913	+}
	914	+/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */
	915	+#xwikicontent table.xwiki-livetable {
	916	+ display: block;
	917	+ max-width: 100%;
	918	+ overflow-x: auto;
	919	+}
	920	+