diff --git a/Refreshed.skin.php b/Refreshed.skin.php index 0f06c6f..f5763ae 100644 --- a/Refreshed.skin.php +++ b/Refreshed.skin.php @@ -1,491 +1,498 @@ getRequest()->getFuzzyBool( 'debug' ) ? '.src' : '.min'; // Add CSS @media support for older browsers (such as Internet Explorer // 8) that do not support it natively // @see https:// github.com/Brickimedia/brickimedia/issues/224 // @todo FIXME: add Respond into the resources directory // (skins/Refreshed/refreshed) and load it from there instead of from GitHub // Remember to use the global variable $wgLocalStylePath, just like how // Vector does! $out->addHeadItem( 'css3mediaquerypolyfill', '' ); $out->addHeadItem( 'viewportforios', Html::element( 'meta', array( 'name' => 'viewport', 'content' => 'width=device-width, initial-scale=1.0' ) ) ); // preventing iOS from zooming out when the sidebar is opened // Add JavaScript via ResourceLoader $out->addModules( 'skins.refreshed.js' ); } function setupSkinUserCss( OutputPage $out ) { global $wgStylePath; parent::setupSkinUserCss( $out ); // Add CSS via ResourceLoader $out->addModuleStyles( array( 'mediawiki.skinning.interface', 'mediawiki.skinning.content.externallinks', 'skins.refreshed' ) ); // Internet Explorer fixes $out->addStyle( $wgStylePath . '/Refreshed/refreshed/ie8.css', 'screen', 'IE 8' ); } } class RefreshedTemplate extends BaseTemplate { public function execute() { global $wgStylePath, $wgRefreshedHeader, $wgMemc; $skin = $this->getSkin(); $user = $skin->getUser(); // Title processing $titleBase = $this->getSkin()->getTitle(); $title = $titleBase->getSubjectPage(); $titleNamespace = $titleBase->getNamespace(); $refreshedImagePath = "$wgStylePath/Refreshed/refreshed/images"; $key = wfMemcKey( 'refreshed', 'header' ); $headerNav = $wgMemc->get( $key ); if ( !$headerNav ) { $headerNav = array(); $skin->addToSidebar( $headerNav, 'refreshed-navigation' ); $wgMemc->set( $key, $headerNav , 60 * 60 * 24 ); // 24 hours } // Output the tag and whatnot $this->html( 'headelement' ); ?>
data['sitenotice'] ) { ?>
html( 'sitenotice' ) ?>
html( 'newtalk' ) ?>

html( 'title' ) ?>

getIndicators(); } ?>
getToolbox(); // if there are actions like "edit," etc. // (not counting generic toolbox tools like "upload file") // in addition to non-page-specific ones like "page" (so a "more..." link is needed) if ( sizeof( $this->data['content_actions'] ) > 1 ) { foreach ( $this->data['content_actions'] as $key => $action ) { if ( !$lastLinkOutsideOfStandardToolboxDropdownHasBeenGenerated ) { // this runs until all the actions outside the dropdown have been generated (generates actions outside dropdown) echo $this->makeLink( $key, $action ); $amountOfToolsGenerated++; if ( sizeof( $this->data['content_actions'] ) == $amountOfToolsGenerated || $key == 'history' || $key == 'addsection' || $key == 'protect' || $key == 'unprotect' ) { // if this is the last action or it is the // history, new section, or protect/unprotect action // (whichever comes first) $lastLinkOutsideOfStandardToolboxDropdownHasBeenGenerated = true; ?>
- getMsg( 'moredotdotdot' )->text() ?> -
printTrail(); echo Html::closeElement( 'body' ); echo Html::closeElement( 'html' ); } } diff --git a/refreshed/big.css b/refreshed/big.css index 9953628..7860bf2 100644 --- a/refreshed/big.css +++ b/refreshed/big.css @@ -1,24 +1,29 @@ /* anything 1001px and over - most laptops, desktops */ #sidebar-wrapper { left: 0 !important; /* preventing sidebar from moving left of viewport if not on mobile */ } #header .search { display: block !important; } #content, #footer { margin-left: 12em; margin-right: 1em; } #small-toolbox-wrapper { display: none; } #searchText, #powerSearchText { /* reset width of search/powersearch bars in Special:Search when window is large */ width: auto !important; } + +#header .search-form.faded { /* show the header search, even if it has the "faded" class (the search should only be fadable on small/medium) */ + visibility: visible; + opacity: 1; +} diff --git a/refreshed/main.css b/refreshed/main.css index 9a744af..cda9784 100644 --- a/refreshed/main.css +++ b/refreshed/main.css @@ -1,892 +1,894 @@ +/********** Fonts (including WikiFont) **********/ + @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff'); src: url(https://fonts.gstatic.com/s/lato/v11/zLhfkPOm_5ykmdm-wXaiuw.eot?#iefix) format('embedded-opentype'), url(https://fonts.gstatic.com/s/lato/v11/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff) format('woff'), url(https://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype'), url(https://fonts.gstatic.com/l/font?kit=7yKIrlBXX_AXuUv3Ts9_8g#Lato) format('svg'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff'); src: url(https://fonts.gstatic.com/s/lato/v11/sBtfDPlEIwvKKU53nAG7AQ.eot?#iefix) format('embedded-opentype'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff'), url(https://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype'), url(https://fonts.gstatic.com/l/font?kit=hLECvlEj3pKlnS4NFs8NQw#Lato) format('svg'); } @font-face { font-family: 'Lato body'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); src: url(https://fonts.gstatic.com/s/lato/v11/nQhiC-wSiJx0pvEuJl8d8A.eot?#iefix) format('embedded-opentype'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff'), url(https://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype'), url(https://fonts.gstatic.com/l/font?kit=H4oiIt_Ug9TU5ast0nUT-w#Lato) format('svg'); } +.header-button .wikiglyph { + /*position: absolute; + top: -.05em; /* The glyphs have a height of 1.1em (you can see this in wikiglyph.css). However, the height of .header-button is 1em, so .1em of the glyph is under the .header-button. To vertically center the glyph, move it ((1.1em - 1em) / 2) or .05em up. */ + /*height: 1em; /* This limits the height of the .wikiglyph span so the clickable area isn't 1.1em tall. */ + font-size: 1em; /* make the definition of the arrow's em the same as its parent's so it's easier to position using em units... */ + line-height: 3em; + height: 3em; /* line-height and height equal to the parent's height (3em) plus vertical-align:text-bottom in wikiglyphs.css vertically centers the icons */ + transform: translateY(-3%); /* the icons themselves (i.e. the shapes inside the SVG) are subtly off vertical center; this line counterbalances that */ +} + +.fadable { + -o-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -webkit-transition: opacity 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */ + transition: opacity 0.2s ease; + opacity: 1; + visibility: visible; +} + +.faded { + -o-transition: opacity 0.2s ease, visibility 0.2s; + -moz-transition: opacity 0.2s ease, visibility 0.2s; + -webkit-transition: opacity 0.2s ease, visibility 0.2s; /* -webkit- last so it's used in place of -o- if possible */ + transition: opacity 0.2s ease, visibility 0.2s; + opacity: 0; + visibility: hidden; +} + +.header-button .wikiglyph:before { + font-size: 2.5em; /* ...however, the actual glyph has a more appropriate font size of 2.5em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */ +} + +#header .wikiglyph-caret-down { + font-size: 1em; /* make the definition of the arrow's em the same as its parent's so it's easier to position using em units... */ +} + +#header .wikiglyph-caret-down:before { + font-size: 1.25em; /* ...however, the actual glyph has a more appropriate font size of 1.25em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */ +} + +#user-info .wikiglyph { /* arrow and user icons */ + margin-right: -.25em; + margin-left: -.25em; +} + +.header-button .arrow { + transform: translateY(0); /* we don't want the arrows to have translateY. Instead we change the transform-origin (see below) */ + + -ms-transform-origin: 50% 52%; /* the icon itself (i.e. the arrow inside the SVG) is subtly off vertical center, making it look slightly off when animated; this line counterbalances that for the animation */ + -o-transform-origin: 50% 52%; + -moz-transform-origin: 50% 52%; + -webkit-transform-origin: 50% 52%; /* -webkit- last so it's used in place of -o- if possible */ + transform-origin: 50% 52%; +} + +/********** (End fonts) **********/ body { font-family: "Lato", sans-serif; margin: 0; background-color: #194a8d; -webkit-tap-highlight-color: transparent; /* preventing gray overlay when pressed on mobile webkit browsers (e.g. mobile Safari) */ } #fade-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: block; opacity: 0; -o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */ transition: opacity 0.2s ease; background: #fff; } #header { -webkit-font-smoothing: antialiased; width: 100%; height: 3em; z-index: 10000; /* very high value to guarantee no elements on wikis will appear above it */ position: fixed; } .header-button { /* defined at top so individual elements can override these properties */ cursor: pointer; width: 3em; - height: 3em; - background-repeat: no-repeat; - background-position: top left; - background-size: 3em 3em; font-family: "Lato Body", sans-serif; + color: #fff; + display: inline-block; +} + +a.header-button { /* double selectors to override default a element text-decoration without use of !important */ + text-decoration: none; } .header-dropdown-item a { color: #fff; } .header-dropdown-item a.new { color: #fdad9d; } #header-inner { height: 100%; background-color: #103ca2; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, #040f28), color-stop(50%, #103ca2), color-stop(100%, #040f28)); /* IE5.5-IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#040f28', endColorstr='#103ca2', GradientType=1); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#040f28,EndColorStr=#103ca2)"; /* IE9+ */ background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #040f28), color-stop(50%, #103ca2), to(#040f28)); background-image: -webkit-linear-gradient(right, #040f28 0, #103ca2 50%, #040f28 100%); background-image: linear-gradient(to left, #040f28 0, #103ca2 50%, #040f28 100%); } #header-categories { list-style: none; height: 3em; margin: 0; overflow: hidden; /* hide categories that get cut off when the window is too small */ + line-height: 1em; /* overriding default style of line-height: 1.5em */ } .page-item { width: auto; height: auto; min-width: 8em; display: inline-block; text-decoration: none; } -.clickable-region { - cursor: pointer; +#header-categories .header-button { padding-left: 0.5em; padding-right: 0.5em; + width: auto; } -.clickable-region a { +.header-category-name { display: inline-block; - height: 2em; - padding: 0.5em 0.5em 0.5em 0; - line-height: 2em; - color: #fff; + height: 3em; + padding-right: 0.5em; + line-height: 3em; white-space: nowrap; + vertical-align: text-bottom; } #header-categories a:hover, #header-categories a:focus { text-decoration: none; } #header-categories li img { - margin: 0 .5em 3px 4px; + margin: 00.5em 3px 4px; } -#header-categories .children { +#header-categories .header-category-menu { background: #000; background: rgba(0,0,0,0.8); margin: 0; } -.children { - display: none; +.header-category-menu { position: absolute; width: 10em; height: auto; padding: 0 0.2em 0.2em 0.2em; } -.children .header-dropdown-item { +.header-category-menu .header-dropdown-item { display: inline-block; padding-top: 0.2em; padding-bottom: 0.2em; width: 100%; } -.children .header-dropdown-item a { +.header-category-menu .header-dropdown-item a { margin-left: 0.4em; /* matching .headermenu a */ } #firstHeading { padding: 0 0.9em; /* 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */ } #firstHeading h1 { font-size: 32pt; font-family: "Lato Body", sans-serif; padding-top: 0.2em; margin-bottom: 0.1em; padding-bottom: 0.05em; } .mw-indicators { float: right; } .mw-indicator { display: inline; } .scroll-shadow { background: none; } .standard-toolbox { font-family: "Lato", sans-serif; /* assigning here so em values match em values of the links inside */ -o-transition: -o-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -webkit-transition: -webkit-transform 0.4s ease; /* -webkit- last so it's used in place of -o- if possible */ transition: transform 0.4s ease; top: 0; } .standard-toolbox a { margin-left: 0.5em; padding-top: 0.25em; padding-bottom: 0.25em; text-transform: lowercase; font-weight: normal; text-decoration: none; } .standard-toolbox > a:first-of-type { margin-left: 0; } .standard-toolbox a:hover { border-bottom: 0.25em solid #0645ad; } .standard-toolbox a:visited:hover, .standard-toolbox a.selected, .standard-toolbox a.selected:visited { border-bottom: 0.25em solid #0b0080; } .standard-toolbox a.new:hover { border-bottom: 0.25em solid #ba0000; } .standard-toolbox a.new:visited:hover, .standard-toolbox a.new.selected, .standard-toolbox a.new.selected:visited { border-bottom: 0.25em solid #a55858; } .standard-toolbox-dropdown { left: 0.5em; z-index: 3; background: #fff; position: absolute; width: 12em; box-shadow: 0 3px 9px 0 rgba(75, 75, 75, 0.4); border: 1px solid #ddd; margin-top: 0.25em; } .standard-toolbox-dropdown ul { list-style-type: none; margin-left: 0; margin-top: 0.25em; } .dropdown-triangle { width: 0; height: 0; border-left: 0.5em solid transparent; border-right: 0.5em solid transparent; border-bottom: 0.5em solid #ccc; position: absolute; top: -.5em; left: 0.1em; } .standard-toolbox-dropdown a { width: 100%; height: 100%; display: inline-block; padding-top: 0; padding-bottom: 0; } .standard-toolbox-dropdown a:hover { border: 0; } .standard-toolbox-dropdown a:hover span { border-bottom: 0.25em solid #0645ad; } .standard-toolbox-dropdown a:visited:hover span { border-bottom: 0.25em solid #0b0080; } .fixed-toolbox { padding-left: 0.9em; /* 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */ position: fixed; border-bottom: 0.25em solid #eee; background: #fff; padding-top: 0.25em; padding-bottom: 0.25em; + width: -moz-calc(100% - 13.4em); + width: -webkit-calc(100% - 13.4em); width: calc(100% - 13.4em); margin-left: 12em; /* width of #sidebarwrapper */ z-index: 9999; /* very high value to guarantee no elements on wikis will appear above it */ } .dropdown-open { -ms-transform: translateY(3em); -o-transform: translateY(3em); -moz-transform: translateY(3em); -webkit-transform: translateY(3em); /* -webkit- last so it's used in place of -o- if possible */ transform: translateY(3em); } #main-title-messages { font-size: 0.9em; padding-top: 1.25em; padding-bottom: 0.5em; } #siteSub { font-size: 0.9em; padding-bottom: 0.25em; } #contentSub, #contentSub2 { margin: 0; padding: 0; font-size: 0.9em; } #back-to-subject { display: none; font-size: 1.25em; padding-bottom: 0.25em; } #small-toolbox-wrapper { display: none; } #site-notice { width: 100%; text-align: center; } #new-talk { margin-left: 2em; } #content { min-height: 100%; position: relative; top: 3em; background-color: white; z-index: 2; font-family: sans-serif; border-bottom: 0.25em solid #eee; padding-bottom: 1em; } #content * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); } #bodyContent { padding: 0 1em; line-height: 1.5em; font-size: 0.875em; word-wrap: break-word; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #252525; overflow: auto; } #sidebar-wrapper { width: 12em; position: fixed; top: 0; color: white; z-index: 2; height: 100%; } /* * Hide the list bullet icons. This is not terribly useful by default, but there * are extensions which can add entire portlets to the sidebarwrapper, and said portlets * might be using the
    HTML tag... */ #sidebar-wrapper li { list-style-type: none; margin: 0; } #sidebar-wrapper ul { margin: 0; padding: 0; } #sidebar-logo { display: none; } #sidebar { overflow-y: auto; width: 100%; height: -moz-calc( 100% - 3.5em ); height: -webkit-calc( 100% - 3.5em ); height: calc( 100% - 3.5em ); left: 0; line-height: 1.5em; position: absolute; top: 3em; padding-top: 0.5em; } #sidebar a { display: block; color: white; text-decoration: none; padding-left: 1em; margin-left: 5px; /* px instead of em because of 5px border on hover */ } #sidebar a:hover { color: #CCC; cursor: pointer; border-left: 5px solid #CCC; margin-left: 0; } #sidebar .main { margin-left: 0.5em; margin-top: 0.5em; } #sidebar .main:first-of-type { margin-top: 0; } #sidebar li { text-transform: lowercase; } .toolbox-container { display: inline-block; position: relative; } #user-info { position: relative; float: right; - margin-right: 1em; + margin-right: 0.5em; } #user-info .header-button { display: block; - padding: 0.5em; width: auto; - height: 2em; max-width: 320px; - text-decoration: none; - position: relative; - white-space: nowrap; - overflow-x: hidden; -} - -.avatar-none { - display: none; + padding-left: 0.5em; + padding-right: 0.5em; } .username { - display: block; - margin-top: 0.1em; - font-size: 15pt; - color: white; - padding-right: 10px; - margin-left: 3.5em; + display: inline-block; + /* font-size: 1.25em; /* same as 15pt it seems */ + line-height: 3em; + vertical-align: text-bottom; /* line-height equal to the parent's height (3em) plus vertical-align:text-bottom vertically centers the text */ } .username-avatar-none { margin-left: 1.75em; } -#user-info .arrow { - position: absolute; - left: 1em; - top: 1.2em; - vertical-align: text-bottom; -} - -#toolbox-link .arrow, #languages-link .arrow { vertical-align: 2px; } -#user-info .arrow, -#toolbox-link .arrow, -#languages-link .arrow, -.page-item-has-children .arrow { +.arrow { -o-transition: -o-transform 0.5s; -moz-transition: -moz-transform 0.5s; -webkit-transition: -webkit-transform 0.5s; /* -webkit- last so it's used in place of -o- if possible */ transition: transform 0.5s; } .arrow.rotate { - -ms-transform: rotateZ(-180deg); - -o-transform: rotateZ(-180deg); - -moz-transform: rotateZ(-180deg); - -webkit-transform: rotateZ(-180deg); /* -webkit- last so it's used in place of -o- if possible */ - transform: rotateZ(-180deg); + -ms-transform: rotate(-180deg); + -o-transform: rotate(-180deg); + -moz-transform: rotate(-180deg); + -webkit-transform: rotate(-180deg); /* -webkit- last so it's used in place of -o- if possible */ + transform: rotate(-180deg); } .avatar { - position: absolute; - left: 2.5em; width: 30px; + margin-bottom: 9px; /* height of #header is 48px, height of avatar is 30px; to vertically center, have margin-bottom of (48px - 30px) / 2 or 9px */ + vertical-align: text-bottom; + padding-right: 0.25em; /* space it out from the username a bit more */ } .no-show { display: none; } .header-menu { padding: 0 0.2em 0.2em 0.2em; margin: 0; z-index: 4; list-style: none; background-color: #000; background-color: rgba(0, 0, 0, 0.8); } .header-menu a { font-size: 14pt; text-decoration: none; display: block; padding: 0.2em 0.4em 0.2em 0.4em; } #user-info .header-menu { right: 0; width: 11em; position: absolute; } #user-info .header-menu a { padding-right: 0.7em; text-align: right; } -#sidebar-shower { +.sidebar-shower { position: absolute; top: 0; - right: -2.75em; + right: -3em; background-color: #194a8d; background-image: url(images/icon-rightbar.png); + background-size: 3em; display: none; -o-transition: right 0.2s ease 0s; -moz-transition: right 0.2s ease 0s; -webkit-transition: right 0.2s ease 0s; /* -webkit- last so it's used in place of -o- if possible */ transition: right 0.2s ease 0s; } #site-info .header-menu { width: 11.6em; position: absolute; top: 3em; left: 0; } #site-info-main { float: left; - margin: auto; width: 12em; height: 3em; } #site-info-main.multiple-wikis .main { width: 10em; + overflow: hidden; + height: 2em; + padding: 0.5em 0; + vertical-align: text-bottom; } #site-info-main a:hover, .site-dropdown-highlighted { background-color: midnightblue; } -#site-info-main a, -#site-info-main a.main img { - height: 2em; -} - #site-info-main a.main { padding: 0.5em 0; display: inline-block; width: 12em; } -#site-info-main a.arrow-link { - position: absolute; - padding-top: 0.9em; - padding-right: 0.5em; - padding-bottom: 0.1em; - padding-left: 0.5em; - display: inline-block; - width: 1em; -} - -#site-info a span { /* for when there is no image, just text */ - font-size: 15pt; - color: white; +#site-info-main .header-button { + width: 2em; } #site-info a { text-align: center; } -#site-info img.arrow { - -o-transition: -o-transform 0.5s; - -moz-transition: -moz-transform 0.5s; - -webkit-transition: -webkit-transform 0.5s; /* -webkit- last so it's used in place of -o- if possible */ - transition: transform 0.5s; - - -ms-transform: rotateZ(0deg); - -o-transform: rotateZ(0deg); - -moz-transform: rotateZ(0deg); - -webkit-transform: rotateZ(0deg); /* -webkit- last so it's used in place of -o- if possible */ - transform: rotateZ(0deg); - - vertical-align: middle; -} - -#site-info img.arrow.rotate { - -ms-transform: rotateZ(180deg); - -o-transform: rotateZ(180deg); - -moz-transform: rotateZ(180deg); - -webkit-transform: rotateZ(180deg); /* -webkit- last so it's used in place of -o- if possible */ - transform: rotateZ(180deg); -} - #site-info-mobile { display: none; height: 2.75em; width: 2.75em; margin-left: 3em; /* 2.75em for sidebar opener, 0.25em of padding */ padding: 0 0.25em; } #site-info-mobile .header-button { display: block; } #search-shower { - /* @embed */ - background-image: url(images/icon-search.png); + position: relative; + float: right; + text-align: center; display: none; } #header .search { width: 11em; + height: 2em; position: static; float: right; margin-right: 0.5em; /* 0.5em right + 0.5em padding = 1em */ top: 0; padding: 0.5em; } -#header .search-open { - -o-transition: opacity 0.2s ease 0s; - -moz-transition: opacity 0.2s ease 0s; - -webkit-transition: opacity 0.2s ease 0s; - transition: opacity 0.2s ease 0s; +#header .search-form { + height: 100%; } #search-closer { - width: 2.75em; - height: 2.75em; - /* @embed */ - background: url(images/icon-close.png) top left no-repeat; - background-size: 2.75em 2.75em; position: absolute; top: 0; right: 0; - cursor: pointer; display: none; z-index: 1; } #searchInput { /* header search box */ border: none; - font-size: 12pt; + font-size: 1em; padding: 0.25em; font-family: Lato, sans-serif; box-sizing: border-box; -webkit-appearance: none; /* prevent Safari from styling input box */ border-radius: 0; /* prevent iOS from adding rounded corners to input box */ width: 11em; + height: 100%; + vertical-align: text-bottom; } #refreshed-toc #toc-box:last-child { display: none; } #preftoc li { display: inline; } #preftoc li:before { content: " - "; } #preftoc li:first-child:before { content: none; } #footer { position: relative; top: 3.5em; text-align: center; padding-bottom: 15px; color: #ccc; } #footer a { color: white; } #footer * { line-height: 1.5; } #footer img { vertical-align: text-top; } #footer #advert { margin-bottom: 1em; /* enough spacing after ad */ } #footer #advert p { margin: 0; } .header-button:hover, .header-button-active, .header-dropdown-item:hover { /* defined at bottom so this overrides individual elements' background-color properties */ background-color: midnightblue; } /******************************** CONTENT/OTHER THINGS BEYOND CONTROL ******************************/ h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica", "Arial", sans-serif; line-height: 1.3; border-color: #ddd; } h2, h3 { font-weight: bold; } h4, h5, h6 { font-weight: normal; } /* Fix for login/signup form pages not displaying in content section */ #userlogin, #userloginForm { float: none; } #localNotice { margin-bottom: 0em !important; } .printfooter { display: none; } #cats { padding: 1em; } #content p:first-of-type { margin-top: 0; } /* stopping wikitables from overflowing, adding .scrollshadow-type scrolling */ #bodyContent .wikitable { overflow-x: auto; display: block; border: 0; /* same as .scrollshadow, but #f9f9f9 instead of white */ background: -webkit-linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)), linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: -webkit-linear-gradient(0deg, #f9f9f9 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)), linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* Search suggestions */ .header-suggestions { /* there are two .suggestions elements on Special:Search; we only want to apply the CSS to the .suggestions element that appears beneath the header, which is given the .header-suggestions class in refreshed.js */ z-index: 10000 !important; position: fixed !important; top: 2.5em !important; /* there is some JS doing odd stuff, this forces our value */ } /* Category links */ #catlinks { background: none; margin: 0 0.9em -.5em 0.9em; padding: 0; border: 0; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .catlinks li { border-color: #ddd; } /* refresh-ify postedit, reset all the shadows and stuff */ .postedit { font-family: "Lato", sans-serif !important; font-size: 1.1em !important; line-height: 1em !important; top: 3px !important; border: none !important; -webkit-text-shadow: none !important; -moz-text-shadow: none !important; text-shadow: none !important; border-radius: 0px !important; box-shadow: none !important; } /* Fix funky diff padding to make diffs fully readable */ td.diff-addedline .diffchange, td.diff-deletedline .diffchange { padding: 0; } /* Better line spacing on recent changes */ table.mw-enhanced-rc { line-height: 1.5em; } /* "Updated since your last visit" marker on the page history of pages that are on your watchlist */ span.updatedmarker { background-color: #0f0; color: #000; } /* [[MediaWiki:Noarticletext]] (the notice shown on nonexistent pages) */ div.noarticletext { border: 1px solid #ccc; background: #fff; color: #000; padding: 0.2em 1em; } /* Extension:Echo fixes */ #pt-mytalk a.mw-echo-alert { /* "you have new messages" alert in the personal tools dropdown */ white-space: normal; color: #555555 !important; /* 6 digits instead of 3 because Echo's CSS uses 6 to define the color in the standard state (!important to override color on hover) */ } .pt-mytalk a.mw-echo-alert:hover { background-color: #FAB951; } #pt-notifications-personaltools { /* "Notifications" item in the personal tools dropdown */ display: none; } #pt-notifications { display: inline; float: right; margin: 0.9em 0 0 0; } .mw-echo-overlay { position: fixed !important; z-index: 999999 !important; width: 20em !important; top: 3em !important; left: auto !important; right: 1em !important; } .mw-echo-overlay:before, .mw-echo-overlay::before { left: 114px !important; /* centering dropdown arrow on notifications badge */ } /* stopping images on file pages from overflowing */ .fullImageLink img { max-width: 100%; height: auto; } diff --git a/refreshed/medium.css b/refreshed/medium.css index b77a2ac..6d72d0f 100644 --- a/refreshed/medium.css +++ b/refreshed/medium.css @@ -1,169 +1,167 @@ /* anything between 601px and 1000px - tablets, big phones in landscape, very small laptops */ #sidebar-wrapper { width: 10em; left: 0 !important; /* preventing sidebar from moving left of viewport if not on mobile */ } #sidebar { font-size: 11pt; } #sidebar li { padding-top: 0.1em; } #content, #footer { margin-left: 10em; margin-right: 1em; } #small-toolbox-wrapper { display: none; } #header-categories { display: none; } #firstHeading h1 { white-space: nowrap; font-size: 2.25em; overflow-x: scroll; } .scroll-shadow { background: -webkit-linear-gradient(90deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: -webkit-linear-gradient(0deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background-repeat: no-repeat; -webkit-background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .fixed-toolbox { width: -webkit-calc(100% - 11.4em); width: calc(100% - 11.4em); margin-left: 10em; } #header .search { - background: midnightblue; - width: 15em; - opacity: 0; - z-index: 0; + width: auto; + height: 3em; + padding: 0; + margin-right: 1em; +} + +#header .search-form { + display: block; position: absolute; top: 3em; right: 1em; - margin-right: 0; -} - -#header .search-open { - opacity: 1; + padding: 0.5em; + width: 15em; + height: auto; /* overriding 100% in main.css (used to center search bar on big) */ + background-color: midnightblue; } #searchInput { /* header search box */ width: 100%; + height: auto; /* overriding 100% in main.css (used to center search bar on big) */ font-size: 16pt; /* enlarging and preventing zoom on input on focus */ - display: none; /* default to hidden (will be shown by adding .search-open class to #search) */ -} - -.search-open #searchInput { - display: block; } #search-shower { - position: relative; display: block; - float: right; - margin-right: 1em; + visibility: visible; /* for the small version of the header search to work, the .faded class is added to .search-shower when it's clicked; this overrides it since we always want the icon visible on medium */ + opacity: 1; } #searchText, #powerSearchText { /* search and advanced search boxes on Special:Search */ font-size: 18px; } #mw-search-top-table { text-align: center; /* center the search/advanced search boxes and submit button on Special:Search */ } #mw-searchoptions td { display: block; /* set each namespace under the advanced search preferences on its own line to prevent overflow (but if there's enough room it'll expand so there's two per line) */ } .searchresult { max-width: 100%; /* prevent search results from overflowing */ } #siteSub { display: none !important; } /* Hide ads on mobile until mobile ads are implemented */ #advert { display: none; } .header-suggestions { top: 6.5em !important; /* 3em for the header, 3.5em for the search bar */ right: 1em !important; width: 16em !important; font-size: 16px !important; border: 0 !important; margin-top: -3px !important; /* getting rid of gap between suggestions and search box */ } .header-suggestions div { font-size: 16pt !important; } /* Extension:Echo fixes */ #pt-notifications { margin-right: 0.75em; } .mw-echo-overlay:before, .mw-echo-overlay::before { left: 238px !important; /* centering dropdown arrow on notifications badge */ } /* Image thumbnails */ .thumb { width: 100% !important; margin: 0 !important; } div.thumbinner { /* need to specify div so it can overwrite the CSS in commonContent.css */ width: auto !important; padding: 0.75em 0 !important; margin-bottom: 0.5em; } .thumbinner img { width: 50%; height: auto; border: 0 !important; } .thumbcaption { text-align: center !important; margin-bottom: -.75em !important; } .magnify { display: none; } diff --git a/refreshed/refreshed.js b/refreshed/refreshed.js index adbc68d..ed6557d 100644 --- a/refreshed/refreshed.js +++ b/refreshed/refreshed.js @@ -1,413 +1,276 @@ /* global $ */ window.Refreshed = { standardToolboxIsDocked: false, standardToolboxInitialOffset: $( '.standard-toolbox' ).offset().top, scrollHeaderHasBeenGenerated: false, usingIOS: false, thresholdForSmallCSS: 601, windowStartedSmall: false, thresholdForBigCSS: 1001, - searchDropdownOpen: false, - userToolsOpen: false, - siteNavOpen: false, windowIsBig: false, windowIsSmall: false, widthOfSpecialSearchBar: 0, widthOfSpecialSearchPowerSearchBar: 0, - sidebarOpen: false, + headerSearchIsOpen: false, + sidebarIsOpen: false, flyOutScrollHeader: function() { if ( $( '#content' ).height() > $( window ).height() - $( '#header' ).height() && !Refreshed.standardToolboxIsDocked && ( $( '.static-toolbox' ).offset().top - $( document ).scrollTop() - $( '#header' ).height() < 0 ) ) { - // first condition: only move the scroll header if the article + // first boolean in condition: only move the scroll header if the article // content is bigger than the page (i.e. preventing it from being // triggered when a user "rubber band scrolls" in OS X for example) //$( '.fixed-toolbox' ).animate({'top': $( '#header' ).height()}); $( '.fixed-toolbox' ).addClass( 'dropdown-open' ); Refreshed.standardToolboxIsDocked = true; $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeOut(); } else if ( Refreshed.standardToolboxIsDocked && $( document ).scrollTop() + $( '#header' ).height() <= Refreshed.standardToolboxInitialOffset ) { Refreshed.standardToolboxIsDocked = false; //$( '.fixed-toolbox' ).animate({'top': -$( '.fixed-toolbox' ).height()}); $( '.fixed-toolbox' ).removeClass( 'dropdown-open' ); $( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeOut(); } }, generateScrollHeader: function() { $( '.static-toolbox' ).clone().removeClass( 'static-toolbox' ).addClass( 'fixed-toolbox' ).insertBefore( '#sidebar-wrapper' ); //$( '.fixed-toolbox' ).css({'top': -$( '.fixed-toolbox' ).height()}); if ( $( '.fixed-toolbox' ).outerWidth() != $( '#bodyContent' ).outerWidth() ) { // if standard-toolboxoverlay hasn't has its width set by CSS calc $( '.fixed-toolbox' ).css({'width': $( '#bodyContent' ).outerWidth() - ( $( '.fixed-toolbox' ).outerWidth() - $( '.fixed-toolbox' ).width() )}); // set .fixed-toolbox's width to the width of #bodyContentminus .fixed-toolbox's padding (and border, which is 0) } Refreshed.scrollHeaderHasBeenGenerated = true; }, resizeScrollHeader: function() { // set .fixed-toolbox's width to the width of #bodyContentminus .fixed-toolbox's padding (and border, which is 0) $( '.fixed-toolbox' ).css({'width': $( '#bodyContent' ).outerWidth() - ( $( '.fixed-toolbox' ).outerWidth() - $( '.fixed-toolbox' ).width() )}); }, resizeSpecialSearchBar: function() { if ( !Refreshed.windowIsBig && !Refreshed.windowIsSmall ) { // if running medium.css // set width of search bar to 100% of #bodyContent- "__ of __ results" text - width of submit button - width - 1em in the search bar Refreshed.widthOfSpecialSearchBar = $( '#bodyContent' ).width() - $( '.results-info' ).outerWidth() - $( '#bodyContent #search input[type="submit"]' ).outerWidth() - parseFloat( $( '#searchText' ).css( 'font-size' ) ); Refreshed.widthOfSpecialSearchPowerSearchBar = $( '#bodyContent' ).width() - $( '.results-info' ).outerWidth() - $( '#bodyContent #powersearch input[type="submit"]' ).outerWidth() - parseFloat( $( '#powerSearchText' ).css( 'font-size' ) ); } else if ( Refreshed.windowIsSmall ) { // if running small.css //set width of search bar to 100% of #bodyContent - width of submit button - width - 1em in the search bar Refreshed.widthOfSpecialSearchBar = $( '#bodyContent' ).width() - $( '#bodyContent #search input[type="submit"]' ).outerWidth() - parseFloat( $( '#searchText' ).css( 'font-size' ) ); Refreshed.widthOfSpecialSearchPowerSearchBar = $( '#bodyContent' ).width() - $( '#bodyContent #powersearch input[type="submit"]' ).outerWidth() - parseFloat( $( '#powerSearchText' ).css( 'font-size' ) ); } $( '#searchText' ).css({'width': Refreshed.widthOfSpecialSearchBar}); $( '#powerSearchText' ).css({'width': Refreshed.widthOfSpecialSearchPowerSearchBar}); }, showHideOverflowingDropdowns: function() { $( '.page-item-has-children' ).each(function( ) { if ( $( this ).offset().top > $( '#header' ).height() + $( '#header' ).offset().top ) { //if the .page-item is beneath the bottom of the header (and so it's cut off by overflow:hidden) $( this ).children( '.children' ).css({'display': 'none'}); $( this ).removeClass( 'header-button-active' ); - $( this ).children( '.clickable-region' ).children( '.arrow' ).removeClass( 'rotate' ); + $( this ).children( '.header-button' ).children( '.arrow' ).removeClass( 'rotate' ); } - } ); + }); + }, + + toggleFade: function( trigger ) { + $( trigger ).siblings( '.fadable' ).addBack( '.fadable' ).toggleClass( 'faded' ); + $( trigger ).children( '.arrow' ).toggleClass( 'rotate' ); + if ( $( trigger ).hasClass( 'header-button' ) ) { + $( trigger ).toggleClass( 'header-button-active' ); + } + }, + + toggleHeaderSearch: function() { + $( '.sidebar-shower' ).toggleClass( 'sidebar-shower-hidden' ); + $( '#fade-overlay' ).toggleClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay + if ( Refreshed.windowIsSmall ) { // On small, because #search-shower is replaced by #search-closer and vice-versa instead of the buttons appearing active, they take on the .header-button-active class when they shouldn't; this gets rid of it. On medium there's only #search-shower, so it functions properly and the class shouldn't be removed. + $( '#search-shower' ).removeClass( 'header-button-active' ); + $( '#search-closer' ).removeClass( 'header-button-active' ); + } + $( '#searchInput' ).val( '' ).focus(); + Refreshed.headerSearchIsOpen = !Refreshed.headerSearchIsOpen; + }, + + toggleSidebar: function() { + $( '#sidebar-wrapper' ).toggleClass( 'sidebar-open' ); + $( '#fade-overlay' ).toggleClass( 'fade-overlay-active' ); // toggle the fade overlay + $( '.sidebar-shower' ).toggleClass( 'header-button-active' ); + Refreshed.sidebarIsOpen = !Refreshed.sidebarIsOpen; } }; $( document ).ready( function() { if ( navigator.userAgent.toLowerCase().match( /(iPad|iPhone|iPod)/i ) ) { // detect if on an iOS device Refreshed.usingIOS = true; } if ( $( window ).width() < Refreshed.thresholdForSmallCSS ) { Refreshed.windowStartedSmall = true; } // test if window is running big.css if ( $( window ).width() >= Refreshed.thresholdForBigCSS ) { Refreshed.windowIsBig = true; } else { Refreshed.windowIsBig = false; } // test if window is running small.css if ( $( window ).width() <= Refreshed.thresholdForSmallCSS ) { Refreshed.windowIsSmall = true; } else { Refreshed.windowIsSmall = false; } Refreshed.resizeSpecialSearchBar(); if ( !Refreshed.usingIOS && !Refreshed.windowStartedSmall ) { // only perform if not on an iOS device (animations triggered by scroll // cannot be played during scroll on iOS Safari) and if the window was // running small.css when loaded Refreshed.generateScrollHeader(); Refreshed.flyOutScrollHeader(); } $( window ).scroll( function() { Refreshed.flyOutScrollHeader(); - } ); + }); $( window ).resize( function() { if ( Refreshed.scrollHeaderHasBeenGenerated && $( '.fixed-toolbox' ).outerWidth() != $( '#bodyContent' ).outerWidth() ) { // only perform if the scroll header has already been generated and // it needs to be resized (not already done by CSS calc) Refreshed.resizeScrollHeader(); } if ( $( window ).width() >= Refreshed.thresholdForBigCSS ) { Refreshed.windowIsBig = true; } else { Refreshed.windowIsBig = false; } if ( $( window ).width() <= Refreshed.thresholdForSmallCSS ) { Refreshed.windowIsSmall = true; } else { Refreshed.windowIsSmall = false; } Refreshed.resizeSpecialSearchBar(); Refreshed.showHideOverflowingDropdowns(); - } ); - - /* tools dropdown attached to firstHeading */ - $( '#firstHeading > .standard-toolbox #toolbox-link' ).on( { - 'click': function() { - if ( !$( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) { - $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeIn(); - } - $( this ).children().toggleClass( 'rotate' ); - }, - 'hover': function() { - $( this ).children().toggleClass( 'no-show' ); - } - } ); - - $( document ).mouseup( function ( e ) { - if ( $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) { - if ( - !$( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( e.target ) && - $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).has( e.target ).length === 0 - ) - { - // if the target of the click isn't the container and isn't a descendant of the container - $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeOut(); - } - } - } ); - - /* tools dropdown on the "scroll header" */ - $( '.fixed-toolbox #toolbox-link' ).on( { - 'click': function() { - if ( !$( '.fixed-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) { - $( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeIn(); - } - $( this ).children().toggleClass( 'rotate' ); - }, - 'hover': function() { - $( this ).children().toggleClass( 'no-show' ); - } - } ); - - $( document ).mouseup( function ( e ) { - if ( $( '.fixed-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) { - if ( - !$( '.fixed-toolbox .standard-toolbox-dropdown' ).is( e.target ) && - $( '.fixed-toolbox .standard-toolbox-dropdown' ).has( e.target ).length === 0 - ) - { - // if the target of the click isn't the container and isn't a descendant of the container - $( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeOut(); - } - } - } ); + }); + /** + * The "clickOrTouchend" function does as it sounds. If it can (i.e. you're on a touch screen), + * it performs touchend. Otherwise, it performs mouseup. Based on experience, it seems touchend + * has less latency than mouseup does on mobile devices. This function aims to reduce that latency. + */ $.fn.extend( { - clickOrTouch: function( handler ) { + clickOrTouchend: function( handler ) { return this.each( function() { - var event = ( 'ontouchend' in document ) ? 'touchend' : 'mouseup'; + var event = ( 'ontouchend' in document ) ? 'touchend' : 'click'; $( this ).on( event, handler ); - } ); - } - } ); - - /* search dropdown */ - $( '#search-shower' ).click( function() { // Unfortunately, touchend causes the search bar to lose focus on iPhones on iOS 7 and iPads on iOS 8 (haven't tested on Android), but it keeps its focus if you used the standard click event. The other menus, etc. use "touchOrClick" b/c the touchend event executes faster than the standard click on iOS (once again, haven't tested on Android). - if ( !Refreshed.searchDropdownOpen ) { - if ( Refreshed.usingIOS ) { - $( window ).scrollTop( 0 ); // iOS tries to vertically center the search bar, scrolling to the top keeps the header at the top of the viewport - } - $( '#header .search' ).addClass( 'search-open' ); - $( '#sidebar-shower' ).addClass( 'sidebar-shower-hidden' ); - $( '#fade-overlay' ).addClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay - $( '#searchInput' ).focus(); - $( this ).toggleClass( 'header-button-active' ); - Refreshed.searchDropdownOpen = true; - } else { - // this only runs in "medium" mode (the search dropdown only - // appears in "medium" and "small" mode, and "small" is covered - // by the document.click function below) - $( '#header .search' ).removeClass( 'search-open' ); - $( '#sidebar-shower' ).removeClass( 'sidebar-shower-hidden' ); - $( '#searchInput' ).blur().val( '' ); // deselect the search input and reset its contents (remove anything the user entered) - $( '#fade-overlay' ).removeClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay - $( '#search-shower' ).removeClass( 'header-button-active' ); - Refreshed.searchDropdownOpen = false; // no delay needed because the spamming issue is only present on "small" - } - } ); - - $( document ).click( function ( e ) { // if you use clickOrTouch, pressing the .suggestions element will cause the window to close on mobile (maybe the clickOrTouch section is executed before a plain click and thus this is run and .search is hidden before the broswer acknowledges the click event on .suggestions to load the searched-for page?) - if ( Refreshed.searchDropdownOpen && $( window ).width() < Refreshed.thresholdForBigCSS ) { // window size must be checked because we only want to hide the search bar if we're not in "big" mode - if ( - !$( '#header .search' ).is( e.target ) && - !$( '#search-shower' ).is( e.target ) && - !$( '.search input' ).is( e.target ) - ) - { - // if the target of the click isn't the search container, - // search button, or the search box itself (we can't set it to - // all descendants of .search because #search-closer needs to - // be able to close the search box) - $( '#header .search' ).removeClass( 'search-open' ); - $( '#sidebar-shower' ).removeClass( 'sidebar-shower-hidden' ); - $( '#searchInput' ).blur().val( '' ); // deselect the search input and reset its contents (remove anything the user entered) - $( '#fade-overlay' ).removeClass( 'fade-overlay-active fade-overlay-below-header' ); //toggle the fade overlay - $( '#search-shower' ).removeClass( 'header-button-active' ); - // delay variable change for 375ms until after the animation is - // complete so both animations don't run on one press - setTimeout( function () { - Refreshed.searchDropdownOpen = false; - }, 375 ); - } + }); } - } ); - - /* user tools dropdown */ - $( '#user-info > a' ).clickOrTouch( function() { - if ( !$( '#user-info .header-menu' ).is( ':visible' ) ) { - $( '#user-info .header-menu' ).fadeIn(); - $( this ).addClass( 'header-button-active' ); - $( '#user-info .arrow' ).addClass( 'rotate' ); - // delay the second clickOrTouch function (which performs fadeOut) - // to stop fadeIn and fadeOut on one click (also prevents user from - // spamming so it constantly fades in/out) - setTimeout( function () { - Refreshed.userToolsOpen = true; - }, 300 ); - } - } ); - - $( document ).clickOrTouch( function ( e ) { - if ( $( '#user-info .header-menu' ).is( ':visible' ) ) { - if ( - Refreshed.userToolsOpen && - !$( '#user-info .header-menu' ).is( e.target ) && - $( '#user-info .header-menu' ).has( e.target ).length === 0 - ) - { - // if the target of the click isn't the button, the container, or a descendant of the container - $( '#user-info > a' ).removeClass( 'header-button-active' ); - $( '#user-info .header-menu' ).fadeOut(); - $( '#user-info .arrow' ).removeClass( 'rotate' ); - Refreshed.userToolsOpen = false; + }); + + /** + * Functions for showing/hiding dropdown menus. Preconditions: + * 1) the menu must have classes "fadable" and "faded" to start + * 2) the button triggering the menu must have class "fade-trigger" + * 3) the menu and the button must be siblings + */ + $( '.fade-trigger' ).clickOrTouchend( function() { + Refreshed.toggleFade( this ); + }); + + $( document ).clickOrTouchend( function( e ) { + $( '.fadable:not( .fade-trigger ):not( .faded )' ).each( function () { // targeting all dropdowns (i.e., fadable elements that aren't fadable themselves [since ones that are fadable are the #search-shower and #search-closer]) + if ( !$( e.target ).closest( $( this ).parent() ).length ) { // if starting from the event target (this, a child of this, or .fade-trigger) and doing up the DOM you do not run into this element's parent (so if this, a child of this, or .fade-trigger was not the target of the click) + Refreshed.toggleFade( $( this ).siblings( '.fade-trigger' ) ); } + }); + // the below if statements control hiding the search header and dropdown. These are included here so only 1 document clickOrTouchend function is required instead of 3. + if ( Refreshed.headerSearchIsOpen && !$( e.target ).closest( '#header .search' ).length && !$( e.target ).closest( '.header-suggestions' ).length ) { // we do this check instead of checking if the user pressed #fade-overlay because #fade-overlay can disappear if you resize, and then if you click off afterward you still want to hide the menu, etc. even if #fade-overlay is no longer visible + Refreshed.toggleHeaderSearch(); } - } ); - - /* site navigation dropdown */ - $( '#site-info-main a.arrow-link' ).clickOrTouch( function() { - if ( !$( '#site-info .header-menu' ).is( ':visible' ) ) { - $( '#site-info .header-menu' ).fadeIn(); - $( '#site-info-main a.arrow-link' ).addClass( 'header-button-active' ); - $( '#site-info .arrow' ).addClass( 'rotate' ); - // delay the second clickOrTouch function (which performs fadeOut) - // to stop fadeIn and fadeOut on one click (also prevents user from - // spamming so it constantly fades in/out) - setTimeout( function () { - Refreshed.siteNavDropdown = true; - }, 300 ); + if ( Refreshed.sidebarIsOpen && !$( e.target ).closest( '#sidebar-wrapper' ).length ) { + Refreshed.toggleSidebar(); } - } ); - - $( document ).clickOrTouch( function ( e ) { - if ( $( '#site-info .header-menu' ).is( ':visible' ) ) { - if ( - Refreshed.siteNavDropdown && - !$( '#site-info .header-menu' ).is( e.target ) && - $( '#site-info .header-menu' ).has( e.target ).length === 0 - ) - { - // if the target of the click isn't the container and isn't a descendant of the container - $( '#site-info .header-menu' ).fadeOut(); - $( '#site-info-main a.arrow-link' ).removeClass( 'header-button-active' ); - $( '#site-info .arrow' ).removeClass( 'rotate' ); - Refreshed.siteNavDropdown = false; - } - } - } ); - - /* mobile sidebar */ - $( '#sidebar-shower' ).clickOrTouch( function() { - //if (!Refreshed.sidebarOpen) { - $( '#sidebar-wrapper' ).toggleClass( 'sidebar-open' ); - $( '#sidebar-shower' ).toggleClass( 'sidebar-open' ); - $( '#fade-overlay' ).toggleClass( 'fade-overlay-active' ); // toggle the fade overlay - Refreshed.sidebarOpen = !Refreshed.sidebarOpen; - $( this ).toggleClass( 'header-button-active' ); - //} - } ); - - $( document ).clickOrTouch( function ( e ) { - if ( Refreshed.sidebarOpen && $( '#fade-overlay').is( e.target ) ) { // if the sidebar is out and the target of the click is the fade-overlay - $( '#sidebar-wrapper' ).removeClass( 'sidebar-open' ); - $( '#sidebar-shower' ).removeClass( 'sidebar-open' ); - $( '#fade-overlay' ).removeClass( 'fade-overlay-active' ); // deactivate the fade overlay - Refreshed.sidebarOpen = false; - $( '#sidebar-shower' ).removeClass( 'header-button-active' ); + }); + + /* header search on medium and small */ + $( '#search-shower' ).clickOrTouchend( function() { + if ( Refreshed.usingIOS ) { + $( window ).scrollTop( 0 ); // iOS tries to vertically center the search bar, scrolling to the top keeps the header at the top of the viewport } - } ); + Refreshed.toggleHeaderSearch(); + }); + + $( '#search-closer' ).clickOrTouchend( function() { + Refreshed.toggleHeaderSearch(); + }); + + /* sidebar on medium and small */ + $( '.sidebar-shower' ).clickOrTouchend( function() { + Refreshed.toggleSidebar(); + }); - $( '#small-tool-more' ).clickOrTouch( function() { + /* expanding the mobile */ + $( '#small-tool-more' ).clickOrTouchend( function() { $( '.small-toolbox' ).addClass( 'small-toolbox-expanded scroll-shadow' ); $( this ).css({'display': 'none'}); - } ); + }); - $( '#icon-ca-watch, #icon-ca-unwatch' ).parent().clickOrTouch( function( e ) { + $( '#icon-ca-watch, #icon-ca-unwatch' ).parent().clickOrTouchend( function( e ) { // AJAX for watch icons var action, api, $link, title, otherAction; e.preventDefault(); e.stopPropagation(); title = mw.config.get( 'wgRelevantPageName', mw.config.get( 'wgPageName' ) ); mw.loader.load( ['mediawiki.notification'], null, true ); action = mw.util.getParamValue( 'action', this.href ); otherAction = action === 'watch' ? 'unwatch' : 'watch'; $link = $( this ); $( 'div', this ).attr( 'id', 'icon-ca-' + otherAction ); $( this ).attr( 'href', this.href.replace( action, otherAction ) ); api = new mw.Api(); api[action]( title ) .done( function ( watchResponse ) { mw.notify( $.parseHTML( watchResponse.message ), { tag: 'watch-self' - } ); + }); $( '#wpWatchthis' ).prop( 'checked', watchResponse.watched !== undefined ); - } ); - } ); - - /* user tools dropdown */ - $( '.page-item-has-children .clickable-region' ).clickOrTouch( function( e ) { - // hide all the other page item dropdowns if they are visible - $( '.page-item-has-children .children' ).fadeOut( 200 ); - $( '.page-item-has-children' ).removeClass( 'header-button-active' ); - $( '.page-item-has-children .arrow' ).removeClass( 'rotate' ); - if ( !$( this ).siblings( '.children' ).is( ':visible' ) ) { - $( this ).siblings( '.children' ).fadeIn( 200 ); - $( this ).parent().addClass( 'header-button-active' ); - $( this ).children( '.arrow' ).addClass( 'rotate' ); - } - } ); - - $( document ).clickOrTouch( function ( e ) { - if ( $( '.page-item-has-children .children' ).is( ':visible' ) ) { - if ( $( '.page-item-has-children' ).has( e.target ).length === 0 ) { // if the target of the click isn't the button, the container, or a descendant of the container - $( '.page-item-has-children .children' ).fadeOut( 200 ); - $( '.page-item-has-children' ).removeClass( 'header-button-active' ); - $( '.page-item-has-children .arrow' ).removeClass( 'rotate' ); - } - } - } ); + }); + }); + /** - * add "header-suggestions" class to first .suggestions element for CSS - * targeting (there is usually one .suggestions element, but on Special:Search - * there is one for the #header search bar and one for the #bodyContentsearch bar) + * Add "header-suggestions" class to first .suggestions element for CSS + * targeting. There is usually one .suggestions element, but on Special:Search + * there is one for the #header search bar and one for the #bodyContentsearch bar. + * We only want to target the one for the #header search bar. */ setTimeout( function () { // wait a bit so the .suggestions elements can be added in (if we don't wait we'll be targeting nothing and it won't work)... $( '.suggestions' ).first().addClass( 'header-suggestions' ); // add class to first .suggestions element }, 100 ); -} ); +}); /* Fix for Echo in Refreshed */ if ( document.getElementById( 'echo' ) ) { $( '#pt-notifications' ).prependTo( '#echo' ); } if ( $( '.mw-echo-notifications-badge' ).hasClass( 'mw-echo-unread-notifications' ) ) { $( '#pt-notifications-personaltools a' ).addClass( 'pt-notifications-personaltools-unread' ); } diff --git a/refreshed/small.css b/refreshed/small.css index bae3fee..99db6a4 100644 --- a/refreshed/small.css +++ b/refreshed/small.css @@ -1,440 +1,433 @@ /* anything 600px and under - phones */ +.header-button .wikiglyph { + line-height: 2.75em; + height: 2.75em; /* line-height and height equal to the parent's height (3em) plus vertical-align:text-bottom in wikiglyphs.css vertically centers the icons */ +} + +.header-button .wikiglyph:before { + font-size: 2.75em; /* ...however, the actual glyph has a more appropriate font size of 3em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */ +} + .fade-overlay-active { opacity: 0.5 !important; z-index: 10001; /* very high value to guarantee no elements on wikis will appear above it (except the sidebar) */ cursor: pointer; } .fade-overlay-below-header { z-index: 10000 !important; /* below header but above page content (used for search) */ cursor: pointer; } #header { height: 2.75em; } #sidebar-wrapper { position: fixed; background: midnightblue; left: -15em; width: 15em; top: 0; z-index: 10002; /* appear above fade-overlay, which has z-index 10001 */ -o-transition: 0.2s ease; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */ transition: 0.2s ease; } .sidebar-open { left: 0; -ms-transform: translateX(15em); -o-transform: translateX(15em); -moz-transform: translateX(15em); -webkit-transform: translateX(15em); /* -webkit- last so it's used in place of -o- if possible */ transform: translateX(15em); } #sidebar { top: 2.75em; font-size: 13pt; } #sidebar a:hover { border: 0; margin-left: 5px; } .header-button { width: 2.75em; height: 2.75em; - background-size: 2.75em 2.75em; + padding: 0; + text-align: center; } -#sidebar-shower { +.sidebar-shower { display: block; + background-size: 2.75em; + right: -2.75em; } .sidebar-shower-hidden { right: 0 !important; } #sidebar-logo { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2.75em; text-align: center; padding: 0.5em 0; } #site-info-main { display: none; } #site-info-main .arrow-link { display: none !important; } #site-info-main:hover, #site-info-main a, #site-info-main a:hover { background: none; } #site-info-mobile { display: inline-block; } #header .search { - background: midnightblue; - width: 100%; - position: absolute; - top: 0; - left: 0; - opacity: 0; - padding: 0.25em 0; - z-index: 0; -} - -#header .search-open { - z-index: 2; /* The notifications badge has a z-index of 1, this puts the search above it */ - opacity: 1; + width: 2.75em; + height: 2.75em; + padding: 0; + margin-right: 0; } #search-closer { display: block; } -#header .search form { - margin-right: 3em; - margin-left: 0.25em; +#header .search-form { + width: calc(100% - 3.25em); /* 100% - 2.75em for the close search button -0.25em of padding-left -0.25em of padding-right */ + height: calc(100% - 0.5em); /* 100% -0.25em of padding-top - .35em of padding-bottom */ + position: absolute; + top: 0; + left: 0; + padding: 0.25em; + z-index: 1; /* appear over the user icon, which doesn't have a specified z-index */ } #searchInput { /* header search box */ width: 100%; - font-size: 18px; - float: left; - height: 2em; /* (2.75em [height of header] - 0.5em [top + bottom padding of .search]) * (16px [font size of #header and .search] / 18px [font size of .search input]) */ - display: none; /* default to hidden (will be shown by adding .search-open class to .search) */ + height: 100%; + font-size: 1.25em; } .search-open #searchInput { display: block; } #search-shower { display: block; - position: absolute; - top: 0; - right: 0; + margin-right: 0; } #searchText, #powerSearchText { /* search and advanced search boxes on Special:Search */ font-size: 18px; } #mw-search-top-table { text-align: center; /* center the search/advanced search boxes and submit button on Special:Search */ } .search-types { width: 100%; /* break search types into 2 columns so the last item doesn't fall onto the next row on very small screens */ } .search-types li { width: 50%; } #mw-searchoptions td { display: block; /* set each namespace under the advanced search preferences on its own line to prevent overflow (but if there's enough room it'll expand so there's two per line) */ } .searchresult { max-width: 100%; /* prevent search results from overflowing */ } -#user-info { - position: absolute; - top: 0; - right: 3em; /* search is 2.75em, 0.25em of padding */ - margin: 0; - width: 2.75em; - height: 2.75em; -} - #user-info .header-button { + width: 2.75em; padding: 0; - height: 2.75em; } -#user-info .arrow { +#user-info .arrow, +.username { display: none; } .avatar { top: 7px; /* avatar is 30px, header is 44px */ left: 0.5em; } -.avatar-none { - display: block; -} - -#user-info > a { - padding: 0; - height: 2.75em; -} - -#user-info > a span { - display: none; -} - #user-info .header-menu { top: 2.75em; background-color: midnightblue; padding: 0.15em 0 0.15em 0; } #user-info .header-menu a { text-align: left; padding-left: 15px; font-weight: normal; } #user-info .header-menu a:hover { color: #CCC; } #user-info .header-menu a.new:hover { color: #f47d64; } #site-info .header-menu img { font-size: 16px; /* resetting font size for logos in menu so they are the same height as the one outside the menu */ } #content { top: 2.75em; } #header-categories { display: none; } #firstHeading { position: relative; font-size: 0.9em; padding: 0 1em; width: auto; } #firstHeading h1 { overflow-x: auto; white-space: nowrap; border: 0; margin: 0; padding: 0; font-size: 2.25em; } .mw-indicator { display: none !important; /* to unset an individual indicator add the following: #mw-indicator-name { display: inline-block !important; } replacing "name" with the assigned name of the indicator */ } .scroll-shadow { background: -webkit-linear-gradient(90deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: -webkit-linear-gradient(0deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background: linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .standard-toolbox { display: none; } #main-title-messages { display: none; } #back-to-subject { display: block; } #small-toolbox-wrapper { position: relative; display: block; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; margin: 0 0.9em 0.75em 0.9em; /* left/right: 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */ overflow-y: hidden; } .small-toolbox { position: relative; font-size: 2.75em; - width: 3.75em; /* needs 1em for three icons plus .25em of padding to the right of each icon, so 3.75em */ + width: 3.75em; /* needs 1em for three icons plus0.25em of padding to the right of each icon, so 3.75em */ height: 1em; overflow-y: hidden; /* wikiglyphs have a bit too much bottom padding; with 1em height they're centered but you can scroll vertically, this stops the vertical scroll */ white-space: nowrap; overflow: hidden; display: inline-block; -o-transition: width 0.2s ease; -moz-transition: width 0.2s ease; -webkit-transition: width 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */ transition: width 0.2s ease; } .small-toolbox-expanded { width: 100%; overflow-x: auto; } a.small-tool { /* inclusion of the "a" is necessary to override the standard a element font color without using !important */ font-size: 1em; width: 1em; height: 1em; color: #000; display: inline-block; - padding-right: .25em; + padding-right: 0.25em; } .small-tool:hover { opacity: 0.5; } /* CONTENT AREA ********************************************/ .nosmall, .articleFeedbackv5 { display: none !important; } /* Hide ads on mobile until mobile ads are implemented */ #advert { display: none; } /* Suggestions box under search */ .header-suggestions { top: 2.75em !important; left: 0 !important; width: 100% !important; font-size: 16px !important; z-index: 10001 !important; /* place above #fade-overlay, which has z-index of 10000 because it has the .fade-overlay-below-header class */ } .header-suggestions div { font-size: 16pt; } .header-suggestions .suggestions-result { padding: 0.5em 0.25em !important; border-bottom: 1px solid #ddd; } +.header-suggestions .suggestions-result:hover, +.header-suggestions .suggestions-special:hover { /* making search suggestions change color when focused (e.g., tapped on mobile); this CSS is adapted from the .suggestions-result-current class */ + background-color: #4C59A6; + color: white; +} + +.header-suggestions .suggestions-special:hover div { + color: white; /* for whatever reason it doesn't want to have white text unless this is added too */ +} + .header-suggestions .suggestions-special { padding: 0.5em 0.25em !important; margin-top: 0 !important; border: 0 !important; border-bottom: 1px solid #ddd !important; } .header-suggestions .suggestions-results { border: 0 !important; } /* Extension:Echo fixes */ #pt-mytalk a.mw-echo-alert { /* "you have new messages" alert in the personal tools dropdown */ margin: 0.1em; } #pt-notifications-personaltools { /* "Notifications" item in the personal tools dropdown */ display: list-item; } .pt-notifications-personaltools-unread { background-color: #cc0000; color: #fff; border-radius: 2px; /* matching the notification badge itself and the "you have new messages" notice, which both have border-radius */ margin: 0.1em; } .pt-notifications-personaltools-unread:hover { background-color: #bf0000 !important; } #pt-notifications { position: absolute; margin: 0; top: 0; /* the container height is greater than that of the notification button itself so this still leaves some space above the button */ right: 2.9em; /* 2.75em for the search button, 0.25em of padding within user button */ max-width: 2.25em; /* 2.75em (width of user button) - 0.25em of padding on each side */ z-index: 1; /* above user button */ padding: 0; width: auto; pointer-events: none; /* prevent click event (stop notifications dropdown from appearing on click) */ } .mw-echo-notifications-badge { font-size: 0.5em; min-width: 3.5px; /* min-width of 7px * 0.5em (stops badge from looking too wide when it contains a single-digit number) */ max-width: 2.25em; /* (2.75em (width of user button) - 0.25em of padding on each side) * 2 because the font size is 0.5em */ overflow: hidden; display: none; /* hide if there are no noticiations */ } .mw-echo-unread-notifications { display: inline; } .mw-echo-overlay { display: none; /* if pointer-events isn't supported (so #mw-echo-overlay is generated when the notifications badge is clicked), hide #mw-echo-overlay so it's not visible */ } /* Image thumbnails */ .thumb { width: 100% !important; margin: 0 !important; } div.thumbinner { /* need to specify div so it can overwrite the CSS in commonContent.css */ width: auto !important; padding: 0.75em 0 !important; margin-bottom: 0.5em; } .thumbinner img { width: 50%; height: auto; border: 0 !important; } .thumbcaption { text-align: center !important; margin-bottom: -.75em !important; } .magnify { display: none; }