Commit graph

60 commits

Author SHA1 Message Date
jdlrobson dedb61caf9 Drop support for non-SVG browsers
According to caniuse.com SVG support is available
from IE > 8, Firefox > 3, Safari > 3.1 and Android
> 2.3. Android 3-4.3 does not support masking.

Out of all these browsers, considering market share
and ResourceLoader support, none of these browsers
are of concern to us. In IE8 for example we do not
run JavaScript for our end users. Thus we should remove
this fallback support.

Changes
* Remove createImgThumbnail method and its test
* Groups duplicate CSS groups
* Refactor createThumbnail function
** Leave a FIXME on some curious code

Change-Id: I59ac2e320b2e07815bc4136d5942016fdc1d4340
Bug: T135554
2016-05-31 15:23:07 -07:00
Prateek Saxena 21b856f7f7 Use correct selector for div's that hold PNGs when SVGs aren't supported
* The classes in ext.popups.core.less apply to the thumbnail
which reside in .mwe-popups > div > a.popups-discreet
The thumbnail is thus not a direct child of the div parent of
popups-discreet.
* The margin-top is unnecessary.

Change-Id: If91140a55baa1aef36483002de681503c2690cf6
2016-05-13 18:12:11 +00:00
Prateek Saxena ed327f8ee6 Minor refactor
1. Add comment for empty SPAN when there is no thumbnail
2. Use footer instead of div.timestamp-* as it also contains
   the settings icon now.

Change-Id: Ia6fca32770596c980b33a9a6e58bb08b661b90d1
2016-05-10 14:23:08 -07:00
Florian c93047666e Add link preview feature to mobile beta mode
Linkpreview will try to fetch a text extract using the api and, if this
doesn't fail, show the extract as a drawer with a button "Continue to
article". If the query fails, it will redirect the user to the article
directly.

Bug: T113243
Depends-On: I6d8c5b80e70c3d8d1a92a70cc91e1b90d598cb0f
Change-Id: Idbaae9fe2decd89b73e623a25fbd39464c316fb2
2016-03-05 18:22:30 +01:00
jenkins-bot 2652cd325a Merge "core.less: Visual refinement & drop shadow" 2015-09-23 22:24:03 +00:00
Prateek Saxena 947f644991 Move all images to resources/images
Change-Id: Iac712668baf8cefedf036c4d479687e3f5da5a46
2015-07-18 22:27:18 +00:00
jenkins-bot 4438a92585 Merge "Reduce font-size of timestamp text" 2015-04-17 08:11:43 +00:00
jenkins-bot f6b32a7963 Merge "Update font-size and line-height" 2015-04-17 08:11:35 +00:00
Prateek Saxena 503356d33c Reduce font-size of timestamp text
Bug: T96343
Change-Id: I653018e0a653ef8c25a336e73b5ff46eceed119a
2015-04-17 12:50:50 +05:30
Prateek Saxena 4ba7ec87a1 Update font-size and line-height
Bug: T94957
Change-Id: I8f67a5e43bcd0f0de22c03323585414adfa12944
2015-04-11 19:23:57 +05:30
Prateek Saxena 8fbacb9040 Add icon and link to qualtric survey if $wgPopupsSurveyLink is defined
The link to the survey is added in Ic445732197e6abeba459b40b1416d8a71bc23bd6

Bug: T1005
Change-Id: I24bfd5fd622d1afc4372dbd4bfca3879927b0c17
2015-04-02 15:29:15 +05:30
Prateek Saxena 5ee43d6b3e core.less: Visual refinement & drop shadow
This what it looks like -
https://phabricator.wikimedia.org/T78641#984753

Bug: T78641
Change-Id: Id59acba49963eb02626444f91b716c53c1bef7b4
2015-03-04 16:45:56 +05:30
Prateek Saxena f7d5f890b6 Re-position #mwe-popups-svg out of the view port
This <div> had been sitting visible at the bottom of the page
and went unnoticed till it caused problems with the ContentTranslation
extension.

Hiding it using 'display: none;' causes issues with the masking
of the images, thus putting the div out of the view port.

Bug: T76718
Change-Id: I731128c827aa093e0ffab52dc378aea386b0bb3c
2014-12-29 14:44:39 +05:30
jenkins-bot dbd3f6ff2b Merge "Make ':after' triangle larger so that the border of div is covered" 2014-12-03 15:37:00 +00:00
Prateek Saxena 77538a1001 Reduce max height of text extract
Currently .mwe-popups-extract keeps some empty space after the last
line. This shifts a little when zooming in causing part of the text
of the next line to be visible. Reducing this to have lesser extra
empty space solves the problem.

