SAKAI-3168 Improve Attendance Styling

Improve styling throughout the attendance tool.
UDayton · Feb 15, 2017 · f03e604 · f03e604
1 parent 06f769b
commit f03e604
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 39 deletions.
diff --git a/tool/src/java/org/sakaiproject/attendance/tool/Attendance.properties b/tool/src/java/org/sakaiproject/attendance/tool/Attendance.properties
@@ -73,6 +73,8 @@ attendance.add.edit.header = Edit Attendance Item
 button.cancel = Cancel
 
 add.another = Add another
+attendance.icon.edit.alt = Edit '{0}'
+attendance.icon.print.event.alt = Print '{0}'
 
 #Event View Page
 attendance.event.view.link.edit = Edit
@@ -98,9 +100,15 @@ attendance.record.form.cancel = Cancel
 attendance.record.form.add.comment = Add Comment
 attendance.record.form.view.comment = Comment
 
+attendance.icon.record.form.no_comment = Comment
+attendance.icon.record.form.yes_comment = Comment Present
+
 attendance.overview.attendance.sheet = Attendance Sheet
 attendance.overview.sign.in.sheet = Sign-In Sheet
 
+attendance.icon.print.alt = Print
+attendance.icon.settings.alt = Settings
+
 #Student View Page
 attendance.student.view.take.attendance = Take Attendance
 attendance.student.view.attendance = Your Attendance
@@ -115,6 +123,8 @@ attendance.student.overview.subtitle  = This page displays a report that details
 attendance.student.overview.no.students = No active students are in this site or group.
 attendance.student.overview.no.students.2 = You can add students to the site or a group via the Site Info tool.
 
+attendance.icon.grade.settings.alt = Grade Settings
+
 Status.UNKNOWN = None
 Status.PRESENT = Present
 Status.LATE = Late
@@ -191,6 +201,7 @@ attendance.settings.edit.status.info = Drag and drop the statuses below or chang
 attendance.settings.show.comments.label = Show comments to students
 
 attendance.statistics.info = These values are current as of page load. Refresh using the provided button for current values.
+attendance.icon.refresh = Refresh
 
 # Grading Page
 attendance.grading.header = Grading

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html b/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html
@@ -25,8 +25,11 @@ <h2>
             <span>></span>
             <span wicket:id="event-name"></span>
             <span wicket:id="event-date"></span>
-            <span><a wicket:id="edit-link"><img src="images/settings.png" alt="Edit" width="24px"/></a></span>
-            <span id="eventPrintLink"><img src="images/print.png" alt="Print" class="printImage"/></span>
+
+            <span id="event-buttons">
+                <a wicket:id="edit-link"><span class="fa fa-pencil-square-o fa-lg"></span><span class="sr-only"><wicket:message key="attendance.icon.settings.alt"/></span></a>
+                <span class="fa fa-print fa-lg printImage" id="eventPrintLink"><span class="sr-only"><wicket:message key="attendance.icon.print.alt"/></span></span>
+            </span>
         </h2>
     </div>
 

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/Overview.html b/tool/src/java/org/sakaiproject/attendance/tool/pages/Overview.html
@@ -47,9 +47,17 @@ <h1 class="overviewHeader indnt1">
 				<td class="itemNameCol"><a wicket:id="event-link"><span wicket:id="event-name" /></a></td>
 				<td class="overviewDateCol"><span wicket:id="event-date" /></td>
 				<td wicket:id="active-status-stats" class="overviewStatusCol"><span wicket:id="event-stats" /></td>
-				<td class="overviewEditCol"><a wicket:id="event-edit-link"><img src="images/settings.png" alt="Edit" width="24px"/></a></td>
+				<td class="overviewEditCol">
+					<a wicket:id="event-edit-link">
+						<span class="fa fa-pencil-square-o fa-2x" aria-hidden="true"></span>
+						<span class="sr-only"><wicket:container wicket:id="event-edit-alt"/></span>
+					</a>
+				</td>
 				<td class="overviewPrintCol">
