Skip to content

Commit

Permalink
Improve and fix responsive column layouts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjb2048
gjb2048 committed Oct 16, 2016
1 parent 2fa0fd3 commit 10aa75a
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 98 deletions.
1 change: 1 addition & 0 deletions Changes.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
Version Information
===================
Version 2.9.3.1
1. Improve and fix responsive column layouts.

Version 2.9.3
1. Code checker tidy up.
Expand Down
151 changes: 71 additions & 80 deletions format.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,133 +106,124 @@
$defaultuserpreference));

$tcsettings = $courseformat->get_settings();
?>
<style type="text/css" media="screen">
/* <![CDATA[ */

/* -- Toggle -- */
.course-content ul.ctopics li.section .content .toggle, .course-content ul.ctopics li.section .content.sectionhidden {
background-color: <?php
echo '<style type="text/css" media="screen">';
echo '/* <![CDATA[ */';

echo '/* -- Toggle -- */';
echo '.course-content ul.ctopics li.section .content .toggle, .course-content ul.ctopics li.section .content.sectionhidden {';
echo 'background-color: ';
if ($tcsettings['togglebackgroundcolour'][0] != '#') {
echo '#';
}
echo $tcsettings['togglebackgroundcolour']; ?>;
}
echo $tcsettings['togglebackgroundcolour'].';';
echo '}';

/* -- Toggle text -- */
.course-content ul.ctopics li.section .content .toggle a, .course-content ul.ctopics li.section .content.sectionhidden {
color: <?php
echo '/* -- Toggle text -- */';
echo '.course-content ul.ctopics li.section .content .toggle a, .course-content ul.ctopics li.section .content.sectionhidden {';
echo 'color: ';
if ($tcsettings['toggleforegroundcolour'][0] != '#') {
echo '#';
}
echo $tcsettings['toggleforegroundcolour']; ?>;
text-align: <?php
echo $tcsettings['toggleforegroundcolour'].';';
echo 'text-align: ';
switch ($tcsettings['togglealignment']) {
case 1:
echo 'left';
echo 'left;';
break;
case 3:
echo 'right';
echo 'right;';
break;
default:
echo 'center';
} ?>;
echo 'center;';
}
echo '}';

/* Toggle icon position. */
.course-content ul.ctopics li.section .content .toggle a, #toggle-all .content h4 a {
background-position: <?php
echo '/* Toggle icon position. */';
echo '.course-content ul.ctopics li.section .content .toggle a, #toggle-all .content h4 a {';
echo 'background-position: ';
switch ($tcsettings['toggleiconposition']) {
case 2:
echo 'right';
break;
default:
echo 'left';
} ?> center;
}

/* -- What happens when a toggle is hovered over -- */
.course-content ul.ctopics li.section .content .toggle a:hover,
.course-content ul.ctopics li.section .content.sectionhidden .toggle a:hover {
color: <?php
};
echo ' center;';
echo '}';

echo '/* -- What happens when a toggle is hovered over -- */';
echo '.course-content ul.ctopics li.section .content .toggle a:hover,';
echo '.course-content ul.ctopics li.section .content.sectionhidden .toggle a:hover {';
echo 'color: ';
if ($tcsettings['toggleforegroundhovercolour'][0] != '#') {
echo '#';
}
echo $tcsettings['toggleforegroundhovercolour']; ?>;
}
echo $tcsettings['toggleforegroundhovercolour'].';';
echo '}';

.course-content ul.ctopics li.section .content div.toggle:hover {
background-color: <?php
echo '.course-content ul.ctopics li.section .content div.toggle:hover {';
echo 'background-color: ';
if ($tcsettings['togglebackgroundhovercolour'][0] != '#') {
echo '#';
}
echo $tcsettings['togglebackgroundhovercolour']; ?>;
}
echo $tcsettings['togglebackgroundhovercolour'].';';
echo '}';

