diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index a8689abb..32d416ed 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -840,6 +840,10 @@
"message": "Select a sort to apply to the installed styles",
"description": "Title on the sort select to indicate it is used for sorting entries"
},
+ "sortAscending": {
+ "message": "ascending",
+ "description": "Text added to indicate that a sort is in the ascending (A to Z) direction"
+ },
"sortDescending": {
"message": "descending",
"description": "Text added to indicate that a sort is in the descending (Z to A) direction"
diff --git a/manage.html b/manage.html
index b6408040..129f01d6 100644
--- a/manage.html
+++ b/manage.html
@@ -285,16 +285,6 @@
-
@@ -325,6 +315,16 @@
+
+
div {
+#newUIoptions > div, #newUIoptions > label {
margin: 4px 0;
}
-.filter-selection, .sorter-selection {
+.filter-selection {
position: relative;
left: -9px;
}
@@ -358,7 +361,7 @@ select {
padding-left: 0;
}
-.filter-selection select, .sorter-selection select {
+.filter-selection select {
height: 18px;
border: none;
max-width: 100%;
@@ -367,8 +370,7 @@ select {
margin-left: 4px;
}
-.filter-selection .select-arrow,
-.sorter-selection .select-arrow {
+.filter-selection .select-arrow {
margin-top: 2px;
top: 0;
right: 0;
@@ -389,8 +391,7 @@ select {
}
#filters label:hover,
-#filters .filter-selection:hover,
-#options .sorter-selection:hover {
+#filters .filter-selection:hover {
background-color: hsla(0, 0%, 50%, .2);
}
@@ -422,22 +423,32 @@ select {
margin: 0 .5em;
}
-#options .sorter-selection {
+#sort-wrapper {
+ margin: 5px 0;
+}
+
+#sort-wrapper .sorter-selection {
+ position: relative;
display: block;
left: 0;
margin-bottom: 4px;
- max-width: calc(100% - 2em);
+ max-width: calc(100% - 18px);
}
-.sorter-selection select {
- margin-left: 0;
- padding-left: 0;
+#sort-select {
color: inherit;
+ max-width: 100%;
}
-.sorter-selection .select-arrow {
+#sort-wrapper .select-arrow {
+ top: 3px;
+ right: 3px;
+}
+
+#sorter-help {
position: absolute;
- right: 0;
+ right: -22px;
+ top: 3px;
}
.newUI .entry .svg-icon.checked,
@@ -853,7 +864,7 @@ input[id^="manage.newUI"] {
display: none;
}
-#search-wrapper, #sort-wrapper {
+#search-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
@@ -1101,7 +1112,7 @@ input[id^="manage.newUI"] {
margin: 0;
}
- .filter-selection select, .sorter-selection select {
+ .filter-selection select {
padding-left: 0;
}
diff --git a/manage/sort.js b/manage/sort.js
index 161ce2b5..4f06ef48 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -76,12 +76,13 @@ const sortSelectOptions = [
const sortByRegex = /\s*,\s*/;
function addSortOptions() {
- const select = $('#options .sorter-selection select');
+ const select = $('#sort-select');
const renderBin = document.createDocumentFragment();
const option = $create('option');
const meta = {
enabled: t('genericEnabledLabel'),
disabled: t('genericDisabledLabel'),
+ asc: ` (${t('sortAscending')})`,
desc: ` (${t('sortDescending')})`,
dateNew: ` (${t('sortDateNewestFirst')})`,
dateOld: ` (${t('sortDateOldestFirst')})`,
@@ -163,7 +164,7 @@ function showSortHelp(event) {
}
function sortInit() {
- $('#options select').addEventListener('change', manageSort);
+ $('#sort-select').addEventListener('change', manageSort);
$('#sorter-help').onclick = showSortHelp;
addSortOptions();
}