Shoehorn for M2.7 goes stable.

Shoehorn for M2.7 goes stable.

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

Hello Moodlers,

I am pleased to announce that the Shoehorn theme for Moodle 2.7 is now stable.  You can download it from: https://moodle.org/plugins/pluginversion.php?id=7036

Please read the 'readme' carefully as you will need Bas's Bootstrap theme too and be aware of the known issues.  It is not completely RTL friendly at the moment.  To address this I wish to see how Essential 2.7.8 goes and then port the changes back.

It has many innovative features as you can read here: https://moodle.org/plugins/view.php?plugin=theme_shoehorn along with an expanding signpost in the footer for the social icons.  This is meant to associate the theme with a wild west American sort of thing, perhaps parallax tumble-weeds are also needed.  Will have to see how things develop.

Please do download and enjoy the theme,

Gareth

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

Re: Shoehorn for M2.7 goes stable.

by Justin Hunt -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Looks great Gareth. Thanks a lot.

Is there are a public demo site we can wander around, or should we just bite the bullet and install it?

In reply to Justin Hunt

Re: Shoehorn for M2.7 goes stable.

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

Hi Justin,

Good question.

I do not have a demonstration site, however, two articles on MoodleNews:

A third development video:


Which gives you an idea of the functionality in the theme.

As with any plugin you are trying out, I recommend using a test server first.  If you do not have a test server, then its easy to install one using one of my guides: https://moodle.org/mod/forum/discuss.php?d=271061.

I hope to produce more screen shots and a demonstration video of the finished theme in the future.

Cheers,

Gareth

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

Re: Shoehorn for M2.7 goes stable.

by Justin Hunt -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Gareth. 

I installed it and its working fine. Very nice.

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth,

What a theme! The forethought that went into this design is staggering. Essential is hot- no doubt- but "under the hood" Shoehorn is like Essential on steroids. I could go on and on but really you have to experiment with Shoehorn to really appreciate all the novel features it offers- functionally and visually. Bravo to you and all the people you've aptly credited with creating this theme!

With that said, could you look at a few issues related to the layout of SCORM reports on the iPad and PC . The screen shots should sufficiently illustrate the issues.

To me it appears that the SCORM layout places the navigation block in another column beside the Admin block which, in turn, decreases the width of the main content div causing the collision of the form buttons. I don't use the docking blocks option.

I'm using Moodle 2.7.2+

Shoehorn 2.7.0.4 (from Git)

Issue is present on FF 32, Chrome 37, IE11. iPad iOS 7.0.2

Again, congratulations to you on the release of a very revolutionary theme for the community big grin

Peace


Attachment Shoehorn-button-alignment-_widen-content-pg.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -

I don't get anything like that when using the grader, in a normal PC, and viewing on an iPad should see little change anyway. As for SCORM, well that all depends on how it has been created.

Would you mind testing this in Clean theme and posting some screen shots as it could well be the SCORM package itself rather than Gareth's Shoehorn theme.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Thanks Mary,

I moved the Nav and Admin blocks to the right as I had in Shoehorn.

Here you go. Looks Fine in Clean mixed


Attachment SCORM-Clean-1.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Mary and Gareth : A Funny Thing Happened On The Way to the Forum!

This seem to have almost fixed the PC problem-except for about 3 pixels.

When Mary suggested I switch to Clean I also configured the Navigation to the right in Clean. Purged-all looked good in Clean.

Then, I switched back to Shoehorn. Now, the Nav block stays in the same column as the Admin block instead of moving to the left in its own column as before- go figure wide eyes  However there is still a bit of a overlap/collision with the  buttons (attempts, Download in ODS format).

On the iPad the Nav and Admin blocks also remain on the right; with less of a collision issue though. However the iPad portrait  view is... well, you can see it's less than desirable.

As a matter of function I see that Shoehorn puts the Admin and Navigation blocks UNDER the main content in the Grader report. This allows the main content to expand the full width across the page.That setup would be really cool in the SCORM report as well.

Thanks for helping

Peace

Attachment SCORM-Shoehorn.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -

Kirk,

The fact you needed to move blocks in Clean theme suggest to me that the blocks were in a different location when you were using them in Shoehorn, and not necessarily on the right, as normally blocks stay in the same block region they are placed in. So if they were positioned on the right they stay on the right, if positioned on the left they stay on the left, regardless of theme, However if they are in a hidden area, or custom block region, then they would go back to their default side (side-pre) when swapping to Clean theme.

So were exactly were the blocks in Shoehorn, as this may hold the key as to why that page displayed oddly?

