zunanji pripomocki (Musiknachrichten, Aktuelle Nachrichten) razmaknjeni: en pripomocek na pet clankov, drugi primerek se zacne z zamikom, da ne ponavlja istih vrstic

This commit is contained in:
2026-08-30 16:36:16 +02:00
parent 7098b54cf3
commit 91e84e05fe
3 changed files with 21 additions and 15 deletions
@@ -12,12 +12,14 @@ interface NewsItem {
const VISIBLE_COUNT = 5;
export function BreakingNewsWidget() {
// startOffset zamakne zacetek vrtenja: dva primerka na isti strani sicer
// kazeta identicnih pet vrstic.
export function BreakingNewsWidget({ startOffset = 0 }: { startOffset?: number } = {}) {
const { data: news, isLoading } = useQuery<NewsItem[]>({
queryKey: ["/api/breaking-news"],
});
const [offset, setOffset] = useState(0);
const [offset, setOffset] = useState(startOffset);
const [paused, setPaused] = useState(false);
// Isti izvajalec ne sme stati drug ob drugem: vsaj 5 mest razmika.
+4 -2
View File
@@ -12,12 +12,14 @@ interface NewsItem {
const VISIBLE_COUNT = 5;
export function NewsWidget() {
// startOffset zamakne zacetek vrtenja: dva primerka na isti strani sicer
// kazeta identicnih pet vrstic.
export function NewsWidget({ startOffset = 0 }: { startOffset?: number } = {}) {
const { data: news, isLoading } = useQuery<NewsItem[]>({
queryKey: ["/api/news-feed"],
});
const [offset, setOffset] = useState(0);
const [offset, setOffset] = useState(startOffset);
const [paused, setPaused] = useState(false);
// Isti izvajalec ne sme stati drug ob drugem: vsaj 5 mest razmika.
+13 -11
View File
@@ -828,21 +828,23 @@ export default function Home() {
const widgets = useMemo(() => [
{ id: "news", el: <div key="news" className="flex flex-col gap-4"><NewsWidget /></div> },
{ id: "breaking", el: <div key="breaking" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
{ id: "news2", el: <div key="news2" className="flex flex-col gap-4"><NewsWidget /></div> },
{ id: "breaking2", el: <div key="breaking2" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
{ id: "news2", el: <div key="news2" className="flex flex-col gap-4"><NewsWidget startOffset={5} /></div> },
{ id: "breaking2", el: <div key="breaking2" className="flex flex-col gap-4"><BreakingNewsWidget startOffset={5} /></div> },
], []);
const gridItems = useMemo(() => {
const items: { type: "article" | "widget" | "ad"; key: string; article?: Article; widget?: typeof widgets[0] }[] = [];
let ai = 0;
let wi = 0;
const widgetRows = Math.ceil(widgets.length / 2);
for (let r = 0; r < widgetRows; r++) {
if (wi < widgets.length) items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
if (wi < widgets.length) items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
if (ai < spaced.length) items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
if (ai < spaced.length) items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
// Pripomocki z zunanjimi viri ne smejo stati skupaj: prej sta bila dva v isti
// vrstici in nato spet dva v naslednji, kar je izgledalo kot podvojen blok.
// Zdaj gre en pripomocek in za njim pet clankov.
const RAZMIK_PRIPOMOCKOV = 5;
while (wi < widgets.length) {
items.push({ type: "widget", key: `w-${widgets[wi].id}`, widget: widgets[wi++] });
for (let k = 0; k < RAZMIK_PRIPOMOCKOV && ai < spaced.length; k++) {
items.push({ type: "article", key: `a-${spaced[ai].id}`, article: spaced[ai++] });
}
}
while (ai < spaced.length) {
@@ -1005,8 +1007,8 @@ export default function Home() {
<LazySection minHeight="280px">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<NewsWidget key="extra-news" />
<BreakingNewsWidget key="extra-breaking" />
<NewsWidget key="extra-news" startOffset={10} />
<BreakingNewsWidget key="extra-breaking" startOffset={10} />
<div className="h-full"><ArticleCardAd /></div>
</div>
</LazySection>