Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/hashtype autocomplete #781

Merged

Conversation

robinduerhager
Copy link
Contributor

Closes #752 . Adds Autocompletion for Hashtypes via Select2 JQuery Plugin.

Sadly, the Select2 Bootstrap Theme has not been updated since 5 years, so the styling is a bit outdated / different than the rest of the project, but it's ok imo.

Animation

@robinduerhager
Copy link
Contributor Author

There is actually a Bootstrap 5 theme for select2.

@zyronix
Copy link
Member

zyronix commented Jun 29, 2022

Test the code, seems to work. Noticed that the select2 suggestions bar does not scale and has same static width? See attached screenshot

image

Also noted from @s3inlc the select2 doesn't seem to be compatible with darkmode.

image

@zyronix zyronix added the enhancement Enhancement of existing features / Small addition label Jun 29, 2022
@robinduerhager
Copy link
Contributor Author

robinduerhager commented Jul 2, 2022

select2-bootstrap5-dark-theme.mp4

Sorry, i accidently rendered this as an mp4 instead of a gif 😅 .

I added a few media breakpoints for the sizing of the select in head.template.html to make this responsive.
I also changed some scss variables to integrate some form of dark mode (i only changed them so at least the single select mode looks like a dark mode).

In case you wonder, here are the variables and values i changed in the select2-bootstrap5-theme project:

// src/_variables.scss

$s2bs5-color:                            #aaaaaa !default;
$s2bs5-placeholder-color:        #aaaaaa !default;
$s2bs5-bg:                                #32383e !default;

$s2bs5-border-color:                #1d2227 !default;
$s2bs5-box-shadow:                #2c3035 !default;

$s2bs5-indicator:                url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cecfd0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !default;

$s2bs5-focus-border-color:       #1d2227 !default;
$s2bs5-focus-box-shadow:         0 0 0 .2rem rgba(58, 63, 68, .25) !default;

I will commit a changelog entry and if you are good with the results I think this can be merged :).

@zyronix
Copy link
Member

zyronix commented Aug 2, 2022

Thanks, looks good, but have to test it a bit more; expecting to add it with the release we are currently working on.

@s3inlc
Copy link
Member

s3inlc commented Aug 19, 2022

I tested it a bit more, looks good to us, so I'll merge it.
Thanks for the contribution and updates.

@s3inlc s3inlc merged commit 7961d38 into hashtopolis:master Aug 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Enhancement of existing features / Small addition
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Hashtype autocompletion
3 participants