OK so from what I can deduce from all of this is that it could be a design fault of the Shoehorn theme, where custom block regions are added to a page where there is no real need of them. But that is purely guest work.

Also, I don't like the baize green of the HTML background colour in Shoehorn as it is too dark and spoils the look of the grade book.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hi Mary,

To your question, I never bothered the block configuration in Shoehorn before I switched to Clean. So, I couldn't tell you how they were set 'out of the box.' I only know that when I returned to Shoehorn from Clean they were set to display on the 'Right" for all and this page.

The key to the resolution was your mentioning of the Grader report, I noticed that Shoehorn defaulted to blocks configured below/under  the main content in the Grader page layout. So, I went to the SCORM reports page and configured the blocks to display below/under the main content. Voilà! Now, I get the full SCORM report spanned across the width of the page-beautiful! Perhaps that was Gareth's intent for the SCORM reports page? However, there is still a bit of an issue with Shoehorn overlapping buttons vs. Clean's layout (screen shots.) I'm sure the fix will be 'child's play' for you and Gareth.

While we're on fixes, the iPad portrait view places the custom menu on 2 rows (screen shot). Is this avoidable?

Finally, I've been looking for a word for that green my client loves. Baize is perfect (I've never heard that word.) It is hued to match their public website. In the States we say "pool table/billiards" green. For fear that my client will ever stumble across this post (you know the internet) my new official line is "I love that baize green; it's so earthy!"  As the O'Jays sang "Got to Give The People What They Want." (1975; awesome song)  But, I completely agree with you. I'm hoping to put a subtle texture/pattern/monochromatic noise element to tame the beast. I'm just drafting  so I'll also Firebug some other options within the main content div. Thanks for the suggestion.

As always, your help is invaluable cool...

Peace


Attachment Shoehorn-SCORM-_blocks-below.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

Thank you for your kind words about my theme smile.

To hopefully answer some questions before I go digging:

  • The layout when the blocks are side by side is the default 'content first' layout.  Therefore 'content' -> 'side-pre' -> 'side-post'.  So when you moved all of the blocks to the right in Clean that meant that they were all in 'side-post'.  So then switching to Shoehorn meant that 'side-pre' had nothing in it so was not displayed, hence one block region on the right being 'side-post'.
  • The Grader report uses the 'report' layout which as been set-up to only use the bottom regions on the page - no 'side-pre' / 'side-post'.  So, I suspect that the SCORM report has been set-up in core to have a different page layout when in fact it should be a report.  I need to check on this, but it could be a core bug with a report not using a report layout.

Thank you for the screenshots, really helpful for me to use to fix issues from.

Cheers,

Gareth

P.S. Do you have any sample small SCORM activities I could use to test with please?

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

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

Ooo!  Just tried with no data on the SCORM report and it is indeed the 'incourse' layout, so in M2.7 if you add:

$PAGE->set_pagelayout('report');

to /mod/scorm/report.php after line 54 being:

require_login($course, false, $cm);

then you get the report layout smile

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Gareth,

I'm not sure if you're finished making adjustments but, just to let you know that, I adjusted the report.php, and set the blocks back to the 'right' side. Now SCORM report puts blocks under the main table. Cool! big grin

A very minor issue; the overlap with the buttons is stiil present on the iPad however. 

Thanks.

Peace

Average of ratings: Useful (1)
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

Thanks for the information.  I have not had a chance to work on Shoehorn today as needed to do a small change to the Grid format, another project and start thinking about M2.8 versions.

Cheers,

Gareth

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Gareth Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Fantastic Gareth!

Button spacing is perfect in both iPad orientations and iPhone ! approve

Thanks,

Peace


In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth,

Still lovin' Shoehorn! So many features, so little time. I must add that it feels so good to use a reliable slideshow- no disrespect to all who have worked dutifully on Essential and Elegance!

