arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Styled sorting select element #98

Browse Source
This commit is contained in:
Tobias Reich 2015-05-14 20:05:36 +02:00
parent 6b4f3546f9
commit dc7731cd88
4 changed files with 90 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

54
src/scripts/settings.js
View File

@ -321,35 +321,43 @@ settings.setSorting = function() {
msg = ` msg = `
<p> <p>
Sort albums by Sort albums by
<select id='settings_albums_type'> <span class="select">
<option value='id'>Creation Time</option> <select id='settings_albums_type'>
<option value='title'>Title</option> <option value='id'>Creation Time</option>
<option value='description'>Description</option> <option value='title'>Title</option>
<option value='public'>Public</option> <option value='description'>Description</option>
</select> <option value='public'>Public</option>
</select>
</span>
in an in an
<select id='settings_albums_order'> <span class="select">
<option value='ASC'>Ascending</option> <select id='settings_albums_order'>
<option value='DESC'>Descending</option> <option value='ASC'>Ascending</option>
</select> <option value='DESC'>Descending</option>
</select>
</span>
order. order.
</p> </p>
<p> <p>
Sort photos by Sort photos by
<select id='settings_photos_type'> <span class="select">
<option value='id'>Upload Time</option> <select id='settings_photos_type'>
<option value='takestamp'>Take Date</option> <option value='id'>Upload Time</option>
<option value='title'>Title</option> <option value='takestamp'>Take Date</option>
<option value='description'>Description</option> <option value='title'>Title</option>
<option value='public'>Public</option> <option value='description'>Description</option>
<option value='star'>Star</option> <option value='public'>Public</option>
<option value='type'>Photo Format</option> <option value='star'>Star</option>
</select> <option value='type'>Photo Format</option>
</select>
</span>
in an in an
<select id='settings_photos_order'> <span class="select">
<option value='ASC'>Ascending</option> <select id='settings_photos_order'>
<option value='DESC'>Descending</option> <option value='ASC'>Ascending</option>
</select> <option value='DESC'>Descending</option>
</select>
</span>
order. order.
</p> </p>
` `

59
src/styles/_message.scss
View File

@ -172,6 +172,65 @@
} }
} }
/* Select ------------------------------------------------*/
.select {
display: inline-block;
position: relative;
margin: 1px 5px;
padding: 0;
width: 110px;
background: black(.3);
color: #fff;
border-radius: 3px;
border: 1px solid black(.2);
box-shadow: 0 1px 0 white(.02);
font-size: 11px;
line-height: 16px;
overflow: hidden;
outline: 0;
vertical-align: middle;
&::after {
position: absolute;
content: '≡';
right: 8px;
top: 4px;
color: $colorBlue;
font-size: 16px;
line-height: 16px;
font-weight: bold;
pointer-events: none;
}
select {
margin: 0;
padding: 4px 8px;
width: 120%;
color: #fff;
font-size: 11px;
line-height: 16px;
border: 0;
outline: 0;
box-shadow: none;
border-radius: 0;
background-color: transparent;
background-image: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
&:focus { outline: none; }
}
select option {
margin: 0;
padding: 0;
background: #fff;
color: #333;
transition: none;
}
}
/* Version ------------------------------------------------*/ /* Version ------------------------------------------------*/
.version { .version {
margin: -5px 0 0; margin: -5px 0 0;