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 = `
<p>
Sort albums by
<select id='settings_albums_type'>
<option value='id'>Creation Time</option>
<option value='title'>Title</option>
<option value='description'>Description</option>
<option value='public'>Public</option>
</select>
<span class="select">
<select id='settings_albums_type'>
<option value='id'>Creation Time</option>
<option value='title'>Title</option>
<option value='description'>Description</option>
<option value='public'>Public</option>
</select>
</span>
in an
<select id='settings_albums_order'>
<option value='ASC'>Ascending</option>
<option value='DESC'>Descending</option>
</select>
<span class="select">
<select id='settings_albums_order'>
<option value='ASC'>Ascending</option>
<option value='DESC'>Descending</option>
</select>
</span>
order.
</p>
<p>
Sort photos by
<select id='settings_photos_type'>
<option value='id'>Upload Time</option>
<option value='takestamp'>Take Date</option>
<option value='title'>Title</option>
<option value='description'>Description</option>
<option value='public'>Public</option>
<option value='star'>Star</option>
<option value='type'>Photo Format</option>
</select>
<span class="select">
<select id='settings_photos_type'>
<option value='id'>Upload Time</option>
<option value='takestamp'>Take Date</option>
<option value='title'>Title</option>
<option value='description'>Description</option>
<option value='public'>Public</option>
<option value='star'>Star</option>
<option value='type'>Photo Format</option>
</select>
</span>
in an
<select id='settings_photos_order'>
<option value='ASC'>Ascending</option>
<option value='DESC'>Descending</option>
</select>
<span class="select">
<select id='settings_photos_order'>
<option value='ASC'>Ascending</option>
<option value='DESC'>Descending</option>
</select>
</span>
order.
</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 {
margin: -5px 0 0;