Mobile article preview gadget

List overview All Threads
Download

newer

older

Happy Ada Lovelace Day

Tor and Anonymous Users (I...

Brion Vibber

10 Oct 2014 10 Oct '14

4:45 a.m.

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_VIBB… ); 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

Show replies by date

Prateek Saxena

11 Oct 11 Oct

2:33 a.m.

New subject: [WikimediaMobile] Mobile article preview gadget

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

Brion Vibber

12 Oct 12 Oct

10:07 p.m.

New subject: [WikimediaMobile] Mobile article preview gadget

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_VIBB…ascript', 'text/javascript'); mw.loader.load(' https://meta.wikimedia.org/w/index.php?action=raw&title=User:Brion_VIBB…ext/css', 'text/css'); -- brion On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena <psaxena(a)wikimedia.org> wrote:

...

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

Brion Vibber

13 Oct 13 Oct

2:09 a.m.

New subject: [WikimediaMobile] Mobile article preview gadget

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(a)wikimedia.org> wrote:

...

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

Tomasz Finc

14 Oct 14 Oct

2:28 p.m.

New subject: [WikimediaMobile] Mobile article preview gadget

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(a)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&t…/javascript', 'text/javascript'); mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&t…pe=text/css', 'text/css'); -- brion On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena <psaxena(a)wikimedia.org> wrote:

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Jon Robson

4:01 p.m.

New subject: [WikimediaMobile] Mobile article preview gadget

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(a)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&t…/javascript', 'text/javascript'); mw.loader.load('https://meta.wikimedia.org/w/index.php?action=raw&t…pe=text/css', 'text/css'); -- brion On Fri, Oct 10, 2014 at 10:33 PM, Prateek Saxena <psaxena(a)wikimedia.org> wrote:

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Prateek Saxena

11 Oct 11 Oct

6:27 a.m.

New subject: [WikimediaMobile] Mobile article preview gadget

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)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

Brion Vibber

12 Oct 12 Oct

10:08 p.m.

New subject: [WikimediaMobile] Mobile article preview gadget

On Sat, Oct 11, 2014 at 2:27 AM, Prateek Saxena <psaxena(a)wikimedia.org> wrote:

...

On Fri, Oct 10, 2014 at 1:15 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote:

Todo: * make a couple common sizes selectable instead of just 320x480?

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

3505

days inactive

3509

days old

wikitech-l@lists.wikimedia.org

Manage subscription

7 comments

4 participants

tags (0)

participants (4)

Brion Vibber
Jon Robson
Prateek Saxena
Tomasz Finc