initial commit
This commit is contained in:
Kris
commit
a75b9063aa
|
|
@ -0,0 +1,2 @@
|
||||||
|
.discourse-site
|
||||||
|
HELP
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"name": "discourse-search-banner",
|
||||||
|
"about_url": null,
|
||||||
|
"license_url": null,
|
||||||
|
"component": true,
|
||||||
|
"assets": {},
|
||||||
|
"color_schemes": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
@import "common/foundation/mixins";
|
||||||
|
|
||||||
|
$max-width: 600px;
|
||||||
|
|
||||||
|
.display-search-banner {
|
||||||
|
#main-outlet {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-search-banner {
|
||||||
|
padding-top: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-search-banner-wrap {
|
||||||
|
@if $background-image != "none" {
|
||||||
|
background-image: url($background-image);
|
||||||
|
} @else {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
@if $tile-background_image == "true" {
|
||||||
|
background-size: auto;
|
||||||
|
} @else {
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
padding: 2.5em 0 3em;
|
||||||
|
margin: 1em auto;
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
padding: 1em 8px 2em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: $max-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-menu {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
input[type="text"] {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
.searching {
|
||||||
|
// spinner
|
||||||
|
top: 0.5em;
|
||||||
|
right: 2.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: $font-up-6;
|
||||||
|
line-height: $line-height-medium;
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
font-size: $font-up-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
order: 2;
|
||||||
|
right: 0;
|
||||||
|
background: transparent;
|
||||||
|
.discourse-no-touch & {
|
||||||
|
&:hover {
|
||||||
|
background: transparent;
|
||||||
|
.d-icon {
|
||||||
|
color: $primary-high;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-context,
|
||||||
|
.results {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: $max-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-context {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
right: 0;
|
||||||
|
top: 2.67em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: $secondary;
|
||||||
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
position: absolute;
|
||||||
|
width: $max-width;
|
||||||
|
z-index: 9;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
left: 0;
|
||||||
|
top: 1.9em;
|
||||||
|
right: 0;
|
||||||
|
padding: 2em 1em 1em 1em;
|
||||||
|
@include breakpoint(mobile-extra-large) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-widget {
|
||||||
|
div.discourse-tags {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
}
|
||||||
|
li a.widget-link {
|
||||||
|
display: block;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $highlight-medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
<script type="text/discourse-plugin" version="0.8">
|
||||||
|
api.registerConnectorClass('below-site-header', 'search-banner', {
|
||||||
|
setupComponent(args, component) {
|
||||||
|
var topMenuRoutes = Discourse.SiteSettings.top_menu.split('|').map(function(route) {return '/' + route});
|
||||||
|
var homeRoute = topMenuRoutes[0];
|
||||||
|
|
||||||
|
api.onPageChange((url, title) => {
|
||||||
|
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute
|
||||||
|
if(settings.only_show_on_homepage) {
|
||||||
|
var showBannerHere = home
|
||||||
|
} else {
|
||||||
|
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home
|
||||||
|
}
|
||||||
|
if (showBannerHere){
|
||||||
|
component.set('displaySearchBanner', true);
|
||||||
|
$('html').addClass('display-search-banner');
|
||||||
|
} else {
|
||||||
|
component.set('displaySearchBanner', false);
|
||||||
|
$('html').removeClass('display-search-banner');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/discourse-plugin" version="0.8">
|
||||||
|
// Simplified version of header search theme component
|
||||||
|
const searchMenuWidget = api.container.factoryFor('widget:search-menu');
|
||||||
|
const corePanelContents = searchMenuWidget.class.prototype['panelContents'];
|
||||||
|
api.reopenWidget('search-menu', {
|
||||||
|
buildKey: function(attrs) {
|
||||||
|
let type = attrs.formFactor || 'menu'
|
||||||
|
return `search-${type}`
|
||||||
|
},
|
||||||
|
defaultState: function(attrs) {
|
||||||
|
return {
|
||||||
|
formFactor: attrs.formFactor || 'menu',
|
||||||
|
showHeaderResults: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
html: function() {
|
||||||
|
if (this.state.formFactor === 'widget') {
|
||||||
|
return this.panelContents();
|
||||||
|
} else {
|
||||||
|
return this.attach('menu-panel', {
|
||||||
|
maxWidth: 500,
|
||||||
|
contents: () => this.panelContents()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clickOutside() {
|
||||||
|
if (!this.vnode.hooks['widget-mouse-down-outside']) {
|
||||||
|
return this.mouseDownOutside();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mouseDownOutside() {
|
||||||
|
const formFactor = this.state.formFactor;
|
||||||
|
if (formFactor === 'menu') {
|
||||||
|
return this.sendWidgetAction('toggleSearchMenu');
|
||||||
|
} else {
|
||||||
|
this.state.showHeaderResults = false;
|
||||||
|
this.scheduleRerender();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
click: function() {
|
||||||
|
const formFactor = this.state.formFactor;
|
||||||
|
if (formFactor === 'widget') {
|
||||||
|
this.showResults();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showResults: function() {
|
||||||
|
this.state.showHeaderResults = true;
|
||||||
|
this.scheduleRerender();
|
||||||
|
},
|
||||||
|
linkClickedEvent: function() {
|
||||||
|
const formFactor = this.state.formFactor;
|
||||||
|
if (formFactor === 'widget') {
|
||||||
|
$('#search-term').val('');
|
||||||
|
$('.search-placeholder').css('visibility', 'visible');
|
||||||
|
this.state.showHeaderResults = false;
|
||||||
|
this.scheduleRerender();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
panelContents: function() {
|
||||||
|
const formFactor = this.state.formFactor;
|
||||||
|
let showHeaderResults = this.state.showHeaderResults == null || this.state.showHeaderResults === true;
|
||||||
|
let contents = [];
|
||||||
|
|
||||||
|
if (formFactor === 'widget') {
|
||||||
|
contents.push(this.attach('button', {
|
||||||
|
icon: 'search',
|
||||||
|
className: 'search-icon',
|
||||||
|
action: 'showResults'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
contents = contents.concat(...corePanelContents.call(this));
|
||||||
|
let results = contents.find(w => w.name == 'search-menu-results');
|
||||||
|
if (results && results.attrs.results) {
|
||||||
|
$('.search-menu.search-header').addClass('has-results');
|
||||||
|
} else {
|
||||||
|
$('.search-menu.search-header').removeClass('has-results');
|
||||||
|
}
|
||||||
|
if (formFactor === 'menu' || showHeaderResults) {
|
||||||
|
return contents;
|
||||||
|
} else {
|
||||||
|
return contents.filter((widget) => {
|
||||||
|
return widget.name != 'search-menu-results' && widget.name != 'search-context';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
api.createWidget("search-widget", {
|
||||||
|
tagName: "div.search-widget",
|
||||||
|
});
|
||||||
|
api.decorateWidget('search-widget:after', function(helper) {
|
||||||
|
const searchWidget = helper.widget,
|
||||||
|
appController = helper.register.lookup('controller:application'),
|
||||||
|
searchMenuVisible = searchWidget.state.searchVisible;
|
||||||
|
if (!searchMenuVisible && !searchWidget.attrs.topic) {
|
||||||
|
return helper.attach('search-menu', {
|
||||||
|
contextEnabled: searchWidget.state.contextEnabled,
|
||||||
|
formFactor: 'widget'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
type="text/x-handlebars"
|
||||||
|
data-template-name="/connectors/below-site-header/search-banner"
|
||||||
|
>
|
||||||
|
{{#if displaySearchBanner}}
|
||||||
|
<div class="custom-search-banner" >
|
||||||
|
<div class="wrap custom-search-banner-wrap">
|
||||||
|
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||||
|
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||||
|
{{mount-widget widget="search-widget"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
en:
|
||||||
|
search_banner:
|
||||||
|
headline: "Welcome to our community"
|
||||||
|
subhead: "We're happy to have you here. If you need help, please search before you post."
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.search-widget {
|
||||||
|
.search-link {
|
||||||
|
.badge-category {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-search-banner-wrap .results {
|
||||||
|
padding: 2em 0.5em 0.5em;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
only_show_on_homepage:
|
||||||
|
default: false
|
||||||
|
description: When unchecked the banner will show on all pages listed in the <a href="/admin/site_settings/category/all_results?filter=top_menu">top menu site setting</a>
|
||||||
|
|
||||||
|
background_image:
|
||||||
|
type: string
|
||||||
|
default: none
|
||||||
|
description: Enter an image url
|
||||||
|
|
||||||
|
tile_background_image: false
|
||||||
Loading…
Reference in New Issue