Skip to content

Commit 9fc8bbc

Browse files
rdeberlogan-reynolds
rdeber
authored and
logan-reynolds
committed
GRADEME-141: Update block UI style and structure
1 parent b83aa6e commit 9fc8bbc

15 files changed

+3174
-145
lines changed

‎.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
node_modules/
2-
package-lock.json
1+
node_modules/

‎block_grade_me.php

+4-6
Original file line numberDiff line numberDiff line change
@@ -156,14 +156,12 @@ public function get_content() {
156156

157157
if (!empty($this->content->text)) {
158158
// Expand/Collapse button.
159-
$expand = '<button class="btn btn-mini btn-primary" type="button" onclick="togglecollapseall();">' .
160-
get_string('expand', 'block_grade_me') . '</button>';
159+
$expand = '<button class="btn btn-sm btn-outline-secondary" type="button" onclick="togglecollapseall();">' .
160+
get_string('expand', 'block_grade_me').'</button>';
161161

162-
$this->content->text = '<dl>'.$expand.$this->content->text.'<div class="excess">'.$additional.'</div></dl>';
162+
$this->content->text = $expand.'<dl>'.$this->content->text.'</dl><div class="excess">'.$additional.'</div>';
163163
} else if (empty($this->content->text) && $showempty) {
164-
$this->content->text .= '<div class="empty">'.
165-
$OUTPUT->pix_icon('s/smiley', get_string('alt_smiley', 'block_grade_me')).' '.
166-
get_string('nothing', 'block_grade_me').'</div>'."\n";
164+
$this->content->text .= '<div class="excess">'.get_string('nothing', 'block_grade_me').'</div>'."\n";
167165
}
168166

169167
return $this->content;

‎docs/development.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
# Development
2-
3-
This guide details how to work with the NPM build process to compile the SCSS.
4-
5-
## NPM Process
6-
7-
- SCSS to CSS compiling
8-
- Autoprefixing
9-
10-
## Setup Local Dev Environment
11-
12-
1. You will need Node.js/NPM installed on your computer. You can check if you already have Node.js installed by running `node -v`, if you see a version number, it’s installed. If not, follow installation instructions for your OS here: [https://nodejs.org/](https://nodejs.org/).
13-
2. Navigate to the plugin root directory in the command line and install the plugin dependencies: `npm install`. You may need to run `sudo npm install` depending on OS permissions.
14-
15-
## Working with SCSS
16-
17-
You should now be able to run the build task from inside the plugin's root directory. When the SCSS is compiled, NPM will create a *styles.css* file in the plugin root directory and add any necessary vendor prefixes. This file should then be automatically loaded by the plugin. Do not edit this file directly. All style changes must be done in the SCSS directory.
18-
1+
# Development
2+
3+
This guide details how to work with the NPM build process to compile the SCSS.
4+
5+
## NPM Process
6+
7+
- SCSS to CSS compiling
8+
- Autoprefixing
9+
10+
## Setup Local Dev Environment
11+
12+
1. You will need Node.js/NPM installed on your computer. You can check if you already have Node.js installed by running `node -v`, if you see a version number, it’s installed. If not, follow installation instructions for your OS here: [https://nodejs.org/](https://nodejs.org/).
13+
2. Navigate to the plugin root directory in the command line and install the plugin dependencies: `npm ci`. You may need to run `sudo npm ci` depending on OS permissions. We use `npm ci` instead of `npm install` here to preserve a consistent dev environment by forcing the install to read from the package-lock.json file. This will produce a faster and more reliable dev environment across teams/products. Read more here about why ci here: [https://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable.html](https://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable.html)
14+
15+
## Working with SCSS
16+
17+
You should now be able to run the build task from inside the plugin's root directory. When the SCSS is compiled, NPM will create a *styles.css* file in the plugin root directory and add any necessary vendor prefixes. This file should then be automatically loaded by the plugin. Do not edit this file directly. All style changes must be done in the SCSS directory.
18+
1919
- To compile the SCSS for production: `npm run build`

‎lang/en/block_grade_me.php

-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
$string['alt_gradebook'] = 'Go to {$a->course_name} gradebook…';
3232
$string['alt_mod'] = 'Go to {$a->mod_name} in gradebook…';
3333
$string['alt_mark'] = 'check';
34-
$string['alt_smiley'] = 'smiley';
3534

3635
$string['settings_maxcourses'] = 'Maximum Courses Displayed';
3736
$string['settings_configmaxcourses'] = 'Set the maximum number of ungraded courses to show. Setting this too high may impact performance.';

‎lang/es/block_grade_me.php

-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
$string['alt_gradebook'] = 'Ir a calificaciones de {$a->course_name}…';
2929
$string['alt_mod'] = 'Ir a {$a->mod_name} en calificaciones…';
3030
$string['alt_mark'] = 'check';
31-
$string['alt_smiley'] = 'smiley';
3231
$string['settings_maxcourses'] = 'Número máximo de cursos para mostrar';
3332
$string['settings_configmaxcourses'] = 'Configure el número máximo de cursos para mostrar. Un número alto afecta al rendimiento de la web.';
3433
$string['settings_adminviewall'] = 'Los Administradores ven todo';

‎lib.php

+33-21
Original file line numberDiff line numberDiff line change
@@ -125,13 +125,15 @@ function block_grade_me_tree($course) {
125125
$gradebookicon = $OUTPUT->pix_icon('i/grades', $altgradebook, null, array('class' => 'gm_icon'));
126126
$courselink = $CFG->wwwroot.'/course/view.php?id='.$courseid;
127127
$coursetitle = get_string('link_gradebook', 'block_grade_me', array('course_name' => $coursename));
128-
$text .= '<div>';
129-
$text .= '<dt id="courseid'.$courseid.'" class="cmod">
130-
<div class="toggle open" onclick="$(\'dt#courseid'.$courseid.
131-
' > div.toggle\').toggleClass(\'open\');$(\'dt#courseid'.$courseid.
132-
' ~ dd\').toggleClass(\'block_grade_me_hide\');"></div>
133-
<a href="'.$gradebooklink.'">'.$gradebookicon.'</a>
134-
<a href="'.$courselink.'" title="'.$coursetitle.'">'.$coursename.'</a></dt>'."\n";
128+
$text .= '<div><dt id="courseid'.$courseid.'" class="cmod">
129+
<div tabindex=0 class="toggle open fa fa-caret-right" aria-hidden="true"
130+
onclick="$(\'dt#courseid'.$courseid.' > div.toggle\')
131+
.toggleClass(\'open\');$(\'dt#courseid'.$courseid.' ~ dd\')
132+
.toggleClass(\'block_grade_me_hide\');">
133+
<span class="sr-only">Toggle Section</span>
134+
</div>
135+
<a href="'.$courselink.'" class="grademe-course-name"'.$coursetitle.'">'.$coursename.'</a>
136+
</dt>'."\n";
135137
$text .= "\n";
136138

137139
ksort($course);
@@ -155,13 +157,18 @@ function block_grade_me_tree($course) {
155157
$moduleicon = $OUTPUT->pix_icon('icon', $moduletitle, $itemmodule, array('class' => 'gm_icon'));
156158

157159
$text .= '<dd id="cmid'.$coursemoduleid.'" class="module">'."\n"; // Open module.
158-
$text .= '<div class="toggle" onclick="$(\'dd#cmid'.$coursemoduleid.
159-
' > div.toggle\').toggleClass(\'open\');$(\'dd#cmid'.$coursemoduleid.
160-
' > ul\').toggleClass(\'block_grade_me_hide\');"></div>'."\n";
161-
$text .= '<a href="'.$gradelink.'" title="'.$moduletitle.'">'.$moduleicon.'</a>';
162-
$text .= '<a href="'.$modulelink.'" title="'.$moduletitle.'">'.$itemname.'</a> ('.count($item).')'."\n";
163-
164-
$text .= '<ul class="block_grade_me_hide">'."\n";
160+
$text .= '<div class="dd-wrap">'."\n";
161+
$text .= '<div tabindex=0 class="toggle fa fa-caret-right" aria-hidden="true"
162+
onclick="$(\'dd#cmid'.$coursemoduleid.' > div div.toggle\')
163+
.toggleClass(\'open\');$(\'dd#cmid'.$coursemoduleid.' > ul\')
164+
.toggleClass(\'block_grade_me_hide\');">
165+
<span class="sr-only">Toggle Section</span>
166+
</div>'."\n";
167+
$text .= '<a href="'.$gradelink.'" class="grademe-course-icon" title="'.$moduletitle.'">'.$moduleicon.'</a>'."\n";
168+
$text .= '<a href="'.$modulelink.'" class="grademe-mod-name" title="'.$moduletitle.'">'.$itemname.'</a>'."\n";
169+
$text .= '<span class="badge badge-pill badge-primary">'.count($item).'</span>'."\n";
170+
$text .= '</div>'."\n";
171+
$text .= '<ul class="gradable-list block_grade_me_hide">'."\n";
165172

166173
ksort($item);
167174

@@ -199,19 +206,24 @@ function block_grade_me_tree($course) {
199206
$userprofiletitle = get_string('link_user_profile', 'block_grade_me', array('first_name' => $userfirst));
200207

201208
$text .= '<li class="gradable">'; // Open gradable.
202-
$text .= '<a href="'.$submissionlink.'" title="'.$submissiontitle.'"><img src="'.$gradeimg.
203-
'" class="gm_icon" alt="'.$altmark.'" /></a>'; // Grade icon.
204-
$text .= $OUTPUT->user_picture($user, array('size' => 16, 'courseid' => $courseid, 'link' => true));
205-
$text .= '<a href="'.$CFG->wwwroot.'/user/view.php?id='.$userid.'&amp;course='.
206-
$courseid.'" title="'.$userprofiletitle.'">'.$userfirstlast.'</a>'; // User name and profile link.
207-
$text .= '<br />'.userdate($timesubmitted, $datetimestring); // Output submission date.
209+
$text .= '<a class="gradable-icon" href="'.$submissionlink.'" title="'.$submissiontitle.'">
210+
<i class="fa fa-check" aria-hidden="true"></i>
211+
<span class="sr-only">'.$submissiontitle.'</span>
212+
</a>';
213+
$text .= '<div class="gradable-wrap">';
214+
$text .= '<a class="gradable-user" href="'.$CFG->wwwroot.'/user/view.php?id='.$userid.'&amp;course='.$courseid.'" title="'.$userprofiletitle.'">';
215+
$text .= $userfirstlast;
216+
$text .= '</a>';
217+
$text .= '<div class="gradable-date">'.userdate($timesubmitted, $datetimestring).'</div>';
218+
$text .= '</div>';
208219
$text .= '</li>'."\n"; // End gradable.
209220
}
210221

211222
$text .= '</ul>'."\n";
212223
$text .= '</dd>'."\n"; // Close module.
213224
}
214-
$text .= '</div>';
225+
226+
$text .= '</div>'."\n";
215227

216228
return $text;
217229
}

0 commit comments

Comments
 (0)