hutchy68 / pivot Goto Github PK
View Code? Open in Web Editor NEWA MediaWiki mobile skin which "Pivots" seamlessly to any size display.
Home Page: https://pivot.wikiproject.net
License: BSD 2-Clause "Simplified" License
A MediaWiki mobile skin which "Pivots" seamlessly to any size display.
Home Page: https://pivot.wikiproject.net
License: BSD 2-Clause "Simplified" License
A feature request: upgrade support to the "free" version of Font Awesome 5.x. Thanks for the skin... it is great.
TreeAndMenu extension doesn't work at all with this theme, unable to create either trees or menus.
DynamicSidebar doesn't load custom sidebars like it's supposed to (no group sidebars, no category sidebars, no personal sidebars)
It appears I'm unable to use any extension that enhances the functionality of the sidebar with this skin, which is a shame because I'd love to be able to use this skin but a more robust sidebar is definitely required for my purposes.
For the normal Vector skin I used an extension called CustomNavBlocks to enable me to add custom items to my sidebar, such as custom templates, custom navigation bars, or widgets such as my Discord chat widget. But I noticed that CustomNavBlocks doesn't works for the Pivot skin. Is there a way for me to be able to add custom items to my Pivot sidebar?
Use of dismissable sitenotice classed with a .panel and .radius class keeps an empty sitenotice box visible when dismissed. Need to remove those classes from sitenotice.
Detailed description of the issue goes here.
Sidebars not loading on fresh Wiki install: https://wiki.ftxgames.com. Consoles show the following:
Chrome:
Uncaught Error: module already implemented: user.options at Object.implement (VM3943 load.php:19) at Main_Page:119 at Array.RLQ.push (VM3943 load.php:42) at VM3943 load.php:42 at VM3943 load.php:42 implement @ VM3943 load.php:19 (anonymous) @ Main_Page:119 RLQ.push @ VM3943 load.php:42 (anonymous) @ VM3943 load.php:42 (anonymous) @ VM3943 load.php:42 load.php?debug=false&lang=en&modules=skins.pivot.js&only=scripts&skin=pivot:1 Uncaught ReferenceError: jQuery is not defined at load.php?debug=false&lang=en&modules=skins.pivot.js&only=scripts&skin=pivot:1 at load.php?debug=false&lang=en&modules=skins.pivot.js&only=scripts&skin=pivot:1 (anonymous) @ load.php?debug=false&lang=en&modules=skins.pivot.js&only=scripts&skin=pivot:1 (anonymous) @ load.php?debug=false&lang=en&modules=skins.pivot.js&only=scripts&skin=pivot:1 load.php?debug=false&lang=en&modules=jquery%2Csite|jquery.accessKeyLabel%2CcheckboxShiftClick%2Cclient%2CgetAttrs%2ChighlightText%2Csuggestions|mediawiki.RegExp%2CString%2CTitle%2Capi%2Cbase%2Ccldr%2CjqueryMsg%2Clanguage%2Cnotify%2CsearchSuggest%2Cstorage%2Cuser%2Cutil|mediawiki.action.view.rightClickEdit|mediawiki.libs.pluralruleparser|mediawiki.page.ready%2Cstartup|mediawiki.page.watch.ajax|user.defaults&skin=pivot&version=18u7pfi:141 JQMIGRATE: Migrate is installed with logging active, version 3.0.1 Main_Page:1 GET https://wiki.ftxgames.com/index.php/Main_Page 500 (Internal Server Error)
Firefox:
Error: module already implemented: user.tokens load.php:19:292 implement https://wiki.ftxgames.com/load.php:19:292 <anonymous> https://wiki.ftxgames.com/index.php/Main_Page:111:1501 RLQ.push https://wiki.ftxgames.com/load.php:42:630 <anonymous> https://wiki.ftxgames.com/load.php:42:686 <anonymous> https://wiki.ftxgames.com/load.php:24:378 ReferenceError: jQuery is not defined[Learn More] load.php:1:100 <anonymous> https://wiki.ftxgames.com/load.php:1:100 <anonymous> https://wiki.ftxgames.com/load.php:1:2 JQMIGRATE: Migrate is installed with logging active, version 3.0.1
I'm at a loss after trying re-installs and working on my server to check settings.
The standard firstHeading class and id from mediawiki are not used. Instead Pivot uses the title class and no id for the page headings.
There may be other standard classes missing
<h1 class="title"><?php print $displaytitle; ?></h1>
<h1 id="firstHeading" class="firstHeading"><?php print $displaytitle; ?></h1>
The skin won't work well with RTL languages. There is a need to make pieces of the code for navigation, aside, and page layout more modular with an early check on content language to build the layout for better RTL functionality.
I am trying to use the Grid, but I need 13 columns. Thus I created 3 collumns and within the middle one 11 more which I was trying to center. But if I put <div class="small-1 small-centered columns nopad">1</div>
, it results in "1" being alone in the middle and everything else being in the next row.
<div class="small-1 columns nopad"> Sandbox </div>
<div class="small-10 columns nopad">
<div class="small-1 small-centered columns nopad">0</div>
<div class="small-1 small-centered columns nopad">1</div>
<div class="small-1 small-centered columns nopad">2</div>
<div class="small-1 small-centered columns nopad">3</div>
<div class="small-1 small-centered columns nopad">4</div>
<div class="small-1 small-centered columns nopad">5</div>
<div class="small-1 small-centered columns nopad">6</div>
<div class="small-1 small-centered columns nopad">7</div>
<div class="small-1 small-centered columns nopad">8</div>
<div class="small-1 small-centered columns nopad">9</div>
<div class="small-1 small-centered columns nopad">10</div>
</div>
<div class="small-1 columns nopad">Linear</div>
This results in "Sanbox" being linear, then 0-10 underneath each other, centered, and "Linear" on the right.
Browsers and versions: Chrome 64 bit, 63.0.3239.132
MediaWiki version: 1.28.3
Database version: 5.6.38
PHP version: 5.6.33 (cgi-fcgi)
Pivot version: 1.0.5
Extension version (if connected to the issue): -
The media slider doesn't work when the screen is small. If I use a lap top, the three small dots below the slider are visible and the arrows for left and right to navigate too. But if I shrink the window, making it narrow as a mobile screen, both the dots and the arrows disappear and the image slider is stuck on the last picture.
http://grundskoleboken.se/wiki/Sandl%C3%A5dan
It does work on my mobile though. Android Huawei honor 8. So I assume it's a minor bug.
And a wish... as it is now, the slider only works with pictures from my own repository or pictures from wikimedia commons. It would be nice if it was possible to add pictures based on any URI from Internet in the slider. (se link, I tried that but failed)
Contrary to all other Mediawiki skins that I tried (Vector, Bootstrap based etc.), the pop-ups for inserting link and images in the TinyMCE editor extension look distorted with the Pivot skin, see screenshots of the issue here:
yaronkoren/TinyMCE-old#14
Any idea what could be causing this? Thanks for the help!
http://grundskoleboken.se/wiki/Special:Version
I've just copy-pasted the code from the pivot homepage, but no tabs appear, just the text:
Tab 1Tab 2Tab 3Tab 4
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
With the pivot theme the Echo extension popups are strangely offset to be partially out of the screen to the left when viewing the site in a mobile phone. This makes them effectively not usable.
I changed the color styling via the MediaWiki:Pivot.css page and it works fine for all pages except the Special:Preferences page where the old color-scheme comes back up.
Any idea what could be causing this and how I could fix it? Thanks!
Font awesome does not work. installed mediawiki via cpanel/softaculuos on a webhotel. installation is in a subdir. there is no .htaccess file. everything else appears to be working fine this far.
Couple of housekeeping tasks
.github
directory. GitHub will detect template files in the .github
hidden directory. Put CONTRIBUTING.md, PULL_REQUEST_TEMPLATE.md, and (thanks to @kghbln) the ISSUE_TEMPLATE.md.I am trying to setup deep linking so I can direct users directly to a tab. The tabs are setup and working correctly but I can't seem to figure out a simple work around.
I have been trying to integrate the techniques shown here without success: https://foundation.zurb.com/sites/docs/tabs.html#panel1d
Am I doing something wrong or is this not a feature currently available in Pivot?
I'm trying to figure on how to add horizontal scroll to tables through CSS, as some of the tables are overflowing on mobile screens and there's no way to see the overflown data in those tables.
The TOC links in mobile view might be too small.
Pages goes blank. Happens everywhere, front page, categories , articles. NB! not an issue in Firefox 58.0.1/58.0.2 64bit
What happens: trying to open a front page, a category or article with any of the browsers Page shows for a second, then goes blank.
I've commented out out line 4 in Pivot.js as per tips in this forum. No impact on this symptom.
Due to lack of (previously) working Fontawersome I temporarily put in Fontawesome in Pivot.skin-php
<script src="https://use.fontawesome.com/8f01a2df2d.js"></script> This does not appear to make any difference re. the issue reported. I've commented it out, no difference, pages still go blank.- Browsers and versions:
Mozilla Firefox
- MediaWiki version:
1.27.3
- Database version:
- PHP version:
5.6.31 (cgi-fcgi)
- Pivot version:
1.0.5
- Extension version (if connected to the issue):
I am having an issue getting the sidebar icons for Recent Changes, Random Page, as well as the icons on the top of the for Actions and the slide out side bar on the right side. None of the little icons show up at all.
How I can custom Sidebar?! in original Vector skin is MediaWiki:Sidebar but in Pivot does not work! Can I get some help?!
FontAwesome does not load and error console reveals:
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1) source: https://pivot.wikiproject.net/w/skins/pivot/assets/fonts/fontawesome-webfont.woff2?af7ae load.php:1:16254
Detailed description of the issue goes here.
I changed the default settings
$wgPivotDefaultFeatures = [
'usePivotTabs' => true,
'wikiNameDesktop' => 'Wiki name desktop'
];
$wgDefaultSkin = 'pivot';
$wgAllowSiteCSSOnRestrictedPages = true;
$wgAllowUserCss = true;
$wgHiddenPrefs[] = 'skin';
but instead of Tabs the page displays this:
<a href="#panel1">Tab 1</a><a href="#panel2">Tab 2</a><a href="#panel3">Tab 3</a><a href="#panel4">Tab 4</a>
Lorem ipsum dolor sit amet, ornare neque quisque etiam posuere voluptatem erat, scelerisque ornare tellus duis arcu eget ullamcorper. Lectus orci tincidunt augue tristique. Libero mus augue tortor urna, mauris sollicitudin fusce vestibulum nec, erat blandit in placerat ultrices, facilisis interdum consectetuer. Maecenas in unde, dolor a est ornare placerat dicta, ut nostra. Vehicula aliquam erat arcu. Nibh integer vestibulum natoque lacinia quis. A felis euismod sapien, eu dapibus, adipiscing in risus fringilla, hendrerit maecenas in dolor, vel nullam a.
Hi,
I just installed Mediwiki 1.30 and the default window display is now reduced to 1024x768. See image attached. I searched but haven't found a parameter to allow the skin to be displayed full screen. Other skins are not creating that problem.
The printable version was overhauled in MediaWiki somewhere along the way from 1.28.x to 1.31.x, meaning that if you click on the "printable version" link in your sidebar like e.g. https://sandbox.semantic-mediawiki.org/w/index.php?title=Main_Page&printable=yes immediately the browser dialog for printing opens. This works for latest Foreground 2.1.0 and MediaWiki 1.31.0 but it does not for Pivot 2.0.0. It will be fine to have this work for Pivot too.
Just long into "sandbox.semantic-mediawiki.org" switch to Pivot as your skin and try print. Conversely for Foreground or other skins to see the difference.
Dear folks, first off, I am completely grateful for the wonderful free skin Pivot, I love it. Completely flexible and a great addition for us users. I hate to even ask about an issue, but I have too.
And it may not be an issue, but more of a setting I am missing.
The text is tight up against the images when the images are aligned left. There is no padding or margins. How would I be able to set the text padding so the text does not hug the image?
In order to view what I am seeing, you can view our test instance at http://tpwtestuser.com/mw/American_Woods
See the image of the book cover, and how the text is right up against the image.
Thank you
John
Hello, I'm having a problem with Pivot interfering with logging into the installation of MediaWiki. I contacted my hosting company, which has been very good with fixing such problems, and even they were not able to figure it out. Mediawiki allows for logging in without the Pivot skin. With the Pivot skin I get an error that prevents me from logging in.
Browsers and versions: Chrome 64 bit, 63.0.3239.132
MediaWiki version: 1.28.3
Database version: 5.6.38
PHP version: 5.6.33 (cgi-fcgi)
Pivot version: 1.0.5
Extension version (if connected to the issue): -
I am happy that the tab function works. I am, and I know that you work with Pivot for free and do a wonderful work too. Thanks for everything. I don't want you to think I'm ungrateful.
There is an issue though. When I start filling the tabs with content, I realize that for each tab, the content jumps two rows further down even though I start it on the row direct below the div-tag on all three tabs.
You can see the effect here, even though the text is in swedish. http://grundskoleboken.se/wiki/Isbarnen,_utdrag_ur_roman_-_l%C3%A4sf%C3%B6rst%C3%A5else
This is a minor issue since I use just three tabs, but it would become quite ugly after five tabs or more. If there is a quick fix, it would indeed be appreciated.
After updating to v2.0.0 clicking on the user icon on the upper right to get the personal menu on the right no longer works. It does not move in. Console does not show issues.
See the demo wiki.
We absolutely love this theme for accessibility across mobile and desktop! Thank you for creating a great responsive theme.
One thing that would increase UI usability would be to have different icons for each menu that help to visually indicate and communicate what is found under each menu without having to click on and explore each menu. This would particularly be helpful for new/novice users.
For example, the right menu is primarily used for user actions. Adding a user icon (font awesome f007) to the right menu would greatly help with way-finding and instant recognition of navigation. Also adding a different edit/actions icon to the Actions button (particularly for mobile where the word "Actions" is hidden) would help users to determine which menu to use for editing. It seems like users should know this, however inexperienced users often don't, and we intuitively look for cues in the UI to determine how to interact with the interface. As such, having 3 menus with the same icon is not ideal to help users distinguish between different features/actions/activities housed under each section. Our users have reported finding the 3 menus with the same icon to be confusing especially if they only visit or do edits periodically. Each menu also does not have a unique css style for easy targeting, the same style is used for all 3 which requires some inelegant targeting in order to override these items to make the interface clearer for users.
#p-cactions > a.button i::before {
margin-bottom: 0.8em;
content: "\f044"!important;
}
.left-off-canvas-toggle #menu-user > i.fa::before {
content: "\f0c9"!important;
}
.right-off-canvas-toggle #menu-user > i.fa::before {
content: "\f007"!important;
}
It would be amazing if unique icons could be implemented by default in newer versions of the theme to aid in intuitive interface wayfinding. We greatly appreciate your efforts!
I am unable to customize my site as described in https://pivot.wikiproject.net/wiki/Customizing. I have tried adding customizations to both MediaWiki:Pivot.css and MediaWiki:Common.css but the site continues to remain the default pivot color. I have cleared browser cache and tried on 3 separate browsers but the default color remains. Please let me know what I should be doing. Thank you!
Continuing from issue #33
Good on one hand since standards are enforced. Bad since you have to find other way to credit over time. So the variation should perhaps be done in README.
More research is needed on this. I have done some preliminary work and will continue to test it.
The button for the visual editor doesn't seem to show up when I click on the Actions tab. I only see the source editor. Is this a bug or is visual editor not supported yet?
Originally reported on mediawiki.org:
The H1 tag is a critical factor is SEO. This skin puts the Wiki name - not the page title - as the H1 tag on every page on the wiki. Please fix this error as this can have severe impact on SEO.
Source code of the Grid page on the demo wiki.
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Grid rootpage-Grid skin-pivot action-view">
<!-- START PIVOTTEMPLATE -->
<div class="off-canvas-wrap docs-wrap" data-offcanvas="">
<div class="inner-wrap">
<nav class="tab-bar hide-for-print">
<section id="left-nav-aside" class="left-small show-for-small">
<a class="left-off-canvas-toggle"><span id="menu-user"><i class="fa fa-navicon fa-lg"></i></span></a>
</section>
<section id="middle-nav" class="middle tab-bar-section">
<h1 class="title"><a href="/wiki/Main_Page">
<span class="show-for-medium-up">MediaWiki Pivot Skin</span>
<span class="show-for-small-only">
I also created an Page Title page for pivot and found out that the layout is generally fine except for enumerations and listings.
Notifications are broken, pop-up on mobile useless, and really should be back in content area so a user sees them.
I've recently installed Pivot, however, when editing my main page - the headers don't show the blue colour.
The footer area also takes up the entire bottom part of the page, and is not limited to the main section, excluding the sidebar.
I have copied the source from the Pivot wiki page on my wiki's sandbox page to demonstrate this.
Appreciate any thoughts on this!
Make sure the license is correct and credit of the fork is given.
So I have a brand new version of Mediawiki, empty database as far as pages go. I load Pivot as the only other skin aside from Vector, but nothing seems to load up content wise. If I try to go to special pages, preferences, or even if I copy a page from Wikipedia, it just loads up the interface but nothing appears.
Clicking the "Actions" button does nothing, nor does clicking on the person silhouette in the upper right corner.
This is a screenshot of the preferences page after changing my skin to Pivot:
https://i.imgur.com/TOHGwfQ.png
I know that 1.32 isn't listed as a supported version, so it could very well be that that is the particular thing causing this issue.
I would like to hide the Pivot sidebar when users are not logged in, using a hook, but I don't understand how Pivot's $bar array is structured. What do I add to the following function in localSettings.php?
function lfHideSidebar( $skin, &$bar ) {
global $wgUser;
if ( !$wgUser->isLoggedIn() ) {
$bar = array(
// What do I put here?
)
);
} else {
// Display the sidebar as usual.
}
return true;
}
Thank you
The links in the menu titles on the left seem to be clickable off they should not be.
develop
branch is now completely broken with commit #52
Haven't looked to it in depth yet, but there is a thrown js error early on. Need to back up and look at
skin.json
calls "assets/stylesheets/font-awesome.min.css",
missing min.css file in assets. Should just be font-awesome.css
.
You have...
$out->addHeadItem('font', '<link rel="preload" href="/skins/pivot/assets/fonts/fontawesome-
webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous" />');
You are calling an href
with a hard set link. What about those who use w/
or whatever/
directory to install MediaWiki.
Viewport was eliminated. Breaking mobile view now.
Hi!
I really like the overall functionality of this theme... but the mint-green isn't really to my liking :)
Is there an relatively easy way (preferably one that survives updates) to change some of the colors?
Thanks for the help.
Using search, the completion follows /w/index.php
not the set script path of $wgScript
from LocalSettings.php
. In addition, the "hint" of Search in the input box was not localised.
Feature request: Adding a Top button to scroll back to the top on longer pages. :)
Browsers and versions: Microsoft Edge 41.16299.15.0, Chrome 64.0.3282.140, Internet Explorer 11.192.16.299
MediaWiki version: 1.30
Database version: 10.0.24-MariaDB-1~trusty-wsrep
Pivot version: 1.0.5
Extension version (if connected to the issue): N/A
On our installation the search bar + search results only seems occupy a defined part of the browser window (38em). It does not expand beyond this limit, yet shrinks responsively whilst seen from a smaller browser window.
Is there any way to make it responsive like other page, or cover 75% of the width of the browser?
Thanks!
For some reason jquery is not loading from /resources/lib/jquery/
in MW 1.32 before the bottom scripts are executed. I can see it in the waterfall as loaded, but the bottom scripts are not honoring the dependencies need. In Foreground, same waterfall, but it is waiting for the jquery.js to load and be available.
Working skin.json file
{
"name": "Pivot",
"version": "2.1.0",
"author": [
"Tom Hutchison",
"..."
],
"license-name": "BSD-2-Clause",
"url": "http://github.com/hutchy68/pivot",
"descriptionmsg": "pivot-desc",
"type": "skin",
"ValidSkinNames": {
"pivot": "Pivot"
},
"MessagesDirs": {
"Skinpivot": [
"i18n"
]
},
"AutoloadClasses": {
"SkinPivot": "Pivot.skin.php"
},
"ResourceModules": {
"skins.pivot.styles": {
"position": "top",
"styles": [
"assets/stylesheets/normalize.css",
"assets/stylesheets/font-awesome.css",
"assets/stylesheets/foundation.css",
"assets/stylesheets/pivot.css",
"assets/stylesheets/fontawsome.css",
"assets/stylesheets/pivot-print.css"
]
},
"skins.pivot.modernizr": {
"position": "top",
"scripts": [
"assets/scripts/vendor/modernizr.js"
]
},
"skins.pivot.js": {
"position": "bottom",
"scripts": [
"assets/scripts/vendor/jquery3.js",
"assets/scripts/vendor/fastclick.js",
"assets/scripts/vendor/placeholder.js",
"assets/scripts/foundation/foundation.js",
"assets/scripts/foundation/foundation.topbar.js",
"assets/scripts/foundation/foundation.dropdown.js",
"assets/scripts/foundation/foundation.joyride.js",
"assets/scripts/foundation/foundation.accordion.js",
"assets/scripts/foundation/foundation.offcanvas.js",
"assets/scripts/foundation/foundation.alert.js",
"assets/scripts/foundation/foundation.clearing.js",
"assets/scripts/foundation/foundation.equalizer.js",
"assets/scripts/foundation/foundation.interchange.js",
"assets/scripts/foundation/foundation.orbit.js",
"assets/scripts/foundation/foundation.reveal.js",
"assets/scripts/foundation/foundation.tab.js",
"assets/scripts/foundation/foundation.tooltip.js",
"assets/scripts/foundation/foundation.magellan.js",
"assets/scripts/pivot.js"
],
"dependencies": [
"skins.pivot.modernizr",
"jquery.cookie"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteSkinPath": "pivot"
},
"config": {},
"manifest_version": 1
}
Image with thumb is not correctly responsive.
With this test, i can't read correctly the text below.
=First Title=
[[File:NORML-France-Vertical-Carre-225px.png|thumb|Le site : https://www.norml.fr]]
L'association NORML France a été créée pour répondre à la régulation du cannabis en France par les acteurs de la société civile.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.