From 09116cd5687640c5489fdf082b758052bd2e8f71 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Sat, 6 Jun 2020 15:51:51 -0400 Subject: [PATCH 01/38] Changed header from mw-header-container to mw-header --- includes/templates/Header.mustache | 20 +++++++++---------- resources/components/darkmode.less | 2 +- resources/components/navigation.less | 2 +- .../VisualEditor/ext.visualEditor.core.less | 2 +- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache index 29060c5c..bf00f65f 100644 --- a/includes/templates/Header.mustache +++ b/includes/templates/Header.mustache @@ -2,20 +2,18 @@ string msg-citizen-header-menu-toggle tooltip for menu toggle string msg-citizen-header-search-toggle tooltip for search toggle }} -
-
-
- -
- - - -
- {{#data-menu}}{{>Menu}}{{/data-menu}} +
+
+ +
+ + +
+ {{#data-menu}}{{>Menu}}{{/data-menu}}
-
+
{{#data-extratools}}{{>Portal}}{{/data-extratools}}
'; } + /** + * Card displayed if no results could be found + * @param {string} searchString - The search string. + * @return {string} + */ + function getSuggestionSpecial( searchString ) { + const msg = mw.message( 'citizen-search-fulltext' ).text(), + href = searchurl + searchString + '&fulltext=1'; + + return '' + + '
' + msg + ' ' + searchString + '
' + + '
'; + } + /** * Inserts script element containing the Search API results into document head. * The script itself calls the 'portalOpensearchCallback' callback function, @@ -417,9 +432,11 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { }, new mw.html.Raw( suggestionText + suggestionThumbnail ) ); string += suggestionLink; - } + suggestionSpecial = getSuggestionSpecial( searchString ); + string += suggestionSpecial; + string += '
'; return string; diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index af9204f4..6f73471c 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -41,7 +41,7 @@ &-title { margin: 0 0 0.78rem * @content-scaling 0; color: @base-10; - font-size: 1.6rem * @content-scaling; + font-size: @content-h6-size; line-height: 1.872rem * @content-scaling; } @@ -54,7 +54,7 @@ color: @base-30; margin: 0; font-family: @fonts; - font-size: 1.3rem * @content-scaling; + font-size: @content-caption-size; line-height: 1.43rem * @content-scaling; } @@ -71,6 +71,22 @@ } } +#suggestion-special { + padding: 1rem; + display: block; + color: @base-10; + + &-text { + font-size: @content-caption-size; + font-family: @fonts; + font-weight: bold; + } + + &:hover { + background-color: @accent-90; + } +} + /* using element selector to override default anchor styles */ a.suggestion-link:hover { text-decoration: none; @@ -133,4 +149,12 @@ a.suggestion-link:hover { color: @dark-text-70; } } + + #suggestion-special { + color: @dark-text-90; + + &:hover { + background-color: @accent-10; + } + } } diff --git a/skin.json b/skin.json index f12fe8cf..da5a44b3 100644 --- a/skin.json +++ b/skin.json @@ -214,6 +214,7 @@ "oojs-ui-core.styles" ], "messages": [ + "citizen-search-fulltext", "citizen-search-no-results-title", "citizen-search-no-results-desc" ] From 5df1d0971e7fe4a700c749e494a101bf24469619 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Sun, 7 Jun 2020 18:48:21 -0400 Subject: [PATCH 13/38] Removed no result search suggestion --- i18n/de.json | 5 +-- i18n/en.json | 4 +-- i18n/qqq.json | 4 +-- .../wm-typeahead.js | 33 ++++++------------- skin.json | 4 +-- 5 files changed, 14 insertions(+), 36 deletions(-) diff --git a/i18n/de.json b/i18n/de.json index 7712af0c..f7172390 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -6,8 +6,5 @@ "citizen-desc": "Ein responsive Skin entwickelt für das Star Citizen Wiki", "citizen-footer-desc": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-desc", - "citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline", - - "citizen-search-no-results-title": "Entschuldige, wir konnten zu '$1' nichts finden.", - "citizen-search-no-results-desc": "Versuche weiter nach Seiten zu suchen, die '$1' enthalten." + "citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline" } diff --git a/i18n/en.json b/i18n/en.json index a0044779..ef407458 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -17,7 +17,5 @@ "citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc", "citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline", - "citizen-search-fulltext": "Search pages containing", - "citizen-search-no-results-title": "Sorry we couldn't find $1", - "citizen-search-no-results-desc": "Maybe continue to search for pages containing $1" + "citizen-search-fulltext": "Search pages containing" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 84e363c3..c4719dee 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -17,7 +17,5 @@ "citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc", "citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline", - "citizen-search-fulltext": "Fulltext search suggestion", - "citizen-search-no-results-title": "Title of the message displayed if no results could be found", - "citizen-search-no-results-desc": "Description of the message displayed if no results could be found" + "citizen-search-fulltext": "Fulltext search suggestion" } diff --git a/resources/skins.citizen.scripts.search/wm-typeahead.js b/resources/skins.citizen.scripts.search/wm-typeahead.js index 75951ec6..3c53ca02 100644 --- a/resources/skins.citizen.scripts.search/wm-typeahead.js +++ b/resources/skins.citizen.scripts.search/wm-typeahead.js @@ -221,26 +221,6 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { } } - /** - * Card displayed if no results could be found - * @param {string} searchString - The search string. - * @return {string} - */ - function getNoResultsIndicator( searchString ) { - const titlemsg = mw.message( 'citizen-search-no-results-title', searchString ).text(), - descmsg = mw.message( 'citizen-search-no-results-desc', searchString ).text(); - - return '
' + - '
' + - '
' + - '

' + titlemsg + '

' + - '

' + descmsg + '

' + - '
' + - '
' + - '
' + - '
'; - } - /** * Card displayed if no results could be found * @param {string} searchString - The search string. @@ -358,14 +338,20 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { suggestionText, suggestionTitle, suggestionDescription, + suggestionSpecial, page, sanitizedThumbURL = false, descriptionText = '', pageDescription = '', i; + suggestionSpecial = getSuggestionSpecial( searchString ); + if ( suggestions.length === 0 ) { - return getNoResultsIndicator( searchString ); + string += suggestionSpecial; + string += '
'; + + return string; } for ( i = 0; i < suggestions.length; i++ ) { @@ -434,7 +420,6 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { string += suggestionLink; } - suggestionSpecial = getSuggestionSpecial( searchString ); string += suggestionSpecial; string += '
'; @@ -505,7 +490,9 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { xhrResults.query.pages : []; if ( suggestions.length === 0 ) { - typeAheadEl.innerHTML = getNoResultsIndicator( queryString ); + typeAheadEl.innerHTML = '
' + + getSuggestionSpecial( queryString ) + + '
'; return; } diff --git a/skin.json b/skin.json index da5a44b3..ecb37a06 100644 --- a/skin.json +++ b/skin.json @@ -214,9 +214,7 @@ "oojs-ui-core.styles" ], "messages": [ - "citizen-search-fulltext", - "citizen-search-no-results-title", - "citizen-search-no-results-desc" + "citizen-search-fulltext" ] }, "skins.citizen.scripts.lazyload": { From d0d379da529b7b188d6b33518a0bdad7f012db3b Mon Sep 17 00:00:00 2001 From: github-actions Date: Sun, 7 Jun 2020 22:48:53 +0000 Subject: [PATCH 14/38] Github CI lint - phpcbf --- resources/skins.citizen.scripts.search/wm-typeahead.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/skins.citizen.scripts.search/wm-typeahead.js b/resources/skins.citizen.scripts.search/wm-typeahead.js index 3c53ca02..33dc3d7d 100644 --- a/resources/skins.citizen.scripts.search/wm-typeahead.js +++ b/resources/skins.citizen.scripts.search/wm-typeahead.js @@ -490,8 +490,8 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { xhrResults.query.pages : []; if ( suggestions.length === 0 ) { - typeAheadEl.innerHTML = '
' + - getSuggestionSpecial( queryString ) + + typeAheadEl.innerHTML = '
' + + getSuggestionSpecial( queryString ) + '
'; return; } From a6d42a419e29cb0241c5d87b9800d9d710850864 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 00:27:25 -0400 Subject: [PATCH 15/38] Added icon to fulltext search suggestion --- .../cards => skins.citizen.icons.search}/noimage.svg | 0 .../skins.citizen.icons.search/searchfulltext.svg | 1 + .../skins.citizen.scripts.search/wm-typeahead.js | 5 ++++- resources/skins.citizen.styles.search/search.less | 11 ++++++++++- skin.json | 5 +++-- 5 files changed, 18 insertions(+), 4 deletions(-) rename resources/{images/cards => skins.citizen.icons.search}/noimage.svg (100%) create mode 100644 resources/skins.citizen.icons.search/searchfulltext.svg diff --git a/resources/images/cards/noimage.svg b/resources/skins.citizen.icons.search/noimage.svg similarity index 100% rename from resources/images/cards/noimage.svg rename to resources/skins.citizen.icons.search/noimage.svg diff --git a/resources/skins.citizen.icons.search/searchfulltext.svg b/resources/skins.citizen.icons.search/searchfulltext.svg new file mode 100644 index 00000000..5b11c1dd --- /dev/null +++ b/resources/skins.citizen.icons.search/searchfulltext.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/skins.citizen.scripts.search/wm-typeahead.js b/resources/skins.citizen.scripts.search/wm-typeahead.js index 33dc3d7d..66295240 100644 --- a/resources/skins.citizen.scripts.search/wm-typeahead.js +++ b/resources/skins.citizen.scripts.search/wm-typeahead.js @@ -231,7 +231,10 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { href = searchurl + searchString + '&fulltext=1'; return '' + - '
' + msg + ' ' + searchString + '
' + + '
' + + '
' + msg + + ' ' +searchString + + '
' + '
'; } diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 6f73471c..76d027af 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -73,10 +73,19 @@ #suggestion-special { padding: 1rem; - display: block; + display: flex; color: @base-10; + align-items: center; + + &-icon { + margin: 0 14px 0 10px; + width: 20px; + height: 20px; + background-repeat: no-repeat; + } &-text { + padding: 5px 0; // make it looks more center aligned font-size: @content-caption-size; font-family: @fonts; font-weight: bold; diff --git a/skin.json b/skin.json index ecb37a06..e678e5b9 100644 --- a/skin.json +++ b/skin.json @@ -348,10 +348,11 @@ }, "skins.citizen.icons.search": { "class": "ResourceLoaderImageModule", - "selector": ".suggestion-thumbnail", + "selector": "{name}", "useDataURI": false, "images": { - "noimage": "resources/images/cards/noimage.svg" + ".suggestion-thumbnail": "resources/skins.citizen.icons.search/noimage.svg", + "#suggestion-special-icon": "resources/skins.citizen.icons.search/searchfulltext.svg" } } }, From ba6ead1daa0b38c59325948f9dee8f3fcf706b4f Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 8 Jun 2020 04:28:38 +0000 Subject: [PATCH 16/38] Github CI lint - phpcbf --- resources/skins.citizen.scripts.search/wm-typeahead.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/skins.citizen.scripts.search/wm-typeahead.js b/resources/skins.citizen.scripts.search/wm-typeahead.js index 66295240..91482cee 100644 --- a/resources/skins.citizen.scripts.search/wm-typeahead.js +++ b/resources/skins.citizen.scripts.search/wm-typeahead.js @@ -233,7 +233,7 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { return '' + '
' + '
' + msg + - ' ' +searchString + + ' ' + searchString + '
' + ''; } From 98b130e635d70a9322687614b90529ea63a89059 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 01:13:24 -0400 Subject: [PATCH 17/38] Reworked search suggestion styles --- .../wm-typeahead.js | 14 ++- .../skins.citizen.styles.search/search.less | 86 +++++++++++-------- 2 files changed, 62 insertions(+), 38 deletions(-) diff --git a/resources/skins.citizen.scripts.search/wm-typeahead.js b/resources/skins.citizen.scripts.search/wm-typeahead.js index 66295240..1a2631a4 100644 --- a/resources/skins.citizen.scripts.search/wm-typeahead.js +++ b/resources/skins.citizen.scripts.search/wm-typeahead.js @@ -346,6 +346,7 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { sanitizedThumbURL = false, descriptionText = '', pageDescription = '', + suggestionLinkID, i; suggestionSpecial = getSuggestionSpecial( searchString ); @@ -403,6 +404,15 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { descriptionText = ''; } + // Add ID if first or last suggestion + if ( i === 0 ) { + suggestionLinkID = 'suggestion-link-first'; + } else if ( i === suggestions.length - 1 ) { + suggestionLinkID = 'suggestion-link-last'; + } else { + suggestionLinkID = ''; + } + suggestionDescription = mw.html.element( 'p', { class: 'suggestion-description' }, descriptionText ); suggestionTitle = mw.html.element( 'h3', { class: 'suggestion-title' }, new mw.html.Raw( highlightTitle( page.title, searchString ) ) ); @@ -414,11 +424,11 @@ window.WMTypeAhead = function ( appendTo, searchInput ) { style: ( sanitizedThumbURL ) ? 'background-image:url(' + sanitizedThumbURL + ')' : false }, '' ); - // TODO: Make it configurable from the skin suggestionLink = mw.html.element( 'a', { class: 'suggestion-link', + id: suggestionLinkID, href: articleurl + encodeURIComponent( page.title.replace( / /gi, '_' ) ) - }, new mw.html.Raw( suggestionText + suggestionThumbnail ) ); + }, new mw.html.Raw( suggestionThumbnail + suggestionText ) ); string += suggestionLink; } diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 76d027af..013fb54d 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -15,19 +15,19 @@ } .suggestions-dropdown { - background: @base-100; - .boxshadow(4); width: @suggestion-max-width; max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); + display: flex; // Needed to show margin + flex-direction: column; + background: @base-100; + .boxshadow(4); } .suggestion { &-link { - display: block; - position: relative; - min-height: 3.2rem * @content-scaling; - padding: 1rem 1rem 1rem 8.5rem * @content-scaling; - border-bottom: 1px solid @base-90; + padding: 8px 20px; + display: flex; + align-items: center; &.active { background-color: @accent-90; @@ -38,6 +38,10 @@ } } + &-text { + margin-left: 20px; + } + &-title { margin: 0 0 0.78rem * @content-scaling 0; color: @base-10; @@ -59,40 +63,49 @@ } &-thumbnail { + width: 70px; + height: 60px; background-color: @base-80; background-position: center center; background-repeat: no-repeat; background-size: cover; - height: 100%; - width: 7rem * @content-scaling; - position: absolute; - top: 0; - left: 0; } } -#suggestion-special { - padding: 1rem; - display: flex; - color: @base-10; - align-items: center; +#suggestion { + &-link { + &-first { + margin-top: 8px; + } - &-icon { - margin: 0 14px 0 10px; - width: 20px; - height: 20px; - background-repeat: no-repeat; + &-last { + margin-bottom: 8px; + } } + &-special { + padding: 1rem; + border-top: 1px solid @base-80; + display: flex; + color: @base-10; + align-items: center; - &-text { - padding: 5px 0; // make it looks more center aligned - font-size: @content-caption-size; - font-family: @fonts; - font-weight: bold; - } + &-icon { + margin: 0 14px 0 10px; + width: 20px; + height: 20px; + background-repeat: no-repeat; + } - &:hover { - background-color: @accent-90; + &-text { + padding: 5px 0; // make it looks more center aligned + font-size: @content-caption-size; + font-family: @fonts; + font-weight: bold; + } + + &:hover { + background-color: @accent-90; + } } } @@ -135,8 +148,6 @@ a.suggestion-link:hover { .suggestion { &-link { - border-color: @dark-bg-60; - &.active { background-color: @accent-10; @@ -159,11 +170,14 @@ a.suggestion-link:hover { } } - #suggestion-special { - color: @dark-text-90; + #suggestion { + &-special { + border-color: @dark-bg-40; + color: @dark-text-90; - &:hover { - background-color: @accent-10; + &:hover { + background-color: @accent-10; + } } } } From 541698130e644e6d9806abaf1107a6d36334f848 Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 8 Jun 2020 05:14:17 +0000 Subject: [PATCH 18/38] Github CI lint - eslint/stylelint --- resources/skins.citizen.styles.search/search.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 013fb54d..72aff006 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -18,7 +18,7 @@ width: @suggestion-max-width; max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); display: flex; // Needed to show margin - flex-direction: column; + flex-direction: column; background: @base-100; .boxshadow(4); } @@ -82,6 +82,7 @@ margin-bottom: 8px; } } + &-special { padding: 1rem; border-top: 1px solid @base-80; From c7d73a26c8fa291b3d8a68779885a510849db5b4 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 01:22:33 -0400 Subject: [PATCH 19/38] Additional tweaks to suggestion styles --- resources/skins.citizen.styles.search/search.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 013fb54d..4b86b4b0 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -39,11 +39,12 @@ } &-text { - margin-left: 20px; + margin-left: 15px; } &-title { margin: 0 0 0.78rem * @content-scaling 0; + display: inline-block; // so that the margin does not occupy space color: @base-10; font-size: @content-h6-size; line-height: 1.872rem * @content-scaling; @@ -64,6 +65,7 @@ &-thumbnail { width: 70px; + min-width: 70px; // so it won't be squeezed by the content text height: 60px; background-color: @base-80; background-position: center center; From 23a46f45c9dbd949d446fdec6fd54bd2fb06a07b Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 01:43:57 -0400 Subject: [PATCH 20/38] Removed suggestion backdrop hack --- resources/skins.citizen.styles.search/search.less | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index d51dc471..feb3fc85 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -10,7 +10,7 @@ #typeahead-suggestions { position: absolute; - top: @header-height; + top: 42px; z-index: 99999; } @@ -129,18 +129,8 @@ a.suggestion-link:hover { .suggestions-dropdown { position: fixed; left: 0; - top: @header-height + 1px; + top: @header-height; max-width: 100vw; - - &:after { - content: ''; - width: 100vw; - height: 100vh; - background: #000; - display: block; - opacity: 0.7; - position: fixed; - } } } From 4d1170023a1e1586605f2e65abbfae37f00415fe Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 16:26:51 -0400 Subject: [PATCH 21/38] Rounded corner for search suggestion --- resources/skins.citizen.styles.search/search.less | 3 +++ resources/variables.less | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index feb3fc85..44b5f746 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -20,6 +20,7 @@ display: flex; // Needed to show margin flex-direction: column; background: @base-100; + border-radius: 0 0 @border-radius-large @border-radius-large; .boxshadow(4); } @@ -67,6 +68,7 @@ width: 70px; min-width: 70px; // so it won't be squeezed by the content text height: 60px; + border-radius: @border-radius-medium; background-color: @base-80; background-position: center center; background-repeat: no-repeat; @@ -88,6 +90,7 @@ &-special { padding: 1rem; border-top: 1px solid @base-80; + border-radius: 0 0 @border-radius-large @border-radius-large; display: flex; color: @base-10; align-items: center; diff --git a/resources/variables.less b/resources/variables.less index 7cb36cce..0689d1ce 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -24,6 +24,10 @@ @padding-menu-item-big: 10px 20px; @negative-margin: (@footer-width - @page-width) / -2; +@border-radius-small: 4px; +@border-radius-medium: @border-radius-small * 2; +@border-radius-large: @border-radius-small * 3; + /* * Colors */ From 8e9bbdbbadf0ba22e6a199808212af488642b8ac Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 16:51:48 -0400 Subject: [PATCH 22/38] Removed search button --- includes/CitizenTemplate.php | 6 ------ includes/templates/Searchbox.mustache | 1 - resources/components/Searchbox.less | 21 +------------------ .../skins.citizen.styles.search/search.less | 2 +- 4 files changed, 2 insertions(+), 28 deletions(-) diff --git a/includes/CitizenTemplate.php b/includes/CitizenTemplate.php index c87ef3ab..acfdbd61 100644 --- a/includes/CitizenTemplate.php +++ b/includes/CitizenTemplate.php @@ -256,12 +256,6 @@ class CitizenTemplate extends BaseTemplate { 'msg-citizen-search-toggle' => $this->getMsg( 'citizen-search-toggle' )->text(), 'form-action' => $config->get( 'Script' ), 'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ), - 'html-button-search' => $this->makeSearchButton( - 'image', - [ 'id' => 'searchButton', - 'src' => $this->getSkin()->getSkinStylePath( 'resources/images/icons/search.svg' ), - ] - ), 'msg-search' => $this->getMsg( 'search' )->text(), 'page-title' => SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey(), ]; diff --git a/includes/templates/Searchbox.mustache b/includes/templates/Searchbox.mustache index 47e08e10..b4ad44c5 100644 --- a/includes/templates/Searchbox.mustache +++ b/includes/templates/Searchbox.mustache @@ -28,5 +28,4 @@ {{{html-input}}} - {{{html-button-search}}} \ No newline at end of file diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index be68bac5..b9b0c76b 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -55,7 +55,7 @@ pointer-events: auto; // clickable #searchInput { - width: 400px; + width: 454px; } } @@ -147,25 +147,6 @@ .boxshadow(5); } } - - &Button { - .button-blue; - width: @icon-box-size + @icon-padding * 2; - height: 42px; - border: 0; - cursor: pointer; //somehow it is not pointer - - img { - filter: invert( 1 ); - width: 16px; - } - - &:hover, - &:active, - &:focus { - .button-blue-active; - } - } } .search { diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 44b5f746..2ea5ea8c 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -68,7 +68,7 @@ width: 70px; min-width: 70px; // so it won't be squeezed by the content text height: 60px; - border-radius: @border-radius-medium; + border-radius: @border-radius-small; background-color: @base-80; background-position: center center; background-repeat: no-repeat; From 460c7e83bf906bacbf572fed77049aad1ae760a5 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 18:05:28 -0400 Subject: [PATCH 23/38] Delete footer.less --- resources/components/footer.less | 184 ------------------------------- 1 file changed, 184 deletions(-) delete mode 100644 resources/components/footer.less diff --git a/resources/components/footer.less b/resources/components/footer.less deleted file mode 100644 index 59a35e30..00000000 --- a/resources/components/footer.less +++ /dev/null @@ -1,184 +0,0 @@ -// -// Citizen - Footer styles -// https://starcitizen.tools -// - -.last-modified-bar { - background: @color-footer-background-60; - - &-content { - margin: 0 auto; - padding: 12px @margin-side; - max-width: @footer-width; - display: flex; - align-items: center; - } - - &-icon { - margin-right: @icon-padding; - width: 20px; - height: 20px; - background-repeat: no-repeat; - background-position: center; - opacity: @opacity-icon; - } - - &-text { - a { - margin-right: 5px; - } - } -} - -.mw-footer { - z-index: 8; // High enough so it covers the floating UI - clear: both; - position: relative; - direction: ltr; - margin-top: @margin-side * 2; - color: @color-footer-text; - background: @color-footer-background-50; - font-size: @ui-menu-text; - line-height: @footer-line-height; - - a { - color: @color-footer-link; - - &:hover, - &:active, - &:focus { - color: @color-footer-link-active; - text-decoration: none; - } - } - - ul { - margin: 0; - display: flex; - flex-wrap: wrap; - } - - li { - list-style: none; - } -} - -#footer { - &-content { - margin: 0 auto; - padding: 0 @margin-side; - max-width: @footer-width; - display: flex; - flex-direction: column; - } - - &-bottom { - margin-top: @margin-side * 1.5; - background-color: @color-footer-background-40; - - &-content { - margin: 0 auto; - padding: @margin-side / 2 @margin-side; - max-width: @footer-width; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - } - } - - &-sitetitle { - margin: @margin-side * 2.5 0 @margin-side / 2 0; - color: @base-90; - font-size: 20px; - } - - &-desc { - margin: @margin-side / 2 0; - } - - &-places { - margin: 0 -@margin-side !important; - display: flex; - flex-wrap: wrap; - - li a { - padding: @margin-side / 2 @margin-side; - display: block; - } - } - - &-info { - margin-top: @margin-side / 2; - opacity: 0.5; - font-size: 12px; - - li { - margin: @margin-side / 2 0; - } - } - - &-tagline { - padding: @margin-side / 2 0; - } - - &-icons { - margin: 0 -@margin-side / 2; - display: flex; - - a { - padding: @margin-side * 0.75 @margin-side / 2; - height: 50px; // CSS hack to force SVG icon to appear - display: flex; - justify-content: center; - align-items: center; - opacity: 0.5; - transition: @transition-opacity; - - img { - display: none; // Hack to hide original icons - } - - &:before { - content: ''; - .resource-loader-icon; - display: block; - background-size: contain; - } - - &:hover { - opacity: 0.7; - } - - // Icon styles - &[ href*='starcitizen.tools' ] { - width: 50px; - } - - &[ href*='robertsspaceindustries' ] { - width: 50px; - } - - &[ href*='gdpr' ] { - width: 50px; - } - - &[ href*='wikiapiary' ] { - width: 95px; - margin-bottom: -3px; //dirty fix - } - - &[ href*='mediawiki' ] { - width: 95px; - } - - &[ href*='miraheze' ] { - width: 95px; - } - - &[ href*='by-sa' ] { - width: 110px; - } - } - } -} From b24735337de32f54240b17add8f6f2559affdc94 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 18:08:44 -0400 Subject: [PATCH 24/38] Reuploaded footer file --- resources/components/Footer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/components/Footer.less b/resources/components/Footer.less index 59a35e30..9f924e20 100644 --- a/resources/components/Footer.less +++ b/resources/components/Footer.less @@ -181,4 +181,4 @@ } } } -} +} \ No newline at end of file From eaba71ede8afbf387d15b2d505e3571c7c41dbfb Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 8 Jun 2020 22:09:32 +0000 Subject: [PATCH 25/38] Github CI lint - eslint/stylelint --- resources/components/Footer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/components/Footer.less b/resources/components/Footer.less index 9f924e20..59a35e30 100644 --- a/resources/components/Footer.less +++ b/resources/components/Footer.less @@ -181,4 +181,4 @@ } } } -} \ No newline at end of file +} From 1e2574fa4cacc32f5d03461894554cd8abd4993e Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 18:42:15 -0400 Subject: [PATCH 26/38] Simplified search bar --- resources/components/Searchbox.less | 66 ++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 21 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index b9b0c76b..9e85aed7 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -3,11 +3,40 @@ // https://starcitizen.tools // +@search-bar-icon-size: 14px; + #search { - &-toggle { - right: 0; // align checkbox with icon + &form { + position: absolute; + z-index: -1; // not interactable + margin: 7px 0 8px; // 1px h3 screen reader + display: flex; + top: 0; + right: @margin-side / 2; + opacity: 0; + .boxshadow(4); + transition: @transition-opacity; + pointer-events: none; // not clickable &-icon { + position: absolute; + margin-left: @search-bar-icon-size; + width: @search-bar-icon-size; + height: @search-bar-height; + opacity: @opacity-icon; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + + &-toggle { + right: 0; // align checkbox with icon + z-index: 21; // override to be on top of the form + + &-icon { + position: relative; + z-index: 20; // stay on top of search form display: flex; align-items: center; justify-content: center; @@ -37,7 +66,7 @@ opacity: 0; top: 0; left: -7px; - height: 18px; + height: 14px; transform: rotate( -135deg ); } @@ -55,7 +84,7 @@ pointer-events: auto; // clickable #searchInput { - width: 454px; + width: @search-bar-width; } } @@ -66,7 +95,7 @@ } &-1 { - height: 18px; + height: 14px; transform: translate( -5px, -7px ) rotate( 135deg ); } @@ -118,27 +147,15 @@ } } - &form { - position: absolute; - z-index: -1; // not interactable - margin: 7px 0 8px; // 1px h3 screen reader - display: flex; - top: 0; - right: @icon-box-size + @icon-padding * 2; - opacity: 0; - .boxshadow(4); - transition: @transition-opacity; - pointer-events: none; // not clickable - } - &Input { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 12px 15px; + padding: 12px @icon-box-size + @icon-padding 12px @search-bar-icon-size * 3; + padding-right: @icon-box-size + @icon-padding; width: 0; - height: 42px; - max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side ); + height: @search-bar-height; + max-width: calc( ~'100vw -'@margin-side ); border: 1px solid @base-90; transition: @transition-width, @transition-box-shadow; @@ -158,6 +175,13 @@ @media ( prefers-color-scheme: dark ) { #search { + &form { + &-icon { + opacity: 0.4; + filter: invert(1); + } + } + &-toggle { &-icon { opacity: 0.4; From 5d0d9898d0edfa9da062e954694dfc0c84e94c59 Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 8 Jun 2020 22:42:48 +0000 Subject: [PATCH 27/38] Github CI lint - eslint/stylelint --- resources/components/Searchbox.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 9e85aed7..fced3788 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -25,8 +25,8 @@ height: @search-bar-height; opacity: @opacity-icon; background-size: contain; - background-repeat: no-repeat; - background-position: center; + background-repeat: no-repeat; + background-position: center; } } @@ -152,7 +152,7 @@ -moz-appearance: none; appearance: none; padding: 12px @icon-box-size + @icon-padding 12px @search-bar-icon-size * 3; - padding-right: @icon-box-size + @icon-padding; + padding-right: @icon-box-size + @icon-padding; width: 0; height: @search-bar-height; max-width: calc( ~'100vw -'@margin-side ); @@ -178,7 +178,7 @@ &form { &-icon { opacity: 0.4; - filter: invert(1); + filter: invert( 1 ); } } From c009b8726cc9d72fbd6481bf51f799723cb169d6 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 19:12:03 -0400 Subject: [PATCH 28/38] Simplified search bar The last one didn't stage all the files --- includes/SkinCitizen.php | 2 -- includes/templates/Searchbox.mustache | 1 + resources/components/Searchbox.less | 2 -- .../icons => skins.citizen.icons}/more.svg | 0 .../toc-ltr.svg} | 0 resources/skins.citizen.icons/toc-rtl.svg | 7 ++++ .../skins.citizen.styles.search/search.less | 6 ++-- resources/variables.less | 4 +++ skin.json | 34 +++++++++---------- 9 files changed, 30 insertions(+), 26 deletions(-) rename resources/{images/icons => skins.citizen.icons}/more.svg (100%) rename resources/{images/icons/ToC.svg => skins.citizen.icons/toc-ltr.svg} (100%) create mode 100644 resources/skins.citizen.icons/toc-rtl.svg diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 8210bac9..23475a00 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -234,8 +234,6 @@ class SkinCitizen extends SkinTemplate { 'skins.citizen.styles.fonts', 'skins.citizen.icons', 'skins.citizen.icons.ca', - 'skins.citizen.icons.p', - 'skins.citizen.icons.toc', 'skins.citizen.icons.es', 'skins.citizen.icons.n', 'skins.citizen.icons.t', diff --git a/includes/templates/Searchbox.mustache b/includes/templates/Searchbox.mustache index b4ad44c5..26a1a5a0 100644 --- a/includes/templates/Searchbox.mustache +++ b/includes/templates/Searchbox.mustache @@ -27,5 +27,6 @@ \ No newline at end of file diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 9e85aed7..5166564b 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -3,8 +3,6 @@ // https://starcitizen.tools // -@search-bar-icon-size: 14px; - #search { &form { position: absolute; diff --git a/resources/images/icons/more.svg b/resources/skins.citizen.icons/more.svg similarity index 100% rename from resources/images/icons/more.svg rename to resources/skins.citizen.icons/more.svg diff --git a/resources/images/icons/ToC.svg b/resources/skins.citizen.icons/toc-ltr.svg similarity index 100% rename from resources/images/icons/ToC.svg rename to resources/skins.citizen.icons/toc-ltr.svg diff --git a/resources/skins.citizen.icons/toc-rtl.svg b/resources/skins.citizen.icons/toc-rtl.svg new file mode 100644 index 00000000..43de5d64 --- /dev/null +++ b/resources/skins.citizen.icons/toc-rtl.svg @@ -0,0 +1,7 @@ + + + + stripe ToC + + + diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 2ea5ea8c..58386d4c 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -6,8 +6,6 @@ @import '../variables.less'; @import '../mixins.less'; -@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px - #typeahead-suggestions { position: absolute; top: 42px; @@ -15,7 +13,7 @@ } .suggestions-dropdown { - width: @suggestion-max-width; + width: @search-bar-width; max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); display: flex; // Needed to show margin flex-direction: column; @@ -128,7 +126,7 @@ a.suggestion-link:hover { } } -@media only screen and ( max-width: @suggestion-max-width ) { +@media only screen and ( max-width: @search-bar-width ) { .suggestions-dropdown { position: fixed; left: 0; diff --git a/resources/variables.less b/resources/variables.less index 0689d1ce..55888a36 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -24,6 +24,10 @@ @padding-menu-item-big: 10px 20px; @negative-margin: (@footer-width - @page-width) / -2; +@search-bar-width: 454px; +@search-bar-height: 42px; +@search-bar-icon-size: 14px; + @border-radius-small: 4px; @border-radius-medium: @border-radius-small * 2; @border-radius-large: @border-radius-small * 3; diff --git a/skin.json b/skin.json index e678e5b9..4e429999 100644 --- a/skin.json +++ b/skin.json @@ -222,6 +222,22 @@ "resources/skins.citizen.scripts.lazyload/lazyload.js" ] }, + "skins.citizen.icons": { + "class": "ResourceLoaderImageModule", + "selector": "{name}", + "defaultColor": "#000", + "useDataURI": false, + "images": { + ".toctoggle > a:before": { + "file": { + "ltr": "resources/skins.citizen.icons/toc-ltr.svg", + "rtl": "resources/skins.citizen.icons/toc-rtl.svg" + } + }, + "#p-actions:before": "resources/skins.citizen.icons/more.svg", + "#searchform-icon": "resources/images/icons/search.svg" + } + }, "skins.citizen.icons.ca": { "class": "ResourceLoaderImageModule", "selector": "#ca-{name} > *:after", @@ -244,24 +260,6 @@ "translate": "resources/images/icons/language.svg" } }, - "skins.citizen.icons.p": { - "class": "ResourceLoaderImageModule", - "selector": "#p-{name}:before", - "defaultColor": "#000", - "useDataURI": false, - "images": { - "actions": "resources/images/icons/more.svg" - } - }, - "skins.citizen.icons.toc": { - "class": "ResourceLoaderImageModule", - "selector": ".toctoggle > a:before", - "defaultColor": "#000", - "useDataURI": false, - "images": { - "": "resources/images/icons/ToC.svg" - } - }, "skins.citizen.icons.es": { "class": "ResourceLoaderImageModule", "selector": ".mw-editsection > a{name}:before", From d4e60d047b1511ae6f83c95e8da1372f584692a7 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 21:00:27 -0400 Subject: [PATCH 29/38] Tweak search bar styles --- resources/skins.citizen.styles.search/search.less | 3 +++ resources/variables.less | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 58386d4c..adafcc95 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -96,6 +96,7 @@ &-icon { margin: 0 14px 0 10px; width: 20px; + min-width: 20px; height: 20px; background-repeat: no-repeat; } @@ -105,6 +106,8 @@ font-size: @content-caption-size; font-family: @fonts; font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; // handle overflow } &:hover { diff --git a/resources/variables.less b/resources/variables.less index 55888a36..5d4f2b03 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -24,7 +24,7 @@ @padding-menu-item-big: 10px 20px; @negative-margin: (@footer-width - @page-width) / -2; -@search-bar-width: 454px; +@search-bar-width: 500px; @search-bar-height: 42px; @search-bar-icon-size: 14px; From b964eef2766e33e9e8beaca98dc23757048f0639 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 21:05:33 -0400 Subject: [PATCH 30/38] Fixed php error when page tools condition is set to login --- includes/CitizenTemplate.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/CitizenTemplate.php b/includes/CitizenTemplate.php index acfdbd61..13c20e04 100644 --- a/includes/CitizenTemplate.php +++ b/includes/CitizenTemplate.php @@ -281,7 +281,7 @@ class CitizenTemplate extends BaseTemplate { // Login-based condition, return true if condition is met if ( $condition === 'login' ) { - $condition = $skin()->getUser()->isLoggedIn(); + $condition = $skin->getUser()->isLoggedIn(); } // Permission-based condition, return true if condition is met From 345af0401050b3d9ea6f21611de15f8fbc67c741 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 21:58:35 -0400 Subject: [PATCH 31/38] Added random button to search bar --- includes/CitizenTemplate.php | 2 ++ includes/templates/Searchbox.mustache | 12 +++++++++- resources/components/Searchbox.less | 33 ++++++++++++++++++++++----- resources/variables.less | 1 - skin.json | 3 ++- 5 files changed, 42 insertions(+), 9 deletions(-) diff --git a/includes/CitizenTemplate.php b/includes/CitizenTemplate.php index 13c20e04..7288f020 100644 --- a/includes/CitizenTemplate.php +++ b/includes/CitizenTemplate.php @@ -258,6 +258,8 @@ class CitizenTemplate extends BaseTemplate { 'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ), 'msg-search' => $this->getMsg( 'search' )->text(), 'page-title' => SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey(), + 'html-random-href' => Skin::makeSpecialUrl( 'Randompage' ), + 'msg-random' => $this->getMsg( 'Randompage' )->text(), ]; return $props; } diff --git a/includes/templates/Searchbox.mustache b/includes/templates/Searchbox.mustache index 26a1a5a0..7594171a 100644 --- a/includes/templates/Searchbox.mustache +++ b/includes/templates/Searchbox.mustache @@ -1,9 +1,11 @@ {{! + string msg-citizen-search-toggle tooltip message for search toggle string form-action action attribute of the search form string page-title page title of the search page string msg-search search text label string html-input raw HTML containing the input box of the search box - string html-button-search raw HTML containing the button of the search box + string html-random-href URL of Special:Random + string msg-random tooltip message for random page button }} {{msg-search}}
{{{html-input}}} + +
+ {{msg-random}} +
+ \ No newline at end of file diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index aadb758d..f48f7eba 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -18,14 +18,31 @@ &-icon { position: absolute; - margin-left: @search-bar-icon-size; - width: @search-bar-icon-size; + width: @search-bar-height; height: @search-bar-height; opacity: @opacity-icon; - background-size: contain; + background-size: 14px; background-repeat: no-repeat; background-position: center; } + + &-random { + position: absolute; + z-index: 22; // slightly higher than the toggle + right: 38px; + width: @search-bar-height; + height: @search-bar-height; + opacity: @opacity-icon; + background-size: 18px; + background-repeat: no-repeat; + background-position: center; + transition: @transition-transform-quick, @transition-opacity-quick; + + &:hover { + opacity: @opacity-icon-active; + transform: rotate(30deg); + } + } } &-toggle { @@ -149,8 +166,7 @@ -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 12px @icon-box-size + @icon-padding 12px @search-bar-icon-size * 3; - padding-right: @icon-box-size + @icon-padding; + padding: 12px @icon-box-size + @icon-padding + @search-bar-height 12px @search-bar-height; width: 0; height: @search-bar-height; max-width: calc( ~'100vw -'@margin-side ); @@ -174,10 +190,15 @@ @media ( prefers-color-scheme: dark ) { #search { &form { - &-icon { + &-icon, + &-random { opacity: 0.4; filter: invert( 1 ); } + + &-random:hover { + opacity: 0.6; + } } &-toggle { diff --git a/resources/variables.less b/resources/variables.less index 5d4f2b03..798ab75b 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -26,7 +26,6 @@ @search-bar-width: 500px; @search-bar-height: 42px; -@search-bar-icon-size: 14px; @border-radius-small: 4px; @border-radius-medium: @border-radius-small * 2; diff --git a/skin.json b/skin.json index 4e429999..8fc9bf59 100644 --- a/skin.json +++ b/skin.json @@ -235,7 +235,8 @@ } }, "#p-actions:before": "resources/skins.citizen.icons/more.svg", - "#searchform-icon": "resources/images/icons/search.svg" + "#searchform-icon": "resources/images/icons/search.svg", + "#searchform-random": "resources/images/icons/random.svg" } }, "skins.citizen.icons.ca": { From 5fb96074ab8a5f2ad6018bcd37b83867e0421278 Mon Sep 17 00:00:00 2001 From: github-actions Date: Tue, 9 Jun 2020 01:59:02 +0000 Subject: [PATCH 32/38] Github CI lint - eslint/stylelint --- resources/components/Searchbox.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index f48f7eba..1d9cf742 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -35,13 +35,13 @@ opacity: @opacity-icon; background-size: 18px; background-repeat: no-repeat; - background-position: center; - transition: @transition-transform-quick, @transition-opacity-quick; + background-position: center; + transition: @transition-transform-quick, @transition-opacity-quick; - &:hover { - opacity: @opacity-icon-active; - transform: rotate(30deg); - } + &:hover { + opacity: @opacity-icon-active; + transform: rotate( 30deg ); + } } } From f6a4fae4224b87118a8679feabea6d72b42c1205 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 22:36:45 -0400 Subject: [PATCH 33/38] Improved mobile search UI --- resources/components/Searchbox.less | 33 ++++++++++++++++--- .../skins.citizen.styles.search/search.less | 6 ++-- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 1d9cf742..9c44efef 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -13,11 +13,13 @@ right: @margin-side / 2; opacity: 0; .boxshadow(4); + border-radius: @border-radius-large; transition: @transition-opacity; pointer-events: none; // not clickable &-icon { position: absolute; + z-index: 110; width: @search-bar-height; height: @search-bar-height; opacity: @opacity-icon; @@ -28,7 +30,7 @@ &-random { position: absolute; - z-index: 22; // slightly higher than the toggle + z-index: 120; right: 38px; width: @search-bar-height; height: @search-bar-height; @@ -163,14 +165,17 @@ } &Input { + appearance: none; -webkit-appearance: none; -moz-appearance: none; - appearance: none; - padding: 12px @icon-box-size + @icon-padding + @search-bar-height 12px @search-bar-height; + z-index: 100; + padding: 8px @icon-box-size + @icon-padding + @search-bar-height 8px @search-bar-height; width: 0; height: @search-bar-height; max-width: calc( ~'100vw -'@margin-side ); + background: @base-100; border: 1px solid @base-90; + border-radius: @border-radius-large; transition: @transition-width, @transition-box-shadow; &:focus { @@ -187,6 +192,20 @@ } } +@media only screen and ( max-width: @search-bar-width ) { + #searchform:before { + content: ""; + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: @base-100; + opacity: .9; + } +} + @media ( prefers-color-scheme: dark ) { #search { &form { @@ -224,7 +243,13 @@ &Input { border-color: @dark-bg-60; - background: @dark-bg-50 !important; + background: @dark-bg-50; } } } + +@media only screen and ( max-width: @search-bar-width ) and ( prefers-color-scheme: dark ) { + #searchform:before { + background: @dark-bg-50; + } +} diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index adafcc95..24df996c 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -8,11 +8,12 @@ #typeahead-suggestions { position: absolute; - top: 42px; - z-index: 99999; + top: 30px; + z-index: 90; } .suggestions-dropdown { + padding-top: 10px; width: @search-bar-width; max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); display: flex; // Needed to show margin @@ -133,7 +134,6 @@ a.suggestion-link:hover { .suggestions-dropdown { position: fixed; left: 0; - top: @header-height; max-width: 100vw; } } From 79a337175a519df6308fe94ce6c01e5c4de87a19 Mon Sep 17 00:00:00 2001 From: github-actions Date: Tue, 9 Jun 2020 02:38:45 +0000 Subject: [PATCH 34/38] Github CI lint - eslint/stylelint --- resources/components/Searchbox.less | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 9c44efef..2edaf940 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -194,15 +194,15 @@ @media only screen and ( max-width: @search-bar-width ) { #searchform:before { - content: ""; - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: @base-100; - opacity: .9; + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: @base-100; + opacity: 0.9; } } From 2736d2dcc9eeb37dd1747cba547df1c4da16916b Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 22:41:49 -0400 Subject: [PATCH 35/38] Reduce border radius of search box --- resources/components/Searchbox.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 2edaf940..5d86e328 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -13,7 +13,7 @@ right: @margin-side / 2; opacity: 0; .boxshadow(4); - border-radius: @border-radius-large; + border-radius: @border-radius-small; transition: @transition-opacity; pointer-events: none; // not clickable @@ -175,7 +175,7 @@ max-width: calc( ~'100vw -'@margin-side ); background: @base-100; border: 1px solid @base-90; - border-radius: @border-radius-large; + border-radius: @border-radius-small; transition: @transition-width, @transition-box-shadow; &:focus { From 9407f2e31ba2d654a080c38cc7c1e4c1f733168e Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 22:45:25 -0400 Subject: [PATCH 36/38] Minor tweaks to suggestion spacing --- resources/skins.citizen.styles.search/search.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less index 24df996c..10cdcfe3 100644 --- a/resources/skins.citizen.styles.search/search.less +++ b/resources/skins.citizen.styles.search/search.less @@ -8,12 +8,11 @@ #typeahead-suggestions { position: absolute; - top: 30px; + top: 38px; z-index: 90; } .suggestions-dropdown { - padding-top: 10px; width: @search-bar-width; max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); display: flex; // Needed to show margin From 88e4dd87ae414733e29ebfbb5a1ff84709ddc373 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 22:47:32 -0400 Subject: [PATCH 37/38] Add additional padding between clear text and random button --- resources/components/Searchbox.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less index 5d86e328..2b959626 100644 --- a/resources/components/Searchbox.less +++ b/resources/components/Searchbox.less @@ -169,7 +169,7 @@ -webkit-appearance: none; -moz-appearance: none; z-index: 100; - padding: 8px @icon-box-size + @icon-padding + @search-bar-height 8px @search-bar-height; + padding: 8px @icon-box-size + @icon-padding + @search-bar-height + @margin-side / 2 8px @search-bar-height; width: 0; height: @search-bar-height; max-width: calc( ~'100vw -'@margin-side ); From a9ef142b368f65578126c0b610ef0d666057729b Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 8 Jun 2020 22:48:57 -0400 Subject: [PATCH 38/38] Bump version --- skin.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skin.json b/skin.json index 8fc9bf59..87b1f836 100644 --- a/skin.json +++ b/skin.json @@ -1,7 +1,7 @@ { "name": "Citizen", "namemsg": "skinname-citizen", - "version": "0.8.2", + "version": "0.8.3", "author": [ "[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]", "[https://www.mediawiki.org/wiki/User:Octfx Octfx]"