Bug: 73551
Change-Id: I968fca23fe2de04cb3f73ba4e7d4f676fbf88536
2014-11-20 14:54:14 +05:30
Prateek Saxena cbebde39b9 Make ':after' triangle larger so that the border of div is covered
When zooming in the border of the div is visible over the :after
pseudo element.
 - Update top and bottom triangle mixins to include @extra argument
 - Update pseudo elements to use the new mixin and position them
   correctly according the extra size

Bug: 73550
Change-Id: I05b9c74a675c69e407c4c78771504f447da754c5
2014-11-19 11:12:12 +05:30
Prateek Saxena 45172f1f7b Increase z-index of hovercards from 5 to 110
Hovercards is currently at 5 z-index which causes
it to be rendered behind the compact personal bar.
Changing this also effects the border triangles and
masked SVGs, thus incrementing them too.

Bug: 72882
Change-Id: Ib3c889c748a9c919754d8281e68fd0664db7c408
2014-11-12 14:39:47 +05:30
Prateek Saxena a9bc4e4ba8 Fix bottom margin issues with portrait images
This was happening due to:
 * Stale CSS selector
 * Incorrect margin values

Also added missing triangle pokey for a particular
orientation of the hovercard.

Bug: 71872
Change-Id: Ic4986f9cee2a92b29548ef21f9bec3f2c2117e98
2014-10-09 15:40:12 +05:30
Prateek Saxena 91da0e7536 article: Fix settings' icon alignment
Bug: 70147
Change-Id: I26c41395557420aea6c995a59aada0079f1a896c
2014-09-02 11:18:06 +05:30
jenkins-bot 6eb4a3a930 Merge "Reduce space between extract and timestamp" 2014-08-26 04:01:05 +00:00
Prateek Saxena e66ec613db article: Fix settings icon
1. Change color from #777 to #AAA
2. Add PNG fallback using `background-image-svg`

Bug: 69022
Change-Id: I0bbfe2aaa0c6e6ed1300bafa1352dd54037929b9
2014-08-19 22:22:21 +05:30
Prateek Saxena dd98179a15 Add settings
Save Hovercards enabled state in localStorage (jStorage)

Change-Id: I374805eed0bc9f262b29474093f0357c56b42c83
2014-07-28 13:38:03 +05:30
Bartosz Dziewoński 36eaf4cec9 Use 'auto' instead of 'initial' in CSS
'initial' is not supported by all browsers (including all versions of
Internet Explorer and Opera 12 [1]), which causes visual glitches [2].

As the initial value for 'left' is 'auto' [3], this should cause no
visual changes in the browsers that supported the previous version.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/initial
[2] http://i.imgur.com/0Ze8lon.png
[3] http://www.w3.org/TR/CSS21/visuren.html#position-props

Change-Id: I8d661436f1106ca92b8b492c3fb76ac6976d80fa
2014-07-11 21:23:27 +02:00
jenkins-bot 1877fda630 Merge "Use only px in the stylesheet" 2014-05-29 18:46:27 +00:00
Prateek Saxena 7cfca498fc Reduce space between extract and timestamp
Bug: 65154
Change-Id: I9e114c820944aa54bfa3fd4afe9ba93c1024d28d
2014-05-19 21:48:37 +05:30
Prateek Saxena 418394bc8e Use only px in the stylesheet
Instead of the current incomprehensible mixture of em's and px's.
This will help resolve other positioning bugs with relative ease.

Change-Id: I9d7659736489c461ab8c0f4aa660a3ce2846bd5d
2014-05-19 15:46:58 +05:30
Thiemo Mättig b656841f8f Don't underline hovercard text when user preference is 'Always'
The setting is called 'underline' and defaults to 'Skin or
browser default' (= 2). If set to 'Always' (= 1), which is what
I personally like and do, ;-) all text in hovercards is
underlined (and the underlines disappear if you hover the
hovercard, which is a bit tricky but possible).

This simple fix removes the dependency from the default style
(which only shows underlines on hover). I think this is the most
straightforward solution.

Change-Id: Ide54ffd1949a50184d8d2a680bf1a0d35e24d563
2014-05-12 16:18:20 +02:00
Prateek Saxena c4f46dd7d4 Increase font size
Increase the extract font-size. Also increase
the max-height of .mwe-popups-extract so that
the text does not get cut.

Bug: 63508
Change-Id: Icde0ca8af44e68cab71816f4c89fe9a68f66b472
2014-05-10 11:42:48 +05:30
Prateek Saxena 5a7393407c render.article: Fix image placement on non-SVG browsers
Bug: 64598
Change-Id: I9e3434330a0c51e625921f6255119ff96deccbc6
2014-05-09 13:53:19 +00:00
Prateek Saxena e7376cd517 render.article: Flip popups on X and Y axis so that they don't render outside the viewport
Bug: 62971
Change-Id: I893e239889874be83cfbf202095f617ee6091d6f
2014-05-09 13:52:16 +00:00
Bartosz Dziewoński 84be066a29 Apply whitespace code conventions in LESS files
https://www.mediawiki.org/wiki/CC/LESS

