Mollgear has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/371628 )
Change subject: ViewCourseAction: Responsive design
......................................................................
ViewCourseAction: Responsive design
This is a work-in-progress commit. It breaks the "Add student" input text field
and changes the EN locales only.
The goal is to have most elements at the same width and shrink with to a
(mobile) minimum. The summary and student sections don't really need the toggle
feature because they are at the end the page with no content below. The help
text was slightly missleading about adding a list of students; the list has to
be comma (not space) separated.
Ideally new students could be directly added at the student list rather than
having a whole dedicated section. This is not implemente in the current version
of this patch.
Change-Id: Id826ebc6130b5d2499ef1e6753f86d0c1172be0f
---
M i18n/en.json
M includes/actions/ViewCourseAction.php
M resources/ep.addstudents.css
M resources/ep.addstudents.js
4 files changed, 13 insertions(+), 96 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/EducationProgram
refs/changes/28/371628/1
diff --git a/i18n/en.json b/i18n/en.json
index 3732853..b5b78d3 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -348,7 +348,7 @@
"ep-editcourse": "You are editing an existing course.",
"ep-editcourse-exists-already": "This course already exists. You are
editing it.",
"ep-addstudents-section": "Add students to this course",
- "ep-addstudents-instructions": "Type the usernames of the students you
want to add. Press Enter after each one, or click on the menu that appears. You
can also paste a list of usernames.\n\nClick \"{{int:ep-addstudents-btn}}\"
when you're done.",
+ "ep-addstudents-instructions": "Type the usernames of the students you
want to add. Press Enter after each one, or click on the menu that appears. You
can also paste a list of comma separated usernames.\n\nClick
\"{{int:ep-addstudents-btn}}\" when you're done.",
"ep-addstudents-url-instructions": "Note that students may also add
themselves by opening this link in their web browsers:",
"ep-addstudents-invalid-users": "{{PLURAL:$1|This {{GENDER:$2|user}}
doesn't|These users don't}} exist: $2.",
"ep-addstudents-btn": "Add",
@@ -387,7 +387,7 @@
"ep-vieworg-deleted": "This institution has been deleted. The deletion
log for the institution is provided below for reference.",
"ep-course-title": "Course: $1",
"ep-course-students": "Students",
- "ep-course-summary-students": "Summary and students",
+ "ep-course-summary": "Summary",
"ep-course-articles": "Articles",
"viewcourseaction-none": "There is no course with name \"$1\". See the
[[Special:Courses|list of courses]].",
"ep-course-create": "There is no course with name \"$1\", but you can
create a new one.",
diff --git a/includes/actions/ViewCourseAction.php
b/includes/actions/ViewCourseAction.php
index 89b2b1b..b95a606 100644
--- a/includes/actions/ViewCourseAction.php
+++ b/includes/actions/ViewCourseAction.php
@@ -122,9 +122,7 @@
$studentIds = $course->getField( 'students' );
- if ( !empty( $studentIds ) ) {
- $wikiText .= "\n" . '==' . $this->msg(
'ep-course-summary-students' )->text() . '==';
- }
+ $wikiText .= "\n" . '==' . $this->msg( 'ep-course-summary'
)->text() . '==';
$html .= $this->getOutput()->parse( $wikiText );
@@ -310,28 +308,13 @@
// add the required client-side module
$this->getOutput()->addModules( 'ep.addstudents' );
- // Are we here following a page reload due to adding students?
- // Check by looking at URl params. If so, controls start out
- // expanded. Otherwise, they start out collapsed.
- $queryVals =
$this->getContext()->getRequest()->getQueryValues();
-
- if ( isset( $queryVals['studentsadded'] )
- || isset( $queryVals['alreadyenrolled'] )
- ) {
- $collapsedClassStr = '';
- $expandMsg = $this->msg( 'collapsible-collapse'
)->text();
- } else {
- $collapsedClassStr = ' mw-collapsed';
- $expandMsg = $this->msg( 'collapsible-expand' )->text();
- }
-
// open outer div
$html = Html::openElement(
'div',
[ 'class' => 'ep-addstudents-area' ]
);
- // open div for headline and expand/collapse link
+ // open div for headline
$html .= Html::openElement(
'div',
[ 'class' => 'ep-addstudents-headline-area' ]
@@ -348,28 +331,8 @@
$html .= Html::closeElement( 'h2' );
- // expand/collapse link
- $html .= ' ['
- . Html::element(
- 'a',
- [
- 'class' =>
'mw-customtoggle-addstudents',
- ],
- $expandMsg
- )
- .']';
-
- // close div for headline and expand/collapse link
+ // close div for headline
$html .= Html::closeElement( 'div' );
-
- // open div with collapsible contents
- $html .= Html::openElement(
- 'div',
- [
- 'id' => 'mw-customcollapsible-addstudents',
- 'class' => 'mw-collapsible
ep-addstudents-controls' . $collapsedClassStr
- ]
- );
// general instructions
$html .= Html::openElement(
@@ -438,9 +401,6 @@
);
// close div for instructions on enroll link
- $html .= Html::closeElement( 'div' );
-
- // close div with collapsible contents
$html .= Html::closeElement( 'div' );
// close outer div
diff --git a/resources/ep.addstudents.css b/resources/ep.addstudents.css
index 957e2e3..4f18dcd 100644
--- a/resources/ep.addstudents.css
+++ b/resources/ep.addstudents.css
@@ -16,26 +16,20 @@
width: 100%;
}
-/* The heading is in an h2 element. Use some global h2 styles, but not all. */
+/* The heading is in an h2 element. Use some global h2 styles, but not all.
.ep-addstudents-headline-area h2 {
border: 0;
display: inline;
line-height: 2.3em;
-}
-
-/* prevent toggle-link outline when you click it */
-.mw-customtoggle-addstudents {
- outline: 0;
-}
-
-/*#mw-customcollapsible-addstudents {
- width: 50em;
}*/
+
+/* width of the add students area */
#ep-addstudents-instructions,
#ep-addstudents-link-instructions,
#ep-addstudents-error,
.ep-addstudents-area .ep-tagsinput {
- width: 50em;
+ min-width: auto;
+ max-width: 60em;
clear: both;
}
@@ -119,7 +113,7 @@
}
#ep-addstudent-msg {
- width: 80%;
+ max-width: 60em;
margin: 1em 0 0.3em 0;
border: 3px solid #2f3c6d;
padding: 0.4em;
@@ -127,13 +121,8 @@
#ep-addstudent-msg [data-role='remove'] {
margin-left: 8px;
- cursor: pointer;
float: right;
font-size: 1.3em;
-}
-
-#ep-addstudent-msg [data-role='remove']:hover {
- text-decoration: underline;
}
.ep-addstudent-msg-main {
diff --git a/resources/ep.addstudents.js b/resources/ep.addstudents.js
index 6129504..9fa3d0c 100644
--- a/resources/ep.addstudents.js
+++ b/resources/ep.addstudents.js
@@ -56,8 +56,6 @@
epAddstudentsErrorId:
'ep-addstudents-error',
// coordinate with ep.addstudents.css and
ViewCourseAction.php
- mwCustomcollapsibleAddstudentsId:
'mw-customcollapsible-addstudents',
- mwCustomtoggleAddstudentsCls:
'mw-customtoggle-addstudents',
epAddstudentsLinkId: 'ep-addstudents-link',
// coordinate with ViewCourseAction.php
@@ -91,7 +89,7 @@
if ( $msgEl.length === 0 ) {
$msgEl = $( '<div id="' +
CSS.addStudentsMsgId +'">' +
- '<div data-role="remove"
>x</div>' +
+ '<a data-role="remove" >x</a>' +
'<p class="' +
CSS.addStudentsMsgMainCls + '" />' +
'<p class="' +
CSS.addStudentsMsgSubCls + '" />' +
'</div>"' );
@@ -181,30 +179,6 @@
$addStudentCells.removeClass(
CSS.epAddedstudentCellInitialCls );
$addStudentCells.addClass(
CSS.epAddedstudentCellCls );
}, 1 );
- },
-
- /**
- * Set the text for the custom expand and collapse link
- *
- * @param {String} expandText
- * @param {String} collapseText
- */
- setExpandAndCollapseText: function( expandText,
collapseText ) {
- // set handlers to switch text on expand or
collapse
- $( '#' + CSS.mwCustomcollapsibleAddstudentsId
).on(
- 'afterCollapse.mw-collapsible',
- function() {
- $( '.' +
CSS.mwCustomtoggleAddstudentsCls ).text(
- expandText );
- }
-
- ).on(
- 'afterExpand.mw-collapsible',
- function() {
- $( '.' +
CSS.mwCustomtoggleAddstudentsCls ).text(
- collapseText );
- }
- );
},
/**
@@ -995,12 +969,6 @@
courseId =
restrictToDigits(
view.$tagsinputEl.attr( 'data-courseid' ) );
- // Send the view the text for the custom expand
and collapse link
- view.setExpandAndCollapseText(
- mw.message(
'collapsible-expand' ).text(),
- mw.message(
'collapsible-collapse' ).text()
- );
-
// initialize tagsinput and typeahead functions
initializeTagsinput();
initializeTypeahead();
@@ -1026,4 +994,4 @@
// boot everything up
presenter.initialize();
-} ) ( window.jQuery, window.mediaWiki );
\ No newline at end of file
+} ) ( window.jQuery, window.mediaWiki );
--
To view, visit https://gerrit.wikimedia.org/r/371628
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id826ebc6130b5d2499ef1e6753f86d0c1172be0f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/EducationProgram
Gerrit-Branch: master
Gerrit-Owner: Mollgear <moritz.oberhau...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
