From 4248082c19dee9c1a28b5e49e7566747a2fdac7e Mon Sep 17 00:00:00 2001 From: SamTV12345 <40429738+samtv12345@users.noreply.github.com> Date: Fri, 1 Aug 2025 21:35:14 +0200 Subject: [PATCH] feat: updated welcome page --- src/locales/de.json | 5 +++- src/locales/en.json | 3 ++ src/static/js/pad_userlist.ts | 9 ++++++ src/static/skins/colibris/index.css | 46 +++++++++++++++++++++++++++-- src/static/skins/colibris/index.js | 28 ++++++++++++++++++ src/static/skins/colibris/pad.js | 8 +++-- src/templates/index.html | 13 ++++---- 7 files changed, 100 insertions(+), 12 deletions(-) diff --git a/src/locales/de.json b/src/locales/de.json index 4bfbd5647..4ef7e68c4 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -58,7 +58,10 @@ "index.recentPadsEmpty": "Keine kürzlich bearbeiteten Pads gefunden.", "index.generateNewPad": "Neues Pad generieren", "index.labelPad": "Padname (optional)", - "pad.toolbar.bold.title": "Fett (Strg-B)", + "index.placeholderPadEnter": "Gib den Namen des Pads ein...", + "index.createAndShareDocuments": "Erstelle und teile Dokumente in Echtzeit", + "index.createAndShareDocumentsDescription": "Etherpad ermöglicht die gemeinsame Bearbeitung von Dokumenten in Echtzeit, ähnlich wie ein Live-Multiplayer-Editor, der in Ihrem Browser läuft.", + "pad.toolbar.bold.title": "Fett (Strg-B)", "pad.toolbar.italic.title": "Kursiv (Strg-I)", "pad.toolbar.underline.title": "Unterstrichen (Strg-U)", "pad.toolbar.strikethrough.title": "Durchgestrichen (Strg+5)", diff --git a/src/locales/en.json b/src/locales/en.json index 4e187c168..ec6a11a4f 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -40,6 +40,9 @@ "index.recentPadsEmpty": "No recent pads found.", "index.generateNewPad": "Generate random pad name", "index.labelPad": "Pad name (optional)", + "index.placeholderPadEnter": "Gib den Namen des Pads ein...", + "index.createAndShareDocuments": "Create and share documents in real time", + "index.createAndShareDocumentsDescription": "Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser.", "pad.toolbar.bold.title": "Bold (Ctrl+B)", diff --git a/src/static/js/pad_userlist.ts b/src/static/js/pad_userlist.ts index 4a665d10e..3bed27ab3 100644 --- a/src/static/js/pad_userlist.ts +++ b/src/static/js/pad_userlist.ts @@ -489,6 +489,15 @@ const paduserlist = (() => { online++; } } + const recentPadsList = JSON.parse(localStorage.getItem('recentPads')); + const pathSegments = window.location.pathname.split('/'); + const padName = pathSegments[pathSegments.length - 1]; + const existingPad = recentPadsList.find((pad) => pad.name === padName); + if (existingPad) { + existingPad.members = online; + } + localStorage.setItem('recentPads', JSON.stringify(recentPadsList)); + $('#online_count').text(online); diff --git a/src/static/skins/colibris/index.css b/src/static/skins/colibris/index.css index f7690ffa9..fc4a87f61 100644 --- a/src/static/skins/colibris/index.css +++ b/src/static/skins/colibris/index.css @@ -6,12 +6,19 @@ --muted-border: oklch(87.2% 0.01 258.338); --muted-background: hsl(240 4.8% 95.9%); --ep-color: rgb(22 163 74); + --warm-green-olive: #7c9a3e; + --warm-green-moss: #8fae4a; + --warm-green-lime: #b7c96c; + --warm-green-avocado: #6e8b3d; + --warm-green-spring: #a3c85a; } body { border-top: 0; background: oklch(98.5% 0.002 247.839); + display: flex; + flex-direction: column; } h1 { @@ -19,11 +26,16 @@ h1 { font-size: 26px; } +.mission-statement, .pad-datalist { + display: block; +} + .mission-statement h2 { font-weight: 700; font-size: 2.25rem; text-align: center; - margin-top: 4rem; + margin: 0; + padding-top: 4rem; } .mission-statement p { @@ -165,6 +177,7 @@ body nav { .pad-datalist { max-width: 56rem; + margin-bottom: 1rem; } .break-column { @@ -183,6 +196,17 @@ ul { flex-direction: column; } +.body { + flex-grow: 1; + background: linear-gradient( + to bottom right, + #d1fae5, /* emerald-100 */ + #f0fdfa, /* teal-50 */ + #dbeafe, /* blue-100 */ + #c7d2fe /* indigo-200 */ + ); +} + .recent-pad:hover a { color: var(--ep-color); } @@ -208,9 +232,27 @@ a, a:visited, a:hover, a:active { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e5e7eb; - width: 100%; } .card-content { padding: 1.5rem; } + +@media (max-width: 640px) { + #inner { + max-width: 100%; + padding: 0 1rem; + } + + .mission-statement p { + max-width: 100%; + } + + .pad-datalist { + max-width: 90%; + } + + .mission-statement h2 { + font-size: 1.5rem; + } +} diff --git a/src/static/skins/colibris/index.js b/src/static/skins/colibris/index.js index 9bc40fc90..3001fa5f8 100644 --- a/src/static/skins/colibris/index.js +++ b/src/static/skins/colibris/index.js @@ -1,10 +1,32 @@ 'use strict'; +window.addEventListener('pageshow', (event) => { + if (event.persisted) { + if (document.readyState === 'complete' || document.readyState === 'interactive') { + window.customStart(); + } else { + window.addEventListener('DOMContentLoaded', window.customStart, {once: true}); + } + } +}); window.customStart = () => { + document.getElementById('recent-pads').replaceChildren() // define your javascript here // jquery is available - except index.js // you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/ + const divHoldingPlaceHolderLabel = document + .querySelector('[data-l10n-id="index.placeholderPadEnter"]'); + + const observer = new MutationObserver(() => { + document.querySelector('#go2Name input') + .setAttribute('placeholder', divHoldingPlaceHolderLabel.textContent); + }); + + observer + .observe(divHoldingPlaceHolderLabel, {childList: true, subtree: true, characterData: true}); + + const recentPadList = document.getElementById('recent-pads'); const parentStyle = recentPadList.parentElement.style; const recentPadListHeading = document.querySelector('[data-l10n-id="index.recentPads"]'); @@ -14,6 +36,12 @@ window.customStart = () => { recentPadListData = JSON.parse(recentPadsFromLocalStorage); } + // Remove duplicates based on pad name and sort by timestamp + recentPadListData = recentPadListData.filter( + (pad, index, self) => + index === self.findIndex((p) => p.name === pad.name) + ).sort((a, b) => new Date(a.timestamp) > new Date(b.timestamp) ? -1 : 1); + if (recentPadListData.length === 0) { recentPadListHeading.setAttribute('data-l10n-id', 'index.recentPadsEmpty'); parentStyle.display = 'flex'; diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js index 95c3cb626..1e7a85b3f 100644 --- a/src/static/skins/colibris/pad.js +++ b/src/static/skins/colibris/pad.js @@ -1,11 +1,13 @@ 'use strict'; +const MAX_PADS_IN_HISTORY = 3; + window.customStart = () => { $('#pad_title').show(); $('.buttonicon').on('mousedown', function () { $(this).parent().addClass('pressed'); }); $('.buttonicon').on('mouseup', function () { $(this).parent().removeClass('pressed'); }); - const pathSegments = window.location.pathname.split('/').filter(Boolean); + const pathSegments = window.location.pathname.split('/'); const padName = pathSegments[pathSegments.length - 1]; const recentPads = localStorage.getItem('recentPads'); if (recentPads == null) { @@ -13,13 +15,13 @@ window.customStart = () => { } const recentPadsList = JSON.parse(localStorage.getItem('recentPads')); if (!recentPadsList.some((pad) => pad.name === padName)) { - if (recentPadsList.length >= 10) { + if (recentPadsList.length >= MAX_PADS_IN_HISTORY) { recentPadsList.shift(); // Remove the oldest pad if we have more than 10 } recentPadsList.push({ name: padName, timestamp: new Date().toISOString(), // Store the timestamp for sorting - members: 0, + members: 1, }); localStorage.setItem('recentPads', JSON.stringify(recentPadsList)); } else { diff --git a/src/templates/index.html b/src/templates/index.html index 5f60d374c..d46bd3405 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -109,7 +109,7 @@ width: 45px; height: 38px; } - nav { + nav, .mission-statement, .pad-datalist { display: none; } @@ -143,11 +143,10 @@ +
-

Create and share documents

-

- Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser. -

+

+

@@ -161,18 +160,20 @@ <% } %>
- +
<% } %>
<% e.end_block(); %>
+

+ <% e.begin_block("indexCustomScripts"); %>