search

kongulov / nova-tab-translatable

This package contains a NovaTabTranslatable class you can use to make any Nova field type translatable with tabs.
MIT License
79 stars 17 forks source link

Change tabs to select in config & in mobile #31

Closed ajotka closed 1 year ago

ajotka commented 1 year ago

Hi!

Note: This PR is huge, not in the number of files, but in the change of approach. I will understand if it is not accepted.

Problem

I have a website that has over 50 languages. Unfortunately, 50 tabs do not fit on the page. It expands it and "spoils" the appearance. I also noticed that your package does not have RWD. In both cases, the only sensible solution is to add select instead of tabs.

image

Solution

I kept your solution and decided to add an option to change "tabs" to "select" in the configuration. (Default is "tabs")

I also added a function that checks if the browser is mobile or if the screen width is less than 768px. If it is, tabs are changed to select regardless of configuration.

Select also includes a search capability (for a better UX). I used the "vue-select" library.

Result

This is what the implementation looks like:

image

image

image

kongulov commented 1 year ago

@ajotka

Thank you very much for the pull request

I approached the design in a completely different way, I hope you like this version better as it supports more responsiveness.

Please update to version: 2.1.0