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

      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.

        Gliffy Diagrams

        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: