diff --git a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs index 12a2bd5b19c..7d7b70c632f 100644 --- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs +++ b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs @@ -41,8 +41,8 @@ {{#if bulkSelectEnabled}}
- {{i18n "search.select_all"}} - {{i18n "search.clear_all"}} + {{d-button icon="check-square" class="btn-default" action=(action "selectAll") label="search.select_all"~}} + {{d-button icon="far-square" class="btn-default" action=(action "clearAll") label="search.clear_all"}}
{{/if}} @@ -83,7 +83,7 @@
{{#if bulkSelectEnabled}} - {{track-selected selectedList=selected selectedId=result.topic}} + {{track-selected selectedList=selected selectedId=result.topic class="bulk-select"}} {{/if}} diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index cbfc845ddc4..b8c2fe228f2 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -773,3 +773,38 @@ } } } + +.topic-bulk-actions-modal { + p { + margin-top: 0; + } + &.full .modal-body { + height: 400px; + max-height: 400px; + } + + .bulk-buttons { + display: flex; + flex-wrap: wrap; + margin-right: -1%; + + .btn { + flex: 1 0 30%; + margin-bottom: 1em; + margin-right: 1%; + white-space: nowrap; + overflow: hidden; + max-width: 33%; + + @media screen and (max-width: 767px) { + flex: 1 0 48%; + max-width: 48%; + } + + @include breakpoint(mobile-extra-large) { + flex: 1 1 auto; + min-width: 49%; + } + } + } +} diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index 895a4727b6f..35a5babc26f 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/app/assets/stylesheets/common/base/search.scss @@ -43,9 +43,9 @@ .search-info { display: flex; flex-wrap: wrap; - border-bottom: 3px solid $primary-low; - padding-bottom: 0.5em; - margin-bottom: 1em; + border-bottom: 1px solid $primary-low; + padding-bottom: 1em; + margin-bottom: 1.5em; flex-direction: row; align-items: center; @@ -80,19 +80,10 @@ .search-title { display: flex; justify-content: flex-start; - align-items: center; - - .bulk-select { - margin-left: 0.5em; - } - - .fps-select a { - margin-left: 0.5em; - font-size: $font-down-1; - - &:hover { - text-decoration: underline; - } + align-items: flex-start; + flex-wrap: wrap; + button { + margin: 0 0.5em 0.5em 0; } } @@ -185,37 +176,81 @@ .fps-result { display: flex; padding: 0 0.5em; + margin-bottom: 28px; + max-width: 780px; .author { display: inline-block; vertical-align: top; + padding-top: 0.15em; + padding-left: 0.15em; + margin-right: 1em; + } + + .topic { + padding-bottom: 0.25em; + max-width: 700px; + display: grid; + grid-template-areas: + "bulk-select title" + "meta meta"; + grid-template-columns: auto 1fr; + align-items: baseline; + .bulk-select { + grid-area: bulk-select; + } + .search-link { + grid-area: title; + } + .search-category { + grid-area: meta; + } + } + + .search-category { + max-width: 100%; + display: flex; + flex-wrap: wrap; + margin-top: 0.25em; + .badge-wrapper { + max-width: 100%; + } + } + + input[type="checkbox"] { + margin-top: 0; + margin-left: 0; + // cross-browser alignment below + position: relative; + vertical-align: bottom; + margin-bottom: 0.39em; + } + + .blurb { + font-size: $font-0; + line-height: $line-height-large; + word-wrap: break-word; + max-width: 640px; + color: $primary-medium; + .date { + color: $primary-high; + } + + .search-highlight { + color: $primary-high; + } } .like-count { - color: dark-light-choose($primary-medium, $secondary-medium); - .fa { + display: block; + color: $primary-high; + margin-top: 0.25em; + .d-icon { color: $love; font-size: $font-down-1; } } - .badge-wrapper span.badge-category { - max-width: inherit; - } - - .search-category { - padding-top: 3px; - } - - margin-bottom: 28px; - max-width: 780px; - .topic { - padding-bottom: 2px; - max-width: 700px; - } - .avatar { - margin-right: 14px; - } a.search-link:visited .topic-title { color: $tertiary-high; } @@ -234,33 +269,17 @@ } } } - .blurb { - font-size: $font-0; - line-height: $line-height-large; - word-wrap: break-word; - max-width: 640px; - color: dark-light-choose($primary-medium, $secondary-medium); - .date { - color: dark-light-choose($primary-medium, $secondary-high); - } - .search-highlight { - color: dark-light-choose($primary, $secondary-low); - } - } - - .discourse-tag { + .discourse-tag.simple { font-size: $font-down-1; + margin-right: 0.25em; } } -.fps-topic { - display: inline-block; -} - .no-results-suggestion { margin-top: 30px; } + .search-footer { margin-bottom: 30px; } diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index e2fd9158a81..5209a743d64 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -132,8 +132,9 @@ $tag-color: $primary-medium; } .discourse-tags, -.list-tags { - .discourse-tag.simple:not(:last-child):after { +.list-tags, +.search-category { + .discourse-tag.simple:not(:last-of-type):after { content: ", "; margin-left: 1px; } diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index 897319cf0df..341e33fdd0b 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -70,42 +70,6 @@ } } -.topic-bulk-actions-modal { - p { - margin-top: 0; - } - &.full .modal-body { - height: 400px; - max-height: 400px; - } - - .bulk-buttons { - display: flex; - flex-wrap: wrap; - margin-right: -1%; - - .btn { - flex: 1 0 30%; - margin-bottom: 1em; - margin-right: 1%; - white-space: nowrap; - overflow: hidden; - max-width: 33%; - - @media screen and (max-width: 767px) { - flex: 1 0 48%; - max-width: 48%; - } - - @include breakpoint(mobile-extra-large) { - flex: 1 1 auto; - min-width: 49%; - max-width: unset; - } - } - } -} - .choose-topic-modal { .modal-body { position: relative; diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss index 6cf7bf78133..c4c9892bda7 100644 --- a/app/assets/stylesheets/mobile/search.scss +++ b/app/assets/stylesheets/mobile/search.scss @@ -40,6 +40,8 @@ } } -.fps-topic { - max-width: 75%; +.fps-result { + input[type="checkbox"] { + vertical-align: baseline; + } }