diff --git a/assets/javascripts/discourse/components/ai-full-page-search.gjs b/assets/javascripts/discourse/components/ai-full-page-search.gjs index cb7da3c8..4b1d6f50 100644 --- a/assets/javascripts/discourse/components/ai-full-page-search.gjs +++ b/assets/javascripts/discourse/components/ai-full-page-search.gjs @@ -213,8 +213,11 @@ export default class AiFullPageSearch extends Component { } } diff --git a/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss b/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss index c6b71784..83b9cfed 100644 --- a/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss +++ b/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss @@ -1,3 +1,5 @@ +@use "lib/viewport"; + @keyframes fade-in { from { opacity: 0; @@ -99,7 +101,11 @@ } .full-page-discoveries { - padding: 1em 10%; + padding: 0 1rem; + + @include viewport.until(md) { + padding: 0.25rem 1rem 0 1rem; + } } .d-icon-discobot { @@ -167,3 +173,113 @@ } } } + +.search-page .ai-search-discoveries__discoveries-wrapper { + padding-bottom: 0.5rem; +} + +.ai-search-discoveries__discoveries-title.full-page-discoveries { + border: none; + padding-top: 1rem; +} + +@mixin discoveries-sidebar { + .full-page-discoveries { + padding: 1em 10%; + } + + &.search-page.has-discoveries { + .semantic-search__container { + background: transparent; + margin: 0; + } + + .semantic-search__container .semantic-search__results { + .semantic-search__searching { + margin-left: 0; + } + + .semantic-search__searching-text { + margin-left: 1.25em; + } + } + + .search-container .search-header { + padding: 1em 2em; + } + + .semantic-search__container .search-results, + .search-container .search-advanced .search-results, + .search-container .search-advanced .search-info { + padding: 1em 2em; + } + + .search-results .fps-result { + padding: 0; + margin-bottom: 2.5em; + } + + .search-advanced { + display: grid; + grid-template-columns: 70% 30%; + grid-auto-rows: auto; + + > * { + grid-column: 1; + align-self: start; + } + } + + .search-info { + grid-row: 1; + } + + .ai-search-discoveries__discoveries-title { + border: none; + margin-bottom: 0; + padding-bottom: 0; + } + + .ai-search-discoveries__discoveries-wrapper { + grid-column: 2 / -1; + grid-row: 1 / 5; + border-left: 1px solid var(--primary-low); + align-self: stretch; + + .cooked { + color: var(--primary-high); + } + } + } +} + +body:not(.has-sidebar-page) { + @include viewport.from(md) { + @include discoveries-sidebar; + } +} + +body.has-sidebar-page { + @include viewport.from(lg) { + @include discoveries-sidebar; + } + + @include viewport.between(md, lg) { + .ai-search-discoveries__discoveries-wrapper { + padding-bottom: 0; + } + + .ai-search-discoveries__discoveries-title { + padding-top: 1rem; + } + + .search-container .search-advanced .search-info, + .semantic-search__container.search-results { + padding-inline: 10%; + } + + .full-page-discoveries { + padding-inline: 10%; + } + } +} diff --git a/assets/stylesheets/modules/embeddings/common/semantic-search.scss b/assets/stylesheets/modules/embeddings/common/semantic-search.scss index 4a346842..e3677291 100644 --- a/assets/stylesheets/modules/embeddings/common/semantic-search.scss +++ b/assets/stylesheets/modules/embeddings/common/semantic-search.scss @@ -1,6 +1,19 @@ +@use "lib/viewport"; + .semantic-search__container { - background: var(--primary-very-low); - margin: 1rem 0 1rem 0; + margin: 1rem 0 0 0; + + .has-sidebar-page & { + @include viewport.until(lg) { + border-top: 1px solid var(--primary-low); + } + } + + body:not(.has-sidebar-page) & { + @include viewport.until(md) { + border-top: 1px solid var(--primary-low); + } + } .semantic-search__results { display: flex; @@ -15,7 +28,6 @@ &__searching { display: flex; align-items: center; - margin-left: 5px; &.in-progress, &.unavailable { @@ -23,6 +35,11 @@ color: var(--primary-medium); } } + + svg { + font-size: var(--font-down-1); + color: var(--primary-high); + } } &__searching-text { @@ -72,3 +89,16 @@ display: none; } } + +@include viewport.until(md) { + .search-container .search-advanced .semantic-search__container { + + .search-info { + padding-inline: 1rem; + } + + &.search-results { + margin-bottom: 0; + padding-inline: 1rem; + } + } +}