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

          Attachments

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

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

              Show
              mudrd8mz David Mudrák 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: