Shoehorn updated for M2.7 and M2.8

Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Number of replies: 19
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hello Moodlers,

I am very pleased to announce an update to the Shoehorn theme:

M2.7: https://moodle.org/plugins/pluginversion.php?id=7740 - consisting of:

  1. Fixed blocks in footer not being wide enough.
  2. Fixed issue #406 from Essential: Assignment types: Online Audio Recording.
  3. Fixed issue #408 from Essential with regards to the background.
  4. Fixed issue with social icons with glyphicons.
  5. Rectified need to have separated M2.7 specific Bootstrap as parent theme.  Now can use:
     https://github.com/gjb2048/theme_bootstrap or https://moodle.org/plugins/view.php?plugin=theme_bootstrap
  6. Update grunt packages to latest versions.
  7. Added BCU theme 'This course' menu for courses.

M2.8: https://moodle.org/plugins/pluginversion.php?id=7741 - consisting of:

  1. Tidied up slider such that it does not cause the content to jump on the frontpage and the images are centred.
  2. Added a 'Go to bottom of page' icon in the navbar to make it easier when on settings and course pages.
  3. Tidy up course slider for one page per section courses - always show arrows on mobiles and tablets.
  4. Always show arrows on mobiles and tablets for the front page slider.
  5. Added a 'Go to top of page' icon that shows when the page is scrolled down.
  6. Update to Bootstrap 3.3.1: https://github.com/twbs/bootstrap/releases/tag/v3.3.1.
  7. Fixed 'Exit activity' in a SCORM activity not appearing the same as the breadcrumb.
  8. Fixed blocks in footer not being wide enough.
  9. Fixed issue #406 from Essential: Assignment types: Online Audio Recording.
 10. Fixed issue #408 from Essential with regards to the background.
 11. Fixed issue with social icons with glyphicons.
 12. Rectified need to have separated M2.7 specific Bootstrap as parent theme.  Now can use:
     https://github.com/gjb2048/theme_bootstrap or https://moodle.org/plugins/view.php?plugin=theme_bootstrap
 13. Update grunt packages to latest versions.
 14. Added BCU theme 'This course' menu for courses.

With the M2.8 version being the first stable version.  To make things simpler, I have rectified the code such that for both versions you only need the current version (2014120803) of Bas's excellent Bootstrap base theme, available from: https://moodle.org/plugins/pluginversions.php?plugin=theme_bootstrap.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

When I get back to my own computer, It will be one of the first things I will be sure to checkout.

Thanks for updating will be interesting to see what effect it will have.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thank you all smile.

Shoehorn is not finished yet.  Now that the RTL solution in Essential is working well since October 2014, I would like to implement that too, but its around two - three days solid work, so really a matter of when and not 'if'.  Even for LTR there should be some improvements in performance even just after a 'Purge all caches'.  The 'out there' code in Essential for this has worked and the risk / gamble paid off, even though it did start of as the 'experimental' setting here.

The course tiles do need tidying up as sometimes they don't quite work well.

I do realise that its not as COTS as Essential in terms of customisation, that you do need just above 'basic' computing skills and confidence in order to modify things.  I have been thinking about this and have considered the approach that the More theme uses with the PHP compiler, but not tried that yet.  However, I think that the compiler might be ok on BS2.3.2 but not on BS3, has anybody tried it?

But, if you can learn how to compile the CSS from the LESS using the instructions at the top of Gruntfile.js, then you can really have an impact on the colour scheme and properties contained within variables-shoehorn.less.  I would not consider it rocket science, so be brave and have a go.  I have seen some good customisations from Hartmut Scherer and Natalie Denmeade.  In fact, Natalie gave me the idea for the compact navbar.  I would also like to thank Kirk for his support smile.

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Thank you, Gareth, for the first stable version of Shoehorn. I really appreciate your effort to keep Bootstrap-based themes current. As soon as possible I want to take the challenge and try out the compiling of LESS files.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Thanks Hartmut.

Please do say how you get on.  The instructions I hope are clear enough, otherwise I could make a screen cast.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Hi Gareth,

I was able to install "npm" in the root directory of my test installation. 

What do I do with my Custom CSS? Can I compile the complete Custom CSS file into a LESS file? Or do I need to go line by line and find the corresponding code in variables-shoehorn.less? What do I do with the lines in Custom CSS when I don't find a corresponding code in variables-shoehorn.less?

