Uploaded image for project: '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

          Attachments

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

            Issue Links

              Activity

              Hide
              phalacee Jason Fowler added a comment -

              All looks fine to me Damyon, pushing for integration.

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

              Noting - Martin want this in RC1.

              Show
              damyon Damyon Wiese added a comment - Noting - Martin want this in RC1.
              Hide
              damyon 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 Damyon Wiese added a comment - I just repushed the branch to fix a visual glitch on wide screen question editing forms in standard.
              Hide
              stronk7 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
              stronk7 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
              dougiamas 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
              dougiamas 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
              stronk7 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
              stronk7 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
              timhunt 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
              timhunt 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
              timhunt 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
              timhunt 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
              timhunt Tim Hunt added a comment -

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

              Show
              timhunt Tim Hunt added a comment - Sorry, don't know why TinyMCE was not showing up there.
              Hide
              timhunt 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
              timhunt 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
              stronk7 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
              stronk7 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 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 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
              phalacee Jason Fowler added a comment -

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

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

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

              Show
              andyjdavis Andrew Davis added a comment - Just based on those two screenshots, demo 1 looks better.
              Hide
              stronk7 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
              stronk7 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 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 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
              fred 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
              fred 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 Damyon Wiese added a comment -

              Fixing bug for checkbox in RTL now...

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

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

              Show
              damyon Damyon Wiese added a comment - - edited Fix added and tested. (Note it is still all 1 commit - I squashed)
              Hide
              marina 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 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 Marina Glancy added a comment -

              Thanks Damyon, integrated in 2.6

              Show
              marina Marina Glancy added a comment - Thanks Damyon, integrated in 2.6
              Hide
              dmonllao 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
              dmonllao 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
              dmonllao 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
              dmonllao 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
              dmonllao 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
              dmonllao 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
              timhunt 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
              timhunt 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_frenz 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_frenz 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 Damyon Wiese added a comment -

              Tim - Martin chose demo1.

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

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

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

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

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

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

              Lot of space added on badge issue page.

              Show
              rajeshtaneja Rajesh Taneja added a comment - Lot of space added on badge issue page.
              Hide
              rajeshtaneja 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
              rajeshtaneja 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
              barbararamiro 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
              barbararamiro 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 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 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
              stronk7 Eloy Lafuente (stronk7) added a comment -

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

              Show
              stronk7 Eloy Lafuente (stronk7) added a comment - Changes sent to integration.git, ready to re test, thanks!
              Hide
              dmonllao 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
              dmonllao 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
              stronk7 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
              stronk7 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
              dougiamas 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
              dougiamas 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
              timhunt 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
              timhunt 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:
                    Fix Release Date:
                    18/Nov/13