Change-Id: Ic8df9629b76499c57114a5e399b4266dd0523002
2014-04-22 13:38:53 +02:00
Prateek Saxena 75afbf26ff Fix border issue with non-flipped landscape hovercards
Bug: 63215
Change-Id: Id998e9c33bab551643e5e18303cbd773dc824a39
2014-04-14 11:30:27 +05:30
Prateek Saxena 511b6f251f Add white fill in triangle for hovercards with images
Bug: 62945
Change-Id: I1b3ec90a8cd482c100ee8b2abd5ee69f3890a576
2014-04-02 06:54:38 +00:00
Prateek Saxena a5b57a40e4 Remove redirects to text and heading
Bug: 63155
Change-Id: I42fb9cc1a8b26eaf6807243e4e7bdbf0b56dc35c
2014-04-02 06:54:13 +00:00
Prateek Saxena 1b4a7a1f26 Fix for RTL languages
Bug: 62970
Change-Id: I7c2a2afa8fc2b52727fd7e86a7774b9d8196917c
2014-04-01 11:48:40 +05:30
Prateek Saxena dc75194d9b Stop overflowing text from hitting the border
Bug: 62194
Change-Id: Id055274b6f1cd2ecdc826b2bb4f3b3fb8f89dc65
2014-03-17 08:29:25 +00:00
Prateek Saxena 710b845da1 Add border around pokey of the popup
Change-Id: Idead01aea93a685f9d061361cfd5978ad3dfda17
2014-03-17 08:28:50 +00:00
Prateek Saxena 091c2e40d8 Use mixin for creating pokeys with the border method
Change-Id: I16f79dd0fc89d986d17c61ecfcd1dca0de8243c4
2014-03-17 08:27:00 +00:00
Prateek Saxena 541f2ca470 Flip the arrow position if the popup is flipped
- Only text popups
- Portrait popups
- Landscape popups

Had to convert the landscape popup's img into an svg:image
too. 2 new SVG masks were made to take care of the flipped
states.

Change-Id: Ib30bb7f5ff9857f6a470b07db05ab50fb0ca8a5d
2014-03-17 08:25:58 +00:00
Prateek Saxena 44028f722b Limit image size for portrait popups
Also position the image in the center (along the y axis)

Change-Id: I4980e6d6e024515710abc1912ffcf99b71297e9e
2014-03-17 08:24:41 +00:00
Prateek Saxena b6f57aebcc Minor type changes/Fix contrast
Bug: 61411
Change-Id: Ia33b94f69c3cf655a278311801f64d32841af2e7
2014-02-25 06:32:38 +05:30
Prateek Saxena 240e469d9c Add Triangle/Pokey to the NavigationPopups
* Triangles using the border hack for the white part of the popups
* SVG clipPath on FF and Chrome, using SVG <image>
* Fallback to <img> on browsers with not SVG support

Change-Id: I3b1226051436652edbffe4642176c9a0e405243c
2014-02-24 21:55:09 +05:30
Yuvipanda e1d6fccc90 Merge "Make padding consistent for extract and timestamp" 2014-02-24 04:06:01 +00:00
Prateek Saxena 3744726eab Truncate text for portrait popups
Change-Id: I8b1177a538f5e2b0e79f68fe2c125189363c0545
2014-02-24 09:24:25 +05:30
Prateek Saxena 180a493cdc Make padding consistent for extract and timestamp
Change-Id: I3dc9fa9631a9ab17953195cd51eb192b0b009dca
2014-02-24 09:19:16 +05:30
Prateek Saxena 55fbaad4bd Improve color contrast further
Bug: 61411
Change-Id: I91916ce44d6ef6f823432b089e0aef4e513292ad
2014-02-21 13:17:16 +05:30
Prateek Saxena 3ce19d484b Improve contrast of old timestamps
Bug: 61411
Change-Id: If9c3517e49ed81f7d758dfa08967a3af9125956e
2014-02-21 12:56:19 +05:30
Prateek Saxena 00bde78b00 Add redirects to message at the top of the popup
Change-Id: I051e4ed84f216e9c8682138927f6dcb6a407ee57
2014-02-18 16:46:12 +05:30
Prateek Saxena 54b409cee2 Limit container height for landscape popup's extract
This is the only way we can properly truncate text.
We can't do it on the basis of characters as it'll
take up different amount of space based on the script.

Change-Id: I77f8304315beb42eb2120c633d3befb5f83432f9
2014-02-18 14:10:43 +05:30
Prateek Saxena 2899d34a70 Use div with background-image for landscape
This is to prevent the layout from breaking on landspace popups

Change-Id: Ia9d051b4f060d549a4a188ca42fb70a97eed23ab
2014-02-18 13:49:42 +05:30