-					<a class="printLink" wicket:id="print-link"><img src="images/print.png" alt="Print"/></a>
+					<a class="printLink" wicket:id="print-link">
+						<span class="fa fa-print fa-2x" aria-hidden="true"></span>
+						<span class="sr-only"><wicket:container wicket:id="event-print-alt"/></span>
+					</a>
 				</td>
 			</tr>
 			<wicket:enclosure child="no-events">

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/Overview.java b/tool/src/java/org/sakaiproject/attendance/tool/pages/Overview.java
@@ -128,14 +128,15 @@ private void createTable() {
 			@Override
 			protected void populateItem(final Item<AttendanceEvent> item) {
 				final AttendanceEvent modelObject = item.getModelObject();
+				final String name = modelObject.getName();
 				final AttendanceItemStats itemStats = attendanceLogic.getStatsForEvent(modelObject);
 				Link<Void> eventLink = new Link<Void>("event-link") {
 					private static final long serialVersionUID = 1L;
 					public void onClick() {
 						setResponsePage(new EventView(modelObject, BasePage.OVERVIEW_PAGE));
 					}
 				};
-				eventLink.add(new Label("event-name", modelObject.getName()));
+				eventLink.add(new Label("event-name", name));
 
 				item.add(eventLink);
 				item.add(new Label("event-date", modelObject.getStartDateTime()));
@@ -150,8 +151,11 @@ protected void populateItem(Item<AttendanceStatus> item) {
 				};
 				item.add(activeStatusStats);
 
-				item.add(getAddEditWindowAjaxLink(modelObject, "event-edit-link"));
-				item.add(new AjaxLink<Void>("print-link"){
+				final AjaxLink eventEditLink = getAddEditWindowAjaxLink(modelObject, "event-edit-link");
+				eventEditLink.add(new Label("event-edit-alt", new StringResourceModel("attendance.icon.edit.alt", null, new String[]{name})));
+				item.add(eventEditLink);
+
+				final AjaxLink printLink = new AjaxLink<Void>("print-link"){
 					@Override
 					public void onClick(AjaxRequestTarget ajaxRequestTarget) {
 						printPanel = new PrintPanel("print-panel", item.getModel());
@@ -160,7 +164,9 @@ public void onClick(AjaxRequestTarget ajaxRequestTarget) {
 						printHiddenClass.setObject("printVisible");
 						ajaxRequestTarget.add(printContainer);
 					}
-				});
+				};
+				printLink.add(new Label("event-print-alt",  new StringResourceModel("attendance.icon.print.event.alt", null, new String[]{name})));
+				item.add(printLink);
 			}
 		};
 		add(attendanceEventDataView);

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/StudentOverview.html b/tool/src/java/org/sakaiproject/attendance/tool/pages/StudentOverview.html
@@ -36,7 +36,12 @@ <h1 class="overviewHeader indnt1">
         <tr>
             <th class="studentOverviewNameHeader"><span wicket:id="header-student-name" /></th>
             <th wicket:id="status-headers" class="overviewStatusCol"><span wicket:id="header-status-name" /></th>
-            <th class="overviewGradeCol {sorter: false}"><span wicket:id="header-grade" /><a wicket:id="settings-link"><img src="images/settings.png" alt="Settings" class="settings"/></a>
+            <th class="overviewGradeCol {sorter: false}">
+                <span wicket:id="header-grade" />
+                <a wicket:id="settings-link">
+                    <span class="fa fa-cog settings" aria-hidden="true"></span>
+                    <span class="sr-only"><wicket:message key="attendance.icon.grade.settings.alt"/></span>
+                </a>
                 <br />
                 <span wicket:id="total-points" class="totalPointsColHeader" />
             </th>

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/panels/AttendanceRecordFormDataPanel.html b/tool/src/java/org/sakaiproject/attendance/tool/panels/AttendanceRecordFormDataPanel.html
@@ -31,10 +31,12 @@
         <div class="div-table-col comment-container" style="position:relative"  wicket:id="comment-container">
             <div class="commentToggle">
                 <div wicket:id="no-comment">
-                    <img src="images/no_comment_24.png" />
+                    <span class="fa fa-comment-o fa-2x" aria-hidden="true"></span>
+                    <span class="sr-only"><wicket:message key="attendance.icon.record.form.no_comment"/></span>
                 </div>
                 <div wicket:id="yes-comment">
-                    <img src="images/comment_24.png" />
+                    <span class="fa fa-comment fa-2x" aria-hidden="true"></span>
+                    <span class="sr-only"><wicket:message key="attendance.icon.record.form.yes_comment"/></span>
                 </div>
             </div>
             <div class="addComment" style="display:none;">

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/panels/StatisticsPanel.html b/tool/src/java/org/sakaiproject/attendance/tool/panels/StatisticsPanel.html
@@ -22,7 +22,10 @@
         <div class="itemInfoHeader">
             <h3 class="itemInfoHeader">
                 <span wicket:id="item-info-header"/>
-                <a wicket:id="refreshPage" title="Refresh" class="statisticsInfo"><img src="images/sync32.png" alt="Refresh" class="refreshImage"></a>
+                <a wicket:id="refreshPage" title="Refresh" class="statisticsInfo">
+                    <span class="fa fa-refresh refreshImage" aria-hidden="true"></span>
+                    <span class="sr-only"><wicket:message key="attendance.icon.refresh"/></span>
+                </a>
                 <div class="statisticsInfo"><span wicket:id="info" /></div>
             </h3>
         </div>

diff --git a/tool/src/webapp/css/attendance.css b/tool/src/webapp/css/attendance.css
@@ -43,8 +43,6 @@ form {
 }
 
 h1.overviewHeader, h1.itemsHeader, h1.settingsHeader, h1.gradingHeader {
-    background: url("../images/attendance_icon_32.png") no-repeat left center;
-    padding-left: 32px;
     color: #555;
     margin-top: 1.2em;
     margin-bottom: 1.2em;
@@ -62,14 +60,14 @@ span.overHeaderSpan, span.itemsHeaderSpan, span.settingsHeaderSpan, span.grading
 p.overviewInstructions, p.addEditInstructions {
     font-size: 1.2em;
     line-height: 1.5em;
-    margin-left: 70px;
+    margin-left: 35px;
 }
 
 p.addEditInstructions {
     width: 70%;
 }
 
-img.overviewInfo, div.attendanceBreadcrumbs img, th.takeAttendanceDateHeader, .vertAlignMiddle {
+img.overviewInfo, div.attendanceBreadcrumbs img, .div-table-row th.takeAttendanceDateHeader, .vertAlignMiddle {
     vertical-align: middle;
 }
 
@@ -133,7 +131,7 @@ table.overviewTable, table.itemListTable, table.eventViewTable, table.takeAttend
     border: 2px solid #ccc;
     border-collapse: collapse;
     padding: .5em;
-    margin-left: 70px;
+    margin-left: 35px;
 }
 
 table.overviewTable thead tr .header, table.itemListTable thead tr .header, table.takeAttendanceTable thead tr .header  {
@@ -201,12 +199,21 @@ th.overviewEditCol, td.overviewEditCol, th.itemListEditCol, td.itemListEditCol,
     text-align: center;
 }
 
-td.overviewGradeCol {
-    vertical-align: middle;
+tr td.overviewEditCol a span.fa, tr td.overviewPrintCol a span.fa, .attendanceBreadcrumbs span a span.fa, #event-buttons  {
+    color: #555;
 }
 
-th.overviewStatusCol, td.overviewStatusCol {
-    width: 84px;
+tr td.overviewEditCol a span.fa:hover, tr td.overviewPrintCol a span.fa:hover,
+.attendanceBreadcrumbs span a span.fa:hover, #event-buttons span:hover {
+    color: #999;
+}
+
+#event-buttons span{
+    padding-right: 0;
+}
+
+td.overviewGradeCol {
+    vertical-align: middle;
 }
 
 td.overviewStatusCol {
@@ -236,7 +243,7 @@ div.addEditContainer, div.itemListContainer, div.takeAttendanceContainer, div.it
     vertical-align: top;
     position:relative;
     display: block;
-    margin: 2em 2em 2em 70px;
+    margin: 2em 2em 2em 35px;
 }
 
 div.rulesContainer {
@@ -251,7 +258,7 @@ div.gradeContainer {
     vertical-align: top;
     position:relative;
     display: block;
-    margin: 2em 2em 2em 70px;
+    margin: 2em 2em 2em 35px;
 }
 
 div.takeAttendanceContainer, div.itemInfoContainer, div.gradeContainer {
@@ -306,15 +313,8 @@ table.addEditFormTable, div.info, .addComment textarea {
     padding-right: 4em;
 }
 
-div.addEditDeleteLinkDiv {
-    background: url("../images/remove.png") no-repeat left center;
-    background-size: 12px;
-    padding-left: 16px;
-    margin-top: 1em;
-}
-
 div.attendanceBreadcrumbs h2 {
-    margin-left: 70px;
+    margin-left: 10px;
 }
 
 div.attendanceBreadcrumbs span {
@@ -332,7 +332,7 @@ div.attendanceBreadcrumbs span {
     background-color:#fff;
     border:1px solid  #ccc;
     font-size: 1.2em;
-    margin-left: 70px;
+    margin-left: 35px;
 }
 
 .div-table-row2 {
@@ -418,7 +418,7 @@ div.printMask {
     opacity: 0.75;
 }
 
-div.printMask:hover, img.printImage:hover, .commentToggle:hover, .div-table-col input:hover {
+div.printMask:hover, .printImage:hover, .commentToggle:hover, .div-table-col input:hover {
     cursor: pointer;
 }
 
@@ -489,7 +489,7 @@ p.editStatusInfo, p.editGradeInfo {
 }
 
 form.studentOverviewFilterForm {
-    margin-left: 70px;
+    margin-left: 35px;
 }
 
 th.overviewGradeCol img.settings {
@@ -582,15 +582,27 @@ form.gradeSettingsForm {
     border: 1px solid goldenrod;
 }
 
-@media (min-width: 1090px) {
+div.noRecord {
+    padding: .5em;
+    text-align: center;
+    font-weight: bold;
+    font-style: italic;
+    color: #999;
+}
+
+div.comment-container {
+    position: relative;
+}
+
+@media (min-width: 1205px) {
     .record-status-name {
         display: none;
     }
 
     .div-table-col {
         float:left;/*fix for  buggy browsers*/
         display:table-cell;
-        width:80px;
+        width:90px;
         text-align: center;
         padding: .5em;
         margin-top: 2px;
@@ -609,7 +621,7 @@ form.gradeSettingsForm {
     }
 }
 
-@media (max-width: 1090px) {
+@media (max-width: 1204px) {
     .record-status-name {
         display: inherit;
         margin-left: .25em;
@@ -637,7 +649,7 @@ form.gradeSettingsForm {
     }
 }
 
-@media (max-width: 1090px) and (min-width: 500px) {
+@media (max-width: 1204px) and (min-width: 500px) {
     .comment-container {
         float: right;
         margin-left: 2em;
@@ -660,7 +672,7 @@ div a.delete:hover {
 }
 
 .addAttendanceItemForm {
-    margin-left: 70px;
+    margin-left: 35px;
 }
 
 /* Janked from gradebook-grades.css. Credit goes to steveswinsburg & payten */