From bc15fd916e061c1ed1fe92db87dc2f841f2685f7 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Sun, 7 Jun 2020 02:07:30 -0400 Subject: [PATCH] Removed unused bottom bar --- includes/CitizenTemplate.php | 22 --- includes/templates/Bottombar.mustache | 13 -- includes/templates/skin.mustache | 1 - resources/components/Footer.less | 184 ++++++++++++++++++ resources/components/Header.less | 14 -- .../{navigation.less => Sidebar.less} | 2 +- resources/components/bottombar.less | 58 ------ resources/components/common.less | 23 +++ resources/components/footer.less | 2 +- resources/images/icons/discord.svg | 1 - resources/screen.less | 5 +- skin.json | 33 ---- 12 files changed, 211 insertions(+), 147 deletions(-) delete mode 100644 includes/templates/Bottombar.mustache create mode 100644 resources/components/Footer.less rename resources/components/{navigation.less => Sidebar.less} (95%) delete mode 100644 resources/components/bottombar.less delete mode 100644 resources/images/icons/discord.svg diff --git a/includes/CitizenTemplate.php b/includes/CitizenTemplate.php index 056fce7b..c87ef3ab 100644 --- a/includes/CitizenTemplate.php +++ b/includes/CitizenTemplate.php @@ -95,8 +95,6 @@ class CitizenTemplate extends BaseTemplate { 'msg-citizen-footer-tagline' => $this->getMsg( 'citizen-footer-tagline' )->text(), 'array-footer-icons' => $this->getFooterIconsRow(), ], - - 'data-bottombar' => $this->buildBottombar(), ]; // Prepare and output the HTML response @@ -351,26 +349,6 @@ class CitizenTemplate extends BaseTemplate { return $props; } - /** - * Render the bottom bar - * TODO: Convert button text to i18n message. - * TODO: Refactor the bottom bar to be customizable - * @return array - */ - private function buildBottombar() : array { - $config = $this->config; - $buttonEnabled = $config->get( 'CitizenEnableButton' ); - if ( $buttonEnabled === false ) { - return ''; - } - $props = [ - 'html-citizen-bottombar-button-href' => $config->get( 'CitizenButtonLink' ), - 'html-citizen-bottombar-button-title' => $config->get( 'CitizenButtonTitle' ), - 'html-citizen-bottombar-button-text' => $config->get( 'CitizenButtonText' ), - ]; - return $props; - } - /** * Get last modified message * @return string html diff --git a/includes/templates/Bottombar.mustache b/includes/templates/Bottombar.mustache deleted file mode 100644 index 56cb49d4..00000000 --- a/includes/templates/Bottombar.mustache +++ /dev/null @@ -1,13 +0,0 @@ - {{! - string html-citizen-bottombar-button-href URL of the button - string html-citizen-bottombar-button-title tooltip of the button - string html-citizen-bottombar-button-text text of the button -}} - - \ No newline at end of file diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index f0f921c0..88653186 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -65,5 +65,4 @@ -{{#data-bottombar}}{{>Bottombar}}{{/data-bottombar}} {{{html-printtail}}} \ No newline at end of file diff --git a/resources/components/Footer.less b/resources/components/Footer.less new file mode 100644 index 00000000..59a35e30 --- /dev/null +++ b/resources/components/Footer.less @@ -0,0 +1,184 @@ +// +// 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; + } + } + } +} diff --git a/resources/components/Header.less b/resources/components/Header.less index 30f1ad86..c39caf3a 100644 --- a/resources/components/Header.less +++ b/resources/components/Header.less @@ -48,20 +48,6 @@ } } -// CSS checkbox hack -// Technically shouldn't be here but it is only used in header -.mw-checkbox-hack { - width: @icon-box-size + @margin-side + @icon-padding; - height: @header-height; - position: absolute; - z-index: 8; - margin: 0; - display: block; - opacity: 0; - cursor: pointer; - -webkit-touch-callout: none; -} - @media ( prefers-color-scheme: dark ) { #mw-header { &-background { diff --git a/resources/components/navigation.less b/resources/components/Sidebar.less similarity index 95% rename from resources/components/navigation.less rename to resources/components/Sidebar.less index 7ba53647..53fae307 100644 --- a/resources/components/navigation.less +++ b/resources/components/Sidebar.less @@ -1,5 +1,5 @@ /* - * Citizen - Navigation Styles + * Citizen - Sidebar styles * https://starcitizen.tools */ diff --git a/resources/components/bottombar.less b/resources/components/bottombar.less deleted file mode 100644 index 8d4912f7..00000000 --- a/resources/components/bottombar.less +++ /dev/null @@ -1,58 +0,0 @@ -// -// Citizen - Bottombar Styles -// https://starcitizen.tools -// - -.mw-bottombar { - position: fixed; - bottom: 0; - display: flex; - justify-content: space-between; - transform: translate( 0, @header-height + @margin-side ); - transition: @transition-transform; - - &-buttons { - display: flex; - margin: @margin-side; - background-color: #7289da; // Discord color - border-radius: 100%; - .boxshadow(4); - transition: @transition-transform-quick, @transition-box-shadow-quick; - - .citizen-ui-icon { - > a { - width: @header-height; - height: @header-height; - display: flex; - align-items: center; - justify-content: center; - text-indent: -1000px; // Hide text - - &:after { - display: block; - .resource-loader-menu-icon; - transition: @transition-opacity; - opacity: 1; - position: relative; // temp override - } - - &:hover { - &:after { - opacity: 0.7; - } - } - } - } - } -} - -// Movable navigation bar -.nav-up ~ .mw-bottombar { - transform: none; -} - -@media only screen and ( max-width: @screen0 ) { - .mw-bottombar { - display: none; - } -} diff --git a/resources/components/common.less b/resources/components/common.less index 4149fa1e..85bbefd6 100644 --- a/resources/components/common.less +++ b/resources/components/common.less @@ -5,6 +5,29 @@ @import 'mediawiki.mixins'; +/* + * Hacks + * TODO: Find a place to put them +*/ + +// Hide RSS icon +a.feedlink { + background: none !important; +} + +// CSS checkbox hack +.mw-checkbox-hack { + width: @icon-box-size + @margin-side + @icon-padding; + height: @header-height; + position: absolute; + z-index: 8; + margin: 0; + display: block; + opacity: 0; + cursor: pointer; + -webkit-touch-callout: none; +} + /* * Framework */ diff --git a/resources/components/footer.less b/resources/components/footer.less index 26739508..59a35e30 100644 --- a/resources/components/footer.less +++ b/resources/components/footer.less @@ -1,5 +1,5 @@ // -// Citizen - Footer Styles +// Citizen - Footer styles // https://starcitizen.tools // diff --git a/resources/images/icons/discord.svg b/resources/images/icons/discord.svg deleted file mode 100644 index 51c82add..00000000 --- a/resources/images/icons/discord.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/resources/screen.less b/resources/screen.less index bf860cb1..44532516 100644 --- a/resources/screen.less +++ b/resources/screen.less @@ -3,15 +3,14 @@ @import 'variables.less'; @import 'mixins.less'; @import 'components/common.less'; -@import 'components/navigation.less'; @import 'components/wikitable.less'; @import 'components/page-tools.less'; @import 'components/search.less'; -@import 'components/footer.less'; -@import 'components/bottombar.less'; @import 'components/scrollbar.less'; @import 'components/darkmode.less'; @import 'components/reducemotion.less'; @import 'components/Header.less'; @import 'components/Drawer.less'; @import 'components/Searchbox.less'; +@import 'components/Sidebar.less'; +@import 'components/Footer.less'; diff --git a/skin.json b/skin.json index 3b299204..8e13a73d 100644 --- a/skin.json +++ b/skin.json @@ -135,30 +135,6 @@ "descriptionmsg": "citizen-config-maxsearchresults", "public": true }, - "EnableButton": { - "value": false, - "description": "Enable or disable the floating action button on the bottom left", - "descriptionmsg": "citizen-config-enablebutton", - "public": true - }, - "ButtonLink": { - "value": "", - "description": "The URL of the FAB button", - "descriptionmsg": "citizen-config-buttonlink", - "public": true - }, - "ButtonTitle": { - "value": "", - "description": "The title of the link element on the FAB", - "descriptionmsg": "citizen-config-buttontitle", - "public": true - }, - "ButtonText": { - "value": "", - "description": "The text of the FAB", - "descriptionmsg": "citizen-config-buttontext", - "public": true - }, "ShowPageTools": { "value": true, "description": "Page tools visibility condition", @@ -226,15 +202,6 @@ "resources/scripts/lazyload.js" ] }, - "skins.citizen.icons": { - "class": "ResourceLoaderImageModule", - "selector": "#citizen-ui-{name} > *:after", - "defaultColor": "#000", - "useDataURI": false, - "images": { - "button": "resources/images/icons/discord.svg" - } - }, "skins.citizen.icons.ca": { "class": "ResourceLoaderImageModule", "selector": "#ca-{name} > *:after",