Flexibase 3.1 released

Flexibase 3.1 released

by Richard Oelmann -
Number of replies: 19
Picture of Core developers Picture of Plugin developers Picture of Testers

Dear Moodlers,

I'm pleased to announce the release of the Flexibase 3.1 theme update as a stable release.

It can be downloaded from https://moodle.org/plugins/theme_flexibase (plugin database) or https://github.com/roelmann/moodle-theme_flexibase/tree/STABLE_31 (github stable branch)

Developments include:

        - Style fixes
        - Settings navigation moved to layout files to clear language strings
        - Image Bank added (theme specific adaptation of work by Gareth Barnard)
        - favicon setting added
        - Category font-awesome icon size setting added
        - Category tiles height css fixed to only apply to icon display not main panel when icon not used
        - Classes added to allow custom styling of category and course in breadcrumb
        - Settings to show/hide items on the user dropdown menu, including a custom menu items setting
        - Settings to show/hide the items on the main menu (Home, Dashboard)
        - Block renderer override to render blocks as Bootstrap3 panels
        - Admin Only block region added
        - User/preferences.php restyles as panels (to match restyled user/profile.php)
        - Web font settings (e.g. google fonts) added
        - Theme documentation pages added - with a link from the main menu
        - Remove 'Plugins' folder. These will eventually be added to a separate repository
        - Sample course removed to reduce theme zip size. Course download will be made available from demo site

As always, please let me know if you find any issues with the theme that need fixing, or potential developments for future versions.

Thank you

Richard

Average of ratings: Useful (3)
In reply to Richard Oelmann

Re: Flexibase 3.1 released

by Derek Chirnside -

OK, it's taken me a bit of time to get to this.

I have not had a proper look yet.  In the image below, edit mode on, I see some new dotted lines I had not noticed before.  Do these mean I can actually add something in the top area full width in a course?

-Derek


Average of ratings: Useful (1)
In reply to Derek Chirnside

Re: Flexibase 3.1 released

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Yep, you always could, but in the new version I've added a minimum height and a dotted border to regions so people can see where they are dragging blocks to smile

Hopefully a usability addition that people will find useful.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Flexibase 3.1 released

by Derek Chirnside -

Ha!!

So you think it is usability and a feature.  I was thinking it is a bug.

More later.

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Flexibase 3.1 released

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hm, ok, well I'll take feedback on that, but I've had comments that people didn't know where the block regions were and how could they be made more obvious when dragging and this is a method used in a couple of other themes, so adopted into flexibase.

Definitely a planned feature, not a bug - whether a useful one or one that people like, as I said I'll take feedback on smile

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released

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

Dotted block drop areas are a good thing, like outlined development areas on planning proposals.  Shows you where things can be.  Essential and Shoehorn now have them.

When posting here the file drop area has one!

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

Re: Flexibase 3.1 released

by Derek Chirnside -

You miss the point Gareth.

Water is a good thing.  But if you over-imbibe in a marathon, you die.

There used to be dotted box there.  Small and discrete.  Now there is a BIG box, which requires extra scrolling every time you are working on the page lower down.  Too much of a good thing.

The same is true for the two left columns.  They are bigger and take up space where you do most of your editing.

Space, and thick dotted lines are therefore a problem in another aspect of UI/UX.

Snaef's Law: 

Without care, fixing a UI problem will in turn create another problem.  At least one,  usually more.

My 2c

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Flexibase 3.1 released

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

"There used to be dotted box there.  Small and discrete."

There was? Will need to check back, I didn't think there was otherwise I wouldn't have added the new boxes.

They can certainly be made smaller and the dashes can be made smaller - that's just a simple css change

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released

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

Here are the CSS styles for blocks when being moved in Base & Bootstrapbase

BASE THEME

https://github.com/lazydaisy/moodle/blob/master/theme/base/style/blocks.css#L20-L21

BOOTSTRAPBASE

https://github.com/lazydaisy/moodle/blob/master/theme/bootstrapbase/less/moodle/blocks.less#L62-L65

https://github.com/lazydaisy/moodle/blob/master/theme/bootstrapbase/less/moodle/blocks.less#L125-L132

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released

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