Could you check this out. I set up a site page and inserted an image. I indented the image to center it within region-main. However, the image seems to resize at a different proportion relative to the region-main div. The screen shot shows what happens initially when the site page loads on an iPad2; landscape orientation. I also get this disproportion when I minimize or expand my PC viewport manually; similarly with restore down or when zooming past 120%. In short (if it's not too late) the region-main is 'responsive' but the image seems 'unresponsive' as it does not remain within the region-main at differing screen sizes. Also, when switching back and forth between iPad orientations the landscape view stays enlarged and I have to pinch it back to normal position each time; only on the site page, though. Hope I've been clear enough mixed

Peace

Attachment image-out-of-main-region.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

Please could you try removing the indentation and turning on 'auto-size' as you can see in the attached image from the image bank.

Also, thank you for your kind words about the slider.  But, I have to admit that I wrote (most of) the code for the current slider in Essential.  But that slider is the BS 2.3 one instead of the BS3 one in Shoehorn.

Cheers,

Gareth

Attachment 2014-10-28 11_36_30-Moo27_ Administration_ Appearance_ Themes_ Shoehorn_ Site pages.jpg
In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hi,

That was a painless fix Yes,

Seems I'll still have to experiment with different image sizes as the 'Middle'  setting doesn't maintain an equal amount of space on either side of the image within the region-main. In Firebug I tried playing with 'image class' within the div class 'sitepagecontent' but no love. I'll try some other things later as I complete the project. It's fine for now!

Thanks again!

Peace

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

No worries.  I noticed the padding on the image too, so am working on a fix.  In the mean time, please try the following custom CSS:

#page-theme-shoehorn-pages-sitepage .sitepagecontent img {
  margin: 0 0 !important;
}

Gareth

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth,

#page-theme-shoehorn-pages-sitepage .sitepagecontent img {
  margin: 0 180px !important;
}

Indeed centers my image, but I run into the same issue as when I indented within Atto- as noted earlier on the iPad screen shots. So, I'm fine for now and I'll wait till you have time to bother with it. No problemcool

Thanks for the consideration.

Peace

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

Could you try removing all of the indentation as I think it only causes issues.  And instead add the class 'text-center' (http://getbootstrap.com/css/#type-alignment) to the image.  I know its for text but should work for images too.

Gareth

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth and Mary,

I removed all indentation in Atto and set

<p class="text-center">Center aligned text.</p>

it did indeed centerd the image, but the image still remained unresponsive and enlarged as the region-main shrank behind the image on smaller resolution- as in the iPad screen shots.

In other news... I learned that:

when using margin: 0 or margin: 0 0  (in my case 180px or 0 180px to center my image)

a single number puts that amount of margin around the entire image , whereas the latter allows me to determine space on the sides and on the top and bottom. In my instance, I needed both numbers as I only wanted to push the image to the center without altering the margin on the top and bottom. 

Of course you knew this, I'm just promoting the notion that the Moodle community is all about learning!approve

Also, highlighting the image in Atto and setting it to center had no effect on its placement-still remained left flush to the region-main.

Mary, I did try to declare a width but I was unsure about how to play with it in Firebug: I'll try after the gym!

<p class="myimage"><img src="http://myimageurl" /></p>

Thanks for the suggestions...

Peace


In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk - Does the img tag have the 'img-responsive' class?

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hi,

from Firebug:

<img class="img-responsive" width="742" height="495" style="" role="presentation" alt="" src="data:image/png;base64.......

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Ok, this is the HTML the editor is putting in for me given my screen shot above and it works:

img src="//moodle27.chloe/theme/shoehorn/imagebank.php?imageid=1" alt="IB" width="1024" height="768" style="vertical-align:middle; margin: 0 .5em;" class="img-responsive">

Is your site publicly available?

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -
THIS BOLD TEXT IS CENTRED WITHIN THIS BLOCK

<div style="width: 400px; padding: 20px; margin: 0 auto; background-color: #890; color: white; text-align: center;"><b>THIS BOLD TEXT IS CENTRED WITHIN THIS BLOCK</b></div>

Little Boo

<p><img width="198" height="168" alt="Little Boo" src="path-to-image" style="display: block; margin: 0 auto;"></p>
Average of ratings: Useful (1)
In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Thanks Mary!

Gareth showed me how to use your code. 

I appreciate you bunches!

Peace


In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -

The original margin should not need !Important also if using margin: 0 0; then margin: 0; is sufficient. If there are other factors at play that necessitates the use of !important, then those factors need to be looked at too as something is not right.

Centering an image needs width declaring in the container it is in ... something like ...

<p class="myimage"><img src="http://myimageurl" /></p>

then the css for your image margin can be set to ...

myimage {text-align: centre; Width: 50%; margin: 0 auto;}

If you are adding the image via the text editor then highlighting the image and setting it to centre using the center icon.

Hope this helps?

In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

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

The original margin does need '!important' so that it overrides the injected inline style.  Normally I detest using it, but had no choice.

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth,

<When you get a moment>

Could you check out the file edit options when using GRID format in Shoehorn. When toggling 'edit' the drop-down options get cut off after the 'move right' option. Works fine in weekly. >Screen shot

I'm not hampered at all with this so I don't need a fix yet... Just when you get around to it.

Thanks,

Peace

Attachment options_in_grid.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk, cannot reproduce....

Attachment 2014-10-31 12_22_46-Course_ GridTest.jpg
Average of ratings: Useful (1)
In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Ahhh,

I was not editing from inside the Section 1 area (box with burgundy trim). I had left the file inside of the area of your Section 52 image. Moved the file into the correct area ..I'm all good!

Thanks

Peace

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Ok, bug with section 0 when at the top (https://github.com/gjb2048/moodle-theme_shoehorn/issues/7) and happens with Bootstrap too, so will probably affect Elegance:


Attachment 2014-10-31 13_56_05-Course_ GridTest.jpg
Average of ratings: Useful (1)
In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

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

Looks like the Grid format style needs updating.  In the meantime, please add:

div#gridmiddle-column > ul {
overflow: visible;
}

To your custom CSS.

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

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hi Gareth,

This was a cool accident as I was in the wrong place at the right time! You're spot on as usual!

Many thanks again!

Peace

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -

The grader uses the Admin layout.

In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

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

In Shoehorn it applies the report layout as mandated by the core code to provide the user with a side-block-less layout:

Attachment 2014-10-19 13_19_47-Grades_ View.jpg
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

by Mary Evans -

That's what it reminded me of...a Pool Table! LOL

In reply to Mary Evans

Re: Shoehorn for M2.7 goes stable.

by Pete Tyrer -

Shoehorn is brilliant.

I only have one issue with it, which is with the tiles the description is off the bottom ( see pic ) . Is there any way to adjust this - thanks.

Attachment shoehorn.PNG
In reply to Pete Tyrer

Re: Shoehorn for M2.7 goes stable.

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

Thank you  Pete.  I have raised https://github.com/gjb2048/moodle-theme_shoehorn/issues/8 to look into and solve the problem.

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hello Gareth,

Moodle 2.7.2+ | Shoehorn 2.7.1.1

Could you check these 4 minor issues:screen shot

1  issue: Login page nav alignment: with Chrome38|Safari 6.1|iOS 7.0.3
 looks fine in FF 33.0.2 and IE 11

2  Issue- Frontpageslider
Transition; Appear- images don't slide
Safari 6.1|iOS 7.0.3
images slide perfectly in FF 33.0.2| IE 11|Chrome38|

3 Issue- Gridshadebox content
Transition; Appear- content doesn't slide
FF 33.0.2| IE 11|Chrome38|Safari 6.1|iOS 7.0.3

4 Issue- Blocks BG
when set for page bottom
FF 33.0.2| IE 11|Chrome38|

When you get time... wide eyes

Peace




Attachment 4-minor.png
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

Ok, with Chrome 38.0.2125.111 m (I only have iOS 6.1.6)....

  1. Cannot replicate.
  2. Not tested yet on iOS 6.1.6 and whatever safari that has!  Will take a moment.
  3. Cannot replicate.  Assuming Grid format with 'One page per section' layout thing.
  4. Cannot replicate but did have issue the other day with 'overlay' as the attribute value to 'overflow' so please can you try in the Custom CSS:

body.editing #block-region-page-bottom .block {
overflow-y: scroll;
}

