diff --git a/mixins/Sidebar.pixy b/mixins/Sidebar.pixy index eaea54a8..8ba102b8 100644 --- a/mixins/Sidebar.pixy +++ b/mixins/Sidebar.pixy @@ -15,16 +15,21 @@ component Sidebar(user *arn.User) SidebarButton("Artworks", "/artworks", "paint-brush") SidebarButton("Soundtracks", "/soundtracks", "headphones") SidebarButton("AMVs", "/amvs", "video-camera") + //- SidebarButton("Games", "/games", "gamepad") SidebarButton("Users", "/users", "globe") + //- SidebarButton("Search", "/search", "search") if user != nil - if user.Role != "" - SidebarButton("Statistics", "/statistics", "pie-chart") - + SidebarButton("Statistics", "/statistics", "pie-chart") SidebarButton("Settings", "/settings", "cog") .spacer + .sidebar-link(aria-label="Search") + .sidebar-button + Icon("search") + FuzzySearch + SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle") if user != nil diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index e1693928..63142e05 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -98,11 +98,6 @@ export class AnimeNotifier { } run() { - // Add "osx" class on macs so we can set a proper font-size - if(navigator.platform.includes("Mac")) { - document.documentElement.classList.add("osx") - } - // Check for WebP support this.webpEnabled = canUseWebP() @@ -127,6 +122,9 @@ export class AnimeNotifier { this.sideBar = this.app.find("sidebar") document.body.addEventListener("click", e => { + if(document.activeElement.id === "search") + return; + this.sideBar.classList.remove("sidebar-visible") }) diff --git a/styles/embedded.scarlet b/styles/embedded.scarlet index e0b1c3a1..7a0fd9f8 100644 --- a/styles/embedded.scarlet +++ b/styles/embedded.scarlet @@ -4,8 +4,8 @@ remove-margin = 1.1rem // Put navigation to the bottom of the screen flex-direction column-reverse !important - .extension-navigation - display inline-block + // .extension-navigation + // display inline-block .anime-list // max-width 500px diff --git a/styles/input.scarlet b/styles/input.scarlet index e4cff2b0..f4e2beed 100644 --- a/styles/input.scarlet +++ b/styles/input.scarlet @@ -19,7 +19,6 @@ input, textarea, select ui-disabled input, select - width 100% padding 0.5rem 1rem input diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index fedf1a17..b8084275 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -42,45 +42,53 @@ display none #search - flex 1 - border-radius 0 background transparent border none - - color nav-link-hover-color font-size 1em - min-width 0 + padding 0 + width 0 + flex-grow 1 - ::placeholder - color nav-link-color +// #search +// flex 1 +// border-radius 0 +// background transparent +// border none + +// color nav-link-hover-color +// font-size 1em +// min-width 0 - :focus - border none - box-shadow none +// ::placeholder +// color nav-link-color -.extra-navigation - display none +// :focus +// border none +// box-shadow none -.extension-navigation - display none +// .extra-navigation +// display none -> 330px - .navigation-button, #search - font-size 1.3em +// .extension-navigation +// display none + +// > 330px +// .navigation-button, #search +// font-size 1.3em // > 550px // #navigation // padding 0 content-padding -> 930px - .navigation-button, #search - font-size 1.2em +// > 930px +// .navigation-button, #search +// font-size 1.2em - #navigation - justify-content flex-start +// #navigation +// justify-content flex-start - .extra-navigation - display block +// .extra-navigation +// display block // @media screen and (max-device-height: 500px) // #navigation