MDL-58140 completion: Added bulk activity completion page.
authorAdrian Greeve <adrian@moodle.com>
Fri, 3 Mar 2017 09:22:25 +0000 (17:22 +0800)
committerJake Dallimore <jake@moodle.com>
Wed, 19 Apr 2017 00:52:57 +0000 (08:52 +0800)
Part of MDL-58138 epic

completion/classes/manager.php [new file with mode: 0644]
course/bulkcompletion.php [new file with mode: 0644]
course/classes/output/bulk_activity_completion_renderer.php [new file with mode: 0644]
course/completion.php
course/templates/activityinstance.mustache [new file with mode: 0644]
course/templates/bulkactivitycompletion.mustache [new file with mode: 0644]
lang/en/completion.php
lang/en/moodle.php
theme/boost/scss/moodle/course.scss
theme/bootstrapbase/less/moodle/course.less
theme/bootstrapbase/style/moodle.css

diff --git a/completion/classes/manager.php b/completion/classes/manager.php
new file mode 100644 (file)
index 0000000..f7eca84
--- /dev/null
@@ -0,0 +1,120 @@
+<?php
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Bulk activity completion manager class
+ *
+ * @package     core_completion
+ * @category    completion
+ * @copyright   2017 Adrian Greeve
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace core_completion;
+
+use stdClass;
+
+/**
+ * Bulk activity completion manager class
+ *
+ * @package     core_completion
+ * @category    completion
+ * @copyright   2017 Adrian Greeve
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class manager {
+
+    protected $courseid;
+
+    public function __construct($courseid) {
+        $this->courseid = $courseid;
+    }
+
+    /**
+     * Gets the data (context) to be used with the bulkactivitycompletion template.
+     *
+     * @return stdClass data for use with the bulkactivitycompletion template.
+     */
+    public function get_activities_and_headings() {
+        global $OUTPUT;
+        $moduleinfo = get_fast_modinfo($this->courseid);
+        $sections = $moduleinfo->get_sections();
+        $data = new stdClass;
+        $data->courseid = $this->courseid;
+        $data->sesskey = sesskey();
+        $data->helpicon = $OUTPUT->help_icon('temphelp', 'moodle');
+        $data->sections = [];
+        foreach ($sections as $sectionnumber => $section) {
+            $sectioninfo = $moduleinfo->get_section_info($sectionnumber);
+
+            $sectionobject = new stdClass();
+            $sectionobject->sectionnumber = $sectionnumber;
+            $sectionobject->name = get_section_name($this->courseid, $sectioninfo);
+            $sectionobject->activities = [];
+
+            foreach ($section as $cmid) {
+                $mod = $moduleinfo->get_cm($cmid);
+                $moduleobject = new stdClass();
+                $moduleobject->cmid = $cmid;
+                $moduleobject->modname = $mod->get_formatted_name();
+                $moduleobject->icon = $mod->get_icon_url()->out();
+                $moduleobject->url = $mod->url;
+
+                // Get activity completion information.
+                $moduleobject->completionstatus = $this->get_completion_detail($mod);
+
+                $sectionobject->activities[] = $moduleobject;
+            }
+            $data->sections[] = $sectionobject; 
+        }
+        return $data;
+    }
+
+    private function get_completion_detail(\cm_info $mod) {
+        global $OUTPUT;
+        $strings = [];
+        switch ($mod->completion) {
+            case 0:
+                $strings['string'] = get_string('none');
+                break;
+
+            case 1:
+                $strings['string'] = get_string('manual');
+                $strings['icon'] = $OUTPUT->pix_url('i/completion-manual-enabled')->out();
+                break;
+
+            case 2:
+                $strings['string'] = get_string('withconditions');
+
+                // Get the descriptions for all the active completion rules for the module.
+                if ($ruledescriptions = $mod->get_completion_active_rule_descriptions()) {
+                    foreach ($ruledescriptions as $ruledescription) {
+                        $strings['string'] .= \html_writer::empty_tag('br') . $ruledescription;
+                    }
+                }
+
+                $strings['icon'] = $OUTPUT->pix_url('i/completion-auto-enabled')->out();
+                break;
+
+            default:
+                $strings['string'] = get_string('none');
+                break;
+        }
+        return $strings;
+    }
+
+}
\ No newline at end of file
diff --git a/course/bulkcompletion.php b/course/bulkcompletion.php
new file mode 100644 (file)
index 0000000..fd6ad14
--- /dev/null
@@ -0,0 +1,74 @@
+<?php
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Bulk activity completion selection
+ *
+ * @package     core_completion
+ * @category    completion
+ * @copyright   2017 Adrian Greeve
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+require_once(__DIR__.'/../config.php');
+require_once($CFG->dirroot.'/course/lib.php');
+require_once($CFG->libdir.'/completionlib.php');
+
+$id = required_param('id', PARAM_INT);       // course id
+$cmids = optional_param_array('cmid', [], PARAM_INT);
+
+// Perform some basic access control checks.
+if ($id) {
+
+    if($id == SITEID){
+        // Don't allow editing of 'site course' using this form.
+        print_error('cannoteditsiteform');
+    }
+
+    if (!$course = $DB->get_record('course', array('id' => $id))) {
+        print_error('invalidcourseid');
+    }
+    require_login($course);
+    require_capability('moodle/course:update', context_course::instance($course->id));
+
+} else {
+    require_login();
+    print_error('needcourseid');
+}
+
+// Set up the page.
+$PAGE->set_course($course);
+$PAGE->set_url('/course/bulkcompletion.php', array('id' => $course->id));
+$PAGE->set_title($course->shortname);
+$PAGE->set_heading($course->fullname);
+$PAGE->set_pagelayout('admin');
+
+// Get all that stuff I need for the renderer.
+$manager = new \core_completion\manager($id);
+$bulkcompletiondata = $manager->get_activities_and_headings();
+
+$renderer = $PAGE->get_renderer('core_course', 'bulk_activity_completion');
+
+// Print the form.
+echo $OUTPUT->header();
+echo $OUTPUT->heading(get_string('editcoursecompletionsettings', 'core_completion'));
+
+echo $renderer->navigation($id, 'bulkcompletion');
+
+echo $renderer->bulkcompletion($bulkcompletiondata);
+
+echo $OUTPUT->footer();
diff --git a/course/classes/output/bulk_activity_completion_renderer.php b/course/classes/output/bulk_activity_completion_renderer.php
new file mode 100644 (file)
index 0000000..0df8ca3
--- /dev/null
@@ -0,0 +1,61 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Contains renderers for the bulk activity completion stuff.
+ *
+ * @package core_course
+ * @copyright 2017 Adrian Greeve
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die;
+
+require_once($CFG->dirroot.'/course/renderer.php');
+
+/**
+ * Main renderer for the bulk activity completion stuff.
+ *
+ * @package core_course
+ * @copyright 2017 Adrian Greeve
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class core_course_bulk_activity_completion_renderer extends plugin_renderer_base {
+
+    public function navigation($courseid, $page) {
+        $tabs = [];
+
+        $tabs[] = new tabobject(
+            'completion',
+            new moodle_url('/course/completion.php', ['id' => $courseid]),
+            get_string('coursecompletion', 'completion')
+        );
+
+        $tabs[] = new tabobject(
+            'bulkcompletion',
+            new moodle_url('/course/bulkcompletion.php', ['id' => $courseid]),
+            get_string('bulkactivitycompletion', 'completion');
+        );
+
+        return $this->tabtree($tabs, $page);
+    }
+
+
+    public function bulkcompletion($data) {
+        return parent::render_from_template('core_course/bulkactivitycompletion', $data);
+    }
+
+}
index e38bace..fdd1bc1 100644 (file)
@@ -148,10 +148,14 @@ if ($form->is_cancelled()){
     redirect($url);
 }
 
+$renderer = $PAGE->get_renderer('core_course', 'bulk_activity_completion');
+
 // Print the form.
 echo $OUTPUT->header();
 echo $OUTPUT->heading(get_string('editcoursecompletionsettings', 'core_completion'));
 
+echo $renderer->navigation($id, 'completion');
+
 $form->display();
 
 echo $OUTPUT->footer();
diff --git a/course/templates/activityinstance.mustache b/course/templates/activityinstance.mustache
new file mode 100644 (file)
index 0000000..e786d48
--- /dev/null
@@ -0,0 +1,71 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_course/activityinstance
+
+    Activity completion selector.
+
+    Example context (json):
+    {
+        "activities": [{
+            "cmid": "4",
+            "modname": "Test activity",
+            "icon": {
+                "attributes": [
+                    {"name": "src", "value": "https://raw.githubusercontent.com/moodle/moodle/master/pix/t/check.png"},
+                    {"name": "alt", "value": "Activity icon"}
+                ]
+            },
+            "completionstatus": {
+                "string": "Manual",
+                "icon": {
+                    "attributes": [
+                        {"name": "src", "value": "https://raw.githubusercontent.com/moodle/moodle/master/pix/t/check.png"},
+                        {"name": "alt", "value": "Completion icon"}
+                    ]
+                }
+            }
+        }]
+    }
+}}
+{{#activities}}
+<div class="row m-b-1">
+    <div class="activityinstance col-sm-6 span6">
+        <div class="mod-indent-outer"></div>
+        <div>
+                <input type="checkbox" class="m-r-1" name="cmid[]" data-section="{{sectionnumber}}" value="{{cmid}}" aria-label="{{#str}}checkactivity, completion, {{modname}}{{/str}}">
+                <a href={{url}}>
+                <img src="{{icon}}" class="iconlarge activityicon" alt=" " role="presentation" />
+                <span class="instancename">{{modname}}</span>
+                </a>
+        </div>
+    </div>
+    <div class="activity-completionstatus col-sm-6">
+        <div class="col-sm-1">
+            {{#completionstatus.icon}}
+                <img src="{{completionstatus.icon}}" class="m-r-2">
+            {{/completionstatus.icon}}
+            {{^completionstatus.icon}}
+                <span class="m-r-3"></span>
+            {{/completionstatus.icon}}
+        </div>
+        <div class="col-sm-11">
+            <span class="text-muted muted">{{{completionstatus.string}}}</span>
+        </div>
+    </div>
+</div>
+{{/activities}}
diff --git a/course/templates/bulkactivitycompletion.mustache b/course/templates/bulkactivitycompletion.mustache
new file mode 100644 (file)
index 0000000..ee5ace8
--- /dev/null
@@ -0,0 +1,121 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_course/bulkactivitycompletion
+
+    Activity completion selector.
+
+    Example context (json):
+    {
+        "courseid": "2",
+        "sesskey": "AAAAAA",
+        "sections": [{
+            "sectionnumber": "0",
+            "name": "General",
+            "activities": [{
+                "cmid": "4",
+                "modname": "Test activity",
+                "icon": {
+                    "attributes": [
+                        {"name": "src", "value": "https://raw.githubusercontent.com/moodle/moodle/master/pix/t/check.png"},
+                        {"name": "alt", "value": "module icon"}
+                    ]
+                },
+                "completionstatus": {
+                    "string": "Manual",
+                    "icon": {
+                        "attributes": [
+                            {"name": "src", "value": "https://raw.githubusercontent.com/moodle/moodle/master/pix/t/check.png"},
+                            {"name": "alt", "value": "completion icon"}
+                        ]
+                    }
+                }
+            }]
+        }]
+    }
+}}
+<div class="container-fluid">
+    <div class="row m-b-2">
+        <div class="col">{{#str}}bulkactivitydetail, moodle{{/str}}</div>
+    </div>
+<form method="post" action="bulkcompletion.php" class="mform">
+    <div class="row m-b-2">
+        <div class="col">
+            <input type="submit" value="{{#str}}edit{{/str}}" class="btn btn-primary" name="submitbutton" aria-label="{{#str}}updateactivities, completion{{/str}}" />
+            <input type="reset" value="{{#str}}cancel{{/str}}" class="btn btn-secondary" aria-label="{{#str}}resetactivities, completion{{/str}}" />
+        </div>
+    </div>
+    <div class="top-section row m-b-1">
+        <div class="col-sm-6 span6">
+            <input type="checkbox" class="mastercheck m-r-1" aria-label="{{#str}}checkall, completion{{/str}}">
+            <label class="font-weight-bold">{{#str}}activitieslabel, moodle{{/str}}</label>
+        </div>
+        <div class="col-sm-6">
+            <label class="font-weight-bold">{{#str}}completiontracking, moodle{{/str}}</label>
+            <span>{{{helpicon}}}</span>
+        </div>
+    </div>
+    <div class="topics">
+        
+        {{#sections}}
+        
+                <div class="topic-section m-b-1">
+                    <div class="row m-b-1">
+                        <div class="col-sm-12">
+                            <input type="checkbox" data-section-master="{{sectionnumber}}" class="m-r-1" aria-label="{{#str}}checkallsection, completion, {{name}}{{/str}}">
+                            <h3>{{name}}</h3>
+                        </div>
+                    </div>
+                    {{> core_course/activityinstance}}
+                </div>
+        
+        {{/sections}}
+        
+    </div>
+    <input type="hidden" name="id" value="{{courseid}}" />
+    <input type="hidden" name="sesskey" value="{{sesskey}}" />
+    <div class="row">
+        <div class="col">
+            <input type="submit" value="{{#str}}edit{{/str}}" class="btn btn-primary" name="submitbutton" />
+            <input type="reset" value="{{#str}}cancel{{/str}}" class="btn btn-secondary" />
+        </div>
+    </div>
+</form>
+</div>
+
+{{#js}}
+require([
+    'jquery',
+], function($) {
+    $('.mastercheck').click(function() {
+        var checked = $('.mastercheck').is(':checked');
+        $('input[type=checkbox]').each(function() {
+            $(this).prop('checked', checked);
+        });
+    });
+    var mastersection = $('input[data-section-master]');
+    mastersection.click(function() {
+        var checked = $(this).is(':checked');
+        var dataid = $(this).attr('data-section-master');
+        $('input[type=checkbox][data-section=\'' + dataid + '\']').each(function() {
+            $(this).prop('checked', checked);
+        });
+    });
+    
+
+});
+{{/js}}
\ No newline at end of file
index 6024ecf..5674cef 100644 (file)
@@ -37,6 +37,10 @@ $string['all'] = 'All';
 $string['any'] = 'Any';
 $string['approval'] = 'Approval';
 $string['badautocompletion'] = 'When you select automatic completion, you must also enable at least one requirement (below).';
+$string['bulkactivitycompletion'] = 'Bulk edit activity completion';
+$string['checkall'] = 'Check or uncheck all activities and resources';
+$string['checkallsection'] = 'Check or uncheck all activities and resources in the following section: {$a}';
+$string['checkactivity'] = 'Checkbox for activity / resource: {$a}';
 $string['completed'] = 'Completed';
 $string['completedunlocked'] = 'Completion options unlocked';
 $string['completedunlockedtext'] = 'When you save changes, completion state for all students will be erased. If you change your mind about this, do not save the form.';
@@ -160,6 +164,7 @@ $string['remainingenroledfortime'] = 'Remaining enrolled for a specified period
 $string['remainingenroleduntildate'] = 'Remaining enrolled until a specified date';
 $string['reportpage'] = 'Showing users {$a->from} to {$a->to} of {$a->total}.';
 $string['requiredcriteria'] = 'Required criteria';
+$string['resetactivities'] = 'Clear all checked activities and resources';
 $string['restoringcompletiondata'] = 'Writing completion data';
 $string['roleaggregation'] = 'Condition requires';
 $string['roleaggregation_all'] = 'ALL selected roles to mark when the condition is met';
@@ -175,6 +180,7 @@ $string['unenrolment'] = 'Unenrolment';
 $string['unit'] = 'Unit';
 $string['unlockcompletion'] = 'Unlock completion options';
 $string['unlockcompletiondelete'] = 'Unlock completion options and delete user completion data';
+$string['updateactivities'] = 'Update completion status of checked activities';
 $string['usealternateselector'] = 'Use the alternate course selector';
 $string['usernotenroled'] = 'User is not enrolled in this course';
 $string['viewcoursereport'] = 'View course report';
index c377d40..d9c0a4a 100644 (file)
@@ -30,6 +30,7 @@ $string['active'] = 'Active';
 $string['activeusers'] = 'Active users';
 $string['activities'] = 'Activities';
 $string['activities_help'] = 'Activities, such as forums, quizzes and wikis, enable interactive content to be added to the course.';
+$string['activitieslabel'] = 'Activities / Resources';
 $string['activity'] = 'Activity';
 $string['activityclipboard'] = 'Moving this activity: {$a}';
 $string['activityiscurrentlyhidden'] = 'Sorry, this activity is currently hidden';
@@ -217,6 +218,7 @@ $string['blocksuccess'] = '{$a} tables have been set up correctly';
 $string['brief'] = 'Brief';
 $string['bulkactions'] = 'Bulk actions';
 $string['bulkactionselect'] = '{$a} bulk action selection';
+$string['bulkactivitydetail'] = 'Select the activities you wish to bulk edit.';
 $string['bulkmovecoursessuccess'] = 'Successfully moved {$a->courses} courses into {$a->category}';
 $string['bycourseorder'] = 'By course order';
 $string['byname'] = 'by {$a}';
@@ -260,6 +262,7 @@ $string['commentsrequirelogin'] = 'You need to log in to view the comments.';
 $string['comparelanguage'] = 'Compare and edit current language';
 $string['complete'] = 'Complete';
 $string['completereport'] = 'Complete report';
+$string['completiontracking'] = 'Completion tracking';
 $string['configuration'] = 'Configuration';
 $string['confirm'] = 'Confirm';
 $string['confirmdeletesection'] = 'Are you absolutely sure you want to completely delete "{$a}" and all the activities it contains?';
@@ -1106,6 +1109,7 @@ $string['manageeditorfiles'] = 'Manage files used by editor';
 $string['managefilters'] = 'Filters';
 $string['managemodules'] = 'Modules';
 $string['manageroles'] = 'Roles and permissions';
+$string['manual'] = 'Manual';
 $string['markallread'] = 'Mark all as read';
 $string['markedthistopic'] = 'This topic is highlighted as the current topic';
 $string['markthistopic'] = 'Highlight this topic as the current topic';
@@ -1864,6 +1868,12 @@ $string['targetrole'] = 'Target role';
 $string['teacheronly'] = 'for the {$a} only';
 $string['teacherroles'] = '{$a} roles';
 $string['teachers'] = 'Teachers';
+$string['temphelp'] = 'Completion tracking';
+$string['temphelp_help'] = '<strong>None:</strong> Do not indicate activity completion
+
+<strong>Manual:</strong> Students can manually mark the activity as completed
+
+<strong>With condition(s):</strong> Show activity as complete when conditions are met';
 $string['textediting'] = 'Text editor';
 $string['textediting_help'] = 'If an HTML editor such as Atto or TinyMCE is selected, text input areas will have a toolbar with buttons for easily adding content.
 
@@ -2027,6 +2037,7 @@ $string['whattocallzip'] = 'What do you want to call the zip file?';
 $string['whattodo'] = 'What to do';
 $string['windowclosing'] = 'This window should close automatically. If not, please close it now.';
 $string['withchosenfiles'] = 'With chosen files';
+$string['withconditions'] = 'With conditions';
 $string['withdisablednote'] = '{$a} (disabled)';
 $string['withoutuserdata'] = 'without user data';
 $string['withselectedusers'] = 'With selected users...';
index ddb4a47..a2385a7 100644 (file)
@@ -1144,6 +1144,20 @@ span.editinstructions {
     opacity: 0.5;
 }
 
+/** Bulk activity completion styles **/
+.topic-section {
+    border-bottom: 1px solid #ccc;
+
+    h3 {
+        display: inline-block;
+    }
+}
+
+.top-section {
+    border-bottom: 1px solid #ccc;
+}
+
+
 /**
  * Display sizes:
  * Large displays                   1200        +
index 7e64257..257cc6b 100644 (file)
@@ -1119,6 +1119,32 @@ span.editinstructions {
     .opacity(50);
 }
 
+/** Bulk activity completion styles */
+.topic-section {
+
+    border-bottom: 1px solid #ccc;
+
+    h3,
+    input,
+    .activityinstance,
+    .activity-completionstatus {
+        display: inline-block;
+    }
+}
+
+.top-section {
+    border-bottom: 1px solid #ccc;
+
+    div {
+        display: inline-block;
+    }
+
+    label {
+        font-weight: bold;
+    }
+}
+
+
 /**
  * Display sizes:
  * Large displays                   1200        +
index 7157d4f..31fa041 100644 (file)
@@ -6865,6 +6865,25 @@ span.editinstructions {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }
+/** Bulk activity completion styles */
+.topic-section {
+  border-bottom: 1px solid #ccc;
+}
+.topic-section h3,
+.topic-section input,
+.topic-section .activityinstance,
+.topic-section .activity-completionstatus {
+  display: inline-block;
+}
+.top-section {
+  border-bottom: 1px solid #ccc;
+}
+.top-section div {
+  display: inline-block;
+}
+.top-section label {
+  font-weight: bold;
+}
 /**
  * Display sizes:
  * Large displays                   1200        +