Example:

.navbar-default .navbar-toggle {

border-color: #710101;

}

I searched for .navbar-default .navbar-toggle in all the Shoehorn/LESS files, but without success. Do I have to search the parent themes as well?

Can you point me in the right direction where to look for more information? That would be great.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

variables-shoehorn.less just contains variables with values.  Add the custom CSS to the https://github.com/gjb2048/moodle-theme_shoehorn/blob/MOODLE_27/less/shoehorn-custom.less file.  That is added last

Shoehorn uses the LESS in the parent 'Bootstrap' theme and therefore a lot of the styles come from its 'less' folder.  The easiest way to find things is to 'grunt compile -bulid=d' in the node.js command prompt to produce the developer version containing a source map.  This will then show up in Chrome developer tools when you inspect elements and tell you the LESS file containing the code.  You will need TDM to be on.

Also being LESS they will not be the full '.navbar-default .navbar-toggle' so you need to search on just '.navbar-toggle' if the source map developer tools does not work for you.

I kind of feel a screen cast coming on with installation and debugging skills, but that needs time, umm, perhaps I'll have some in February.

Kind regards,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by KirK Chapman -

Hi Gareth and Hartmut,

I've been extremely busy but I'm keenly interested in the subject. Haven't taken the time to learn the js node stuff. I did install it but got veered away by other tasks.  But I'd be happy to help fund a screencast in February! 

I'll stay tuned!

Peace

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Hi Gareth,

Thank you for your detailed response. Here is what I did.

- I added all lines of Custom CSS to the Shoehorn-custom.less file at the end

- In Command Prompt, I changed directory to C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn

- Running the command  'grunt compile -build=d' produced an error. So I used 'grunt compile less:shoehorn-custom' (taking an example from Gruntfile.js)

- Below is a screenshot. Compilation couldn't execute grunt decache, but created the moodle.treasure.map and the editor.treasure.map

grunt compile - executing decache failed



































Are both map files the "developer version containing a source map” which you mentioned in your post?

Then, I logged in to my test site, using Google Chrome, right-clicked and selected "Inspect element.” In the Network tab, I saw 3 error messages. 

Failed to load resource - 3 error messages











On my computer the path to 'moodle.treasure.map' is: \moodle\htdocs\theme\shoehorn\style\

I couldn't figure out how to correct the path nor how to load 'moodle.treasure.map' manually in Developer tools.

This is just my learning curve. I am not in a hurry, Gareth, as the production site is running fine and I am learning to use LESS in my test site. Whenever it is convenient for you, I appreciate your comments and instruction. Then, I will take the next step.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Ah ha, the '-build' bit was from memory, should have been '--build'!  Ok, I see from the URL that Moodle is in a sub-folder, ages since my setup was like that.  Anyway, that is why the source maps are wrong.  Ok, I have an option for that and 'build': https://github.com/gjb2048/moodle-theme_shoehorn/blob/MOODLE_27/Gruntfile.js#L83-L92.

So you just need to run 'grunt compile --build=d --urlprefix=/moodle' like before.  Then it should work.

The two map files are the ones mentioned in my previous post.

Don't worry about decache, it just runs PHP from the command prompt if its in the path.  It's only a 'Theme reset caches' and will not matter with TDM on.

Good luck,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Hi Gareth,

Thank you for all instruction. There is progress. Running 'grunt compile --build=d --urlprefix=/moodle' worked fine while disregarding the decache.

The map files are created and the path on my computer is:

C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn\style\moodle.treasure.map


When I am logged into my test site and select "Inspect element," I still get an error message for the map file. It looks to me that Moodle is looking in a different folder or shorter path. The folder "htdocs" is missing in the path of GET.

URL prefix moodle





I am confident that you can help me and that Moodle will get the moodle.treasure.map file in the test site. What do I do after this? Is the goal of the whole process to distribute most of the lines of the custom CSS in the correct LESS file? In other words: if the custom CSS has only a few lines, the site will load faster? If all the changes are done in the LESS files, do I need to run 'grunt less'? Thanks for all your help and advice.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Ok, this is really odd as it should have worked.  So, the file:

