Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); [solidjs-pod] : Create component for search input and filter sort buttons by hdJerry · Pull Request #831 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

[solidjs-pod] : Create component for search input and filter sort buttons - #831

Merged
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component
Nov 17, 2022
Merged

[solidjs-pod] : Create component for search input and filter sort buttons#831
hdJerry merged 6 commits into
mainfrom
solidjs/search-filter-sort-component

Conversation

@hdJerry

Copy link
Copy Markdown
Contributor

Create component for search input and filter / sort buttons

Background

This is intended to be a reusable component, wrapping around a few different items that will have their functionality added in another ticket. The focus of this ticket is to create the items themselves and a wrapper around them, so the section can be used in multiple pages. This component will contain an input field for search queries, and a series of dropdown buttons for filtering and sorting.

Acceptance

  • component will contain the following items - for design of pieces only, do not need functionality yet
    • search input with “find a repository..” placeholder
    • type dropdown button (does not need to contain options yet)
    • language dropdown button (does not need to contain options yet)
    • sort dropdown button (does not need to contain options yet)
    • divider line
    • space for showing text relating to selected options
    • clear filter button with x icon (does not need functionality yet)

Notes

Screenshot 2022-11-04 at 17 28 39
Screenshot 2022-11-04 at 18 46 01

@hdJerryhdJerry self-assigned this Nov 4, 2022
@hdJerryhdJerry linked an issue Nov 4, 2022 that may be closed by this pull request
8 tasks
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-831.d3sqkonra6x7y9.amplifyapp.com

href="https://github.com/new"
class="flex items-center text-white gap-2 bg-green-600 rounded-md px-3 py-1.5 text-sm font-semibold"
>
<svg

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey maybe its a good idea create a file to export/import the Icons? saw too many svgs, and the files became hard to read., What do you think ?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this.

@SDaianSDaian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hdJerry
hdJerry merged commit f2dcff4 into mainNov 17, 2022
@hdJerry
hdJerry deleted the solidjs/search-filter-sort-component branch November 17, 2022 08:53
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
…tons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress
* chore: get all repos api
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* auth token added to header
* ..updates
* ..updates
* auth token added to header
* fix file issues
* CI adjustments
* CI adjustments
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api
* updated gists api function
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* [solidjs-pod] : Create component for search input and filter sort buttons (#831)
* in progress
* in progress
* in progress, paused for now
* chore: search filter sort component
* fixed comments on icons
* [solidjs-tailwinf] Add user profile card (#830)
* [SolidJS-Tailwind] Implement authentication (#734)
* chore(solidjs): remove example components
* feat(solidjs): add signin page
* refactor(solidjs): improve auth setup
* feat(solidjs): pencil in auth flow
* feat(solidjs): add example github communication
* [Angular - NgRx - SCSS] 440: state & service refactor (#527)
* setup: get branch caught up and ready for work
* feat: refactored repository service and test
* feat: refactor of user service and test
* feat: updated user service spec
* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls
* attempt to fix issues with service updates; some refactoring and adjusting so app compiles
* feat: added auth user data to auth state; updated nav component to use auth state
* feat: adjusted auth call; fixed user call so home page loads
* moved some user logic; still having reload issues and repo view issues
* feat: got app working again! cleaned out console logs
* rebased and fixed most files
* fix broken tests
* removed unused code
* fix: fix pr comments and most tests
* fix: fixed final broken unit test
* fix: updated test; removed unused code in user effect; new user mapping file
* add todo for refactor improvements; update authUser effect to use different rxjs operation
Co-authored-by: LindaT <linda@thisdot.co>
* feat(solidjs) - Create navigation header (#840)
* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)
* fix(angular-apollo-tailwind): append protocol if missing from user url
Refs: #591
* test(angular-apollo-tailwind): update with testcases
Closes: #591
* chore: repo card with story and test (#737)
* chore: repo card with story and test
* fix comments
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: gist panel UI (#741)
* chore: gist panel UI
* fix coment
* fix coment
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore(solidjs): remove example components
* fixed comments, clean ups
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Jerry Hogan <jerry.hogan@thisdot.co>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
* chore: updated amplify.yml file (#729)
* chore: updated amplify.yml file
* changed pnpm to npm
* chore: workflow added (#745)
* chore: workflow added
* CI setup fixes and testing
* CI setup fixes and testing
* CI setup fixes and testing
* tried everything but doesn't work, i think we have to merge this
* ..updates
* ..updates
* ..updates
* added auth token
* added auth token
Co-authored-by: Linda Thompson <lindakt16@gmail.com>
Co-authored-by: LindaT <linda@thisdot.co>
Co-authored-by: Daian Scuarissi <scuarissid@gmail.com>
Co-authored-by: Oluwakorede Cole <asincole@gmail.com>
Co-authored-by: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Co-authored-by: Maarten Bicknese <maarten.bicknese@thisdot.co>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 17 Create component for search input and filter sort buttons

3 participants

@hdJerry@SDaian@vyktoremario