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