duckduckgo
/
zeroclickinfo-goodies
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Flip top and bottom section, minor design tweaks 

remove left padding to aling selection with search box
widen unit dropdown width to allow for long unit names
master
Zaahir Moolla 2017-05-03 15:05:50 -04:00
parent 2e1fb271fb
commit d0ae4dd477
3 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
share/goodie/conversions/content.handlebars
View File

@ -1,12 +1,19 @@
<!-- the bottom input section to change the unit type -->
<div class="frm frm--top">
<div class="frm__select">
<select class="frm__select--bottom"></select>
</div>
</div>
<!-- the left input section -->
<div class="frm frm--top clearfix">
<div class="frm frm--bottom clearfix">
<div class="input__wrap input__wrap--left shadow">
<input class="frm__input frm__input--left">
<div class="frm__select">
<select class="frm__select--left"></select>
</div>
</div>
<div class="equals-sign tx-clr--slate">=</div>
<div class="input__wrap input__wrap--right shadow">
@ -16,10 +23,3 @@
</div>
</div>
</div>
<!-- the bottom input section to change the unit type -->
<div class="frm frm--bottom">
<div class="frm__select">
<select class="frm__select--bottom"></select>
</div>
</div>

38
share/goodie/conversions/conversions.css
View File

@ -1,6 +1,7 @@
.zci--conversions .zci__body {
margin: 0;
box-sizing: border-box;
padding-left: 0;
}
.zci--conversions .shadow {
@ -11,11 +12,20 @@
box-shadow: none;
}
.zci--conversions .frm--top .frm__select {
width: 100%;
}
.zci--conversions .frm--top .frm__select--bottom {
width: 100% !important;
}
.zci--conversions .frm--top {
margin-bottom: 1em;
}
.zci--conversions .frm--top > div {
.zci--conversions .frm--bottom > div {
float: left;
}
@ -23,8 +33,8 @@
width: 45%;
}
.zci--conversions .frm--top .frm__input,
.zci--conversions .frm--top .frm__select {
.zci--conversions .frm--bottom .frm__input,
.zci--conversions .frm--bottom .frm__select {
display: block;
float: left;
height: 3em;
@ -35,29 +45,25 @@
text-align: center;
}
.zci--conversions .frm--top .frm__input {
width: 55%;
.zci--conversions .frm--bottom .frm__input {
width: 50%;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.zci--conversions .frm--top .frm__select {
.zci--conversions .frm--bottom .frm__select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 45%;
width: 50%;
border-left-color: #e0e0e0;
}
.zci--conversions .frm--top .frm__select select {
.zci--conversions .frm--bottom .frm__select select {
width: 100%;
height: 3em !important;
}
.zci--conversions .frm--bottom .frm__select {
width: 100%;
}
.zci--conversions .equals-sign {
width: 10%;
vertical-align: top;
@ -67,8 +73,8 @@
}
/* Mobile */
.is-mobile .zci--conversions .frm--top .frm__input,
.is-mobile .zci--conversions .frm--top .frm__select {
.is-mobile .zci--conversions .frm--bottom .frm__input,
.is-mobile .zci--conversions .frm--bottom .frm__select {
display: block;
width: 100%;
height: 3em;
@ -78,14 +84,14 @@
text-align: center;
}
.is-mobile .zci--conversions .frm--top .frm__input {
.is-mobile .zci--conversions .frm--bottom .frm__input {
border-bottom: none;
border-right: 1px solid #c9c9c9;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.is-mobile .zci--conversions .frm--top .frm__select {
.is-mobile .zci--conversions .frm--bottom .frm__select {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 2px;

2
share/goodie/conversions/conversions.js
View File

@ -21,7 +21,7 @@ DDH.conversions = DDH.conversions || {};
var $root = DDH.getDOM('conversions');
$convert_left = $root.find(".frm__input--left");
$convert_right = $root.find(".frm__input--right");
$selects = $root.find(".frm--top select");
$selects = $root.find(".frm--bottom select");
$select_right = $root.find(".frm__select--right");
$select_left = $root.find(".frm__select--left");
$unitSelector = $root.find(".frm__select--bottom");