C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn\style\moodle.treasure.map

Is served by the web server so no need for htdocs in the URL.  But it's odd that the url does not have 'shoehorn' in it like:

http://scherer:82/moodle/theme/shoehorn/style/moodle.treasure.map

Which would be its correct location.  Odd as the grunt file is correct and appends the name of the theme directory.  I'll need to test.

Aside, to answer you questions about what this does.  This creates a development version of the theme where you can easily debug the styles to find out what tags have what styles and what LESS file the style is in.  This helps you to create new additional custom styles and discover what variable in the variables-shoehorn.less file to change if needed.  i.e. it will help you answer questions like "I searched for .navbar-default .navbar-toggle in all the Shoehorn/LESS files?".  Once done, you can then make a production version of the style sheets.  This setup is not intended for production and indeed is much slower.  But it does help to customise the theme.

To answer:

"Is the goal of the whole process to distribute most of the lines of the custom CSS in the correct LESS file?" = no, its to put the Custom CSS from the User Interface and have it in the shoehorn-custom.less file and then recreate the styles so that the custom CSS is still there.

"If all the changes are done in the LESS files, do I need to run 'grunt less'?" = yes.  Grunt is the tool that automates the LESS compiler that makes the CSS from the LESS.  Think of grunt as an oven timer and the LESS compiler as the oven itself, the LESS as the ingredients and the CSS as the resulting cake.  The whole point of this is to understand what ingredients are needed to make the desired cake to be eaten.

So...

  • LESS files define styles to be used.
  • Grunt automates the LESS compiler to make the CSS from the LESS.
  • The map files are mappings between the generated CSS to the source LESS to help understand where a style in the CSS is defined in the source LESS for development or customisation process.
  • When running the site only the CSS is used.  LESS is just the source.  Hence the map files help the browser development tools find the source LESS file for a style as it knows nothing about them.

I hope this helps, kind regards,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

It occurs to me that you might not be using the right command prompt given the screen shot.  Are you using the Node.js command prompt as shown?

Kind regards,

Gareth

Attachment 2015-01-24 10_38_32-Node.js command prompt.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Hi Gareth,

Thanks for your patience. I really appreciate it. Up to now I could only think of the 'Command prompt' in Windows. So your screenshot helped me to search for 'Node.js command prompt'. Found it, changed directory to C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn

and ran

'grunt compile --build=d --urlprefix=/moodle'

or

'grunt compile --build=d'

Both times the moodle.treasure.map was not found.

moodle.treasure.map not found





I can see the file moodle.treasure.map in C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn\style.

I tried a bit more and found a conversation about 'CSS caching in Google Chrome.' Then, I went to Firefox and didn't get an error message about 'moodle.treasure.map.' Not sure how to interpret this.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Thanks for the info, really 'really' odd!  I downloaded a Bitnami Moodle 2.8 yesterday so will try soon.

The map file only works on Chrome - long story.  Still very odd that the word 'shoehorn' is not in the URL for the map.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Ok, looks like something has changed on the LESS compiler, so please edit the 'package.json' file and change:

    "grunt-contrib-less": "~1.0.0",

to

    "grunt-contrib-less": "~0.12.0",

then run 'npm install' again, followed by 'grunt compile --build=d --urlprefix=/moodle'.  Then you should find that it works.

In the mean time, I'll investigate.

Kind regards,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut et al,

Ok, problem resolved, please kindly replace your 'Gruntfile.js' with https://raw.githubusercontent.com/gjb2048/moodle-theme_shoehorn/9fd39f3dc3cbb218c0b8a4c02990b55dc9dc21ae/Gruntfile.js and leave 'package.json' alone.  If you are not sure then use this: https://raw.githubusercontent.com/gjb2048/moodle-theme_shoehorn/9fd39f3dc3cbb218c0b8a4c02990b55dc9dc21ae/package.json.

Then repeat the 'grunt compile' you previously used.

Kind regards,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Shoehorn updated for M2.7 and M2.8

by Hartmut Scherer -

Hi Gareth,

Great! It works now. I replaced the 'Gruntfile' and ran 'grunt compile --build=d --urlprefix=/moodle'. Now I see the less files and can start working. Thank you, Gareth.

With kind regards,

Hartmut

Average of ratings: -