OO-4315 make course pagination more compact, improve usabilit of read

confirmation

src/main/java/org/olat/course/run/CoursePaginationController.java

@@ -60,11 +60,15 @@ public class CoursePaginationController extends FormBasicController {
 		
 		previousButton = uifactory.addFormLink("previous", "previous", "", null, formLayout, Link.BUTTON_XSMALL | Link.NONTRANSLATED);
 		previousButton.setDomReplacementWrapperRequired(false);
-		previousButton.setIconLeftCSS("o_icon o_icon_previous_page");
+		previousButton.setIconLeftCSS("o_icon o_icon-fw o_icon_course_previous");
+		previousButton.setLinkTitle(translate("command.previous"));
+		previousButton.setAriaLabel(translate("command.previous"));
 		
 		nextButton = uifactory.addFormLink("next", "next", "", null, formLayout, Link.BUTTON_XSMALL | Link.NONTRANSLATED);
 		nextButton.setDomReplacementWrapperRequired(false);
-		nextButton.setIconLeftCSS("o_icon o_icon_next_page");
+		nextButton.setIconLeftCSS("o_icon o_icon-fw o_icon_course_next");
+		nextButton.setLinkTitle(translate("command.next"));
+		nextButton.setAriaLabel(translate("command.next"));
 	}
 
 	public void updateNextPreviousUI(boolean previousEnabled, boolean nextEnabled) {
@@ -75,8 +79,11 @@ public class CoursePaginationController extends FormBasicController {
 	public void updateAssessmentConfirmUI(boolean confirmVisible, boolean doConfirm) {
 		// If doConfirm (click to confirm), show the current state "undone" and vice versa.
 		confirmButton.setI18nKey(doConfirm? "command.assessment.undone": "command.assessment.done");
+		confirmButton.setLinkTitle(doConfirm? "command.assessment.undone.alt": "command.assessment.done.alt");
 		confirmButton.setIconLeftCSS(doConfirm? "o_icon o_icon_status_undone": "o_icon o_icon_status_done");
 		confirmButton.setUserObject(doConfirm? Boolean.TRUE: Boolean.FALSE);
+		confirmButton.setElementCssClass(doConfirm ? "o_course_pagination_status_undone" : "o_course_pagination_status_done");
+		confirmButton.setPrimary(doConfirm);
 		confirmButton.setVisible(confirmVisible);
 		flc.setDirty(true);
 	}

src/main/java/org/olat/course/run/_i18n/LocalStrings_de.properties

 #Mon Mar 02 09:54:04 CET 2009
 command.access=Zugangskonfiguration
 command.assessment.done=Erledigt
+command.assessment.done.alt=Klicke um die Lesebest\u00E4tigung zu widerrufen
 command.assessment.mode=Pr\u00FCfungsmodus
-command.assessment.undone=Unerledigt
+command.assessment.undone=Lesebest\u00E4tigung
+command.assessment.undone.alt=Klicke um das Lesen der Seite zu best\u00E4tigen 
 command.blog=Blog
 command.bookmark=Bookmark
 command.calendar=Kalender

src/main/java/org/olat/course/run/_i18n/LocalStrings_en.properties

 #Tue Dec 16 09:04:43 CET 2014
 command.access=Access configuration
 command.assessment.done=Done
+command.assessment.done.alt=Click to undo the read confirmation
 command.assessment.mode=Assessment mode
-command.assessment.undone=Undone
+command.assessment.undone=Read confirmation
+command.assessment.undone.alt=Click to confirm that you have read this page
 command.blog=Blog
 command.bookmark=Bookmark
 command.calendar=Calendar

src/main/webapp/static/themes/light/_config.scss

@@ -212,7 +212,7 @@ $o-toolbar-height-md			: 37px !default;
 $o-toolbar-height-sm			: 35px !default;
 $o-toolbar-height-xs			: 22px !default;
 $o-toolbar-margin-top			: -10px !default;
-$o-toolbar-margin-bottom		: $navbar-margin-bottom !default;
+$o-toolbar-margin-bottom		: ($navbar-margin-bottom + 5px) !default; // 5 extra for course pagination
 $o-toolbar-tools-margin-top-md		: 8px !default;
 $o-toolbar-tools-margin-bottom-md	: 5px !default;
 $o-toolbar-tools-margin-top-sm		: 6px !default;

src/main/webapp/static/themes/light/modules/_course.scss

@@ -354,7 +354,16 @@
 
 /* pagination */
 .o_course_pagination {
-	margin-bottom: 10px;
+	position: absolute;
+	/* make it look like beeing part of the toolbar */
+	top: -($o-toolbar-margin-bottom + 1px);
+	right: 15px;
+ 	background-color: $o-toolbar-bg-color;
+	border: 1px solid $o-toolbar-border-color;
+	border-top: 0;
+   	@include border-bottom-radius($o-toolbar-border-radius);
+   	padding: 2px;
+   	
 	display: flex;
 	justify-content: flex-end;
 	
@@ -365,9 +374,21 @@
 	.o_previous,
 	.o_next {
 		a {
-			width: 60px;
+			width: 50px;
 		}
 	}
+	.o_confirm {
+		a {
+			&.o_course_pagination_status_done {
+				color: $o-lp-done;
+			}
+		}	
+	}
+	
+	.btn-xs {
+		padding: 0px 4px;
+	}
+	
 }
 
 /* statistics */

src/main/webapp/static/themes/light/modules/_icons.scss

@@ -91,6 +91,8 @@ $fa-css-prefix: "o_icon" !default;
 .o_icon_columns:before { content: $fa-var-columns;}
 .o_icon_container:before { content: $fa-var-columns;}
 .o_icon_copy:before { content: $fa-var-copy;}
+.o_icon_course_previous:before { content: $fa-var-chevron-left; }
+.o_icon_course_next:before { content: $fa-var-chevron-right; }
 .o_icon_courseareas:before { content: $fa-var-circle-thin;}
 .o_icon_coursedb:before { content: $fa-var-database;}
 .o_icon_courseeditor:before { content: $fa-var-edit;}