Just to clarify, the has-region-xxx, used-region-, side-pre-only, side-post-only, and similarly for all regions that are active within the layout at any particular time, are body classes that are added via JavaScript and help govern page layouts in moodle.css

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released | Text overflowing

by Derek Chirnside -

Firstly, I have reverted our DEV to 3.0.1 and you are right Richard, the dotted lines are not there.  I imagined it or they are there in one of the other themes we use.  But a few minor things.

Overflow or links and scroll bar

I've got a persistent overflow of links as shown below. on Right.  Latest Flexibase, Chrome, edit mode ON.

The increased dotted area seems to push the right links over, and then the scroll bar horizontal gets added.


Course menu 1 faulting

Next, if I reduce the screen size, the course menu is faulting (and it did this with 3.0.1)  This I think I noticed a while back but ignored.


Course menu problem 2

Now today this is happening on another computer with IE.  In other words full screen, and the text from the menu spills over the next bit.

Probably a Course Menu problem.


Fonts

This (above) is on a machine where I do not have access, and I am not able to get any technical information (like resolution)

This is the puzzle: where has the font in the course title come from?  Why does it not appear on my machine?  I tried to set it up inside the themes, and it does not appear on my browsers. 

---

Patchy post and poorly written I know, but I've just reached the end of a long day with my bandwidth failing and I figured time to make a start in working on these things.

-Derek




Average of ratings: Useful (1)
In reply to Derek Chirnside

Re: Flexibase 3.1 released | Text overflowing

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

1. overflow links and scroll bar - looks like a bug with the block region that needs testing - https://github.com/roelmann/moodle-theme_flexibase/issues/60

2. Course Menu 1&2 - I think these are actually the same problem, but handled slightly differently by the two browsers - https://github.com/roelmann/moodle-theme_flexibase/issues/61

3. Fonts - should be coming from http://yoursite/admin/settings.php?section=theme_flexibase_fonts or if nothing is set there, it should be picking up the default fonts from variables.less. I'd need some more information about what is or isn't happening to test that one properly Derek, as it does seem to be working correctly for me.

Thank you for your continued support and testing smile

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released | Text overflowing

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Derek,

I believe no1 above and the previous issue about block regions space with editing on are now fixed so that empty block regions will only show up (even with editing on) when blocks are actually being dragged, so that the draggable regions are shown at that point and not just when editing is turned on. (Does not apply to the admin only region at the foot of the page when a site admin is logged in - that is visible any time editing is on as the heading is there at any time anyway, deliberately so to alert admins that the region is there)

The fix is currently only in github master branch but will be pushed out to the plugins database when I finish investigating the other issues you have

Note: the Course Menu block is a 3rd party plugin which is only supported in the plugins database upto Moodle 2.5. I will not be installing it on Moodle3.x to work on, as I have confirmed on your dev site that the overlap behaviour is the same in clean theme, so this is not a theme specific issue, but one related to the plugin itself.

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released | Text overflowing

by Derek Chirnside -

Righto, thanks Richard.

Re the Course Menu, I've just emailed the maintainer (Alex Contis) to see if I can find out the full story.  Bob got a Course Menu version from the Alex before Christmas, and I just assumed it would be updated on the database before now.

-Derek


Average of ratings: -
In reply to Derek Chirnside

Re: Flexibase 3.1 released | Text overflowing

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

OK - if it gets updated, then I'll be happy to install it to try out, but the comment that the behaviour in flexibase mirrors that in clean stands, so it looks like it is an issue with the block, not a theme issue smile

I did try to add it to another 'throw-away' test site and the version on the database will not work on Mdl3 due to various deprecations

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released | Course Menu Plugin

by Derek Chirnside -

Update.  I have heard back from the developer.  I fully realise this is not a Flexibase problem!!

Onto it!!

-Derek

Average of ratings: -
In reply to Richard Oelmann

Re: Flexibase 3.1 released

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

I like the ones Gareth added with the dashed borders which is what we were used to prior to Drag & Drop, and still do if using Moodle sans JavaScript.

I must remember to add them to my new GoLogo theme.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Flexibase 3.1 released | quick look (2)

by Derek Chirnside -

This is just a placeholder.  I had my worst Moodle downtime ever this week, with the perfect storm of surrounding events.  I'm interested in too many things.  Why the backups are ballooning out of control, why lesson looks so poor and "Is Adapt worth using? and the search for the "perfect Moodle onramp activity."

