? Success

User tests: Successful: Unsuccessful:

avatar Harmageddon
Harmageddon
24 Jan 2016

The frontendediting JavaScript adds an "edit" button when hovering over a module. This button is first appended to the module and then rebased to the body element with position: absolute. To place the button at the same position as it had inside the module, the position (top and left attributes) is retained.
At the moment, also the width and height are adopted from the button, that was placed inside the module, and are set explicitely via CSS. This leads to problems, if an explicit width or height is not desired by the template, as in the following code:

a.btn {
  box-sizing: border-box;
  padding: 5px;
}

The problem with this CSS line is, that the javascript takes only the element's inner width and height into account, not the padding. With border-box, the width attribute is equivalent to the inner width + padding + border. Thus, a button that originally had an inner width of 20px gets an explicit width: 20px that will consist of 10px inner width and 2*5px left and right padding. So the javascript shrinks the button.

Description of the PR

  • Removes the explicit set width and height.
  • Resets the attributes for bottom and right to auto, so elements won't get stretched because they have both left and right values.

Testing instructions

  1. Enable module frontend editing.
  2. Log in in the frontend with an administrator account.
  3. Hover over a module, pay attention to the edit button.
  4. In your template, use a CSS configuration that will have problems with specific widths and heights, e.g. the code shown above.
  5. Compare the results with and without the sensitive CSS lines.
  6. Apply the patch.
  7. Test again.

Please test with debug mode enabled and disabled to make sure that both javascript files behave alike. Feel free to test with additional templates! Just maybe not with beez, because the frontend editing stuff doesn't seem to work there...

It would be nice if someone who was involved with the original implementation of the frontend editing feature by the UX group (@beat?) could have a look at this. If the explicit width and height had any more purpose than the one I recognized and if this PR might break anything, please tell me!

avatar Harmageddon Harmageddon - open - 24 Jan 2016
avatar Harmageddon Harmageddon - change - 24 Jan 2016
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 24 Jan 2016
Labels Added: ?
avatar Harmageddon Harmageddon - change - 24 Jan 2016
Category Templates (site) UI/UX
avatar anibalsanchez anibalsanchez - test_item - 5 Feb 2016 - Tested successfully
avatar anibalsanchez
anibalsanchez - comment - 5 Feb 2016

I have tested this item :white_check_mark: successfully on 0dec81c

Test OK


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8977.

avatar mikeveeckmans mikeveeckmans - test_item - 30 Mar 2016 - Tested successfully
avatar mikeveeckmans
mikeveeckmans - comment - 30 Mar 2016

I have tested this item :white_check_mark: successfully on 0dec81c

TEST OK


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8977.

avatar brianteeman brianteeman - change - 30 Mar 2016
Status Pending Ready to Commit
avatar brianteeman
brianteeman - comment - 30 Mar 2016

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8977.

avatar joomla-cms-bot joomla-cms-bot - change - 30 Mar 2016
Labels Added: ?
avatar brianteeman brianteeman - change - 30 Mar 2016
Milestone Added:
avatar rdeutz rdeutz - reference | fa08e9f - 12 Apr 16
avatar rdeutz rdeutz - merge - 12 Apr 2016
avatar rdeutz rdeutz - close - 12 Apr 2016
avatar rdeutz rdeutz - change - 12 Apr 2016
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2016-04-12 19:12:49
Closed_By rdeutz
avatar rdeutz rdeutz - close - 12 Apr 2016
avatar rdeutz rdeutz - merge - 12 Apr 2016
avatar joomla-cms-bot joomla-cms-bot - close - 12 Apr 2016
avatar joomla-cms-bot joomla-cms-bot - change - 12 Apr 2016
Labels Removed: ?
avatar rdeutz rdeutz - change - 1 May 2016
Milestone Removed:
avatar rdeutz rdeutz - change - 1 May 2016
Milestone Added:
avatar rdeutz rdeutz - change - 1 May 2016
Milestone Added:
avatar rdeutz rdeutz - change - 1 May 2016
Milestone Removed:

Add a Comment

Login with GitHub to post a comment