2D text transform issue

2D text transform issue

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

Hi,

I've been thinking about the lack of a dock in Bootstrap (Clean) etc. and came across the 'Unity' theme in Ubuntu which has a hiding dock.  So I have modified the Shoelace theme to have something similar:

But the issue I cannot solve yet is the size of the boxes after the rotate transform.  Anybody good in this area?

I have thought about truncating the text, but then thought it would be a good idea if each type of block had a it's own icon instead of text.

Also, the current solution as shown by the YouTube video is JavaScript based with graceful degradation, the pre and post blocks are shown in the same column and on the right when using a right to left language.

If you want to try out the code you can get it from: https://github.com/gjb2048/moodle-theme_shoelace/tree/MOODLE_25

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: 2D text transform issue

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

It's an old post but may be useful ...

http://clone.moodle.org/mod/forum/discuss.php?d=180752

Average of ratings: -
In reply to Mary Evans

Re: 2D text transform issue

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

Thanks Mary smile

A bit of FireBug and it looks like a 'visibility: hidden' for the text and theme specific images replacement for block classes.  Time for a trip to Iconfinder smile

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: 2D text transform issue

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

When you say size of boxes do you mean the docked title?

These are the basic bits of CSS for the docked titles that you will need to manipulate...

#dock .dockeditem.firstdockitem { /* distance from top of page to top of first docked item - allows for header and menu etc. */
    margin-top: 2.3em;
}
#dock .dockeditem {
    background-color: red;
    padding: 2px;
    padding-left: 0px;
}
#dock .dockedtitle {
    padding: 0 0 0 5px;
    cursor: pointer;
    background-color: green;
}
#dock .dockedtitle h2 {
    margin: 0;
    padding: 5px; /* try adjusting this to make title area square */
    color: #fff;
}
.dockedtitle.activeitem h2 {
    color: #000;
}
#dock .dockedtitle.activeitem {
    background-color: yellow;
    width: 35px;
}

Average of ratings: -
In reply to Mary Evans

Re: 2D text transform issue

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

Dear Mary,

I do mean the boxes that surround the text smile - I looked at that CSS and found out that the box size varied with a 'top' attribute that had been calculated on a per box basis.  So need to adjust the size of the box after the rotational transform.  I'll have a bash with the #dock css though to see if it makes a difference.

Thanks,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: 2D text transform issue

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

OK...I think I know what you mean now. From memory there was a tracker out for something similar. MDL-32159 I have just added you as a watcher. If you want to have a go fixing that it's unassigned. smile

Average of ratings: -
In reply to Mary Evans

Re: 2D text transform issue

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

Dear Mary,

Thank you and commented smile - lots on my plate ATM and some CT stuff to do, but thanks anyway smile

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: 2D text transform issue

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

Temporarily put this development on hold ATM and created a new branch for it MOODLE_25_DOCK as need to solve the issue of knowing if editing is on (can parameters be passed in to the $THEME->javascripts_footer?) and sort out the transformation code or use images instead.

Thoughts?

Average of ratings: -