blitzwing/mozhi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

searchable select if js is enabled

Browse source
This commit is contained in:
Arya Kiran 2023-09-10 20:22:51 +05:30
parent 197296e91f
commit 527877a321
No known key found for this signature in database
GPG key ID: 842D12BDA50DF120
5 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/css/nice-select2.css Normal file
View file

@ -0,0 +1 @@
.nice-select{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#2f2f2f;border-radius:5px;border:solid 1px #e8e8e8;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-family:inherit;font-size:14px;font-weight:normal;height:38px;line-height:36px;outline:none;padding-left:18px;padding-right:30px;position:relative;text-align:left !important;transition:all .2s ease-in-out;user-select:none;white-space:nowrap;width:auto}.nice-select:hover{border-color:#dbdbdb}.nice-select:active,.nice-select.open,.nice-select:focus{border-color:#999}.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:"";display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;transform-origin:66% 66%;transform:rotate(45deg);transition:all .15s ease-in-out;width:5px}.nice-select.open:after{transform:rotate(-135deg)}.nice-select.open .nice-select-dropdown{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none}.nice-select.disabled:after{border-color:#ccc}.nice-select.wide{width:100%}.nice-select.wide .nice-select-dropdown{left:0 !important;right:0 !important}.nice-select.right{float:right}.nice-select.right .nice-select-dropdown{left:auto;right:0}.nice-select.small{font-size:12px;height:36px;line-height:34px}.nice-select.small:after{height:4px;width:4px}.nice-select.small .option{line-height:34px;min-height:34px}.nice-select .nice-select-dropdown{margin-top:4px;background-color:#2f2f2f;border-radius:5px;box-shadow:0 0 0 1px rgba(68,68,68,.11);pointer-events:none;position:absolute;top:100%;left:0;transform-origin:50% 0;transform:scale(0.75) translateY(19px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:9;opacity:0}.nice-select .list{border-radius:5px;box-sizing:border-box;overflow:hidden;padding:0;max-height:210px;overflow-y:auto}.nice-select .list:hover .option:not(:hover){background-color:rgba(0,0,0,0) !important}.nice-select .option{cursor:pointer;font-weight:400;line-height:40px;list-style:none;outline:none;padding-left:18px;padding-right:29px;text-align:left;transition:all .2s}.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background-color:#b2b2b2}.nice-select .option.selected{font-weight:bold}.nice-select .option.disabled{background-color:rgba(0,0,0,0);color:#999;cursor:default}.nice-select .optgroup{font-weight:bold}.no-csspointerevents .nice-select .nice-select-dropdown{display:none}.no-csspointerevents .nice-select.open .nice-select-dropdown{display:block}.nice-select .list::-webkit-scrollbar{width:0}.nice-select .has-multiple{white-space:inherit;height:auto;padding:7px 12px;min-height:36px;line-height:22px}.nice-select .has-multiple span.current{border:1px solid #ccc;background:#eee;padding:0 10px;border-radius:3px;display:inline-block;line-height:24px;font-size:14px;margin-bottom:3px;margin-right:3px}.nice-select .has-multiple .multiple-options{display:block;line-height:24px;padding:0}.nice-select .nice-select-search-box{box-sizing:border-box;width:100%;padding:5px;pointer-events:none;border-radius:5px 5px 0 0}.nice-select .nice-select-search{box-sizing:border-box;background-color:#2f2f2f;border:1px solid #e8e8e8;border-radius:3px;color:#b2b2b2;display:inline-block;vertical-align:middle;padding:7px 12px;margin:0 10px 0 0;width:100%;min-height:36px;line-height:22px;height:auto;outline:0 !important;font-size:14px}

10
public/css/style.css
View file

@ -169,3 +169,13 @@ button:hover {
.custom-select:hover .options {
display: block;
}
/* Javascript searchable select used in source/target language */
.nice-select, .nice-select-dropdown, .nice-select-search {
border-right: none;
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #3c67ff;
box-shadow: 2px 2px 0px 0px rgba(60, 103, 255, 0.25);
}

1
public/js/nice-select2.js Normal file
View file

File diff suppressed because one or more lines are too long

2
views/header.html
View file

@ -14,6 +14,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="referrer" content="no-referrer" />
<script src="/js/nice-select2.js"></script>
<link rel="stylesheet" href="/css/nice-select2.css">
<link rel="stylesheet" href="/css/style.css" />
</head>

8
views/index.html
View file

@ -19,7 +19,7 @@
<div class="wrap languages">
<div class="language">
<select name="from" aria-label="Source language">
<select name="from" aria-label="Source language" id="sourceLanguage">
{{range $key, $value := .SourceLanguages}} {{if $.From}}
<option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
{{ .Name }}
@ -44,7 +44,7 @@
</div>
<div class="language">
<select name="to" aria-label="Target language">
<select name="to" aria-label="Target language" id="targetLanguage">
{{range $key, $value := .TargetLanguages}}
<option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
{{ .Name }}
@ -107,6 +107,10 @@
document.getElementById("translation-form").submit();
}
});
var options = { searchable: true };
NiceSelect.bind(document.getElementById("targetLanguage"), options);
var options = { searchable: true };
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
</script>
</main>
{{ template "footer" .}}