Here's a quick first draft of a mobile article preview gadget: https://meta.wikimedia.org/wiki/User:Brion_VIBBER/mobile-sidebar.js
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on the desktop window as well.
To enable add to your ~/common.js: mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...' );
Todo: * add an on/off switch * fix width to adjust for scroll bar if visible * make a couple common sizes selectable instead of just 320x480? * figure out how to apply this to edit previews? (is this even feasible without API changes?) * fix edge cases with the navigation detection * pretty it up * enable as a gadget on some major sites
-- brion
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on the desktop window as well.
I really like this :)
Todo:
- add an on/off switch
- pretty it up
I added just an off switch and prettied it up a little. I just refresh the page to turn it back on for now. I have an idea for putting the size selection UI which I'll add later.
http://cl.ly/XzUa https://meta.wikimedia.org/wiki/User:Prtksxna/common.js https://meta.wikimedia.org/wiki/User:Prtksxna/common.css
Awesome! I've made some further updates, and there's now a toggle button on the tab bar, next to the watchlist star, so the mobile view can be turned on and off at will.
Note that since it now uses an external stylesheet, to include the copies from my meta page now takes two imports:
// Mobile sidebar mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/javascript'); mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/css');
-- brion
On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena psaxena@wikimedia.org wrote:
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on
the
desktop window as well.
I really like this :)
Todo:
- add an on/off switch
- pretty it up
I added just an off switch and prettied it up a little. I just refresh the page to turn it back on for now. I have an idea for putting the size selection UI which I'll add later.
http://cl.ly/XzUa https://meta.wikimedia.org/wiki/User:Prtksxna/common.js https://meta.wikimedia.org/wiki/User:Prtksxna/common.css
I've taken the liberty of adding this to the gadgets proposals page on en.wikipedia: https://en.wikipedia.org/wiki/Wikipedia:Gadget/proposals#Mobile_sidebar
If no objection I'll set it up tomorrow.
Also I put the .js and .css files on github for easier patching: https://github.com/brion/MediaWiki-MobileSidebar
-- brion
On Sun, Oct 12, 2014 at 6:07 PM, Brion Vibber bvibber@wikimedia.org wrote:
Awesome! I've made some further updates, and there's now a toggle button on the tab bar, next to the watchlist star, so the mobile view can be turned on and off at will.
Note that since it now uses an external stylesheet, to include the copies from my meta page now takes two imports:
// Mobile sidebar mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/javascript'); mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/css');
-- brion
On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena psaxena@wikimedia.org wrote:
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on
the
desktop window as well.
I really like this :)
Todo:
- add an on/off switch
- pretty it up
I added just an off switch and prettied it up a little. I just refresh the page to turn it back on for now. I have an idea for putting the size selection UI which I'll add later.
http://cl.ly/XzUa https://meta.wikimedia.org/wiki/User:Prtksxna/common.js https://meta.wikimedia.org/wiki/User:Prtksxna/common.css
Excellent, this is exactly what was mentioned in
https://lists.wikimedia.org/pipermail/mobile-l/2014-September/008013.html
Eager to see our editors be able to use it.
--tomasz
On Sun, Oct 12, 2014 at 10:09 PM, Brion Vibber bvibber@wikimedia.org wrote:
I've taken the liberty of adding this to the gadgets proposals page on en.wikipedia: https://en.wikipedia.org/wiki/Wikipedia:Gadget/proposals#Mobile_sidebar
If no objection I'll set it up tomorrow.
Also I put the .js and .css files on github for easier patching: https://github.com/brion/MediaWiki-MobileSidebar
-- brion
On Sun, Oct 12, 2014 at 6:07 PM, Brion Vibber bvibber@wikimedia.org wrote:
Awesome! I've made some further updates, and there's now a toggle button on the tab bar, next to the watchlist star, so the mobile view can be turned on and off at will.
Note that since it now uses an external stylesheet, to include the copies from my meta page now takes two imports:
// Mobile sidebar
mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/javascript');
mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/css');
-- brion
On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena psaxena@wikimedia.org wrote:
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on the desktop window as well.
I really like this :)
Todo:
- add an on/off switch
- pretty it up
I added just an off switch and prettied it up a little. I just refresh the page to turn it back on for now. I have an idea for putting the size selection UI which I'll add later.
http://cl.ly/XzUa https://meta.wikimedia.org/wiki/User:Prtksxna/common.js https://meta.wikimedia.org/wiki/User:Prtksxna/common.css
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
This is cool although I'm not sure how I feel about. This is not just a mobile problem, this is a skin problem. In the distant future, I would hope after Trevor's work on the skin system we would have a much healthier ecosystem of skins which work nicely in both mobile and desktop mode.
If Vector suddenly became responsive, or Winter was released, how could we make this useful for those skins too? Maybe what we need here is a "preview in another skin" which allows you to resize the window to mobile size, tablet size? e.g. I wonder if this should be built into the preview page of the site?
On Sun, Oct 12, 2014 at 10:09 PM, Brion Vibber bvibber@wikimedia.org wrote:
I've taken the liberty of adding this to the gadgets proposals page on en.wikipedia: https://en.wikipedia.org/wiki/Wikipedia:Gadget/proposals#Mobile_sidebar
If no objection I'll set it up tomorrow.
Also I put the .js and .css files on github for easier patching: https://github.com/brion/MediaWiki-MobileSidebar
-- brion
On Sun, Oct 12, 2014 at 6:07 PM, Brion Vibber bvibber@wikimedia.org wrote:
Awesome! I've made some further updates, and there's now a toggle button on the tab bar, next to the watchlist star, so the mobile view can be turned on and off at will.
Note that since it now uses an external stylesheet, to include the copies from my meta page now takes two imports:
// Mobile sidebar
mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/javascript');
mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBBE...', 'text/css');
-- brion
On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena psaxena@wikimedia.org wrote:
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
This shows the currently viewed page on the mobile view in an <iframe> sidebar, and captures link navigation within the iframe to navigate on the desktop window as well.
I really like this :)
Todo:
- add an on/off switch
- pretty it up
I added just an off switch and prettied it up a little. I just refresh the page to turn it back on for now. I have an idea for putting the size selection UI which I'll add later.
http://cl.ly/XzUa https://meta.wikimedia.org/wiki/User:Prtksxna/common.js https://meta.wikimedia.org/wiki/User:Prtksxna/common.css
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
Todo:
- make a couple common sizes selectable instead of just 320x480?
The next size would be 480×800 which did not even fit on my screen. Even though I tested with some UI controls I don't think it makes sense put something that large on the screen. I instead added a link to the page that I could open in a new tab and then let the inspector resize it.
PS: Find the easter egg without looking at the code
On Sat, Oct 11, 2014 at 2:27 AM, Prateek Saxena psaxena@wikimedia.org wrote:
On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber bvibber@wikimedia.org wrote:
Todo:
- make a couple common sizes selectable instead of just 320x480?
The next size would be 480×800 which did not even fit on my screen. Even though I tested with some UI controls I don't think it makes sense put something that large on the screen. I instead added a link to the page that I could open in a new tab and then let the inspector resize it.
Note that mobile devices often have a scaling factor which needs to be compensated for; 480x800 mobile screens usually have a density of 1.5x which means they'd cover just 320x533 CSS pixels. And let's not even start on the iPhone 6 Plus, which has a different physical resolution from the rendering resolution (aghhhh!)
PS: Find the easter egg without looking at the code
Awwww :D
-- brion