Details

    • Type: Task
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Component/s: docs.moodle.org
    • Labels:
      None

      Description

      Theme should have:

      • Black sites bar across top
      • Purple colour scheme
      • Responsive design for main skin and our page content

        Gliffy Diagrams

        1. content_block.png
          251 kB
        2. content-action and version.png
          24 kB
        3. docs page study 13 (footer revised).jpg
          347 kB
        4. docs wireframe homepage [draft].png
          155 kB
        5. docs wireframe - pages [draft].png
          288 kB
        6. docs-with-site-footer.png
          167 kB
        7. dropdown_menu.png
          22 kB
        8. mainpage_changes.png
          257 kB
        9. personal-tools.png
          17 kB
        10. Screen Shot 2014-04-23 at 4.40.24 pm.png
          278 kB
        11. Screen Shot 2014-04-28 at 4.18.19 pm.png
          57 kB
        12. sitenotice - version dropdown.png
          23 kB
        13. study 12 docsfooter a.jpg
          200 kB
        14. toc-on-desktop.png
          164 kB
        15. toc-on-ipad-landscape.png
          164 kB
        16. toc-on-large-screen.png
          298 kB

          Issue Links

          1.
          Add table styling Sub-task Resolved Dan Poltawski
           
          2.
          Disable mobile theme in config Sub-task Resolved Dan Poltawski
           
          3.
          Verify the drop down menu 'action' string Sub-task Resolved Dan Poltawski
           
          4.
          Remove use of monobook css completely Sub-task Resolved Barbara Ramiro
           
          5.
          Not-yet-created talk page links should be a different colour Sub-task Closed Barbara Ramiro
           
          6.
          Ensure tooltips and access keys navigation items Sub-task Closed Dan Poltawski
           
          7.
          Docs personal tools dropdown doesn't work on contributions page Sub-task Resolved Dan Poltawski
           
          8.
          "New feature in Moodle 2.7!" box needs styling Sub-task Closed Unassigned
           
          9.
          Responsiveness of menus/search is broken Sub-task Resolved Barbara Ramiro
           
          10.
          Move 'edit' link to right side of titles Sub-task Resolved Dan Poltawski
           
          11.
          Fix image layout on tables Sub-task Resolved Barbara Ramiro
           
          12.
          Docs wiki main pages missing logos and other styling Sub-task Closed Dan Poltawski
           
          13.
          moodle.org username exposed Sub-task Closed Unassigned
           
          14.
          Quite a lot of white space at the top of the page Sub-task Resolved Helen Foster
           
          15.
          Docs needs a purple 'm' favicon Sub-task Closed Dan Poltawski
           
          16.
          Code snippets are displayed with extra lines on dev docs Sub-task Resolved Dan Poltawski
           
          17.
          Content should wrap at the right-hand menu point Sub-task Resolved Barbara Ramiro
           
          18.
          Put Table of Contents back inline Sub-task Resolved Barbara Ramiro
           
          19.
          Versions and More options drop downs not working in Chrome on Win 8 touch screen Sub-task Resolved Barbara Ramiro
           
          20.
          Make extension to place some content properly Sub-task Closed Dan Poltawski
           
          21.
          CSS class 'note' styling needs adding to the new docs theme Sub-task Resolved Barbara Ramiro
           
          22.
          "New feature in Moodle ..." styling lost Sub-task Resolved Barbara Ramiro
           
          23.
          Table too wide Sub-task Resolved Barbara Ramiro
           
          24.
          Add sitenotice to the docs theme Sub-task Closed Dan Poltawski
           
          25.
          Anchor link hidden below #moodlesitestopnavbar after following it Sub-task Resolved Barbara Ramiro
           
          26.
          Whitespace swallowed in code/pre tags Sub-task Closed Dan Poltawski
           
          27.
          Watch / unwatch pages should not require a page reload Sub-task Resolved Dan Poltawski
           
          28.
          Style infoboxes nicely Sub-task Closed Barbara Ramiro
           
          29.
          Missing margin after ULs Sub-task Closed Barbara Ramiro
           
          30.
          MOODLE DOCS: dropdown menu links not clickable Sub-task Closed Unassigned
           
          31.
          Links on notes difficult to spot Sub-task Closed Barbara Ramiro
           
          32.
          Docs footer not balanced and looked cramped on small screen Sub-task Resolved Barbara Ramiro
           
          33.
          Infobox positioned on the side block Sub-task Closed Barbara Ramiro
           
          34.
          Inconsistently right-aligned edit links Sub-task Closed Dan Poltawski
           
          35.
          Docs footer overlapping nav block Sub-task Closed Barbara Ramiro
           
          36.
          Docs footer styling is hardcoded to 3 footer blocks, there could be 2 Sub-task Resolved Barbara Ramiro
           
          37.
          Icons in footer navigation are not aligned Sub-task Resolved Barbara Ramiro
           
          38.
          Usernames have reappeared on history pages and elsewhere Sub-task Closed Unassigned
           

            Activity

            Hide
            tsala Helen Foster added a comment -

            Attaching previous mock-ups from MDLSITE-1874.

            Show
            tsala Helen Foster added a comment - Attaching previous mock-ups from MDLSITE-1874 .
            Hide
            marycooch Mary Cooch added a comment -

            Adding the link to one example Helen showed me the other day http://www.ovirt.org/Home

            Show
            marycooch Mary Cooch added a comment - Adding the link to one example Helen showed me the other day http://www.ovirt.org/Home
            Hide
            mudrd8mz David Mudrak added a comment -

            Adding Eloy as a watcher, he has experience with styling mediawiki. This is his comment originally posted in MDLSITE-2827

            About the theme, if you're planning to start from something cleaner, whiter... I'd recommend to move from Monobook to Vector, I've done some small customizations in the later and found it way easier than Monobook. Take this with a pinch of salt, because I have not followed skins evolution lately. Just a side comment from a experience from the past.

            Our current plan is to have some nice bootstrapped skin that would fit well the overall shiny moodle.org reboot wave. One alternative is to write a skin from scratch. Or, we can inject bootstrap into Vector as Eloy suggests.

            Show
            mudrd8mz David Mudrak added a comment - Adding Eloy as a watcher, he has experience with styling mediawiki. This is his comment originally posted in MDLSITE-2827 About the theme, if you're planning to start from something cleaner, whiter... I'd recommend to move from Monobook to Vector, I've done some small customizations in the later and found it way easier than Monobook. Take this with a pinch of salt, because I have not followed skins evolution lately. Just a side comment from a experience from the past. Our current plan is to have some nice bootstrapped skin that would fit well the overall shiny moodle.org reboot wave. One alternative is to write a skin from scratch. Or, we can inject bootstrap into Vector as Eloy suggests.
            Hide
            xymoodle XY Ng added a comment -

            Have attached a proposed draft layout as a start for discussions (just the page, will post the homepage separately), based on the following goals:

            1. Clear content hierarchy
            2. User functions organised and grouped for easy accessibility - Login, edit tools, page links
            3. Consistent content layout as with moodle.org

            Show
            xymoodle XY Ng added a comment - Have attached a proposed draft layout as a start for discussions (just the page, will post the homepage separately), based on the following goals: 1. Clear content hierarchy 2. User functions organised and grouped for easy accessibility - Login, edit tools, page links 3. Consistent content layout as with moodle.org
            Hide
            tsala Helen Foster added a comment -

            Thanks a lot XY for coming up with a draft layout. Just copying your comments explaining things from our chat:

            I just thought it'd be good to 1) make it clear the release version and language options 2) group all the user tools at the top right, and lastly keep all sub navigation on the side like we do with moodle.org

            the dropdowns for each option 'Article', 'Edit', and 'Page' will be of what is in 'Tools' in our current wiki skin and the edit links

            Show
            tsala Helen Foster added a comment - Thanks a lot XY for coming up with a draft layout. Just copying your comments explaining things from our chat: I just thought it'd be good to 1) make it clear the release version and language options 2) group all the user tools at the top right, and lastly keep all sub navigation on the side like we do with moodle.org the dropdowns for each option 'Article', 'Edit', and 'Page' will be of what is in 'Tools' in our current wiki skin and the edit links
            Hide
            tsala Helen Foster added a comment -

            The draft layout looks very nice to me. I do like the fact that items such as the navigation trail are consistent with moodle.org.

            Re. the search, I wondered whether it could be made similar to https://moodle.org/plugins/ and forum pages such as https://moodle.org/mod/forum/view.php?id=28 i.e. have a button labelled 'Search documentation' and position it top right?

            Show
            tsala Helen Foster added a comment - The draft layout looks very nice to me. I do like the fact that items such as the navigation trail are consistent with moodle.org. Re. the search, I wondered whether it could be made similar to https://moodle.org/plugins/ and forum pages such as https://moodle.org/mod/forum/view.php?id=28 i.e. have a button labelled 'Search documentation' and position it top right?
            Hide
            xymoodle XY Ng added a comment -

            Attached a mockup of the 'main page' layout to help start the discussion.

            As usual, buttons or tabs, blocks, links and fonts styles are just a visual - Barbara will design the styles.

            Helen - Because the user profile links are different (more links) on wiki than on the rest of the site, am guessing that'd mean the search field isn't viable if it's next to it. Unless the links go into a dropdown too. A discussion for Barb and David

            Show
            xymoodle XY Ng added a comment - Attached a mockup of the 'main page' layout to help start the discussion. As usual, buttons or tabs, blocks, links and fonts styles are just a visual - Barbara will design the styles. Helen - Because the user profile links are different (more links) on wiki than on the rest of the site, am guessing that'd mean the search field isn't viable if it's next to it. Unless the links go into a dropdown too. A discussion for Barb and David
            Hide
            marycooch Mary Cooch added a comment -

            Thanks for the main page layout too XY; these mockups/wireframes are really helpful for wordy people like me to visualise things
            I think expandable blocks/rows with the 5 main sections on (About Moodle/Managing a Moodle site/Installation/Managing a Moodle course/Managing content) would look good.(I liked the way that blender wiki did it for example)
            Perhaps we could tweak the intro a bit (for example, as developers have their own documentation we can point them to that in the first paragraph, and it is nice in each version main page to refer to the new features also, in the second paragraph)

            Show
            marycooch Mary Cooch added a comment - Thanks for the main page layout too XY; these mockups/wireframes are really helpful for wordy people like me to visualise things I think expandable blocks/rows with the 5 main sections on (About Moodle/Managing a Moodle site/Installation/Managing a Moodle course/Managing content) would look good.(I liked the way that blender wiki did it for example) Perhaps we could tweak the intro a bit (for example, as developers have their own documentation we can point them to that in the first paragraph, and it is nice in each version main page to refer to the new features also, in the second paragraph)
            Hide
            mudrd8mz David Mudrak added a comment -

            See http://www.mediawiki.org/wiki/Manual:Skinning#Page_Elements for the list of page elements that we need to think of when designing the layout.

            Show
            mudrd8mz David Mudrak added a comment - See http://www.mediawiki.org/wiki/Manual:Skinning#Page_Elements for the list of page elements that we need to think of when designing the layout.
            Hide
            xymoodle XY Ng added a comment -
            Show
            xymoodle XY Ng added a comment - Brief and copy for collaboration: https://docs.google.com/document/d/1opClRzzDM84cQZk0eBYX6T-tBEGQwvXoHBng_X1qVIY/edit
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Sorry i forgot to note here that Helen Foster has asked me last wednesday to have a look at theming mediawiki. So far I am doing only CSS/LESS changes to make it look consistent with the theme. I've requested a clone of the docs from Matthew Spurrier yesterday which might be finished by now.

            Show
            barbararamiro Barbara Ramiro added a comment - Sorry i forgot to note here that Helen Foster has asked me last wednesday to have a look at theming mediawiki. So far I am doing only CSS/LESS changes to make it look consistent with the theme. I've requested a clone of the docs from Matthew Spurrier yesterday which might be finished by now.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Update: Got the clone files from Matt today and then the database set up by Dan. I would have not done the database myself, too complex.

            Show
            barbararamiro Barbara Ramiro added a comment - Update: Got the clone files from Matt today and then the database set up by Dan. I would have not done the database myself, too complex.
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            Update: This is how the style looks at the moments (still in progress). No major changes just CSS tweaks to make it look consistent with the moodleorgcleaned theme.

            The TOC (Contents) block is placed on the right side of the content rather than within the content so users can see the content right away without having to do long scroll on long TOC.

            Though the TOC would be better on top of the Sideblock (About Moodle)

            It would be good to make the Sideblock collapsible too just like the TOC

            Show
            barbararamiro Barbara Ramiro added a comment - - edited Update: This is how the style looks at the moments (still in progress). No major changes just CSS tweaks to make it look consistent with the moodleorgcleaned theme. The TOC (Contents) block is placed on the right side of the content rather than within the content so users can see the content right away without having to do long scroll on long TOC. Though the TOC would be better on top of the Sideblock (About Moodle) It would be good to make the Sideblock collapsible too just like the TOC
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            Update: This is how the mediawiki footer looks like at the moment...

            The site footer will be in between the mediawiki footer and the the black footer.

            Note: Please ignore the moodle logo. It should be removed as it is redundant with the logo on the sitebar. Should be removed on the tracker as well.

            Show
            barbararamiro Barbara Ramiro added a comment - - edited Update: This is how the mediawiki footer looks like at the moment... The site footer will be in between the mediawiki footer and the the black footer. Note: Please ignore the moodle logo. It should be removed as it is redundant with the logo on the sitebar. Should be removed on the tracker as well.
            Hide
            tsala Helen Foster added a comment -

            Barbara, thanks for your work on the Moodle Docs theme. I really like how it looks in the two screenshots.

            Positioning the TOC on the right is a nice idea, however I wonder if it would work for pages with long section titles e.g. http://docs.moodle.org/26/en/Authentication_FAQ ?

            Re. the footer, I'm wondering what you mean by 'site footer'? I agree with you that the moodle logo should be removed (also in the tracker).

            Show
            tsala Helen Foster added a comment - Barbara, thanks for your work on the Moodle Docs theme. I really like how it looks in the two screenshots. Positioning the TOC on the right is a nice idea, however I wonder if it would work for pages with long section titles e.g. http://docs.moodle.org/26/en/Authentication_FAQ ? Re. the footer, I'm wondering what you mean by 'site footer'? I agree with you that the moodle logo should be removed (also in the tracker).
            Hide
            tsala Helen Foster added a comment -

            Following on from David's comment re. http://www.mediawiki.org/wiki/Manual:Skinning#Page_Elements I'm just noting a few things about how we use various page elements:

            (Note: Pages with MediaWiki in the URL can only be edited by an admin.)

            Show
            tsala Helen Foster added a comment - Following on from David's comment re. http://www.mediawiki.org/wiki/Manual:Skinning#Page_Elements I'm just noting a few things about how we use various page elements: Site Notice - used for Docs for other versions links, defined in http://docs.moodle.org/26/en/MediaWiki:Sitenotice In the current wiki it's in a prominent position (top right) and uses a small font size which is good I think, as generally most users would click only one of the version links if at all. Tagline (Site Subtitle) - unused (defined in http://docs.moodle.org/26/en/MediaWiki:Tagline ) User-Messages Notification - I don't know if this works in Moodle Docs as I have not seen a notification in years! Site Logo - unused, though I guess we'll have a Moodle Docs logo on the front page of the docs? Sidebar Navigation - Navigation block currently positioned at the bottom of each page, links defined in http://docs.moodle.org/26/en/MediaWiki:Sidebar Search - As mentioned previously, the buttons 'Go' and 'Search' are confusing. Just noting that they can be changed by editing http://docs.moodle.org/26/en/MediaWiki:Searcharticle and http://docs.moodle.org/26/en/MediaWiki:Searchbutton The order of the navigation, search and tools blocks seems to be defined in http://docs.moodle.org/26/en/MediaWiki:Sidebar (Note: Pages with MediaWiki in the URL can only be edited by an admin.)
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Hi Helen,

            The TOC will look like any activity with long title on navigation block on moodlesite.

            Here are few screenshots of TOC:

            On large screen...

            On 1024 desktop...

            On ipad landscape...

            And here's what i mean by site footer on docs which i am not sure whether its site wide or not.

            Show
            barbararamiro Barbara Ramiro added a comment - Hi Helen, The TOC will look like any activity with long title on navigation block on moodlesite. Here are few screenshots of TOC: On large screen... On 1024 desktop... On ipad landscape... And here's what i mean by site footer on docs which i am not sure whether its site wide or not.
            Hide
            poltawski Dan Poltawski added a comment -

            David Mudrak would you like me to take this ball from you? (Might require a bit of annoying questions and outline of your plan to do that)

            Show
            poltawski Dan Poltawski added a comment - David Mudrak would you like me to take this ball from you? (Might require a bit of annoying questions and outline of your plan to do that)
            Hide
            mudrd8mz David Mudrak added a comment -

            Oh that would be very nice of you! Thanks a lot.

            Show
            mudrd8mz David Mudrak added a comment - Oh that would be very nice of you! Thanks a lot.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Hi Dan Poltawski, here goes the styles. Hope you can find the diffs. Will talk to you about the details in person.

            Show
            barbararamiro Barbara Ramiro added a comment - Hi Dan Poltawski , here goes the styles. Hope you can find the diffs. Will talk to you about the details in person.
            Hide
            poltawski Dan Poltawski added a comment - - edited

            Barbaras changes on a branch for me to go through with her:
            https://github.com/danpoltawski/mediawiki/commits/REL1_21_skin-barb-reworked

            Also to discuss:
            mediawiki/skins/monobook/main copy 2.css
            mediawiki/skins/monobook/main used for editing.css
            mediawiki/skins/moodledocsnew/original/

            Show
            poltawski Dan Poltawski added a comment - - edited Barbaras changes on a branch for me to go through with her: https://github.com/danpoltawski/mediawiki/commits/REL1_21_skin-barb-reworked Also to discuss: mediawiki/skins/monobook/main copy 2.css mediawiki/skins/monobook/main used for editing.css mediawiki/skins/moodledocsnew/original/
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Sorry Dan i forgot to remove those files and folder. Please dont include them. They were my backups.

            Show
            barbararamiro Barbara Ramiro added a comment - Sorry Dan i forgot to remove those files and folder. Please dont include them. They were my backups.
            Hide
            poltawski Dan Poltawski added a comment -

            Summary (for my own memory bank ).

            • Bootstrap less has been added along with a less file which is used for our changes (and can be used for the customisation of the wiki versions -e.g. the dev docs wiki getting the right colour).
            • The idea is to avoid using Monobook at all, moving towards that and eventually we'll not include it all
            • The files I thought weren't used aren't used as expected

            Next step is to get the new theme rework branch onto a test site so it can be seen a bit more widely and also to get Barb working off that branch.

            Show
            poltawski Dan Poltawski added a comment - Summary (for my own memory bank ). Bootstrap less has been added along with a less file which is used for our changes (and can be used for the customisation of the wiki versions -e.g. the dev docs wiki getting the right colour). The idea is to avoid using Monobook at all, moving towards that and eventually we'll not include it all The files I thought weren't used aren't used as expected Next step is to get the new theme rework branch onto a test site so it can be seen a bit more widely and also to get Barb working off that branch.
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            Main page

            Noting things the need to be done on the structure...

            1. The sitenotice needs to be manually edited to reflect this change removing "Docs for other versions:" and "/"
            2. Replace class "frontpagetotal" with "container-fluid"
            3. Add class "lead" to the note and put it within a div called "well"
            4. Replace class "frontpageblock" with "span4" and put them in a div called "row-fluid"
            5. Move the "See also block" at the bottom

            <div class="container-fluid">
                <div class="well">
                    <p class="note lead"></p>
                </div>
                <div class="row-fluid">
                    <div class="span4"></div>
                    <div class="span4"></div>
                    <div class="span4"></div>
                </div>
                <div class="row-fluid">
                    <div class="span4"></div>
                    <div class="span4"></div>
                </div>
                <div class="row-fluid"></div>
            </div>
            <h3>
                <span id="See_also" class="mw-headline"></span>
            </h3>
            

            Show
            barbararamiro Barbara Ramiro added a comment - - edited Main page Noting things the need to be done on the structure... 1. The sitenotice needs to be manually edited to reflect this change removing "Docs for other versions:" and "/" 2. Replace class "frontpagetotal" with "container-fluid" 3. Add class "lead" to the note and put it within a div called "well" 4. Replace class "frontpageblock" with "span4" and put them in a div called "row-fluid" 5. Move the "See also block" at the bottom <div class="container-fluid"> <div class="well"> <p class="note lead"></p> </div> <div class="row-fluid"> <div class="span4"></div> <div class="span4"></div> <div class="span4"></div> </div> <div class="row-fluid"> <div class="span4"></div> <div class="span4"></div> </div> <div class="row-fluid"></div> </div> <h3> <span id="See_also" class="mw-headline"></span> </h3>
            Hide
            poltawski Dan Poltawski added a comment -

            There are 4 things which need to be done to be done, it can be a bit confusing:

            1) The theme, (obviously) - styling with css.
            2) Some tweaks to the theme templates (like moodle 'renderers')
            3) Some tweaks to 'templates' in mediawiki (e.g. http://docs.moodle.org/27/en/MediaWiki:Sitenotice )
            4) Some tweaks to content pages which have had html markup inserted

            Show
            poltawski Dan Poltawski added a comment - There are 4 things which need to be done to be done, it can be a bit confusing: 1) The theme, (obviously) - styling with css. 2) Some tweaks to the theme templates (like moodle 'renderers') 3) Some tweaks to 'templates' in mediawiki (e.g. http://docs.moodle.org/27/en/MediaWiki:Sitenotice ) 4) Some tweaks to content pages which have had html markup inserted
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Regarding the SiteNotice, the currently selected version tab needs to be made clickable that links to the version's main page.

            Show
            barbararamiro Barbara Ramiro added a comment - Regarding the SiteNotice, the currently selected version tab needs to be made clickable that links to the version's main page.
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            To limit the content within the content block and not flow under the sideblock or the table of contents (TOC) if either of these exists, add...

            <div class="contentblock">
            

            right after the the sideblock and the first heading. But this must be done on the template so it is applied to all the pages, is it right Dan Poltawski?

            Show
            barbararamiro Barbara Ramiro added a comment - - edited To limit the content within the content block and not flow under the sideblock or the table of contents (TOC) if either of these exists, add... <div class="contentblock"> right after the the sideblock and the first heading. But this must be done on the template so it is applied to all the pages, is it right Dan Poltawski ?
            Hide
            barbararamiro Barbara Ramiro added a comment -

            These menus get really long especially on small screen, better to have it dropdown.

            Show
            barbararamiro Barbara Ramiro added a comment - These menus get really long especially on small screen, better to have it dropdown.
            Hide
            poltawski Dan Poltawski added a comment -

            But this must be done on the template so it is applied to all the pages, is it right Dan Poltawski?

            Hmm, this is looking much more tricky than I would expect it to be:
            http://stackoverflow.com/questions/19599757/how-do-i-insert-the-table-of-contents-outside-the-main-page-content-region-in-a

            Investigations continue..

            Show
            poltawski Dan Poltawski added a comment - But this must be done on the template so it is applied to all the pages, is it right Dan Poltawski? Hmm, this is looking much more tricky than I would expect it to be: http://stackoverflow.com/questions/19599757/how-do-i-insert-the-table-of-contents-outside-the-main-page-content-region-in-a Investigations continue..
            Hide
            barbararamiro Barbara Ramiro added a comment -

            I wonder how its done here... http://docs.webplatform.org/wiki/Main_Page

            Show
            barbararamiro Barbara Ramiro added a comment - I wonder how its done here... http://docs.webplatform.org/wiki/Main_Page
            Hide
            poltawski Dan Poltawski added a comment -

            I wonder how its done here... http://docs.webplatform.org/wiki/Main_Page

            Looks like its done with javascript. Horrible, but at least it explains how it works.

            Show
            poltawski Dan Poltawski added a comment - I wonder how its done here... http://docs.webplatform.org/wiki/Main_Page Looks like its done with javascript. Horrible, but at least it explains how it works.
            Hide
            tsala Helen Foster added a comment -

            -1 to moodle.org site footer being applied to Moodle Docs. I think it should be on moodle.org ONLY. (For one thing, I imagine it would be hard to maintain on other sites?)

            +1 to having dropdowns, especially for 'user page, talk, preferences, watchlist, ...' as it would be similar to the profile dropdown on moodle.org. The TOOLS and EDIT dropdowns in http://docs.webplatform.org/wiki/Main_Page look cool! Also on the same site, I'd really, really like the search box top right and the Go and Seach buttons removed. Am I hoping for too much?

            Show
            tsala Helen Foster added a comment - -1 to moodle.org site footer being applied to Moodle Docs. I think it should be on moodle.org ONLY. (For one thing, I imagine it would be hard to maintain on other sites?) +1 to having dropdowns, especially for 'user page, talk, preferences, watchlist, ...' as it would be similar to the profile dropdown on moodle.org. The TOOLS and EDIT dropdowns in http://docs.webplatform.org/wiki/Main_Page look cool! Also on the same site, I'd really, really like the search box top right and the Go and Seach buttons removed. Am I hoping for too much?
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Dan and I discussed about the dropdowns, the separation of the TOC and Sideblock yesterday afternoon with reference to http://docs.webplatform.org/wiki/Main_Page and he had a look at http://www.mediawiki.org/wiki/Vector. It also has the search displayed more prominently on the top right.

            Show
            barbararamiro Barbara Ramiro added a comment - Dan and I discussed about the dropdowns, the separation of the TOC and Sideblock yesterday afternoon with reference to http://docs.webplatform.org/wiki/Main_Page and he had a look at http://www.mediawiki.org/wiki/Vector . It also has the search displayed more prominently on the top right.
            Hide
            poltawski Dan Poltawski added a comment - - edited

            Yes, I think that switching to Vector based skin is the right way forward, since it seems the 'modern' mediawiki skin which replaces mono book. But unfortunately it will need a bit of tweaking to get into shape.

            Show
            poltawski Dan Poltawski added a comment - - edited Yes, I think that switching to Vector based skin is the right way forward, since it seems the 'modern' mediawiki skin which replaces mono book. But unfortunately it will need a bit of tweaking to get into shape.
            Hide
            dougiamas Martin Dougiamas added a comment -

            Just reminding, it needs to be fully responsive.

            Show
            dougiamas Martin Dougiamas added a comment - Just reminding, it needs to be fully responsive.
            Hide
            poltawski Dan Poltawski added a comment -

            Regarding my last comment, Barbara & I discussed switching to Vector yesterday and did some investigations, but it did not get us much further forward.

            Show
            poltawski Dan Poltawski added a comment - Regarding my last comment, Barbara & I discussed switching to Vector yesterday and did some investigations, but it did not get us much further forward.
            Hide
            poltawski Dan Poltawski added a comment -

            Martin Dougiamas I envisage the responsive requirement for the theme is going to cause a bit of a headache, the amount of content which exists and it totally outside the realms of the skin to be able to sort out is significant. Examples of the problems:

            1. The side blocks and table of contents used on almost every page. These are just presented as one giant blob of html for the skin with the rest of the content. Of course they can be styled, but getting them into containing bootstrap structure so that they would flow nicely is going to be really problematic and perhaps a bit fragile (best I can think of is a javascript hack which rearranged things in the dom structure, or perhaps parsing the content).
            1. We lots of pages which inline styles embedded in the content, or 'div' structures which need to be converted to bootstrap structure (and we can't do these changes until after the new skin is applied, they would be wiki edits).
            Show
            poltawski Dan Poltawski added a comment - Martin Dougiamas I envisage the responsive requirement for the theme is going to cause a bit of a headache, the amount of content which exists and it totally outside the realms of the skin to be able to sort out is significant. Examples of the problems: The side blocks and table of contents used on almost every page. These are just presented as one giant blob of html for the skin with the rest of the content. Of course they can be styled, but getting them into containing bootstrap structure so that they would flow nicely is going to be really problematic and perhaps a bit fragile (best I can think of is a javascript hack which rearranged things in the dom structure, or perhaps parsing the content). We lots of pages which inline styles embedded in the content, or 'div' structures which need to be converted to bootstrap structure (and we can't do these changes until after the new skin is applied, they would be wiki edits).
            Hide
            dougiamas Martin Dougiamas added a comment -

            I don't think the content is a big problem. 99% is pretty simple and will wrap OK, and we can improve the 1% when we find it. Main thing would just to have some CSS that shrinks big images sometimes.

            As for the TOC blocks, like on http://docs.moodle.org/27/en/Site_appearance, what it's doing now is more or less OK with me. When you shrink the screen the problems are all in the header mostly.

            We can't not design responsively these days ...

            Show
            dougiamas Martin Dougiamas added a comment - I don't think the content is a big problem. 99% is pretty simple and will wrap OK, and we can improve the 1% when we find it. Main thing would just to have some CSS that shrinks big images sometimes. As for the TOC blocks, like on http://docs.moodle.org/27/en/Site_appearance , what it's doing now is more or less OK with me. When you shrink the screen the problems are all in the header mostly. We can't not design responsively these days ...
            Hide
            timhunt Tim Hunt added a comment -

            tl;dr; but do we really need to waste so much space at the top of every page. E.g. compare the position of the first content heading on https://moodle.org/mod/forum/view.php?id=41 and http://next.docs.moodle.org/27/en/Site_appearance

            Show
            timhunt Tim Hunt added a comment - tl;dr; but do we really need to waste so much space at the top of every page. E.g. compare the position of the first content heading on https://moodle.org/mod/forum/view.php?id=41 and http://next.docs.moodle.org/27/en/Site_appearance
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            Hi Helen Foster, I've decreased the font size of the Sitenotice as you requested to the base font size which is 14px. Also I have converted it to a list to make it a proper navigation and so i can add classes as well to make the dropdown/toggle work.

            Here's how it looks...

            <ul>
            <li>'''2.7''' </li>
            <li>[http://docstest.moodle.local/26/en/{{FULLPAGENAMEE}} 2.6]</li>
            <li>[http://docstest.moodle.local/25/en/{{FULLPAGENAMEE}} 2.5] </li>
            <li class="dropdown">
            <span class="dropdown-toggle" data-toggle="dropdown">[[#|Older <b class="caret"></b>]]</span>
            <ul class="dropdown-menu">
            <li>[http://docstest.moodle.local/24/en/{{FULLPAGENAMEE}} 2.4] </li>
            <li>[http://docstest.moodle.local/23/en/{{FULLPAGENAMEE}} 2.3] </li>
            <li>[http://docstest.moodle.local/22/en/{{FULLPAGENAMEE}} 2.2] </li>
            <li>[http://docstest.moodle.local/21/en/{{FULLPAGENAMEE}} 2.1] </li>
            <li>[http://docstest.moodle.local/20/en/{{FULLPAGENAMEE}} 2.0] </li>
            <li>[http://docstest.moodle.local/19/en/{{FULLPAGENAMEE}} 1.9] </li>
            </ul>
            </li>
            </ul>
            

            Let me know what you think or if there's a way I can add those classes using the wiki way.

            Cheers

            Show
            barbararamiro Barbara Ramiro added a comment - - edited Hi Helen Foster , I've decreased the font size of the Sitenotice as you requested to the base font size which is 14px. Also I have converted it to a list to make it a proper navigation and so i can add classes as well to make the dropdown/toggle work. Here's how it looks... <ul> <li>'''2.7''' </li> <li>[http://docstest.moodle.local/26/en/{{FULLPAGENAMEE}} 2.6]</li> <li>[http://docstest.moodle.local/25/en/{{FULLPAGENAMEE}} 2.5] </li> <li class="dropdown"> <span class="dropdown-toggle" data-toggle="dropdown">[[#|Older <b class="caret"></b>]]</span> <ul class="dropdown-menu"> <li>[http://docstest.moodle.local/24/en/{{FULLPAGENAMEE}} 2.4] </li> <li>[http://docstest.moodle.local/23/en/{{FULLPAGENAMEE}} 2.3] </li> <li>[http://docstest.moodle.local/22/en/{{FULLPAGENAMEE}} 2.2] </li> <li>[http://docstest.moodle.local/21/en/{{FULLPAGENAMEE}} 2.1] </li> <li>[http://docstest.moodle.local/20/en/{{FULLPAGENAMEE}} 2.0] </li> <li>[http://docstest.moodle.local/19/en/{{FULLPAGENAMEE}} 1.9] </li> </ul> </li> </ul> Let me know what you think or if there's a way I can add those classes using the wiki way. Cheers
            Hide
            poltawski Dan Poltawski added a comment -

            Let me know what you think or if there's a way I can add those classes using the wiki way.

            Hmm, me and barbara have been discussing this (both unaware of the complete power of mediawiki really). Looks like the way is to define some more complex templates for use in the wikis:
            http://www.mediawiki.org/wiki/Help:Templates

            That way the standard things which have custom html/css at the moment can by converted to use those templates.

            Show
            poltawski Dan Poltawski added a comment - Let me know what you think or if there's a way I can add those classes using the wiki way. Hmm, me and barbara have been discussing this (both unaware of the complete power of mediawiki really). Looks like the way is to define some more complex templates for use in the wikis: http://www.mediawiki.org/wiki/Help:Templates That way the standard things which have custom html/css at the moment can by converted to use those templates.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Dan Poltawski, I had a look at the responsive issue on an actual device and found that the head does not have the necessary meta to make it responsive though it does work on a browser.

            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

            Could you add this please and let me know if it works. Thanks (" ,)

            Show
            barbararamiro Barbara Ramiro added a comment - Dan Poltawski , I had a look at the responsive issue on an actual device and found that the head does not have the necessary meta to make it responsive though it does work on a browser. <meta name="viewport" content="width=device-width, initial-scale=1.0"> Could you add this please and let me know if it works. Thanks (" ,)
            Hide
            poltawski Dan Poltawski added a comment -

            Barbara Ramiro done, pushed and deployed to http://next.docs.moodle.org

            Show
            poltawski Dan Poltawski added a comment - Barbara Ramiro done, pushed and deployed to http://next.docs.moodle.org
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Thanks Dan Poltawski, will test it.

            Show
            barbararamiro Barbara Ramiro added a comment - Thanks Dan Poltawski , will test it.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Looking at moodle.org's user tools, I think it would be better to apply the same thing to the docs personal tools where the dropdown arrow and the user name toggles the dropdown menu. Then add "view profile" to the dropdown menu to go to the user's page.

            Show
            barbararamiro Barbara Ramiro added a comment - Looking at moodle.org's user tools, I think it would be better to apply the same thing to the docs personal tools where the dropdown arrow and the user name toggles the dropdown menu. Then add "view profile" to the dropdown menu to go to the user's page.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Is there any particular reason why the dropdown doesn't work when you're on the contibutions page? I think i noticed this even before it was converted to dropdown.

            Show
            barbararamiro Barbara Ramiro added a comment - Is there any particular reason why the dropdown doesn't work when you're on the contibutions page? I think i noticed this even before it was converted to dropdown.
            Hide
            barbararamiro Barbara Ramiro added a comment - - edited

            Hi Dan Poltawski, here's the style for the personal tools dropdown menu https://github.com/barbararamiro/mediawiki/commits/personal-tools. Cheers (" ,)

            Show
            barbararamiro Barbara Ramiro added a comment - - edited Hi Dan Poltawski , here's the style for the personal tools dropdown menu https://github.com/barbararamiro/mediawiki/commits/personal-tools . Cheers (" ,)
            Hide
            poltawski Dan Poltawski added a comment -

            Pulled and deployed, thanks! (From pub, having a consolation beer, because I missed my train. GRRRR!!!)

            Show
            poltawski Dan Poltawski added a comment - Pulled and deployed, thanks! (From pub, having a consolation beer, because I missed my train. GRRRR!!!)
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Layout changed (small screen layout to follow). This should make the heading a bit higher as commented by Tim Hunt and this should fix the layout for "all versions" as commented by Helen Foster. Dan Poltawski, could you please pull https://github.com/barbararamiro/mediawiki/commits/content-actions and could you please fix the versions links?

            Show
            barbararamiro Barbara Ramiro added a comment - Layout changed (small screen layout to follow). This should make the heading a bit higher as commented by Tim Hunt and this should fix the layout for "all versions" as commented by Helen Foster . Dan Poltawski , could you please pull https://github.com/barbararamiro/mediawiki/commits/content-actions and could you please fix the versions links?
            Hide
            tsala Helen Foster added a comment -

            Barbara and Dan, thanks for the many improvements you've made following feedback. The new layout looks very fine indeed.

            Dan, I agree with templates being the best way forward.

            Regarding the docs personal tools dropdown, I don't think we can use the phrase 'view profile', as it's not the same as on moodle.org. I can't think of a reason why the dropdown doesn't work on the contributions page, sorry. Thus I created MDLSITE-3101 for it.

            Show
            tsala Helen Foster added a comment - Barbara and Dan, thanks for the many improvements you've made following feedback. The new layout looks very fine indeed. Dan, I agree with templates being the best way forward. Regarding the docs personal tools dropdown, I don't think we can use the phrase 'view profile', as it's not the same as on moodle.org. I can't think of a reason why the dropdown doesn't work on the contributions page, sorry. Thus I created MDLSITE-3101 for it.
            Hide
            poltawski Dan Poltawski added a comment -

            could you please pull https://github.com/barbararamiro/mediawiki/commits/content-actions and could you please fix the versions links?

            Done. I have introduced a sort of tempting way to do this so that its still controlled from the wiki, but html comes from theme, see:
            http://next.docs.moodle.org/27/en/index.php?title=MediaWiki:MoodleDocsVersionLinks&action=edit

            Note that I would've used the tempting system for this, but it seems it doesn't support loops. Anyway, I hope its the right balance

            Show
            poltawski Dan Poltawski added a comment - could you please pull https://github.com/barbararamiro/mediawiki/commits/content-actions and could you please fix the versions links? Done. I have introduced a sort of tempting way to do this so that its still controlled from the wiki, but html comes from theme, see: http://next.docs.moodle.org/27/en/index.php?title=MediaWiki:MoodleDocsVersionLinks&action=edit Note that I would've used the tempting system for this, but it seems it doesn't support loops. Anyway, I hope its the right balance
            Hide
            barbararamiro Barbara Ramiro added a comment -

            Thanks Dan. It works.

            Show
            barbararamiro Barbara Ramiro added a comment - Thanks Dan. It works.
            Hide
            barbararamiro Barbara Ramiro added a comment -

            I just noticed a regression on the personal tool dropdown, it must be due to multiple dropdown styles which is confusing so I've refactored it to share the same style for maintainability. Dan Poltawski, could you please pull https://github.com/barbararamiro/mediawiki/commits/dropdown. Cheers (" ,)

            Show
            barbararamiro Barbara Ramiro added a comment - I just noticed a regression on the personal tool dropdown, it must be due to multiple dropdown styles which is confusing so I've refactored it to share the same style for maintainability. Dan Poltawski , could you please pull https://github.com/barbararamiro/mediawiki/commits/dropdown . Cheers (" ,)
            Hide
            poltawski Dan Poltawski added a comment -

            pulled.

            Show
            poltawski Dan Poltawski added a comment - pulled.
            Hide
            nebgor Aparup Banerjee added a comment -

            hi folks, i see no mention of 'anchor' so thought i'd leave a note here about the recurring offset issue with # anchors and the sidebar on the top.
            (e.g. : mw-headline hidden @ http://docs.moodle.org/dev/Render_library_specification#Define_the_elements_that_make_up_Moodle )

            just in case this can also be resolvable with any mw upgrades or so.

            Show
            nebgor Aparup Banerjee added a comment - hi folks, i see no mention of 'anchor' so thought i'd leave a note here about the recurring offset issue with # anchors and the sidebar on the top. (e.g. : mw-headline hidden @ http://docs.moodle.org/dev/Render_library_specification#Define_the_elements_that_make_up_Moodle ) just in case this can also be resolvable with any mw upgrades or so.
            Hide
            tsala Helen Foster added a comment -

            Thanks Aparup, as it remains unresolved, I've created MDLSITE-3134 for it.

            Show
            tsala Helen Foster added a comment - Thanks Aparup, as it remains unresolved, I've created MDLSITE-3134 for it.
            Hide
            tsala Helen Foster added a comment -

            Many thanks Barbara and Dan and to everyone who helped with reporting and testing subtasks.

            Resolving as fixed now, since all subtasks are resolved or soon-to-be resolved.

            Show
            tsala Helen Foster added a comment - Many thanks Barbara and Dan and to everyone who helped with reporting and testing subtasks. Resolving as fixed now, since all subtasks are resolved or soon-to-be resolved.

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Development