open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move sort select under filters & match styles

Browse Source
This commit is contained in:
Rob Garrison 2017-12-23 09:03:16 -06:00
parent a87cc6cfb1
commit 3f72ae7448
2 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
manage.html
View File

@ -248,6 +248,16 @@
</div>
</details>
<div id="sort-wrapper" i18n-title="sortLabel">
<div class="sorter-selection">
<select id="sort-select"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<a href="#" id="sorter-help">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
<p class="nowrap">
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
<a href="#" id="update-history" i18n-title="genericHistoryLabel">
@ -315,16 +325,6 @@
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
</div>
<div id="sort-wrapper" i18n-title="sortLabel">
<div class="sorter-selection">
<select id="sort-select"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
<a href="#" id="sorter-help">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
</div>
<p>
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
<button id="manage-shortcuts-button" class="chromium-only"

54
manage/manage.css
View File

@ -423,34 +423,6 @@ select {
margin: 0 .5em;
}
#sort-wrapper {
margin: 5px 0;
}
#sort-wrapper .sorter-selection {
position: relative;
display: block;
left: 0;
margin-bottom: 4px;
max-width: calc(100% - 18px);
}
#sort-select {
color: inherit;
max-width: 100%;
}
#sort-wrapper .select-arrow {
top: 3px;
right: 3px;
}
#sorter-help {
position: absolute;
right: -22px;
top: 3px;
}
.newUI .entry .svg-icon.checked,
.newUI .entry:hover .svg-icon.checked {
fill: #000;
@ -864,13 +836,23 @@ input[id^="manage.newUI"] {
display: none;
}
#search-wrapper {
#search-wrapper, #sort-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
}
#search {
#sort-wrapper {
margin-top: .25em;
}
#sort-wrapper .sorter-selection {
position: relative;
max-width: calc(100% - 15px);
}
#search, #sort-select {
max-width: 100%;
flex-grow: 1;
margin: 0.25rem 0 0;
background: #fff;
@ -880,13 +862,21 @@ input[id^="manage.newUI"] {
font: 400 12px Arial;
color: #000;
border: 1px solid hsl(0, 0%, 66%);
border-radius: 0.25rem;
}
#search-help {
#sort-select {
padding-right: 18px;
}
#search-help, #sorter-help {
margin: 4px -5px 0 2px;
}
#sort-wrapper .select-arrow {
top: 7px;
right: 4px;
}
#message-box.help-text > div {
max-width: 26rem;
}