Some style improvements.

openwebwork · Oct 21, 2023 · d36c386 · d36c386
1 parent dbc2265
commit d36c386
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 58 deletions.
diff --git a/templates/ContentGenerator/Instructor/ProblemSetList/set_list_row.html.ep b/templates/ContentGenerator/Instructor/ProblemSetList/set_list_row.html.ep
@@ -16,29 +16,29 @@
 		<%= check_box selected_sets => $set_id, id => "${set_id}_id", class => 'form-check-input' =%>
 	</td>
 	<td>
-		<div class="label-with-edit-icon" dir="ltr">
+		<div class="d-flex justify-content-between gap-1" dir="ltr">
 			<%= label_for "${set_id}_id", begin =%>
 				<span class="set-label set-id-tooltip <%= $visibleClass %>" data-bs-toggle="tooltip"
 					data-bs-placement="right" data-bs-title="<%= $set->description %>">
 					<%= $prettySetID =%>
 				</span>
-				% if ($authz->hasPermissions(param('user'), 'modify_problem_sets')) {
-					<%= link_to $c->systemLink(
-							url_for('instructor_set_list', setID => $set_id),
-							params => { editMode => 1, visible_sets => $set_id }
-						),
-						class => 'set-id-tooltip',
-						'aria-label' => maketext('Edit Set Data'),
-						data  => {
-							bs_toggle => 'tooltip',
-							bs_placement => 'right',
-							bs_title => maketext('Edit Set Data')
-						},
-						begin =%>
-						<i class="fas fa-pencil-alt" aria-hidden="true"></i>
-					<% end =%>
-				% }
 			<% end =%>
+			% if ($authz->hasPermissions(param('user'), 'modify_problem_sets')) {
+				<%= link_to $c->systemLink(
+						url_for('instructor_set_list', setID => $set_id),
+						params => { editMode => 1, visible_sets => $set_id }
+					),
+					class => 'set-id-tooltip',
+					'aria-label' => maketext('Edit Set Data'),
+					data  => {
+						bs_toggle => 'tooltip',
+						bs_placement => 'right',
+						bs_title => maketext('Edit Set Data')
+					},
+					begin =%>
+					<i class="fas fa-pencil-alt" aria-hidden="true"></i>
+				<% end =%>
+			% }
 		</div>
 	</td>
 	%# Problems link

