diff --git a/mixins/Navigation.pixy b/mixins/Navigation.pixy index 327c141b..4eeb6668 100644 --- a/mixins/Navigation.pixy +++ b/mixins/Navigation.pixy @@ -5,7 +5,7 @@ component Navigation(user *arn.User) LoggedInMenu(user) component LoggedOutMenu - nav#navigation + nav#navigation.logged-out NavigationButton("About", "/", "question-circle") NavigationButton("Anime", "/anime", "television") NavigationButton("Forum", "/forum", "comment") @@ -13,22 +13,27 @@ component LoggedOutMenu NavigationButton("Airing", "/airing", "th") component LoggedInMenu(user *arn.User) - nav#navigation - NavigationButton("Dash", "/", "inbox") - NavigationButton("Anime", "/anime", "television") - NavigationButton("Profile", "/+", "user") - NavigationButton("Forum", "/forum", "comment") - NavigationButton("Settings", "/settings", "cog") + nav#navigation.logged-in + ExtraNavigationButton("Dash", "/", "inbox") + ExtraNavigationButton("Anime", "/anime", "television") + ExtraNavigationButton("Profile", "/+", "user") + ExtraNavigationButton("Forum", "/forum", "comment") + + FuzzySearch .extra-navigation + //- if user.Role == "admin" + //- ExtraNavigationButton("Admin", "/admin", "wrench") + ExtraNavigationButton("Users", "/users", "globe") ExtraNavigationButton("Airing", "/airing", "th") - - if user.Role == "admin" - ExtraNavigationButton("Admin", "/admin", "wrench") + ExtraNavigationButton("Settings", "/settings", "cog") NavigationButtonNoAJAX("Logout", "/logout", "sign-out") +component FuzzySearch + input#search(type="text", placeholder="Search...", title="Shortcut: Ctrl + Q") + component NavigationButton(name string, target string, icon string) a.navigation-link.ajax(href=target, aria-label=name) .navigation-button diff --git a/pages/search/search.scarlet b/pages/search/search.scarlet index 3c6d31ba..6020f6cb 100644 --- a/pages/search/search.scarlet +++ b/pages/search/search.scarlet @@ -1,7 +1,7 @@ -#search-container - horizontal - justify-content center +// #search-container +// horizontal +// justify-content center -#search - width 100% - max-width 560px \ No newline at end of file +// #search +// width 100% +// max-width 560px \ No newline at end of file diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 26b24300..18fca0fd 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -56,6 +56,19 @@ export class AnimeNotifier { } } + onKeyDown(e: KeyboardEvent) { + // Ctrl + Q = Search + if(e.ctrlKey && e.keyCode == 81) { + let search = this.app.find("search") as HTMLInputElement + + search.focus() + search.select() + + e.preventDefault() + e.stopPropagation() + } + } + updateAvatars() { for(let element of findAll(".user-image")) { let img = element as HTMLImageElement diff --git a/scripts/main.ts b/scripts/main.ts index dd889a8f..32c2304f 100644 --- a/scripts/main.ts +++ b/scripts/main.ts @@ -6,6 +6,7 @@ let arn = new AnimeNotifier(app) document.addEventListener("DOMContentLoaded", arn.onContentLoaded.bind(arn)) document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn)) +document.addEventListener("keydown", arn.onKeyDown.bind(arn), false) window.addEventListener("popstate", arn.onPopState.bind(arn)) // window.addEventListener("resize", arn.onResize.bind(arn)) \ No newline at end of file diff --git a/styles/forms.scarlet b/styles/forms.scarlet index b679bd3e..506f1797 100644 --- a/styles/forms.scarlet +++ b/styles/forms.scarlet @@ -1,6 +1,6 @@ input, textarea, button, select font-family inherit - font-size 1rem + font-size 1em padding 0.4em 0.8em border-radius 3px color text-color diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index eb6edde4..57530be7 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -42,6 +42,17 @@ .navigation-text display none +#search + display none + border-radius 0 + background text-color + border none + color white + + :focus + border none !important + box-shadow none + .extra-navigation display none @@ -59,20 +70,25 @@ > 930px .navigation-button font-size 1.1em - - .icon - margin-right 0.5em #navigation justify-content flex-start - .navigation-text - display inline-block + .logged-out + .navigation-text + display inline-block + + .navigation-button + .icon + margin-right 0.5em + + #search + display block + flex 1 .extra-navigation horizontal justify-content flex-end - flex 1 < 400px height #navigation @@ -84,4 +100,7 @@ horizontal .extra-navigation + display none + + #search display none \ No newline at end of file