And see if that works, if so I'll change 'master' branch.

Cheers,

Gareth

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

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

RE: 2.

Cannot replicate on iOS 6.1.6 (cannot find Safari version)....

BTW - Monument valley - awesome place to visit smile

Attachment photo (11).PNG
In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

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

Hi Kirk,

For '1' do you have a publicly accessible site I can look at please?

Cheers,

Gareth

In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -

Hi,

2 I'm on an iPad2 and Mac book pro- Mac OS  X 10.7.5

3 shade box is for all content on 1 page. I'll test for 1 per page and tell you.

4. Below  works!

body.editing #block-region-page-bottom .block {
overflow-y: scroll;
}


In reply to Gareth Barnard

Re: Shoehorn for M2.7 goes stable.

by KirK Chapman -
American Southwest monuments are gorgeous; and with less rain than Stonehenge- I got soaked-ill prepared- but, far less historical significance- a fair trade! approve

The image carousel (1 section per page) works perfectly in FF Chrome and IE.
In Safari and iOS when I press either arrow the"next" image appears over the current image for a split second and then the previous image disappears. There is still no slide action in these latter 2 browsers.

Peace
Average of ratings: Useful (1)
In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

Thanks Kirk, please can you give me some time to test the slider smile

In reply to KirK Chapman

Re: Shoehorn for M2.7 goes stable.

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

True smile - I've not been back to Stonehenge since they changed the layout and removed the side road off of the A303 - should do really as only two hours away.  Then again it would be possible to do Lands End to Dover in about 6.5 hours by car which is nothing in American terms smile.  Plus I really loved Bryce canyon smile.