Skip to content

Commit

Permalink
Change to 'pix:' in css for images with css class based toggling.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjb2048
gjb2048 committed Sep 2, 2012
1 parent d86f37d commit c1c0b31
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 47 deletions.
29 changes: 25 additions & 4 deletions Readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,17 @@ Installation
8. Login as an administrator and follow standard the 'plugin' update notification. If needed, go to
'Site administration' -> 'Notifications' if this does not happen.
9. If desired, edit the colours of the 'styles.css' - which contains instructions on how to have per theme colours.
10. To change the arrow graphic you need to replace 'arrow_up.png' and 'arrow_down.png'. Reuse the graphics
if you want. Created in Paint.Net.
10. To change the arrow graphic you need to replace 'arrow_up.png' and 'arrow_down.png' in the 'pix' folder. Or override the
css by using the selectors for the various images, override the 'background' attribute:

body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open - For the 'up' arrow in the toggle - original is 24px.
body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'down' arrow in the toggle - original is 24px.
.course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'up' arrow in the toggle when JavaScript is disabled and the toggles default to open.
#toggle-all .content .sectionbody h4 a.on - For the 'open all sections' image - original is 24px.
#toggle-all .content .sectionbody h4 a.off - For the 'closed all sections' image - original is 24px.
#tc-set-settings - For the 'settings' image.

If in doubt, please consult 'styles.css' in the format.
11. Put Moodle out of Maintenance Mode.

Upgrade Instructions
Expand Down Expand Up @@ -524,7 +533,7 @@ NOTE: If uninstallation fails, drop the table 'format_topcoll_layout' and the en
instructions on the left. The instructions are in the 'en' langauge file as the 'formatsettingsinformation'
string for translation.

30th August 2012 - Version 2.3.7.3
2nd September 2012 - Version 2.3.7.3
1. Changes to 'renderer.php' because of MDL-28207 - thus requiring Moodle 2.3.1 2012062501.09 (Build: 20120809).
2. Implemented MDL-34798 which I reported for AJAX section moving.
3. Integrated CONTRIB-3827 to fix proliferation of CSS styles across other course formats.
Expand All @@ -535,6 +544,18 @@ NOTE: If uninstallation fails, drop the table 'format_topcoll_layout' and the en
8. Implemented MDL-34917 which I reported as an improvement.
9. Make toggle titles bold and change 'all toggles' to 'all sections', from comments made on MDL-35048.
10. Cherry picked Luiggi's change https://github.com/luiggisanso/moodle-format_topcoll/commit/9bd818f5a4efb347aef4f5154ea2930526552bfc
11. Figured out how to use 'pix:' for URL's in css for the format, so have changed so that the images are now controlled by css classes. This
means that it is now possible to override them in your theme in css. The following is the selectors for the various images, override
the 'background' attribute:

body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open - For the 'up' arrow in the toggle - original is 24px.
body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'down' arrow in the toggle - original is 24px.
.course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'up' arrow in the toggle when JavaScript is disabled and the toggles default to open.
#toggle-all .content .sectionbody h4 a.on - For the 'open all sections' image - original is 24px.
#toggle-all .content .sectionbody h4 a.off - For the 'closed all sections' image - original is 24px.
#tc-set-settings - For the 'settings' image.

If in doubt, please consult 'styles.css' in the format.

Thanks
------
Expand Down Expand Up @@ -587,6 +608,6 @@ Desired Enhancements
--------------------
1. Smoother animated toggle action.

G J Barnard MSc. BSc(Hons)(Sndw). MBCS. CEng. CITP. PGCE. - 30th August 2012.
G J Barnard MSc. BSc(Hons)(Sndw). MBCS. CEng. CITP. PGCE. - 2nd September 2012.
Moodle profile: moodle.org/user/profile.php?id=442195.
Web profile : about.me/gjbarnard
28 changes: 0 additions & 28 deletions format.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,34 +86,6 @@
?>
<style type="text/css" media="screen">
/* <![CDATA[ */
/* -- Images here as need to know the full url due to [[pix:****]] not working with course formats in the css file and the relative position changes between theme designer mode on / off. -- */

/* -- The clickable element of the Toggle -- */
.course-content ul.ctopics li.section .content .toggle a.cps_a {
background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_up.png) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle. This is shown by default when JavaScript is disabled. */
}

body.jsenabled .course-content ul.ctopics li.section .content .toggle a.cps_a {
background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_down.png) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle. This is shown by default when JavaScript is enabled. */
}

#toggle-all .content .sectionbody h4 a.on {
background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_down.png) no-repeat 0px 45%;
}

#toggle-all .content .sectionbody h4 a.off {
background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_up.png) no-repeat 0px 45%;
}

/* Set settings */
#tc-set-settings {
background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/tc_logo_spanner.png) no-repeat 0px 0px;
width: 96px;
height: 75px;
float: right;
margin: 4px;
vertical-align: text-top;
}

/* -- Toggle -- */
.course-content ul.ctopics li.section .content .toggle {
Expand Down
12 changes: 6 additions & 6 deletions module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ function toggleexacttopic(target,image,toggleNum,reloading,savetoggles) // Togg

if (mymobiletheme == true) {
image.className = image.className.replace(/\b opencps\b/,''); //remove the class name
image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_down.png)"; // Temporary until MyMobile is fixed - MDL-33115.
image.className = image.className.replace('toggle_open','toggle_closed'); // Temporary until MyMobile is fixed - MDL-33115.
} else {
image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_down.png)";
image.className = image.className.replace('toggle_open','toggle_closed'); //change the class name
}

// Save the toggle!
Expand All @@ -151,15 +151,15 @@ function toggleexacttopic(target,image,toggleNum,reloading,savetoggles) // Togg

if (mymobiletheme == true) {
image.className += " opencps"; //add the class name
image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_up.png)"; // Temporary until MyMobile is fixed - MDL-33115.
image.className = image.className.replace('toggle_closed','toggle_open'); // Temporary until MyMobile is fixed - MDL-33115.
} else {
image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_up.png)";
image.className = image.className.replace('toggle_closed','toggle_open'); //change the class name
}

// Save the toggle!
if (reloading == false) {
togglebinary(toggleNum,"1",savetoggles);
}
togglebinary(toggleNum,"1",savetoggles);
}
}
}
}
Expand Down
0 images/arrow_down.png → pix/arrow_down.png
View file
File renamed without changes
0 images/arrow_up.png → pix/arrow_up.png
View file
File renamed without changes
0 images/tc_logo_spanner.png → pix/tc_logo_spanner.png
View file
File renamed without changes
2 changes: 1 addition & 1 deletion renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ protected function section_header($section, $course, $onsectionpage, $sectionret
$o .= html_writer::start_tag('div', array('class' => 'sectionhead toggle', 'id' => 'toggle-' . $section->section));

$title = get_section_name($course, $section);
$toggleclass = 'cps_a';
$toggleclass = 'toggle_closed';
if ((string) $section->name == '') { // Name is empty.
$toggleclass .= ' cps_noname';
}
Expand Down
45 changes: 38 additions & 7 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,26 @@
padding: 0px;
}


/* -- Set the clickable element of the Toggle -- */
.course-content ul.ctopics li.section .content .toggle a {
display: block;
width: auto;
padding: 7px 0 7px 35px; /* The 35px allows the arrow to be on the left and the text next to it. */
}

.course-content ul.ctopics li.section .content .toggle a.toggle_closed {
background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle. This is shown by default when JavaScript is disabled. */
}

body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open {
background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle. This is shown by default when JavaScript is disabled. */
}

body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed {
background: transparent url([[pix:format_topcoll|arrow_down]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle. This is shown by default when JavaScript is enabled. */
}

#mymobile .course-content ul.ctopics li.tcsection .content {
margin: 0;
}
Expand Down Expand Up @@ -108,13 +128,6 @@
width: 100%;
}

/* -- Set the clickable element of the Toggle -- */
.course-content ul.ctopics li.section .content .toggle a.cps_a {
display: block;
width: auto;
padding: 7px 0 7px 35px; /* The 35px allows the arrow to be on the left and the text next to it. */
}

/* -- Toggle text -- */
.course-content ul.ctopics li.section .content .toggle a {
text-decoration: none;
Expand Down Expand Up @@ -153,9 +166,27 @@ body.jsenabled .toggledsection {
background: none repeat scroll 0 0 transparent;
}

#toggle-all .content .sectionbody h4 a.on {
background: transparent url([[pix:format_topcoll|arrow_down]]) no-repeat 0px 45%;
}

#toggle-all .content .sectionbody h4 a.off {
background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 0px 45%;
}

/* Settings */
div.tcsettingscontainer {
width:100%;
float:left;
display: block;
}

/* Set settings */
#tc-set-settings {
background: transparent url([[pix:format_topcoll|tc_logo_spanner]]) no-repeat 0px 0px;
width: 96px;
height: 75px;
float: right;
margin: 4px;
vertical-align: text-top;
}
2 changes: 1 addition & 1 deletion version.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
*/
defined('MOODLE_INTERNAL') || die();

$plugin->version = 2012083000;
$plugin->version = 2012090200;
$plugin->maturity = MATURITY_STABLE;
$plugin->requires = 2012062501.09; // 2.3.1 (Build: 20120809)
$plugin->component = 'format_topcoll';
Expand Down

0 comments on commit c1c0b31

Please sign in to comment.