Back to themes: flexibase

We are now using three themes on our site to meet all the needs.  (I think I'm too soft in trying to get everyone with their needs!!)  (Fortunately the branding people are not too worried at a course level)

  1. You've seen my comments on the dotted boxes.
  2. We are having a problem since Flexibase is running Bootstrap 3 if we use a mobile theme and it is on BS2.  Just looking at some options here.  Lovely bootstrap 3 stuff on the home page appears a bit poorly.
    Bob has some ideas, but not finished yet.
  3. Love the new options to choose all the links and menu items on the various bars.
    I'm a minimalist.  And I like muted.  I have removed a few shaded block header gradients etc.
  4. Have not tried the new image files for the home page yet.

I guess I think sometimes a better location for the Custom CSS may help speed up the development process.  Click scroll, click scroll, type, scroll, save etc.

New fonts settings

These I like.  I googled web-safe font, went to http://www.w3schools.com/cssref/css_websafe_fonts.asp copied one I liked and it did not appear, and it was only later I realised I had a lot of custom CSS on fonts.  Will look at this sometime and do a slash and burn.


---

I'm happy.  Flexibase theme feature creep will probably kick in when I take some time to stop a little and think about what I am doing.

RESEARCH: case study of one, benefits of This Course link

the use of This Course link.  Brand new class, most over 40ys of age.  Had no problems with navigation in the course, particularly finding the right forum.  Just gave a little orientation to the terms (Forum, Quiz etc) and no more lost.


I reckon this should be put into Clean.


-Derek



Average of ratings: Useful (1)
In reply to Derek Chirnside

Re: Flexibase 3.1 released | quick look (2)

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Dotted Boxes:

I think this is fixed in the latest version on github (the dotted boxes only appear when a block is actually being dragged, not just when editing is turned on) and just waiting a few issues and some feedback from HQ over code_checker testing before releasing a minor update to the plugins database. The code all works and is stable but the code_checker is reporting line indent style issues that are incorrect and can't just be 'reflowed' based on the code_checker reporting - Eloy at HQ is investigating.

Bootstrap2 v Bootstrap3:

Some of the code you use can be added with the relevant classes from both without clashing (e.g. you can use the grids or the button classes from both). But obviously some exists only in the one and need some kind of fall back (e.g. panels do not exist in BS2).

One way of providing that fall-back is to copy and paste the css for panels (as an example) into the BS2 theme customcss. That will work in most cases that do not rely on any of the BS javascript - of course being bootstrap and responsive flexibase itself should work on mobiles anyway smile

Location of CustomCSS:

I did consider putting CustomCSS and CustomLESS on their own 'custom' page, but haven't done so to date, I'm not sure if that's a good idea or not, but happy to take User feedback on it. I don't really like to put it at the top of a page with other settings - its kind of psychological thing that customcss overrides everything else so comes after it, and yet I realise that it doesn't really matter where it appears on the page, that's simply down to where it is in the code, and I also realise that by the same logic, it shouldn't really be on the first page either smile So if anyone has a good UX reason for moving it to a different page, such as with the customLESS, then I'm open to such suggestions for the future.

Fonts:

I obviously need to clarify the instructions/comments with the setting, or work on developing the setting - It is currently only designed to take one font name (such as the web-fonts above) e.g. "Times New Roman", with the font type e.g. "Serif" in the other setting, but not a series of fall backs like Tahoma, Geneva, sans-serif.

This Course:

I'm glad you (and your users) like the feature Derek, I do to. I'd like to give credit where its due, but I can't remember which theme I saw this in first - it's in a few now, so obviously quite a lot of people agree with you. I think in this instance I 'borrowed' the code from bcu, but it could just as easily have been from essential as I know both have the feature and I have used code from both in various parts of flexibase (and credited both, and others, for the ideas and hard work put in by all the developers! smile ).

Hopefully flexibase is a mix of some of the most popular features of the best themes out there (like this) as well as some new things (like the flexbox layout, the layout options, the LESS settings and now the Theme help pages and navigation between settings pages) and hopefully others will 'borrow' some of those features for their own themes too so that we can all improve the user experience for everyone smile

Average of ratings: -