<?php
$topcollsidewidth = get_string('topcollsidewidthlang', 'format_topcoll');
$topcollsidewidthdelim = strpos($topcollsidewidth, '-');
$topcollsidewidthlang = strcmp(substr($topcollsidewidth, 0, $topcollsidewidthdelim), current_language());
$topcollsidewidthval = substr($topcollsidewidth, $topcollsidewidthdelim + 1);
// Dynamically changing widths with language.
if ((!$PAGE->user_is_editing()) && ($portable == 0) && ($topcollsidewidthlang == 0)) { ?>
.course-content ul.ctopics li.section.main .content, .course-content ul.ctopics li.tcsection .content {
margin: 0 <?php echo $topcollsidewidthval; ?>;
}
<?php
} else if ($PAGE->user_is_editing()) { ?>
.course-content ul.ctopics li.section.main .content, .course-content ul.ctopics li.tcsection .content {
margin: 0 40px;
}
<?php
if ((!$PAGE->user_is_editing()) && ($portable == 0) && ($topcollsidewidthlang == 0)) {
echo '.course-content ul.ctopics li.section.main .content, .course-content ul.ctopics li.tcsection .content {';
echo 'margin: 0 '.$topcollsidewidthval.';';
echo '}';
} else if ($PAGE->user_is_editing()) {
echo '.course-content ul.ctopics li.section.main .content, .course-content ul.ctopics li.tcsection .content {';
echo 'margin: 0 40px;';
echo '}';
}

// Make room for editing icons.
if ((!$PAGE->user_is_editing()) && ($topcollsidewidthlang == 0)) { ?>
.course-content ul.ctopics li.section.main .side, .course-content ul.ctopics li.tcsection .side {
width: <?php echo $topcollsidewidthval; ?>;
}
<?php
if ((!$PAGE->user_is_editing()) && ($topcollsidewidthlang == 0)) {
echo '.course-content ul.ctopics li.section.main .side, .course-content ul.ctopics li.tcsection .side {';
echo 'width: '.$topcollsidewidthval.';';
echo '}';
}

// Establish horizontal unordered list for horizontal columns.
if (($renderer->get_format_responsive()) && ($tcsettings['layoutcolumnorientation'] == 2)) { ?>
.course-content ul.ctopics li.section {
display: inline-block;
vertical-align: top;
}
.course-content ul.ctopics li.section.hidden {
display: inline-block !important; /* Only using '!important' because of Bootstrap 3. */
}
body.ie7 .course-content ul.ctopics li.section {
zoom: 1;
*display: inline;
}
<?php
if (($renderer->get_format_responsive()) && ($tcsettings['layoutcolumnorientation'] == 2)) {
echo '.course-content ul.ctopics li.section {';
echo 'display: inline-block;';
echo 'vertical-align: top;';
echo '}';
echo '.course-content ul.ctopics li.section.hidden {';
echo "display: inline-block !important; /* Only using '!important' because of Bootstrap 3. */";
echo '}';
}
// Site wide configuration Site Administration -> Plugins -> Course formats -> Collapsed Topics.
$tcborderradiustl = clean_param(get_config('format_topcoll', 'defaulttoggleborderradiustl'), PARAM_TEXT);
$tcborderradiustr = clean_param(get_config('format_topcoll', 'defaulttoggleborderradiustr'), PARAM_TEXT);
$tcborderradiusbr = clean_param(get_config('format_topcoll', 'defaulttoggleborderradiusbr'), PARAM_TEXT);
$tcborderradiusbl = clean_param(get_config('format_topcoll', 'defaulttoggleborderradiusbl'), PARAM_TEXT);
?>
.course-content ul.ctopics li.section .content .toggle, .course-content ul.ctopics li.section .content.sectionhidden {
-moz-border-top-left-radius: <?php echo $tcborderradiustl ?>em;
-webkit-border-top-left-radius: <?php echo $tcborderradiustl ?>em;
border-top-left-radius: <?php echo $tcborderradiustl ?>em;
-moz-border-top-right-radius: <?php echo $tcborderradiustr ?>em;
-webkit-border-top-right-radius: <?php echo $tcborderradiustr ?>em;
border-top-right-radius: <?php echo $tcborderradiustr ?>em;
-moz-border-bottom-right-radius: <?php echo $tcborderradiusbr ?>em;
-webkit-border-bottom-right-radius: <?php echo $tcborderradiusbr ?>em;
border-bottom-right-radius: <?php echo $tcborderradiusbr ?>em;
-moz-border-bottom-left-radius: <?php echo $tcborderradiusbl ?>em;
-webkit-border-bottom-left-radius: <?php echo $tcborderradiusbl ?>em;
border-bottom-left-radius: <?php echo $tcborderradiusbl ?>em;
}
/* ]]> */
</style>
<?php
echo '.course-content ul.ctopics li.section .content .toggle, .course-content ul.ctopics li.section .content.sectionhidden {';
echo '-moz-border-top-left-radius: '.$tcborderradiustl.'em;';
echo '-webkit-border-top-left-radius: '.$tcborderradiustl.'em;';
echo 'border-top-left-radius: '.$tcborderradiustl.'em;';
echo '-moz-border-top-right-radius: '.$tcborderradiustr.'em;';
echo '-webkit-border-top-right-radius: '.$tcborderradiustr.'em;';
echo 'border-top-right-radius: '.$tcborderradiustr.'em;';
echo '-moz-border-bottom-right-radius: '.$tcborderradiusbr.'em;';
echo '-webkit-border-bottom-right-radius: '.$tcborderradiusbr.'em;';
echo 'border-bottom-right-radius: '.$tcborderradiusbr.'em;';
echo '-moz-border-bottom-left-radius: '.$tcborderradiusbl.'em;';
echo '-webkit-border-bottom-left-radius: '.$tcborderradiusbl.'em;';
echo 'border-bottom-left-radius: '.$tcborderradiusbl.'em;';
echo '}';

echo '/* ]]> */';
echo '</style>';
$renderer->print_multiple_section_page($course, null, null, null, null);
}

Expand Down
51 changes: 33 additions & 18 deletions renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -718,9 +718,10 @@ public function print_multiple_section_page($course, $sections, $mods, $modnames
echo $this->start_toggle_section_list();

$loopsection = 1;
$canbreak = false; // Once the first section is shown we can decide if we break on another column.
$breaking = false; // Once the first section is shown we can decide if we break on another column.
$canbreak = ($this->tcsettings['layoutcolumns'] > 1);
$columncount = 1;
$columnbreakpoint = 0;
$breakpoint = 0;
$shownsectioncount = 0;

if ($this->userpreference != null) {
Expand Down Expand Up @@ -852,25 +853,39 @@ public function print_multiple_section_page($course, $sections, $mods, $modnames
}
}

// Only break in non-mobile themes or using a reponsive theme.
if ((!$this->formatresponsive) || ($this->mobiletheme === false)) {
if ($this->tcsettings['layoutcolumnorientation'] == 1) { // Only break columns in vertical mode.
if (($canbreak == false) && ($currentsectionfirst == false) && ($showsection == true)) {
$canbreak = true;
$columnbreakpoint = ($shownsectioncount + ($numsections / $this->tcsettings['layoutcolumns'])) - 1;
if ($this->tcsettings['layoutstructure'] == 4) {
$columnbreakpoint -= 1;
// Only check for breaking up the structure with rows if more than one column and when we output all of the sections.
if (($canbreak === true) && ($currentsectionfirst === false)) {
// Only break in non-mobile themes or using a responsive theme.
if ((!$this->formatresponsive) || ($this->mobiletheme === false)) {
if ($this->tcsettings['layoutcolumnorientation'] == 1) { // Vertical mode.
// This is not perfect yet as does not tally the shown sections and divide by columns.
if (($breaking == false) && ($showsection == true)) {
$breaking = true;
// Divide the number of sections by the number of columns.
$breakpoint = $numsections / $this->tcsettings['layoutcolumns'];
}
}

if (($currentsectionfirst == false) && ($canbreak == true) && ($shownsectioncount >= $columnbreakpoint)
&&
if (($breaking == true) && ($shownsectioncount >= $breakpoint) &&
($columncount < $this->tcsettings['layoutcolumns'])) {
echo $this->end_section_list();
echo $this->start_toggle_section_list();
$columncount++;
// Next breakpoint is...
$columnbreakpoint += $numsections / $this->tcsettings['layoutcolumns'];
echo $this->end_section_list();
echo $this->start_toggle_section_list();
$columncount++;
// Next breakpoint is...
$breakpoint += $numsections / $this->tcsettings['layoutcolumns'];
}
} else { // Horizontal mode.
if (($breaking == false) && ($showsection == true)) {
$breaking = true;
// The lowest value here for layoutcolumns is 2 and the maximum for shownsectioncount is 2, so :).
$breakpoint = $this->tcsettings['layoutcolumns'];
}

if (($breaking == true) && ($shownsectioncount >= $breakpoint) && ($loopsection < $course->numsections)) {
echo $this->end_section_list();
echo $this->start_toggle_section_list();
// Next breakpoint is...
$breakpoint += $this->tcsettings['layoutcolumns'];
}
}
}
}
Expand Down

0 comments on commit 10aa75a

Please sign in to comment.