Moodle
  1. Moodle
  2. MDL-42887

Make the collapsing of form fields for bootstrap and non-bootstrap themes responsive.

    Details

    • Testing Instructions:
      Hide
      1. On a variety of mforms in moodle (Including the edit Multiple choice question form), with a variety of themes
      2. Test that the form displays OK on both narrow and wide screens. text editors should not be pushed off the side of the page or clipped.
      3. On screens less than 1180 pixels, all form fields should display with the label above the field - on screen sizes wider than this they should be side, by side.
      4. Make sure you include the question editing forms in your tests.
      5. Repeat the test using RTL
      6. Repeat the test in a different browser
      Show
      On a variety of mforms in moodle (Including the edit Multiple choice question form), with a variety of themes Test that the form displays OK on both narrow and wide screens. text editors should not be pushed off the side of the page or clipped. On screens less than 1180 pixels, all form fields should display with the label above the field - on screen sizes wider than this they should be side, by side. Make sure you include the question editing forms in your tests. Repeat the test using RTL Repeat the test in a different browser
    • Affected Branches:
      MOODLE_26_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-42887-master
    • Rank:
      54761

      Description

      Right now (in integration) - the text and filemanager fields are always shown with the label above the field and the field has 100% width.

      We want to make this apply to all fields, + bold the label + define a responsive breakpoint where the forms revert to the old behaviour of label and field side by side.

      1. AddaNote.png
        48 kB
      2. alledegly narrow view.png
        40 kB
      3. BadgeIssuePage.png
        109 kB
      4. bonfire-screenshot-20131115-154600-874.png
        147 kB
      5. bonfire-screenshot-20131115-154947-548.png
        150 kB
      6. bonfire-screenshot-20131115-160111-775.png
        147 kB
      7. demo1.png
        133 kB
      8. demo2.png
        131 kB
      9. fieldset_padding_ltr.png
        178 kB
      10. fieldset_padding_rtl.png
        167 kB
      11. jira-capture-screenshot-20131115-155826-086.png
        66 kB
      12. jira-capture-screenshot-20131115-160158-238.png
        80 kB
      13. jira-capture-screenshot-20131115-160510-088.png
        83 kB
      14. news forum 1.jpg
        27 kB
      15. news forum 2.jpg
        37 kB
      16. QA Test - RTL issues - small creen - chrome - clean theme.png
        98 kB
      17. QA Test - RTL issues - small screen size - forum discussion.png
        67 kB
      18. slightly wider.png
        39 kB
      19. summary of topics.jpg
        45 kB
      20. WikiInsertcomment.png
        115 kB

        Issue Links

          Activity

          Hide
          Jason Fowler added a comment -

          All looks fine to me Damyon, pushing for integration.

          Show
          Jason Fowler added a comment - All looks fine to me Damyon, pushing for integration.
          Hide
          Damyon Wiese added a comment -

          Noting - Martin want this in RC1.

          Show
          Damyon Wiese added a comment - Noting - Martin want this in RC1.
          Hide
          Damyon Wiese added a comment -

          I just repushed the branch to fix a visual glitch on wide screen question editing forms in standard.

          Show
          Damyon Wiese added a comment - I just repushed the branch to fix a visual glitch on wide screen question editing forms in standard.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          DISCLAIMER: adding this now goes against all correct habits/practices/recommendations.

          DISCLAIMER: this cannot happen again. Specially when the main cause has been another issue (the new hyper-sized buttons) that ALSO landed OUT of time.

          DISCLAIMER: I insist. THIS IS THE LAST TIME. THIS IS NOT SERIOUS. AT ALL. (uppers required, yes).

          Ciao :/

          Show
          Eloy Lafuente (stronk7) added a comment - DISCLAIMER: adding this now goes against all correct habits/practices/recommendations. DISCLAIMER: this cannot happen again. Specially when the main cause has been another issue (the new hyper-sized buttons) that ALSO landed OUT of time. DISCLAIMER: I insist. THIS IS THE LAST TIME. THIS IS NOT SERIOUS. AT ALL. (uppers required, yes). Ciao :/
          Hide
          Martin Dougiamas added a comment - - edited

          It's a train of problems that led to this but at this point the way out is forward not back.

          Good work Damyon, I think you've nailed it with this.

          Show
          Martin Dougiamas added a comment - - edited It's a train of problems that led to this but at this point the way out is forward not back. Good work Damyon, I think you've nailed it with this.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          I'm running a behat iteration with this applied, just to see if it catches any problem (don't think so.. but). Also will be doing some prospective/random testing. Hope I'm not the only one.

          Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - I'm running a behat iteration with this applied, just to see if it catches any problem (don't think so.. but). Also will be doing some prospective/random testing. Hope I'm not the only one. Ciao
          Hide
          Tim Hunt added a comment -

          To the person testing this, please look at this screen-grab: https://tracker.moodle.org/secure/attachment/33790/screenshot-1.jpg (from MDL-40668) to remind yourself how the edit multiple-choice form looked at its best, before considering whether how it looks now is acceptable.

          Show
          Tim Hunt added a comment - To the person testing this, please look at this screen-grab: https://tracker.moodle.org/secure/attachment/33790/screenshot-1.jpg (from MDL-40668 ) to remind yourself how the edit multiple-choice form looked at its best, before considering whether how it looks now is acceptable.
          Hide
          Tim Hunt added a comment - - edited

          In the 'responesive' design, here is how things look with my browser window almost, but not quite, maximised. Note all the wasted space on the right. (This is anomaly theme.) Clearly, at this point, the lables shoudl be beside the inputs.

          Show
          Tim Hunt added a comment - - edited In the 'responesive' design, here is how things look with my browser window almost, but not quite, maximised. Note all the wasted space on the right. (This is anomaly theme.) Clearly, at this point, the lables shoudl be beside the inputs.
          Hide
          Tim Hunt added a comment -

          Sorry, don't know why TinyMCE was not showing up there.

          Show
          Tim Hunt added a comment - Sorry, don't know why TinyMCE was not showing up there.
          Hide
          Tim Hunt added a comment - - edited

          Here it is with the browser window a few pixels wider. That is better.

          (Sorry for the repeated spam.)

          Show
          Tim Hunt added a comment - - edited Here it is with the browser window a few pixels wider. That is better. (Sorry for the repeated spam.)
          Hide
          Eloy Lafuente (stronk7) added a comment - - edited

          Hi, after thinking a bit... I've came with a solution, built on top of Damyon changes, that perhaps may make everybody happy, i don't think is odd at all:

          https://github.com/stronk7/moodle/commit/86502efc1b5a8e5f1228c17ca784a8a068acef61

          Here it's the text from the commit message, be warned:

          MDL-42887 only move editor and filemanager elements.
          
          This is a less-radical alternative that only moves the
          editor and filemanager elements, keeping labels 100%
          unmodified.
          
          I've tested it with a bunch of forms and find it simpler
          and better than the "move all" alternative.
          
          For sure, in the future... this could be generalized to some
          class, say "fitem_responsive", and apply the move to any element
          having it.
          
          Note:
          
          - It's down to a 900px width for all the base themes. Some of
            them may need re-adjusting.
          - It's RTL compliant.
          - It does NOT cover bootstrapbase themes at all.
          - It works nicely if you delete the editor cookies and let it
            to automatically get resized.
          
          Idea:
          - Make double/triple click in the resize icon to clean the
            cookie (or whatever it is) and go back to auto-resize mode.
          

          Take a look to it, balance and decide. I'll be happy to integrate whichever solution is finally assumed.

          Hope it helps, ciao

          Edited: changed link to commit. Jira was breaking the previous one (to the branch)

          Show
          Eloy Lafuente (stronk7) added a comment - - edited Hi, after thinking a bit... I've came with a solution, built on top of Damyon changes, that perhaps may make everybody happy, i don't think is odd at all: https://github.com/stronk7/moodle/commit/86502efc1b5a8e5f1228c17ca784a8a068acef61 Here it's the text from the commit message, be warned: MDL-42887 only move editor and filemanager elements. This is a less-radical alternative that only moves the editor and filemanager elements, keeping labels 100% unmodified. I've tested it with a bunch of forms and find it simpler and better than the "move all" alternative. For sure, in the future ... this could be generalized to some class, say "fitem_responsive" , and apply the move to any element having it. Note: - It's down to a 900px width for all the base themes. Some of them may need re-adjusting. - It's RTL compliant. - It does NOT cover bootstrapbase themes at all. - It works nicely if you delete the editor cookies and let it to automatically get resized. Idea: - Make double /triple click in the resize icon to clean the cookie (or whatever it is) and go back to auto-resize mode. Take a look to it, balance and decide. I'll be happy to integrate whichever solution is finally assumed. Hope it helps, ciao Edited: changed link to commit. Jira was breaking the previous one (to the branch)
          Hide
          Damyon Wiese added a comment -

          Screenshots of demo1 and demo2.

          Demo1

          Just the patch on this issue

          Demo2

          The patch on this issue with Eloys additional commit

          Show
          Damyon Wiese added a comment - Screenshots of demo1 and demo2. Demo1 Just the patch on this issue Demo2 The patch on this issue with Eloys additional commit
          Hide
          Jason Fowler added a comment -

          I prefer demo1 - it keeps everything working in the same manner.

          Show
          Jason Fowler added a comment - I prefer demo1 - it keeps everything working in the same manner.
          Hide
          Andrew Davis added a comment -

          Just based on those two screenshots, demo 1 looks better.

          Show
          Andrew Davis added a comment - Just based on those two screenshots, demo 1 looks better.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          screenshots don't tell you the complete picture. You should see them in action (in the 1900-1000 range). And with the editor with and without a custom size applied. IMO.

          Show
          Eloy Lafuente (stronk7) added a comment - screenshots don't tell you the complete picture. You should see them in action (in the 1900-1000 range). And with the editor with and without a custom size applied. IMO.
          Hide
          Damyon Wiese added a comment -

          (yes - the screenshots don't show you what happens when resizing the window - it is 100% percent better to test with a demo site)

          Show
          Damyon Wiese added a comment - (yes - the screenshots don't show you what happens when resizing the window - it is 100% percent better to test with a demo site)
          Hide
          Frédéric Massart added a comment -

          Though standard is probably not the best theme to try that on (not really responsive), I tried the demo sites, and my preference goes to Demo 1. Demo 2 wraps the labels in a very small area, which makes it appear that they are not left aligned, but they are. Also that probably does not make it very user friendly to have a label expanding on many lines (depending on the languages). And 5 lines of label is definitely taking more screen space than the label on 1 line above the field.

          I actually like the <1200px on Demo 1, and if I were a theme I'd just remove the media query to have that label on top in any screen size.

          Is that possible to see how it would look like to have the checkbox on the left hand size of the label? Possible on pages where there is one checkbox surrounded by wild fields, and another one with multiple checkboxes with different label sizes.

          Also, little bug with the checkbox on RTL, it is left aligned, instead of right aligned.

          Demo 1 FTW \o/.

          Cheers,
          Fred

          Show
          Frédéric Massart added a comment - Though standard is probably not the best theme to try that on (not really responsive), I tried the demo sites, and my preference goes to Demo 1. Demo 2 wraps the labels in a very small area, which makes it appear that they are not left aligned, but they are. Also that probably does not make it very user friendly to have a label expanding on many lines (depending on the languages). And 5 lines of label is definitely taking more screen space than the label on 1 line above the field. I actually like the <1200px on Demo 1, and if I were a theme I'd just remove the media query to have that label on top in any screen size. Is that possible to see how it would look like to have the checkbox on the left hand size of the label? Possible on pages where there is one checkbox surrounded by wild fields, and another one with multiple checkboxes with different label sizes. Also, little bug with the checkbox on RTL, it is left aligned, instead of right aligned. Demo 1 FTW \o/. Cheers, Fred
          Hide
          Damyon Wiese added a comment -

          Fixing bug for checkbox in RTL now...

          Show
          Damyon Wiese added a comment - Fixing bug for checkbox in RTL now...
          Hide
          Damyon Wiese added a comment - - edited

          Fix added and tested. (Note it is still all 1 commit - I squashed)

          Show
          Damyon Wiese added a comment - - edited Fix added and tested. (Note it is still all 1 commit - I squashed)
          Hide
          Marina Glancy added a comment - - edited

          Damyon, looks very good. One thing I noticed is that media layout in standard does not overwrite the padding for group form element which makes it indented comparing to single elements. See screenshots

          Show
          Marina Glancy added a comment - - edited Damyon, looks very good. One thing I noticed is that media layout in standard does not overwrite the padding for group form element which makes it indented comparing to single elements. See screenshots
          Hide
          Marina Glancy added a comment -

          Thanks Damyon, integrated in 2.6

          Show
          Marina Glancy added a comment - Thanks Damyon, integrated in 2.6
          Hide
          David Monllaó added a comment -

          (Multichoice edit question) The choices labels alignment goes according to other field's legends but the editor field is extended untl the left margin

          User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36

          Show
          David Monllaó added a comment - (Multichoice edit question) The choices labels alignment goes according to other field's legends but the editor field is extended untl the left margin User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36
          Hide
          David Monllaó added a comment - - edited

          (Multichoice edit question) Resizing the choice and feedback editors

          (Edited: Only using clean theme, working as expected in standard)

          User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36

          Show
          David Monllaó added a comment - - edited (Multichoice edit question) Resizing the choice and feedback editors (Edited: Only using clean theme, working as expected in standard) User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36
          Hide
          David Monllaó added a comment -

          After resizing the editor it is cut when resizing the browser window. Same behaviour in clean and standard.

          User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36

          Show
          David Monllaó added a comment - After resizing the editor it is cut when resizing the browser window. Same behaviour in clean and standard. User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.48 Safari/537.36
          Hide
          Tim Hunt added a comment -

          Damyon, you say "Fix added and tested. (Note it is still all 1 commit - I squashed)" following a long discussion of two possible fixes. Which fix is this?!

          Note, I would have gone for 'demo2' but with slightly more space for the label, to reduce the crazy wrapping. (Perhaps forum just has long labels.) Also, the help icon seems to be wrapping even when that is not necessary.

          Show
          Tim Hunt added a comment - Damyon, you say "Fix added and tested. (Note it is still all 1 commit - I squashed)" following a long discussion of two possible fixes. Which fix is this?! Note, I would have gone for 'demo2' but with slightly more space for the label, to reduce the crazy wrapping. (Perhaps forum just has long labels.) Also, the help icon seems to be wrapping even when that is not necessary.
          Hide
          Ankit Agarwal added a comment -

          Just for reference, here are my test results
          https://tracker.moodle.org/secure/ViewSession.jspa?testSessionId=10641

          Thanks

          Show
          Ankit Agarwal added a comment - Just for reference, here are my test results https://tracker.moodle.org/secure/ViewSession.jspa?testSessionId=10641 Thanks
          Hide
          Damyon Wiese added a comment -

          Tim - Martin chose demo1.

          Working on a fix for the issues reported by Ankit now...

          Show
          Damyon Wiese added a comment - Tim - Martin chose demo1. Working on a fix for the issues reported by Ankit now...
          Hide
          Rajesh Taneja added a comment -

          With this fix, on Add a note page there is empty space added, which looks odd.

          Show
          Rajesh Taneja added a comment - With this fix, on Add a note page there is empty space added, which looks odd.
          Hide
          Tim Hunt added a comment -

          Would be good if Martin could comment here with his rationale.

          Show
          Tim Hunt added a comment - Would be good if Martin could comment here with his rationale.
          Hide
          Rajesh Taneja added a comment -

          Lot of space added on badge issue page.

          Show
          Rajesh Taneja added a comment - Lot of space added on badge issue page.
          Hide
          Rajesh Taneja added a comment - - edited

          While inserting comment in wiki, label appears on side.

          1. Go to wiki
          2. Click on comments tab
          3. click on Add comment link.

          On edit tab label appears fine.

          Show
          Rajesh Taneja added a comment - - edited While inserting comment in wiki, label appears on side. Go to wiki Click on comments tab click on Add comment link. On edit tab label appears fine.
          Hide
          Barbara Ramiro added a comment -

          Tested this on iPhone.
          Checkboxes out of place.
          Select too long, goes beyond the screen which needs horizontal scrolling, same with the long text.

          Show
          Barbara Ramiro added a comment - Tested this on iPhone. Checkboxes out of place. Select too long, goes beyond the screen which needs horizontal scrolling, same with the long text.
          Hide
          Damyon Wiese added a comment -

          There is a fix branch - but I could not fix everything.

          git pull git@github.com:damyon/moodle.git MDL-42887-master-fix1

          This fixes the question edit form padding - and the edit category page.

          There are remaining issues with form fields with empty string labels - or just help icon labels that look a bit odd - but I could not fix these without adding regressions in this time frame. These issues would already be apparent in clean theme on the smallest screen size.

          Show
          Damyon Wiese added a comment - There is a fix branch - but I could not fix everything. git pull git@github.com:damyon/moodle.git MDL-42887 -master-fix1 This fixes the question edit form padding - and the edit category page. There are remaining issues with form fields with empty string labels - or just help icon labels that look a bit odd - but I could not fix these without adding regressions in this time frame. These issues would already be apparent in clean theme on the smallest screen size.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Changes sent to integration.git, ready to re test, thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Changes sent to integration.git, ready to re test, thanks!
          Hide
          David Monllaó added a comment -

          Passing as discussed in the chat. The current issues are not breaking any functionality but some aspects needs improvement. Creating linked issues, please Rajesh Taneja, Jérôme Mouneyrac and Barbara Ramiro create and link the issues you think that should be solved. I'm also creating an issue for https://tracker.moodle.org/secure/attachment/35715/jira-capture-screenshot-20131115-160158-238.png

          Show
          David Monllaó added a comment - Passing as discussed in the chat. The current issues are not breaking any functionality but some aspects needs improvement. Creating linked issues, please Rajesh Taneja , Jérôme Mouneyrac and Barbara Ramiro create and link the issues you think that should be solved. I'm also creating an issue for https://tracker.moodle.org/secure/attachment/35715/jira-capture-screenshot-20131115-160158-238.png
          Hide
          Eloy Lafuente (stronk7) added a comment -

          It's Friday, I'm tired so I won't be very imaginative today.

          No matter of that, yes, you did it! Thanks for your collaboration!

          Closing this as fixed!

          Show
          Eloy Lafuente (stronk7) added a comment - It's Friday, I'm tired so I won't be very imaginative today. No matter of that, yes, you did it! Thanks for your collaboration! Closing this as fixed!
          Hide
          Martin Dougiamas added a comment -

          Thanks to everyone for coming together and getting this done.

          It's not a big patch diff but I think it's a massive step forward for the general usability of Moodle forms on all window sizes.

          Even though it was finally forced by the recent editor changes, overall our forms are clearly better in 2.6 than 2.5.

          Show
          Martin Dougiamas added a comment - Thanks to everyone for coming together and getting this done. It's not a big patch diff but I think it's a massive step forward for the general usability of Moodle forms on all window sizes. Even though it was finally forced by the recent editor changes, overall our forms are clearly better in 2.6 than 2.5.
          Hide
          Tim Hunt added a comment -

          I have to disagree. For certain big forms, it is a clear step backwards. I really wish this had waited until 2.7, when it could have been done properly, with due consideration and user input, and with plenty of time to fix the regressions caused.

          Show
          Tim Hunt added a comment - I have to disagree. For certain big forms, it is a clear step backwards. I really wish this had waited until 2.7, when it could have been done properly, with due consideration and user input, and with plenty of time to fix the regressions caused.

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: