L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-55508 theme_noname: Fix styling of the assignment grading interface

Browse Source 
Part of MDL-55071
This commit is contained in:
Frederic Massart
2016-09-23 10:53:31 +01:00
committed by Dan Poltawski
parent ce18fb1e86
commit bffc0ef1f9
9 changed files with 258 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/noname/scss/moodle/core.scss
+4
View File
@@ -1112,6 +1112,10 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
height: 16px;
background-size: 100%;
}
.moodle-dialogue-base .moodle-dialogue-wrap {
background-color: #fff;
border: 1px solid #ccc;
}
.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
@extend .modal-content;
}
theme/noname/scss/moodle/modules.scss
+48
View File
@@ -582,3 +582,51 @@ div#dock {
background-color: $gray-light;
}
}
/**
* Assign.
*/
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
top: auto;
}
.path-mod-assign [data-region="grade-panel"] h3 {
margin: 10px 0;
line-height: 40px;
}
.path-mod-assign [data-region="grading-navigation"] {
padding: 6px;
}
.path-mod-assign [data-region="grade-actions"] {
padding: 10px;
}
.path-mod-assign [data-region="user-info"] .img-rounded {
margin-top: 0;
}
.path-mod-assign [data-region="grading-navigation-panel"] {
height: 85px;
}
.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
width: auto;
display: inline-block;
}
/**
* Assign feedback.
*/
.assignfeedback_editpdf_widget * {
box-sizing: content-box;
}
.assignfeedback_editpdf_widget button {
box-sizing: border-box;
}
.assignfeedback_editpdf_widget .commentcolourbutton img {
border-width: 0;
}
.assignfeedback_editpdf_widget .label {
@extend .tag;
@extend .tag-info;
}
.assignfeedback_editpdf_menu {
padding: 0;
}
theme/noname/templates/core/form_autocomplete_input.mustache
+1 -1
View File
@@ -36,7 +36,7 @@
{ "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
}}
{{#showSuggestions}}
<input type="text" id="{{inputId}}" class="form-control col-md-4" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}"/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
<input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}"/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
{{/showSuggestions}}
{{^showSuggestions}}
<input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
theme/noname/templates/core_form/element-template-inline.mustache
+2 -2
View File
@@ -1,4 +1,4 @@
<div class="form-group {{#error}}has-danger{{/error}}">
<div class="form-group {{#error}}has-danger{{/error}} fitem">
<label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
{{{label}}} {{{helpbutton}}}
</label>
@@ -13,4 +13,4 @@
require(['theme_noname/form-display-errors'], function(module) {
module.enhance({{#quote}}{{element.id}}{{/quote}});
});
{{/js}}
{{/js}}
theme/noname/templates/core_form/element-template.mustache
+2 -2
View File
@@ -1,4 +1,4 @@
<div class="form-group row {{#error}}has-danger{{/error}}">
<div class="form-group row {{#error}}has-danger{{/error}} fitem">
<label class="col-md-3 col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
{{{label}}} {{{helpbutton}}}
</label>
@@ -15,4 +15,4 @@
require(['theme_noname/form-display-errors'], function(module) {
module.enhance({{#quote}}{{element.id}}{{/quote}});
});
{{/js}}
{{/js}}
theme/noname/templates/embedded.mustache
+5 -5
View File
@@ -10,11 +10,11 @@
<body {{{ output.body_attributes }}}>
{{{ output.standard_top_of_body_html }}}
<section id="region-main">
{{{ output.course_content_header }}}
{{{ output.main_content }}}
{{{ output.course_content_footer }}}
</section>
<div id="page">
<div id="page-content">
{{{ output.main_content }}}
</div>
</div>
{{{ output.standard_end_of_body_html }}}
</body>
</html>
theme/noname/templates/mod_assign/grading_actions.mustache
+55
View File
@@ -0,0 +1,55 @@
{{!
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 mod_assign/grading_actions
Actions panel at the bottom of the assignment grading UI.
Classes required for JS:
* none
Data attributes required for JS:
* data-region
Context variables required for this template:
* see mod/assign/classes/output/grading_app.php
Example context (json):
This template is initially hidden, and is only displayed after the current user info has been loaded.
}}
{{#showreview}}
<div class="btn-toolbar collapse-buttons">
<div class="btn-group">
<button type="button" class="btn btn-secondary collapse-review-panel">{{#pix}} layout-expand-right, mod_assign, {{#str}} collapsereviewpanel, mod_assign {{/str}} {{/pix}}</button>
<button type="button" class="btn btn-secondary collapse-none active">{{#pix}} layout-default, mod_assign, {{#str}} defaultlayout, mod_assign {{/str}} {{/pix}}</button>
<button type="button" class="btn btn-secondary collapse-grade-panel">{{#pix}} layout-expand-left, mod_assign, {{#str}} collapsegradepanel, mod_assign {{/str}} {{/pix}}</button>
</div>
</div>
{{/showreview}}
<form data-region="grading-actions-form" class="hide">
<label>{{#str}}sendstudentnotifications, mod_assign{{/str}}
<input type="checkbox" name="sendstudentnotifications"
{{#defaultsendnotifications}}checked="checked"{{/defaultsendnotifications}} />
</label>
<button type="submit" class="btn btn-primary" name="savechanges">{{#str}}savechanges{{/str}}</button>
<button type="submit" class="btn btn-secondary" name="resetbutton">{{#str}}reset{{/str}}</button>
</form>
{{#js}}
require(['mod_assign/grading_actions'], function(GradingActions) {
new GradingActions('[data-region="grade-actions"]');
});
{{/js}}
theme/noname/templates/mod_assign/grading_navigation.mustache
+75
View File
@@ -0,0 +1,75 @@
{{!
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 mod_assign/grading_navigation
Actions panel at the bottom of the assignment grading UI.
Classes required for JS:
* none
Data attributes required for JS:
* data-region, data-assignmentid, data-groupid
Context variables required for this template:
* see mod/assign/classes/output/grading_app.php
Example context (json):
This template includes ajax functionality, so it cannot be shown in the template library.
}}
<div class="container-fluid">
<div data-region="grading-navigation" class="row">
<div data-region="assignment-info" class="col-md-4">
<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}">{{{coursename}}}</a><br/>
<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}">{{name}}</a>
{{#caneditsettings}}
<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
{{/caneditsettings}}
<div role="tooltip" id="tooltip-{{uniqid}}" class="accesshide">
{{#duedate}}
{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}
{{/duedate}}
{{#cutoffdate}}
<br>{{cutoffdatestr}}
{{/cutoffdate}}
{{#duedate}}
<br>{{timeremainingstr}}
{{/duedate}}
</div>
{{#duedate}}
<br/><small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
{{/duedate}}
</span>
</div>
<div data-region="user-info" class="col-md-4" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}">
{{> mod_assign/grading_navigation_user_info }}
</div>
<div data-region="user-selector" class="col-md-4">
<div class="alignment">
{{> mod_assign/grading_navigation_user_selector }}
</div>
</div>
</div>
</div>
{{#js}}
require(['mod_assign/grading_navigation', 'core/tooltip'], function(GradingNavigation, ToolTip) {
var nav = new GradingNavigation('[data-region="user-selector"]');
var tooltip = new ToolTip('[data-region="assignment-tooltip"]');
});
{{/js}}
theme/noname/templates/mod_assign/grading_navigation_user_selector.mustache
+66
View File
@@ -0,0 +1,66 @@
{{!
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 mod_assign/grading_navigation_user_selector
The template HTML for the user selector in the top right corner.
Classes required for JS:
* none
Data attributes required for JS:
* data-action, data-assignmentid, data-groupid, data-region
Context variables required for this template:
* see mod/assign/classes/output/grading_app.php
Example context (json):
This template uses ajax functionality, so it cannot be shown in the template library.
}}
<a href="#previous" data-action="previous-user">{{{larrow}}}</a>
<span data-region="input-field">
<select data-action="change-user" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}"></select>
</span>
<a href="#next" data-action="next-user">{{{rarrow}}}</a>
<br>
<span data-region="user-count">
<small>
<span data-region="user-count-summary">{{#str}}xofy, mod_assign, { "x": "{{index}}", "y": "{{count}}" }{{/str}}</span>
</small>
</span>
<span data-region="configure-filters" id="filter-configuration-{{uniqid}}" class="card card-small">
<form>
<label><input type="checkbox" name="filter_submitted">{{#str}}filtersubmitted, mod_assign{{/str}}</label>
<label><input type="checkbox" name="filter_notsubmitted">{{#str}}filternotsubmitted, mod_assign{{/str}}</label>
<label><input type="checkbox" name="filter_requiregrading">{{#str}}filterrequiregrading, mod_assign{{/str}}</label>
</form>
</span>
<a href="#" data-region="user-filters" title="{{#str}}changefilters, mod_assign{{/str}}" aria-expanded="false" aria-controls="filter-configuration-{{uniqid}}">
<span class="accesshide">
{{#filters}}
{{filtername}}
{{/filters}}
{{^filters}}
{{#str}}nofilters, mod_assign{{/str}}
{{/filters}}
</span>
{{#pix}}i/filter{{/pix}}
</a>