diff --git a/.github/workflows/mediawiki.yml b/.github/workflows/mediawiki.yml index 802dc662..08aa0d8f 100644 --- a/.github/workflows/mediawiki.yml +++ b/.github/workflows/mediawiki.yml @@ -40,7 +40,7 @@ jobs: # Check for changed files - name: Check for PHP changes id: changed-php - uses: tj-actions/changed-files@v34 + uses: tj-actions/changed-files@v35 with: since_last_remote_commit: "true" files: | @@ -48,7 +48,7 @@ jobs: - name: Check for script changes id: changed-script - uses: tj-actions/changed-files@v34 + uses: tj-actions/changed-files@v35 with: since_last_remote_commit: "true" files: | @@ -56,7 +56,7 @@ jobs: - name: Check for stylesheet changes id: changed-stylesheet - uses: tj-actions/changed-files@v34 + uses: tj-actions/changed-files@v35 with: since_last_remote_commit: "true" files: | @@ -67,7 +67,7 @@ jobs: - name: Check for i18n changes id: changed-i18n - uses: tj-actions/changed-files@v34 + uses: tj-actions/changed-files@v35 with: since_last_remote_commit: "true" files: | diff --git a/CHANGELOG.md b/CHANGELOG.md index b19625bc..81671460 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,31 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [2.3.0](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v2.2.0...v2.3.0) (2022-12-14) + + +### Features + +* **AdvancedSearch:** ✨ update AdvancedSearch styles ([88fca93](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/88fca93c469f7e2918b3b68a6a0381f4a3e5e800)) +* **core:** ✨ align inconsistent search styles ([653ba19](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/653ba1913051ef11306de4fd8bda4cc56f44d37b)) +* **core:** ✨ deprecate background-color-framed and input ([37cdf91](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/37cdf912571cd8b3b4c19cc45a09b123d0b83476)) +* **core:** ✨ do not hardcode min-width for page tools menu ([0187478](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/0187478d1aa69bfa2f699fb4790cadc8491c98fd)) +* **core:** ✨ do not set fieldset font size ([224c190](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/224c190a475e5079e5e0e8332442643c5e2b571f)) +* **core:** ✨ dynamic dark theme color based on primary hue ([3414d59](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/3414d5964375de829c129c39d680ef3c9e6b743b)) +* **core:** ✨ tweak notification styles ([529fe22](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/529fe221de103bf68302f06cf5a3e941f2206e04)) +* **MediaSearch:** ✨ add grade A support for MediaSearch ([9b9916d](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/9b9916d61bea955f3208e2f1fdb728b63918c66b)) +* **search:** ✨ add MediaSearch to typeahead ([203b0b4](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/203b0b42c3a388684a51f231d993788632b92ae8)) + + +### Bug Fixes + +* **AdvancedSearch:** 🐛 1px layout shift in preloader ([3517453](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/351745374155fe292dd487f0e6f3ea6dd3782765)) +* **core:** 🐛 do not make search create and exist link into a card ([80a35ea](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/80a35ea571f8d7ef864b332add827368bc9b0440)) +* **core:** 🐛 do not use CSS containment for body content ([7a59e9c](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/7a59e9c2d720d99a4fe0aa31b2ff83b1c56922b9)) +* **core:** 🐛 incorrect z-index in changelist title ([c4bd384](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/c4bd3842358920752d8f0abf5a768846b1b2f03f)) +* **search:** 🐛 do not collapse whitespace in label text node ([c2da5c5](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/c2da5c5ade34d0895932a0d120908f02fadb0a28)) +* **search:** 🐛 incorrect full text search URL ([074df52](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/074df5272c2cc7739967ded992b48e5bf45da806)) + ## [2.2.0](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v2.1.0...v2.2.0) (2022-12-08) ### Features diff --git a/README.md b/README.md index 82e4772e..8e0fa349 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ OOUI | A | 0.44.3 | 2022-11-30 Name | Grade | Version | Last updated :--- | :--- | :--- | :--- -[AdvancedSearch](https://www.mediawiki.org/wiki/Extension:AdvancedSearch) | B | REL1_35 `fae6250` | 2021-08-26 +[AdvancedSearch](https://www.mediawiki.org/wiki/Extension:AdvancedSearch) | B | REL1_39 `3a0eed7` | 2022-12-12 [AJAXPoll](https://www.mediawiki.org/wiki/Extension:AJAXPoll) | A | REL1_39 `8429d8d` | 2022-10-25 [ApprovedRevs](https://www.mediawiki.org/wiki/Extension:Approved_Revs) | B | N/A | N/A [Babel](https://www.mediawiki.org/wiki/Extension:Babel) | B | MLEB 2021.07 | 2021-07-29 @@ -49,6 +49,7 @@ Name | Grade | Version | Last updated [CentralNotice](https://www.mediawiki.org/wiki/Extension:CentralNotice) | B | REL1_35 `4aa2a8f` | 2022-06-16 [Cite](https://www.mediawiki.org/wiki/Extension:Cite) | A | N/A | N/A [CleanChanges](https://www.mediawiki.org/wiki/Extension:CleanChanges) | B | MLEB 2021.07 | 2021-07-29 +[CodeEditor](https://www.mediawiki.org/wiki/Extension:CodeEditor) | A | REL1_39 `67c012c` | 2022-12-15 [CodeMirror](https://www.mediawiki.org/wiki/Extension:CodeMirror) | A | REL1_35 `a326407` | 2021-08-25 [CookieWarning](https://www.mediawiki.org/wiki/Extension:CookieWarning) | A | REL1_35 `3c2ae6a` | 2022-04-29 [DiscussionTools](https://www.mediawiki.org/wiki/Extension:DiscussionTools) | A | REL1_35 `7aa0a9b` | 2022-05-06 diff --git a/i18n/bn.json b/i18n/bn.json index 7c0f2fbe..5af8fc2b 100644 --- a/i18n/bn.json +++ b/i18n/bn.json @@ -11,7 +11,7 @@ "citizen-action-addsection": "আলোচনা যোগ করুন", "citizen-jumptotop": "উপরে চলুন", "citizen-search-fulltext": "এটি থাকা পাতাগুলিতে অনুসন্ধান করুন:", - "citizen-search-fulltext-empty": "অনুসন্ধান শুরু করতে কিছু লিখুন", + "citizen-search-empty-desc": "অনুসন্ধান শুরু করতে কিছু লিখুন", "citizen-tagline-ns-mediawiki": "মিডিয়াউইকি ইন্টারফেস পাতা", "citizen-tagline-ns-template": "টেমপ্লেট পাতা", "citizen-tagline-ns-help": "সাহায্য পাতা", diff --git a/i18n/ckb.json b/i18n/ckb.json index 463d2f56..9e6cefd5 100644 --- a/i18n/ckb.json +++ b/i18n/ckb.json @@ -14,7 +14,7 @@ "citizen-action-addsection": "بابەت دابنێ", "citizen-jumptotop": "گەڕانەوە بۆ سەرەوە", "citizen-search-fulltext": "گەڕان لە ناوەڕۆکی لاپەڕەکان", - "citizen-search-fulltext-empty": "بنوسە بۆ گەڕان", + "citizen-search-empty-desc": "بنوسە بۆ گەڕان", "citizen-tagline-ns-talk": "لاپەڕەی گفتوگۆی {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "زانیاری لەبارەی {{SITENAME}}", "citizen-tagline-ns-file": "پەڕگە لەسەر {{SITENAME}}", diff --git a/i18n/de.json b/i18n/de.json index 644e5537..28215f8d 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -26,7 +26,7 @@ "citizen-action-addsection": "Thema hinzufügen", "citizen-jumptotop": "Zurück nach oben", "citizen-search-fulltext": "Suche nach Seiten mit", - "citizen-search-fulltext-empty": "Tippe, um zu suchen zu beginnen", + "citizen-search-empty-desc": "Tippe, um zu suchen zu beginnen", "citizen-tagline-ns-talk": "Diskussionsseite von {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "Informationen über {{SITENAME}}", "citizen-tagline-ns-file": "Datei auf {{SITENAME}}", diff --git a/i18n/en.json b/i18n/en.json index a24a35a6..1ba5f85c 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -21,7 +21,8 @@ "citizen-action-addsection": "Add topic", "citizen-jumptotop": "Back to top", "citizen-search-fulltext": "Search for pages containing $1", - "citizen-search-fulltext-empty": "Type to start searching", + "citizen-search-mediasearch": "Search for media related to $1", + "citizen-search-empty-desc": "Type to start searching", "citizen-search-noresults-title": "Uh oh! No results for $1", "citizen-search-noresults-desc": "Maybe try the options below?", "citizen-tagline-ns-talk": "Discussion page of {{SUBJECTPAGENAME}}", diff --git a/i18n/fr.json b/i18n/fr.json index 7463a205..f88bacc4 100644 --- a/i18n/fr.json +++ b/i18n/fr.json @@ -23,7 +23,8 @@ "citizen-action-addsection": "Ajouter un sujet", "citizen-jumptotop": "Retour au début", "citizen-search-fulltext": "Rechercher les pages contenant $1", - "citizen-search-fulltext-empty": "Taper pour commencer la recherche", + "citizen-search-mediasearch": "Rechercher des médias relatifs à $1", + "citizen-search-empty-desc": "Taper pour commencer la recherche", "citizen-search-noresults-title": "Oh oh ! Aucun résultat pour $1", "citizen-search-noresults-desc": "Essayer peut-être les options ci-dessous ?", "citizen-tagline-ns-talk": "Page de discussion de {{SUBJECTPAGENAME}}", diff --git a/i18n/kk-cyrl.json b/i18n/kk-cyrl.json index 15dc1116..24e89c4e 100644 --- a/i18n/kk-cyrl.json +++ b/i18n/kk-cyrl.json @@ -21,7 +21,7 @@ "citizen-action-addsection": "Тақырып қосу", "citizen-jumptotop": "Жоғары қайту", "citizen-search-fulltext": "Осы сөз(дер) бар беттерді іздеу", - "citizen-search-fulltext-empty": "Іздей бастау үшін теріңіз", + "citizen-search-empty-desc": "Іздей бастау үшін теріңіз", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}} дегеннің талқылау беті", "citizen-tagline-ns-project": "{{SITENAME}} туралы мәлімет", "citizen-tagline-ns-file": "{{SITENAME}} жобасындағы файл", diff --git a/i18n/mk.json b/i18n/mk.json index 8c4d726d..f5a34b47 100644 --- a/i18n/mk.json +++ b/i18n/mk.json @@ -20,7 +20,8 @@ "citizen-action-addsection": "Додај тема", "citizen-jumptotop": "Најгоре", "citizen-search-fulltext": "Пребарај страници што содржат $1", - "citizen-search-fulltext-empty": "Внесете текст за да почнете да пребарувате", + "citizen-search-mediasearch": "Пребарајте податотеки поврзани со $1", + "citizen-search-empty-desc": "Внесете текст за да почнете да пребарувате", "citizen-search-noresults-title": "За жал, не најдов ништо за $1", "citizen-search-noresults-desc": "Да ги пробаме можностите подолу?", "citizen-tagline-ns-talk": "Разговорна страница на {{SUBJECTPAGENAME}}", diff --git a/i18n/nl.json b/i18n/nl.json index 61ac69a0..6a125ae8 100644 --- a/i18n/nl.json +++ b/i18n/nl.json @@ -13,7 +13,7 @@ "citizen-page-info-lastmod": "Laatste wijziging", "citizen-action-addsection": "Onderwerp toevoegen", "citizen-jumptotop": "Terug naar boven", - "citizen-search-fulltext-empty": "Type om te beginnen met zoeken", + "citizen-search-empty-desc": "Type om te beginnen met zoeken", "citizen-tagline-ns-talk": "Overlegpagina van {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "Informatie over {{SITENAME}}", "citizen-tagline-ns-file": "Bestand op {{SITENAME}}", diff --git a/i18n/pl.json b/i18n/pl.json index 52ea90da..2022ce75 100644 --- a/i18n/pl.json +++ b/i18n/pl.json @@ -20,7 +20,7 @@ "citizen-action-addsection": "Dodaj temat", "citizen-jumptotop": "Powrót do góry", "citizen-search-fulltext": "Szukaj stron zawierających tekst $1", - "citizen-search-fulltext-empty": "Zacznij pisać, aby wyszukiwać", + "citizen-search-empty-desc": "Zacznij pisać, aby wyszukiwać", "citizen-search-noresults-title": "O nie! Nie ma wyników dla $1", "citizen-search-noresults-desc": "Może wypróbuj poniższe opcje?", "citizen-tagline-ns-talk": "Strona dyskusji o „{{SUBJECTPAGENAME}}”", diff --git a/i18n/pt-br.json b/i18n/pt-br.json index 2f2a643a..f4209782 100644 --- a/i18n/pt-br.json +++ b/i18n/pt-br.json @@ -24,7 +24,7 @@ "citizen-action-addsection": "Adicionar tópico", "citizen-jumptotop": "Voltar ao topo", "citizen-search-fulltext": "Pesquisar por páginas que contenham", - "citizen-search-fulltext-empty": "Tipo para começar a pesquisar", + "citizen-search-empty-desc": "Tipo para começar a pesquisar", "citizen-search-noresults-title": "Uh oh! Nenhum resultado para $1", "citizen-search-noresults-desc": "Talvez tente as opções abaixo?", "citizen-tagline-ns-talk": "Página de discussão de {{SUBJECTPAGENAME}}", diff --git a/i18n/pt.json b/i18n/pt.json index ae035c6e..4b400dc0 100644 --- a/i18n/pt.json +++ b/i18n/pt.json @@ -20,7 +20,8 @@ "citizen-action-addsection": "Adicionar tópico", "citizen-jumptotop": "Voltar ao topo", "citizen-search-fulltext": "Procurar páginas que contenham $1", - "citizen-search-fulltext-empty": "Escrever para começar a procurar", + "citizen-search-mediasearch": "Procurar conteúdo multimédia relacionado com $1", + "citizen-search-empty-desc": "Escrever para começar a procurar", "citizen-search-noresults-title": "Não há resultados para $1", "citizen-search-noresults-desc": "Talvez queira tentar as opções abaixo?", "citizen-tagline-ns-talk": "Página de discussão de {{SUBJECTPAGENAME}}", diff --git a/i18n/qqq.json b/i18n/qqq.json index 38b43997..781702c7 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -3,11 +3,12 @@ "authors": [ "Abijeet Patro", "Alistair3149", + "Amire80", "[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]", "[https://www.mediawiki.org/wiki/User:Octfx Octfx]" ] }, - "skinname-citizen": "{{name}}", + "skinname-citizen": "{{name}}\n\n\"Citizen\" refers to the name of the video game [[:w:en:Star Citizen|Star Citizen]].", "citizen-skin-desc": "{{desc|what=skin|name=Citizen|url=https://github.com/StarCitizenTools/mediawiki-skins-Citizen}}", "citizen-prefs-talkpage": "Link to the Citizen talk page which is shown before the preview link in skin preferences. See T307113 for more information.", "citizen.css": "{{optional}}", @@ -23,7 +24,8 @@ "citizen-action-addsection": "Used in the Citizen skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}. Same as vector-action-addsection in Vector skin.", "citizen-jumptotop": "Label for link to jump to top of page", "citizen-search-fulltext": "Fulltext search suggestion", - "citizen-search-fulltext-empty": "Helper text in the search suggestion when there are no search query", + "citizen-search-mediasearch": "MediaSearch suggestion", + "citizen-search-empty-desc": "Helper text in the search suggestion when there are no search query", "citizen-search-noresults-title": "Title in the search suggestion when there are no search results", "citizen-search-noresults-desc": "Description in the search suggestion when there are no search results", "citizen-tagline-ns-talk": "Tagline for pages in talk namespace", diff --git a/i18n/roa-tara.json b/i18n/roa-tara.json index d41644ff..76a325c4 100644 --- a/i18n/roa-tara.json +++ b/i18n/roa-tara.json @@ -14,7 +14,7 @@ "citizen-action-addsection": "Aggiunge 'n'argomende", "citizen-jumptotop": "Tuèrne sus", "citizen-search-fulltext": "Cirche le pàggene ca tènene", - "citizen-search-fulltext-empty": "Scrive pe accumenzà 'a recerche", + "citizen-search-empty-desc": "Scrive pe accumenzà 'a recerche", "citizen-tagline-ns-talk": "Pàgene de le 'ngazzaminde de {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "'Mbormaizune sus a {{SITENAME}}", "citizen-tagline-ns-file": "Fail sus a {{SITENAME}}", diff --git a/i18n/ru.json b/i18n/ru.json index 862272d3..23d13b7b 100644 --- a/i18n/ru.json +++ b/i18n/ru.json @@ -21,7 +21,7 @@ "citizen-action-addsection": "Добавить тему", "citizen-jumptotop": "Вернуться наверх", "citizen-search-fulltext": "Поиск страниц, содержащих", - "citizen-search-fulltext-empty": "Введите текст", + "citizen-search-empty-desc": "Введите текст", "citizen-tagline-ns-talk": "Обсуждение страницы {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "Информация о {{SITENAME}}", "citizen-tagline-ns-file": "Файл на {{SITENAME}}", diff --git a/i18n/sl.json b/i18n/sl.json index bed252e7..a23e466f 100644 --- a/i18n/sl.json +++ b/i18n/sl.json @@ -20,7 +20,8 @@ "citizen-action-addsection": "Dodaj temo", "citizen-jumptotop": "Nazaj na vrh", "citizen-search-fulltext": "Poiščite strani, ki vsebujejo $1", - "citizen-search-fulltext-empty": "Vnesite za začetek iskanja", + "citizen-search-mediasearch": "Iskanje predstavnosti, povezanih z $1", + "citizen-search-empty-desc": "Vnesite za začetek iskanja", "citizen-search-noresults-title": "Ojoj! Ni zadetkov za $1", "citizen-search-noresults-desc": "Morda poskusite s spodnjimi možnostmi?", "citizen-tagline-ns-talk": "Pogovorna stran {{SUBJECTPAGENAME}}", diff --git a/i18n/tr.json b/i18n/tr.json index 43e8b0c9..fc8ed9f4 100644 --- a/i18n/tr.json +++ b/i18n/tr.json @@ -23,7 +23,7 @@ "citizen-action-addsection": "Konu ekle", "citizen-jumptotop": "Başa dön", "citizen-search-fulltext": "İçeren sayfaları ara", - "citizen-search-fulltext-empty": "Aramaya başlamak için yazın", + "citizen-search-empty-desc": "Aramaya başlamak için yazın", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}} tartışma sayfası", "citizen-tagline-ns-project": "{{SITENAME}} hakkında bilgi", "citizen-tagline-ns-file": "{{SITENAME}} sitesindeki dosya", diff --git a/i18n/uk.json b/i18n/uk.json index 42294981..cc32dcd6 100644 --- a/i18n/uk.json +++ b/i18n/uk.json @@ -16,7 +16,7 @@ "citizen-action-addsection": "Додати тему", "citizen-jumptotop": "Повернутись угору", "citizen-search-fulltext": "Пошук сторінок, що містять", - "citizen-search-fulltext-empty": "Введіть, щоб почати пошук", + "citizen-search-empty-desc": "Введіть, щоб почати пошук", "citizen-tagline-ns-talk": "Сторінка обговорення {{SUBJECTPAGENAME}}", "citizen-tagline-ns-project": "Інформація про {{SITENAME}}", "citizen-tagline-ns-file": "Файл на {{SITENAME}}", diff --git a/i18n/yue.json b/i18n/yue.json index 90688dca..ee7b57e7 100644 --- a/i18n/yue.json +++ b/i18n/yue.json @@ -21,7 +21,7 @@ "citizen-action-addsection": "加主題", "citizen-jumptotop": "返到上面", "citizen-search-fulltext": "喺每頁入面喥搵$1", - "citizen-search-fulltext-empty": "打字開始搵", + "citizen-search-empty-desc": "打字開始搵", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}}嘅討論頁", "citizen-tagline-ns-project": "關於{{SITENAME}}嘅資料", "citizen-tagline-ns-file": "喺{{SITENAME}}嘅檔案", diff --git a/i18n/zh-hans.json b/i18n/zh-hans.json index 34ddbd97..ef8e1a9a 100644 --- a/i18n/zh-hans.json +++ b/i18n/zh-hans.json @@ -28,7 +28,7 @@ "citizen-action-addsection": "添加话题", "citizen-jumptotop": "回到顶部", "citizen-search-fulltext": "搜索包含“$1”的页面", - "citizen-search-fulltext-empty": "键入以开始搜索", + "citizen-search-empty-desc": "键入以开始搜索", "citizen-search-noresults-title": "抱歉！没有找到“$1”的搜索结果", "citizen-search-noresults-desc": "也许可以试试下面的选项？", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}}的讨论页", diff --git a/i18n/zh-hant.json b/i18n/zh-hant.json index 53aed7cb..0b7380f8 100644 --- a/i18n/zh-hant.json +++ b/i18n/zh-hant.json @@ -26,7 +26,7 @@ "citizen-action-addsection": "新增話題", "citizen-jumptotop": "返回頂端", "citizen-search-fulltext": "搜尋包含「$1」的頁面：", - "citizen-search-fulltext-empty": "輸入以開始搜尋", + "citizen-search-empty-desc": "輸入以開始搜尋", "citizen-search-noresults-title": "呃哦！ $1沒有結果", "citizen-search-noresults-desc": "也許試試下面的選項？", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}}的討論頁", diff --git a/i18n/zh-hk.json b/i18n/zh-hk.json index b74c2987..99dfc505 100644 --- a/i18n/zh-hk.json +++ b/i18n/zh-hk.json @@ -5,7 +5,8 @@ "Diskdance", "LuciferianThomas", "Tranve", - "Winston Sung" + "Winston Sung", + "捍粵者" ] }, "skinname-citizen": "公民（Citizen）", @@ -21,7 +22,7 @@ "citizen-action-addsection": "新增話題", "citizen-jumptotop": "返回頂端", "citizen-search-fulltext": "搜尋包含", - "citizen-search-fulltext-empty": "輸入開始搜尋", + "citizen-search-empty-desc": "輸入開始搜尋", "citizen-tagline-ns-talk": "{{SUBJECTPAGENAME}}的討論頁面", "citizen-tagline-ns-project": "關於{{SITENAME}}的資訊", "citizen-tagline-ns-file": "{{SITENAME}}上的檔案", diff --git a/includes/Hooks/ResourceLoaderHooks.php b/includes/Hooks/ResourceLoaderHooks.php index 54d55521..e362669a 100644 --- a/includes/Hooks/ResourceLoaderHooks.php +++ b/includes/Hooks/ResourceLoaderHooks.php @@ -26,6 +26,7 @@ declare( strict_types=1 ); namespace MediaWiki\Skins\Citizen\Hooks; use Config; +use ExtensionRegistry; use MediaWiki\ResourceLoader as RL; /** @@ -64,6 +65,7 @@ class ResourceLoaderHooks { 'wgCitizenMaxSearchResults' => $config->get( 'CitizenMaxSearchResults' ), 'wgScriptPath' => $config->get( 'ScriptPath' ), 'wgSearchSuggestCacheExpiry' => $config->get( 'SearchSuggestCacheExpiry' ), + 'isMediaSearchExtensionEnabled' => ExtensionRegistry::getInstance()->isLoaded( 'MediaSearch' ), ]; } } diff --git a/package-lock.json b/package-lock.json index 39b796d5..f4976a8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "mediawiki-skins-Citizen", - "version": "2.2.0", + "version": "2.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "2.2.0", + "version": "2.3.0", "devDependencies": { "@commitlint/cli": "^17.3.0", "@commitlint/config-conventional": "^17.3.0", diff --git a/package.json b/package.json index 08da5114..60c6c84d 100644 --- a/package.json +++ b/package.json @@ -30,5 +30,5 @@ "stylelint-config-wikimedia": "0.13.1", "svgo": "3.0.2" }, - "version": "2.2.0" + "version": "2.3.0" } diff --git a/resources/skins.citizen.search/skins.citizen.search.less b/resources/skins.citizen.search/skins.citizen.search.less index 73024cdf..0c27ebe7 100644 --- a/resources/skins.citizen.search/skins.citizen.search.less +++ b/resources/skins.citizen.search/skins.citizen.search.less @@ -9,46 +9,20 @@ box-sizing: border-box; padding: 0.75rem 0 0 0; margin: -0.75rem 0 0 0; // Reset
    styles + overscroll-behavior: contain; //border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium ); .citizen-card; .citizen-card-hide( 50% 0, Y, false ); // Well this won't be loaded before .citizen-animation-ready anyways .citizen-card-transition(); - &__placeholder { - .citizen-typeahead { - &__content { - flex-direction: column; - padding: var( --space-xl ) 0; - text-align: center; - } - - &__thumbnail { - margin-bottom: var( --space-sm ); - } - } - } - &__item { - &--active { - background-color: var( --background-color-primary--hover ); - } - .citizen-typeahead { &__thumbnail { margin-right: var( --space-sm ); - background-color: #eaecf0; - background-position: center; - background-size: cover; &.citizen-ui-icon { - width: 70px; - height: 60px; - background-color: var( --color-surface-3 ); - - &:before { - background-size: 20px; - } + width: 100%; // reset width } } @@ -56,13 +30,71 @@ white-space: nowrap; } } - } - &__placeholder, - &__item { + &--active { + background-color: var( --background-color-primary--hover ); + } + &--hidden { display: none; } + + &--placeholder { + .citizen-typeahead { + &__content { + flex-direction: column; + padding: var( --space-xl ) 0; + text-align: center; + } + + &__thumbnail { + margin-bottom: var( --space-sm ); + } + } + } + + &--page { + .citizen-typeahead { + &__thumbnail { + background-color: #eaecf0; + background-position: center; + background-size: cover; + + &.citizen-ui-icon { + height: 60px; + background-color: var( --color-surface-3 ); + + &:before { + background-size: 20px; + } + } + } + } + } + + &--tool { + .citizen-typeahead { + &__content { + padding: var( --space-sm ) 0; + border-top: 1px solid var( --border-color-base ); + } + + &__thumbnail { + height: var( --size-icon ); + background-color: transparent; + } + + &__description { + color: var( --color-base ); + } + } + + + .citizen-typeahead__item--tool { + .citizen-typeahead__content { + border-top: 0; + } + } + } } &__content { @@ -107,6 +139,11 @@ font-weight: var( --font-weight-medium ); } + &__query { + color: var( --color-base--emphasized ); + font-weight: var( --font-weight-semibold ); + } + &__label { display: flex; margin-left: var( --space-xs ); @@ -155,26 +192,6 @@ } } -#citizen-typeahead-fulltext { - .citizen-typeahead { - &__content { - padding: var( --space-md ) 0; - border-top: 1px solid var( --border-color-base ); - } - - &__thumbnail { - height: var( --size-icon ); - background-color: transparent; - } - - &__description { - strong { - color: var( --color-base--emphasized ); - } - } - } -} - // HACK: This is as close as we can to detect whether there is a keyboard in CSS @media ( hover: hover ) and ( pointer: fine ) { .citizen-typeahead { diff --git a/resources/skins.citizen.search/templates/typeahead.mustache b/resources/skins.citizen.search/templates/typeahead.mustache index dfb6c2d5..10d8968d 100644 --- a/resources/skins.citizen.search/templates/typeahead.mustache +++ b/resources/skins.citizen.search/templates/typeahead.mustache @@ -5,12 +5,12 @@
      {{! Empty state }} -
    1. +
    2. {{msg-searchsuggest-search}}
      -
      {{msg-citizen-search-fulltext-empty}}
      +
      {{msg-citizen-search-empty-desc}}
      3. diff --git a/resources/skins.citizen.search/typeahead.js b/resources/skins.citizen.search/typeahead.js index b48cd5a8..d9ad4993 100644 --- a/resources/skins.citizen.search/typeahead.js +++ b/resources/skins.citizen.search/typeahead.js @@ -1,14 +1,21 @@ /* eslint-disable es-x/no-symbol-prototype-description */ const - config = require( './config.json' ), PREFIX = 'citizen-typeahead', - SEARCH_LOADING_CLASS = 'citizen-loading'; + SEARCH_LOADING_CLASS = 'citizen-loading', + ITEM_CLASS = `${PREFIX}__item`, + ACTIVE_CLASS = `${ITEM_CLASS}--active`, + HIDDEN_CLASS = `${ITEM_CLASS}--hidden`; + +/** + * Config object from getCitizenSearchResourceLoaderConfig() + */ +const config = require( './config.json' ); const activeIndex = { index: -1, max: config.wgCitizenMaxSearchResults + 1, setMax: function ( x ) { - this.max = x + 1; + this.max = x; }, increment: function ( i ) { this.index += i; @@ -31,15 +38,28 @@ const activeIndex = { } }; -let typeahead, searchInput; +let /** @type {HTMLElement | undefined} */ typeahead; +let /** @type {HTMLElement | undefined} */ searchInput; -/* +/** + * @typedef {Object} MenuItemData + * @property {string} id + * @property {string} type + * @property {string} link + * @property {string} icon + * @property {string} thumbnail + * @property {string} title + * @property {string} label + * @property {string} description + */ + +/** + * Sets an 'ACTIVE_CLASS' on the element + * * @param {HTMLElement} element - * @return {void} */ function toggleActive( element ) { - const ACTIVE_CLASS = PREFIX + '__item--active'; - const typeaheadItems = typeahead.querySelectorAll( '.' + PREFIX + '__item' ); + const typeaheadItems = typeahead.querySelectorAll( `.${ITEM_CLASS}` ); for ( let i = 0; i < typeaheadItems.length; i++ ) { if ( element !== typeaheadItems[ i ] ) { @@ -54,7 +74,6 @@ function toggleActive( element ) { } } } - /* eslint-enable mediawiki/class-doc */ } /** @@ -69,7 +88,7 @@ function keyboardEvents( event ) { } // Is children slower? - const typeaheadItems = typeahead.querySelectorAll( '.' + PREFIX + '__item' ); + const typeaheadItems = typeahead.querySelectorAll( `.${ITEM_CLASS}` ); if ( event.key === 'ArrowDown' || event.key === 'ArrowUp' ) { if ( event.key === 'ArrowDown' ) { @@ -83,7 +102,7 @@ function keyboardEvents( event ) { } if ( typeaheadItems[ activeIndex.index ] ) { - const link = typeaheadItems[ activeIndex.index ].querySelector( '.' + PREFIX + '__content' ); + const link = typeaheadItems[ activeIndex.index ].querySelector( `.${PREFIX}__content` ); if ( event.key === 'Enter' && link instanceof HTMLAnchorElement ) { event.preventDefault(); link.click(); @@ -91,23 +110,10 @@ function keyboardEvents( event ) { } } -/* - * Attach mouse eventlistener to all typeahead items - * - * @return {void} - */ -function attachMouseListener() { - const items = typeahead.querySelectorAll( '.' + PREFIX + '__item' ); - items.forEach( ( item ) => { - bindMouseHoverEvent( item ); - } ); -} - -/* +/** * Bind mouseenter and mouseleave event to reproduce mouse hover event * * @param {HTMLElement} element - * @return {void} */ function bindMouseHoverEvent( element ) { element.addEventListener( 'mouseenter', ( event ) => { @@ -120,33 +126,24 @@ function bindMouseHoverEvent( element ) { /** * Remove all existing suggestions from typeahead - * - * @return {void} */ function clearSuggestions() { - const typeaheadItems = typeahead.children, - nonSuggestionCount = 3; + const typeaheadItems = typeahead.children; - if ( typeaheadItems.length > nonSuggestionCount ) { - // Splice would be cleaner but it is slower (?) - const fragment = new DocumentFragment(), - nonSuggestionItems = [ ...typeaheadItems ].slice( - typeaheadItems.length - nonSuggestionCount, typeaheadItems.length - ); + if ( typeaheadItems.length > 0 ) { + // Do all the work in document fragment then replace the whole list + // It is more performant this way + const + fragment = new DocumentFragment(), + template = document.getElementById( `${PREFIX}-template` ); - nonSuggestionItems.forEach( ( item ) => { - fragment.append( item ); - } ); - - // TODO: Just use replaceChildren when browser support is >90% - if ( typeof typeahead.replaceChildren !== 'undefined' ) { - typeahead.replaceChildren( fragment ); - } else { - while ( typeahead.hasChildNodes() ) { - typeahead.removeChild( typeahead.lastChild ); + [ ...typeaheadItems ].forEach( ( item ) => { + if ( !item.classList.contains( `${ITEM_CLASS}--page` ) ) { + fragment.append( item ); } - typeahead.appendChild( fragment ); - } + } ); + fragment.append( template ); + typeahead.replaceChildren( fragment ); } // Remove loading animation @@ -161,23 +158,36 @@ function clearSuggestions() { * @param {string} searchQuery * @param {string} htmlSafeSearchQuery * @param {HTMLElement} placeholder - * @return {void} */ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { const renderSuggestions = ( results ) => { if ( results.length > 0 ) { const fragment = document.createDocumentFragment(), - suggestionLinkPrefix = config.wgScriptPath + '/index.php?title=Special:Search&search='; - + suggestionLinkPrefix = `${config.wgScriptPath}/index.php?title=Special:Search&search=`; + /** + * Return the redirect title with search query highlight + * + * @param {string} text + * @return {string} + */ const highlightTitle = ( text ) => { const regex = new RegExp( mw.util.escapeRegExp( htmlSafeSearchQuery ), 'i' ); - return text.replace( regex, '$&' ); + return text.replace( regex, `$&` ); }; - + /** + * Return the HTML of the redirect label + * + * @param {string} title + * @param {string} matchedTitle + * @return {string} + */ const getRedirectLabel = ( title, matchedTitle ) => { - // Check if the redirect is useful - // See T303013 + /** + * Check if the redirect is useful (T303013) + * + * @return {boolean} + */ const isRedirectUseful = () => { // Change to lowercase then remove space and dashes const cleanup = ( text ) => { @@ -187,21 +197,20 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { cleanTitle = cleanup( title ), cleanMatchedTitle = cleanup( matchedTitle ); - // eslint-disable-next-line max-len, es-x/no-array-prototype-includes - return !( cleanTitle.includes( cleanMatchedTitle ) || cleanMatchedTitle.includes( cleanTitle ) ); + return !( + cleanTitle.includes( cleanMatchedTitle ) || + cleanMatchedTitle.includes( cleanTitle ) + ); }; let html = ''; - // Result is a redirect // Show the redirect title and highlight it if ( matchedTitle && isRedirectUseful() ) { - html = '
      ' + - /* Article redirect icon */ - '' + - /* Since we are matching that redirect title, it should be highlighted */ - highlightTitle( matchedTitle ) + - '
      '; + html = `
      + + ${highlightTitle( matchedTitle )} +
      `; } return html; @@ -210,7 +219,8 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { // Create suggestion items results.forEach( ( result, index ) => { const data = { - id: PREFIX + '-suggestion-' + index, + id: `${PREFIX}-suggestion-${index}`, + type: 'page', link: suggestionLinkPrefix + encodeURIComponent( result.key ), title: highlightTitle( result.title ), // Just to be safe, not sure if the default API is HTML escaped @@ -228,7 +238,7 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { fragment.append( getMenuItem( data ) ); } ); // Hide placeholder - placeholder.classList.add( PREFIX + '__placeholder--hidden' ); + placeholder.classList.add( HIDDEN_CLASS ); typeahead.prepend( fragment ); } else { // Update placeholder with no result content @@ -236,11 +246,12 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { placeholder, { icon: 'articleNotFound', - class: PREFIX + '__placeholder ' + PREFIX + '__placeholder--noResult', + type: 'placeholder', title: mw.message( 'citizen-search-noresults-title', htmlSafeSearchQuery ).text(), description: mw.message( 'citizen-search-noresults-desc' ).text() } ); + placeholder.classList.remove( HIDDEN_CLASS ); } }; @@ -267,16 +278,14 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { clearSuggestions(); if ( results !== null ) { renderSuggestions( results ); - attachMouseListener(); } - activeIndex.setMax( results.length ); } ).catch( ( error ) => { searchInput.removeEventListener( 'input', abortFetch ); searchInput.parentNode.classList.remove( SEARCH_LOADING_CLASS ); // User can trigger the abort when the fetch event is pending // There is no need for an error if ( error.name !== 'AbortError' ) { - const message = 'Uh oh, a wild error appears! ' + error; + const message = `Uh oh, a wild error appears! ${error}`; throw new Error( message ); } } ); @@ -286,41 +295,41 @@ function getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ) { * Update menu item element * * @param {HTMLElement} item - * @param {Object} data - * @return {void} + * @param {MenuItemData} data */ function updateMenuItem( item, data ) { if ( data.id ) { item.setAttribute( 'id', data.id ); } - if ( data.class ) { - // So that it can overwrite the original class - // We use that in placeholder - item.setAttribute( 'class', data.class ); + if ( data.type ) { + item.classList.add( `${ITEM_CLASS}--${data.type}` ); } if ( data.link ) { - const link = item.querySelector( '.' + PREFIX + '__content' ); + const link = item.querySelector( `.${PREFIX}__content` ); link.setAttribute( 'href', data.link ); } if ( data.icon || data.thumbnail ) { - const thumbnail = item.querySelector( '.' + PREFIX + '__thumbnail' ); + const thumbnail = item.querySelector( `.${PREFIX}__thumbnail` ); if ( data.thumbnail ) { - thumbnail.style.backgroundImage = 'url(' + data.thumbnail + ')'; + thumbnail.style.backgroundImage = `url('${data.thumbnail}')`; } else { - // FIXME: There is probably a cleaner way - thumbnail.setAttribute( 'class', PREFIX + '__thumbnail citizen-ui-icon mw-ui-icon-wikimedia-' + data.icon ); + thumbnail.classList.add( + `${PREFIX}__thumbnail`, + 'citizen-ui-icon', + `mw-ui-icon-wikimedia-${data.icon}` + ); } } if ( data.title ) { - const title = item.querySelector( '.' + PREFIX + '__title' ); + const title = item.querySelector( `.${PREFIX}__title` ); title.innerHTML = data.title; } if ( data.label ) { - const label = item.querySelector( '.' + PREFIX + '__label' ); + const label = item.querySelector( `.${PREFIX}__label` ); label.innerHTML = data.label; } if ( data.description ) { - const description = item.querySelector( '.' + PREFIX + '__description' ); + const description = item.querySelector( `.${PREFIX}__description` ); description.innerHTML = data.description; } } @@ -328,11 +337,11 @@ function updateMenuItem( item, data ) { /** * Generate menu item HTML using the existing template * - * @param {Object} data + * @param {MenuItemData} data * @return {HTMLElement|void} */ function getMenuItem( data ) { - const template = document.getElementById( PREFIX + '-template' ); + const template = document.getElementById( `${PREFIX}-template` ); // Shouldn't happen but just to be safe if ( !( template instanceof HTMLTemplateElement ) ) { @@ -341,8 +350,9 @@ function getMenuItem( data ) { const fragment = template.content.cloneNode( true ), - item = fragment.querySelector( '.' + PREFIX + '__item' ); + item = fragment.querySelector( `.${ITEM_CLASS}` ); updateMenuItem( item, data ); + bindMouseHoverEvent( item ); return fragment; } @@ -350,47 +360,74 @@ function getMenuItem( data ) { * Update the typeahead element * * @param {Object} messages - * @return {void} */ function updateTypeahead( messages ) { const searchQuery = searchInput.value, htmlSafeSearchQuery = mw.html.escape( searchQuery ), hasQuery = searchQuery.length > 0, - placeholder = typeahead.querySelector( '.' + PREFIX + '__placeholder' ); + placeholder = typeahead.querySelector( `.${ITEM_CLASS}--placeholder` ); - const updateFullTextSearchItem = () => { + /** + * Update a tool item or create it if it does not exist + * + * @param {Object} data + */ + const updateToolItem = ( data ) => { const - FULLTEXT_ID = PREFIX + '-fulltext', - HIDDEN_CLASS = PREFIX + '__item--hidden'; + itemId = `${PREFIX}-${data.id}`, + query = `${htmlSafeSearchQuery}`, + itemLink = data.link + htmlSafeSearchQuery, + /* eslint-disable-next-line mediawiki/msg-doc */ + itemDesc = mw.message( data.msg, query ); - const - fulltextEl = document.getElementById( FULLTEXT_ID ), - highlightedQuery = '' + htmlSafeSearchQuery + '', - fulltextText = mw.message( 'citizen-search-fulltext', highlightedQuery ); - - const item = getMenuItem( { - icon: 'articleSearch', - id: FULLTEXT_ID, - link: config.wgScriptPath + '/index.php?title=Special:Search&fulltext=1&search=' + htmlSafeSearchQuery, - description: fulltextText - } ); + let item = document.getElementById( itemId ); // Update existing element instead of creating a new one - if ( fulltextEl ) { - updateMenuItem( fulltextEl, { description: fulltextText } ); + if ( item ) { + // FIXME: Probably more efficient to just replace the query than the whole messaage? + updateMenuItem( + item, + { + link: itemLink, + description: itemDesc + } + ); // FIXME: There is probably a more efficient way if ( hasQuery ) { - fulltextEl.classList.remove( HIDDEN_CLASS ); + item.classList.remove( HIDDEN_CLASS ); } else { - fulltextEl.classList.add( HIDDEN_CLASS ); + item.classList.add( HIDDEN_CLASS ); } } else { + item = getMenuItem( { + icon: data.icon, + id: itemId, + type: 'tool', + link: itemLink, + description: itemDesc + } ); typeahead.append( item ); } }; - updateFullTextSearchItem(); + // Fulltext search + updateToolItem( { + id: 'fulltext', + link: `${config.wgScriptPath}/index.php?title=Special:Search&fulltext=1&search=`, + icon: 'articleSearch', + msg: 'citizen-search-fulltext' + } ); + + // MediaSearch + if ( config.isMediaSearchExtensionEnabled ) { + updateToolItem( { + id: 'mediasearch', + link: `${config.wgScriptPath}/index.php?title=Special:MediaSearch&type=image&search=`, + icon: 'imageGallery', + msg: 'citizen-search-mediasearch' + } ); + } if ( hasQuery ) { getSuggestions( searchQuery, htmlSafeSearchQuery, placeholder ); @@ -401,34 +438,35 @@ function updateTypeahead( messages ) { placeholder, { icon: 'articlesSearch', - class: PREFIX + '__placeholder ' + PREFIX + '__placeholder--noQuery', - title: messages.searchsuggestSearch, - description: messages.fulltextEmpty + title: messages.emptyTitle, + description: messages.emptyDesc } ); + placeholder.classList.remove( HIDDEN_CLASS ); } + // -1 as there is a template element + activeIndex.setMax( typeahead.children.length - 1 ); } /** * @param {HTMLElement} searchForm * @param {HTMLInputElement} input - * @return {void} */ function initTypeahead( searchForm, input ) { const EXPANDED_CLASS = 'citizen-typeahead--expanded'; const messages = { - fulltextEmpty: mw.message( 'citizen-search-fulltext-empty' ).text(), - searchsuggestSearch: mw.message( 'searchsuggest-search' ).text() + emptyTitle: mw.message( 'searchsuggest-search' ).text(), + emptyDesc: mw.message( 'citizen-search-empty-desc' ).text() }, template = mw.template.get( 'skins.citizen.search', 'resources/skins.citizen.search/templates/typeahead.mustache' ), data = { - 'msg-citizen-search-fulltext-empty': messages.fulltextEmpty, - 'msg-searchsuggest-search': messages.searchsuggestSearch + 'msg-searchsuggest-search': messages.emptyTitle, + 'msg-citizen-search-empty-desc': messages.emptyDesc }; const onBlur = ( event ) => { @@ -463,9 +501,6 @@ function initTypeahead( searchForm, input ) { searchInput.setAttribute( 'aria-autocomplete', 'list' ); searchInput.setAttribute( 'aria-controls', 'searchform-suggestions' ); - // Attach mouse listener to inital typeahead items - attachMouseListener(); - // Since searchInput is focused before the event listener is set up onFocus(); searchInput.addEventListener( 'focus', onFocus ); diff --git a/resources/skins.citizen.styles/StickyHeader.less b/resources/skins.citizen.styles/StickyHeader.less index 36944602..f9ab1882 100644 --- a/resources/skins.citizen.styles/StickyHeader.less +++ b/resources/skins.citizen.styles/StickyHeader.less @@ -45,10 +45,13 @@ .page-heading { position: relative; + min-width: 0; } .firstHeading { + overflow: hidden; font-size: var( --font-size-h3 ); + text-overflow: ellipsis; } .citizen-jumptotop { diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less index f964f3f6..a31043be 100644 --- a/resources/skins.citizen.styles/common/cssvariables.less +++ b/resources/skins.citizen.styles/common/cssvariables.less @@ -12,10 +12,6 @@ --background-color-overlay: @background-color-overlay; --background-color-overlay--lighter: @background-color-overlay--lighter; - --background-color-framed: @background-color-framed; - --background-color-framed--hover: @background-color-framed--hover; - --background-color-framed--active: @background-color-framed--active; - --background-color-input: @background-color-input; --background-color-icon: @background-color-icon; --background-color-icon--hover: @background-color-icon--hover; --background-color-icon--active: @background-color-icon--active; diff --git a/resources/skins.citizen.styles/common/scrollbar.less b/resources/skins.citizen.styles/common/scrollbar.less index 09a8f6b2..1be591b4 100644 --- a/resources/skins.citizen.styles/common/scrollbar.less +++ b/resources/skins.citizen.styles/common/scrollbar.less @@ -15,7 +15,7 @@ transition: @transition-background; &:hover { - background: var( --background-color-framed ); + background: var( --background-color-quiet--hover ); } } diff --git a/resources/skins.citizen.styles/skinning/content.tables.less b/resources/skins.citizen.styles/skinning/content.tables.less index 35988851..1951ee84 100644 --- a/resources/skins.citizen.styles/skinning/content.tables.less +++ b/resources/skins.citizen.styles/skinning/content.tables.less @@ -55,9 +55,3 @@ padding: var( --space-xs ) var( --space-sm ); } } - -@media ( max-width: @width-breakpoint-desktop-wide ) { - table.wikiatble { - white-space: nowrap; - } -} diff --git a/resources/skins.citizen.styles/skinning/elements.less b/resources/skins.citizen.styles/skinning/elements.less index f5f299d9..6adbb14b 100644 --- a/resources/skins.citizen.styles/skinning/elements.less +++ b/resources/skins.citizen.styles/skinning/elements.less @@ -191,7 +191,6 @@ fieldset { padding: var( --space-xs ) var( --space-md ); border: 1px solid var( --border-color-base ); margin: var( --space-md ) 0; - font-size: 0.875rem; } legend { diff --git a/resources/skins.citizen.styles/skinning/interface-subtitle.less b/resources/skins.citizen.styles/skinning/interface-subtitle.less index 7dbe4a76..23e03234 100644 --- a/resources/skins.citizen.styles/skinning/interface-subtitle.less +++ b/resources/skins.citizen.styles/skinning/interface-subtitle.less @@ -20,6 +20,16 @@ line-height: var( --line-height-xs ); } +#contentSub, +#contentSub2 { + margin-bottom: var( --space-md ); +} + +// Reduced spacing if both sub1 and 2 exists +#contentSub + #contentSub2 { + margin-top: ~'calc( var( --space-xs ) * -1 )'; +} + span.subpages { display: block; } diff --git a/resources/variables.less b/resources/variables.less index 9c5fedca..a103ee2a 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -101,20 +101,6 @@ @color-syntax-violet: #945eb8; @color-syntax-grey: #90a4ae; -/* Dark theme */ -@diff-hoverstate-dark: 4; - -@color-primary__l-dark: 60%; - -@color-surface-0-dark: ~'hsl( 210, 27%, 10% )'; -@color-surface-1-dark: ~'hsl( 212, 15%, 17% )'; -@color-surface-2-dark: ~'hsl( 208, 14%, 18% )'; -@color-surface-3-dark: ~'hsl( 210, 11%, 21% )'; -@color-surface-4-dark: ~'hsl( 210, 10%, 24% )'; - -@color-surface-2-dark--hover: ~'hsl( 208, 14%, 'unit( 18 + @diff-hoverstate-dark, % )~' )'; -@color-surface-2-dark--active: ~'hsl( 208, 14%, 'unit( 18 - @diff-hoverstate-dark, % )~' )'; - /* * Syntax highlight colors * Based on Material Theme Palenight @@ -140,7 +126,7 @@ * referring to them as applied further below. */ -@color-base0: #000; // = HSB 0°, 0%, 0% +// @color-base0: #000; // = HSB 0°, 0%, 0% @color-base10: #202122; // = HSB 210°, 6%, 13% @color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` @color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` @@ -174,12 +160,6 @@ @background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity @background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 ); -@background-color-framed: @color-base90; -@background-color-framed--hover: @color-base100; -@background-color-framed--active: @color-base70; - -@background-color-input: rgba( 255, 255, 255, 0.5 ); - @background-color-icon: rgba( 0, 0, 0, 0.6 ); @background-color-icon--hover: rgba( 0, 0, 0, 0.8 ); @background-color-icon--active: rgba( 0, 0, 0, 1 ); @@ -233,7 +213,9 @@ @size-icon: 1.25rem; // Not in the header section it is also used outside of header @header-size: 3.5rem; -@width-layout: @width-breakpoint-desktop - 2 * @padding-page; +// 67.5rem at 16px font size +// We use px because it would be frustrating if max-width changes with font size +@width-layout: 1080px; // TODO: Revise this number, fixed value isn't great but we need it for b @width-toc: 240px; diff --git a/skin.json b/skin.json index 77d594fd..93f188fc 100644 --- a/skin.json +++ b/skin.json @@ -1,6 +1,6 @@ { "name": "Citizen", - "version": "2.2.0", + "version": "2.3.0", "author": [ "[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]", "[https://www.mediawiki.org/wiki/User:Octfx Octfx]", @@ -138,7 +138,8 @@ ], "messages": [ "citizen-search-fulltext", - "citizen-search-fulltext-empty", + "citizen-search-mediasearch", + "citizen-search-empty-desc", "citizen-search-noresults-title", "citizen-search-noresults-desc", "search-redirect", @@ -182,6 +183,7 @@ "edit", "editLock", "ellipsis", + "help", "history", "home", "image", @@ -235,6 +237,8 @@ "+ext.centralNotice.display": "skinStyles/extensions/CentralNotice/ext.centralNotice.display.less", "+ext.cite.styles": "skinStyles/extensions/Cite/ext.cite.styles.less", "+ext.cleanchanges.uls": "skinStyles/extensions/CleanChanges/ext.cleanchanges.uls.less", + "+ext.codeEditor.ace": "skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less", + "+jquery.codeEditor": "skinStyles/extensions/CodeEditor/jquery.codeEditor.less", "+ext.CodeMirror.lib": "skinStyles/extensions/CodeMirror/ext.CodeMirror.lib.less", "+ext.CodeMirror.mode.mediawiki": "skinStyles/extensions/CodeMirror/ext.CodeMirror.mode.mediawiki.less", "+ext.CodeMirror.visualEditor.init": "skinStyles/extensions/CodeMirror/ext.CodeMirror.visualEditor.init.less", diff --git a/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less b/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less index 7af98fc4..fad9485e 100644 --- a/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less +++ b/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less @@ -3,13 +3,21 @@ * * SkinStyles for Extension:AdvancedSearch * Module: ext.advancedSearch.initialstyles - * Version: REL1_35 fae6250 + * Version: REL1_39 3a0eed7 * - * Date: 2021-08-26 + * Date: 2022-12-12 */ .client-js { + .mw-search-form-wrapper { + min-height: 121.56px; // This is quite hacky + } + .mw-search-spinner { + top: 5em; + // Very hacky since it might be wrong because of font size + left: 23em; + &:before, &:after, & .mw-search-spinner-bounce { diff --git a/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less b/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less index a7b93e6d..3f430d99 100644 --- a/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less +++ b/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less @@ -3,54 +3,123 @@ * * SkinStyles for Extension:AdvancedSearch * Module: ext.advancedSearch.styles - * Version: REL1_35 fae6250 + * Version: REL1_39 3a0eed7 * - * Date: 2021-08-26 + * Date: 2022-12-12 */ +.mw-advancedSearch-container { + border-bottom: 1px solid var( --border-color-base ); + margin-top: var( --space-xs ); +} + +// Align with Citizen label styles +.mw-advancedSearch-searchPreview-label, +.advancedsearch-namespacesPreview-label { + margin-right: var( --space-xs ); + color: var( --color-base--subtle ); + font-size: 0.875rem; + font-weight: var( --font-weight-normal ); + letter-spacing: 0.05em; +} + .mw-advancedSearch-fieldContainer { - border-color: var( --border-color-base ); - background: transparent; + max-width: none; + border: 0; + border-radius: var( --border-radius--small ); + margin-top: 0; + background: var( --color-surface-2 ); fieldset { - border-color: var( --border-color-base ); + border-top-color: var( --border-color-base ); + margin-top: var( --space-md ); } .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label { - background: var( --color-surface-0 ); // the parent containers are transparent + background: var( --color-surface-2 ); color: var( --color-base--subtle ); + font-size: 0.875rem; + font-weight: var( --font-weight-normal ); + letter-spacing: 0.05em; } } +.mw-advancedSearch-expandablePane-options, +.mw-advancedSearch-expandablePane-namespaces { + max-width: none; + padding-top: 0; // padding handled through container +} + .mw-advancedSearch-expandablePane-button { &.oo-ui-widget-enabled.oo-ui-buttonWidget { - &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { - background-color: var( --color-surface-2 ); + > .oo-ui-buttonElement-button { + padding-left: 0; + border-color: transparent; + background-color: transparent; + + &:hover { + background-color: var( --background-color-quiet--hover ); + color: inherit; + } + + // Added active state + &:active { + background-color: var( --background-color-quiet--active ); + } + + // HACK: Flip indicator when expanded + .oo-ui-indicator-down { + transition: opacity 100ms, transform 250ms ease; + } + + &[ aria-expanded='true' ] { + .oo-ui-indicator-down { + transform: rotate3d( 1, 0, 0, 180deg ); + } + } } - > .oo-ui-buttonElement-button { - &:hover { - background-color: var( --color-surface-2--hover ); - color: var( --color-base ); - } + &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + background-color: transparent; } } } +.mw-advancedSearch-namespace-selection-header { + > .mw-advancedSearch-namespace-search-in-label { + font-weight: var( --font-weight-semibold ); + } +} + .mw-advancedSearch-namespace-selection { - border-color: var( --border-color-base ); + max-width: none; + border: 0; + border-radius: var( --border-radius--small ); + margin-top: 0; background: var( --color-surface-2 ); } .mw-advancedSearch-namespace-border { - border-color: var( --border-color-base ); + border-top: 1px solid var( --border-color-base ); + border-bottom: 0; +} + +.mw-advancedSearch-namespaceFilter.oo-ui-tagMultiselectWidget { + max-width: none; +} + +.mw-advancedSearch-namespaceFilter .oo-ui-tagMultiselectWidget-handle { + border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small ); +} + +.mw-advancedSearch-namespaceFilter .oo-ui-tagMultiselectWidget-input .oo-ui-inputWidget-input { + background-color: var( --color-surface-0 ); } -// that's how nested the background-color property of a tagWidget is .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { &.selected { border-color: var( --color-primary ); - background-color: var( --color-surface-3 ); + background-color: var( --background-color-primary--hover ); } } diff --git a/skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less b/skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less new file mode 100644 index 00000000..08545f36 --- /dev/null +++ b/skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less @@ -0,0 +1,52 @@ +/* + * Citizen + * + * SkinStyles for Extension:CodeEditor + * Module: ext.codeEditor.ace + * Version: REL1_39 67c012c + * + * Date: 2022-12-15 +*/ + +@import '../../../resources/variables.less'; + +// FIXME: Implemement same syntax higlight color as CodeMirror and SyntaxHighlight +.ace { + &-tm { + background-color: transparent; + color: var( --color-base--emphasized ); + + .ace { + &_gutter { + background-color: transparent; + color: var( --color-base--subtle ); + + &-active-line { + background-color: var( --background-color-quiet--hover ); + } + } + + &_marker-layer { + .ace { + &_active-line { + background-color: var( --background-color-quiet--hover ); + } + } + } + + &_print-margin { + background: var( --border-color-base ); + } + + &_cursor { + color: var( --color-base--emphasized ); + } + } + } + + &_gutter { + &-cell { + color: var( --color-base--subtle ); + } + } +} diff --git a/skinStyles/extensions/CodeEditor/jquery.codeEditor.less b/skinStyles/extensions/CodeEditor/jquery.codeEditor.less new file mode 100644 index 00000000..8785daee --- /dev/null +++ b/skinStyles/extensions/CodeEditor/jquery.codeEditor.less @@ -0,0 +1,56 @@ +/* + * Citizen + * + * SkinStyles for Extension:CodeEditor + * Module: jquery.codeEditor + * Version: REL1_39 67c012c + * + * Date: 2022-12-15 +*/ + +.wikiEditor-ui .ace_editor { + font-family: var( --font-family-monospace ); +} + +.codeEditor-status { + position: relative; + width: auto; // so it won't overflow + padding-top: 8px; // Make space for resize indicator + padding-right: var( --space-xs ); + padding-left: var( --space-xs ); + border-top-color: var( --border-color-base ); + background-color: var( --color-surface-2 ); + color: var( --color-base--subtle ); + line-height: var( --line-height-sm ); + + // HACK: Add resize indicator + &:after { + position: absolute; + top: 1px; // counter border top + right: 0; + left: 0; + width: 52px; + height: 4px; + border-radius: var( --border-radius--pill ); + margin: 2px auto; + background: var( --color-base--subtle ); + content: ''; + } + + &-worker, + &-line, + &-message { + padding: 0 var( --space-xs ); + } + + &-message { + border-color: var( --border-color-base ); + color: var( --color-base--emphasized ); + } +} + +// So that it connects with CodeEditor's status bar +.skin-citizen .mw-editform .editOptions { + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/skinStyles/extensions/UploadWizard/ext.uploadWizard.less b/skinStyles/extensions/UploadWizard/ext.uploadWizard.less index 5b511609..34323056 100644 --- a/skinStyles/extensions/UploadWizard/ext.uploadWizard.less +++ b/skinStyles/extensions/UploadWizard/ext.uploadWizard.less @@ -30,11 +30,11 @@ } .mwe-upwiz-file.odd .mwe-upwiz-visible-file { - background: var( --background-color-framed ); + background: var( --color-surface-2 ); } #mwe-upwiz-deeds-thumbnails { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); } .mwe-upwiz-thumbnail-link canvas, @@ -44,7 +44,7 @@ .mwe-upwiz-singleLanguageInputWidget { border-color: var( --border-color-base ); - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); } .mwe-upwiz-copyMetadataWidget { @@ -64,7 +64,7 @@ } .arrowSteps li { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); color: var( --color-base--subtle ); } @@ -74,7 +74,7 @@ } .arrowSteps li.arrow:after { - border-left-color: var( --background-color-framed ); + border-left-color: var( --color-surface-2 ); } .arrowSteps li.arrow:before { diff --git a/skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less b/skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less index 8f240baa..f16c58c2 100644 --- a/skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less +++ b/skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less @@ -9,14 +9,14 @@ */ :root { - --tint-1: var( --background-color-framed ); - --border-1: 1px solid var( --background-color-framed--active ); + --tint-1: var( --color-surface-2 ); + --border-1: 1px solid var( --color-surface-2--active ); } .wssearch--filter-options-search, .wssearch--search-input { border: 1px solid var( --border-color-base ); - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); color: var( --color-base ); &:hover { @@ -41,7 +41,7 @@ &:focus { border-color: var( --color-base ); - box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --background-color-framed ); + box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 ); } &:active { @@ -52,12 +52,12 @@ } .wssearch--selected-filter { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); transition: background-color 0.1s, color 0.1s, border-color 0.1s, box-shadow 0.1s; &:hover { border-color: var( --base-color-lighter ); - background-color: var( --background-color-framed--hover ); + background-color: var( --color-surface-2--hover ); } &:after { @@ -80,7 +80,7 @@ &:focus { border-color: var( --color-base ); background-color: var( --color-base ); - box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --background-color-framed ); + box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 ); } } @@ -119,7 +119,7 @@ &:active, &:focus { border-color: var( --color-base ); - box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --background-color-framed ); + box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 ); } } @@ -146,13 +146,13 @@ .wssearch--order__option, .wssearch--size__option { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); color: var( --color-base--emphasized ); } .wssearch-hit-prop-loading-bg { - background: linear-gradient( 135deg, var( --background-color-framed ) 25%, transparent 0, transparent 50%, var( --background-color-framed ) 0, var( --background-color-framed ) 75%, transparent 0, transparent ); - background-color: var( --background-color-framed--active ); + background: linear-gradient( 135deg, var( --color-surface-2 ) 25%, transparent 0, transparent 50%, var( --color-surface-2 ) 0, var( --color-surface-2 ) 75%, transparent 0, transparent ); + background-color: var( --color-surface-2--active ); } .wssearch--hit-pill { @@ -222,7 +222,7 @@ } .wssearch--checkbox { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); color: var( --color-base--emphasized ); &:hover { @@ -235,11 +235,11 @@ } &.wssearch--checkbox-selected:hover { - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); } &:not( :last-child ) { - border-bottom: 1px solid var( --background-color-framed--active ); + border-bottom: 1px solid var( --color-surface-2--active ); } &-count { @@ -276,7 +276,7 @@ &:active, &:focus { border-color: var( --color-base ); - box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --background-color-framed ); + box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 ); } } @@ -290,7 +290,7 @@ } &__header > * { - background-color: var( --background-color-framed--active ); + background-color: var( --color-surface-2--active ); } } diff --git a/skinStyles/mediawiki/special/mediawiki.special.search.styles.less b/skinStyles/mediawiki/special/mediawiki.special.search.styles.less index ba7cd76b..fc70d671 100644 --- a/skinStyles/mediawiki/special/mediawiki.special.search.styles.less +++ b/skinStyles/mediawiki/special/mediawiki.special.search.styles.less @@ -102,7 +102,7 @@ .results-info { color: var( --color-base--subtle ); - font-size: 0.8125rem; + font-size: 0.875rem; white-space: nowrap; } @@ -133,10 +133,12 @@ .mw-search-createlink, .mw-search-exists { - padding: var( --space-sm ) var( --space-md ); - border-radius: var( --border-radius--small ); + // These can generate a empty card when there are no text content + // FIXME: re-enable when this is addressed in core + // padding: var( --space-sm ) var( --space-md ); + // background: var( --color-surface-2 ); + // border-radius: var( --border-radius--small ); margin-top: 0 !important; - background: var( --color-surface-2 ); color: var( --color-base--emphasized ); } @@ -172,6 +174,11 @@ .searchmatch { color: var( --color-base--emphasized ); font-weight: var( --font-weight-semibold ); + + a & { + // If searchmatch is part of the link (usually title), use link color + color: inherit; + } } .searchresults {