diff --git a/templates/ContentGenerator/Instructor/ProblemSetList/set_list_table.html.ep b/templates/ContentGenerator/Instructor/ProblemSetList/set_list_table.html.ep
@@ -37,9 +37,11 @@
 				% for (@$fieldNames) {
 					<th id="<%= $_ %>_header">
 						% if (!$c->{editMode} && $sortableFields->{$_}) {
-							<%= link_to $fieldHeaders{$_} => '#', class => 'sort-header',
-								data => { sort_field => $_ } =%>
-							<%= include 'ContentGenerator/Instructor/ProblemSetList/sort_button', field => $_ =%>
+							<div class="d-flex justify-content-between align-items-end gap-1">
+								<%= link_to $fieldHeaders{$_} => '#', class => 'sort-header',
+									data => { sort_field => $_ } =%>
+								<%= include 'ContentGenerator/Instructor/ProblemSetList/sort_button', field => $_ =%>
+							</div>
 						% } else {
 							<%= $fieldHeaders{$_} =%>
 						% }

diff --git a/templates/ContentGenerator/Instructor/ProblemSetList/sort_button.html.ep b/templates/ContentGenerator/Instructor/ProblemSetList/sort_button.html.ep
@@ -1,6 +1,6 @@
 % if ($c->{primarySortField} eq $field) {
-	<button type="button" data-sort-priority="primary" style="font-size:0.75em"
-		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold">
+	<button type="button" data-sort-priority="primary"
+		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold text-nowrap font-xs">
 		1
 		% if ($c->{primarySortOrder} eq 'ASC') {
 			<i class="fa-solid fa-chevron-down"></i>
@@ -11,8 +11,8 @@
 		% }
 	</button>
 % } elsif ($c->{secondarySortField} eq $field) {
-	<button type="button" data-sort-priority="secondary" style="font-size:0.75em"
-		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold">
+	<button type="button" data-sort-priority="secondary"
+		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold text-nowrap font-xs">
 		2
 		% if ($c->{secondarySortOrder} eq 'ASC') {
 			<i class="fa-solid fa-chevron-down"></i>

diff --git a/templates/ContentGenerator/Instructor/UserList/sort_button.html.ep b/templates/ContentGenerator/Instructor/UserList/sort_button.html.ep
@@ -1,6 +1,6 @@
 % if ($c->{primarySortField} eq $field) {
-	<button type="button" data-sort-priority="primary" style="font-size:0.75em"
-		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold">
+	<button type="button" data-sort-priority="primary"
+		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold text-nowrap font-xs">
 		1
 		% if ($c->{primarySortOrder} eq 'ASC') {
 			<i class="fa-solid fa-chevron-down"></i>
@@ -11,8 +11,8 @@
 		% }
 	</button>
 % } elsif ($c->{secondarySortField} eq $field) {
-	<button type="button" data-sort-priority="secondary" style="font-size:0.75em"
-		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold">
+	<button type="button" data-sort-priority="secondary"
+		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold text-nowrap font-xs">
 		2
 		% if ($c->{secondarySortOrder} eq 'ASC') {
 			<i class="fa-solid fa-chevron-down"></i>
@@ -23,8 +23,8 @@
 		% }
 	</button>
 % } elsif ($c->{ternarySortField} eq $field) {
-	<button type="button" data-sort-priority="ternary" style="font-size:0.75em"
-		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold">
+	<button type="button" data-sort-priority="ternary"
+		class="sort-order btn btn-secondary rounded-pill btn-sm py-0 fw-bold text-nowrap font-xs">
 		3
 		% if ($c->{ternarySortOrder} eq 'ASC') {
 			<i class="fa-solid fa-chevron-down"></i>

diff --git a/templates/ContentGenerator/Instructor/UserList/user_list.html.ep b/templates/ContentGenerator/Instructor/UserList/user_list.html.ep
@@ -21,52 +21,70 @@
 				<% end =%>
 		</th>
 		<th>
-			<%= link_to maketext('Login Name') => '#', class => 'sort-header',
-					data => { sort_field => 'user_id' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'user_id' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Login Name') => '#', class => 'sort-header',
+						data => { sort_field => 'user_id' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'user_id' =%>
+			</div>
 		</th>
 		<th><%= maketext('Login Status') %></th>
 		<th><%= maketext('Assigned Sets') %></th>
 		<th>
-			<%= link_to maketext('First Name') => '#', class => 'sort-header',
-				data => { sort_field => 'first_name' } %>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'first_name' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('First Name') => '#', class => 'sort-header',
+					data => { sort_field => 'first_name' } %>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'first_name' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Last Name') => '#', class => 'sort-header',
-				data => { sort_field => 'last_name' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'last_name' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Last Name') => '#', class => 'sort-header',
+					data => { sort_field => 'last_name' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'last_name' =%>
+			</div>
 		</th>
 		<th><%= maketext('Email Link') %></th>
 		<th>
-			<%= link_to maketext('Student ID') => '#', class => 'sort-header',
-				data => { sort_field => 'student_id' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'student_id' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Student ID') => '#', class => 'sort-header',
+					data => { sort_field => 'student_id' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'student_id' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Status') => '#', class => 'sort-header',
-				data => { sort_field => 'status' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'status' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Status') => '#', class => 'sort-header',
+					data => { sort_field => 'status' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'status' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Section') => '#', class => 'sort-header',
-				data => { sort_field => 'section' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'section' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Section') => '#', class => 'sort-header',
+					data => { sort_field => 'section' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'section' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Recitation') => '#', class => 'sort-header',
-				data => { sort_field => 'recitation' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'recitation' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Recitation') => '#', class => 'sort-header',
+					data => { sort_field => 'recitation' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'recitation' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Comment') => '#', class => 'sort-header',
-				data => { sort_field => 'comment' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'comment' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Comment') => '#', class => 'sort-header',
+					data => { sort_field => 'comment' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'comment' =%>
+			</div>
 		</th>
 		<th>
-			<%= link_to maketext('Permission Level') => '#', class => 'sort-header',
-				data => { sort_field => 'permission' } =%>
-			<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'permission' =%>
+			<div class="d-flex justify-content-between align-items-end gap-1">
+				<%= link_to maketext('Permission Level') => '#', class => 'sort-header',
+					data => { sort_field => 'permission' } =%>
+				<%= include 'ContentGenerator/Instructor/UserList/sort_button', field => 'permission' =%>
+			</div>
 		</th>
 	% end
 % } else {

diff --git a/templates/ContentGenerator/Instructor/UserList/user_row.html.ep b/templates/ContentGenerator/Instructor/UserList/user_row.html.ep
@@ -11,7 +11,7 @@
 		</td>
 		% # User id
 		<td>
-			<div class="label-with-edit-icon">
+			<div class="d-flex justify-content-between gap-1">
 				% # Make the user id the label for the select user checkbox.
 				<%= label_for $user->user_id . '_checkbox', begin =%>
 					% if (!$authz->hasPermissions(param('user'), 'become_student')) {