github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-06-03 22:43:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement search on front end

Browse Source
This commit is contained in:
Toby Zerner
2015-06-03 18:10:56 +09:30
parent ea510b5ea0
commit 5d89618bbd
18 changed files with 717 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
less/lib/components.less
View File

@ -22,3 +22,11 @@
hr {
border-top: 2px solid @fl-body-secondary-color;
}
mark {
background: #FFE300;
color: @fl-body-color;
padding: 1px;
border-radius: @border-radius-base;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

16
less/lib/dropdowns.less
View File

@ -44,9 +44,23 @@
}
}
& .divider {
margin: 10px 0;
margin: 8px 0;
background-color: @fl-body-control-bg;
}
& .dropdown-header {
padding: 10px 15px;
color: @fl-body-heading-color;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
margin-top: 8px;
border-top: 1px solid @fl-body-control-bg;
&:first-child {
margin-top: -8px;
border-top: 0;
}
}
}
@media @tablet, @desktop, @desktop-hd {
.dropdown-split {

44
less/lib/forms.less
View File

@ -3,11 +3,14 @@
}
.form-control {
.box-shadow(none);
border-width: 2px;
&:focus,
&.focus {
background-color: #fff;
color: @fl-body-color;
.box-shadow(none);
border: 2px solid @fl-body-primary-color;
}
}
legend {
@ -17,47 +20,6 @@ legend {
margin-bottom: 10px;
}
// Search inputs
// @todo Extract some of this into header-specific definitions
.search-input {
overflow: hidden;
&:before {
.fa();
content: @fa-var-search;
float: left;
margin-right: -36px;
width: 36px;
font-size: 14px;
text-align: center;
color: @fl-body-muted-color;
position: relative;
padding: @padding-base-vertical - 1 0;
line-height: @line-height-base;
pointer-events: none;
}
& .form-control {
float: left;
width: 225px;
padding-left: 36px;
padding-right: 36px;
.transition(~"all 0.4s");
}
& .clear {
float: left;
margin-left: -36px;
vertical-align: top;
opacity: 0;
width: 36px !important;
.rotate(-180deg);
.transition(~"transform 0.2s, opacity 0.2s");
}
&.clearable .clear {
opacity: 1;
.rotate(0deg);
}
}
// Select inputs
.select-input {
display: inline-block;

8
less/lib/layout.less
View File

@ -169,7 +169,7 @@ body {
background: fadein(@fl-drawer-control-bg, 5%);
}
}
& .search-input:before {
& .search-input {
color: @fl-drawer-control-color;
}
& .btn-default, & .btn-default:hover {
@ -311,12 +311,8 @@ body {
.header-secondary {
float: right;
& .search-input {
& .search-box {
margin-right: 10px;
&:focus {
width: 400px;
}
}
}
}

82
less/lib/search.less Normal file
View File

@ -0,0 +1,82 @@
.search-box {
& input:focus, &.active input, & .search-results {
width: 400px;
}
}
.search-results {
max-height: 70vh;
overflow: auto;
& > li > a {
white-space: normal;
&:hover {
background: none;
}
}
& mark {
background: none;
padding: 0;
font-weight: bold;
color: inherit;
box-shadow: none;
}
}
.search-input {
overflow: hidden;
color: @fl-body-muted-color;
&:before {
.fa();
content: @fa-var-search;
float: left;
margin-right: -36px;
width: 36px;
font-size: 14px;
text-align: center;
position: relative;
padding: @padding-base-vertical - 1 0;
line-height: @line-height-base;
pointer-events: none;
}
& input {
float: left;
width: 225px;
padding-left: 36px;
padding-right: 36px;
.transition(~"all 0.4s");
.active & {
background: @fl-body-bg;
border: 2px solid @fl-body-secondary-color;
&:focus {
&:extend(.form-control:focus);
}
}
}
& .btn {
float: left;
margin-left: -36px;
width: 36px !important;
outline: none;
}
}
.discussion-search-result {
& .title {
margin-bottom: 3px;
}
& .excerpt {
color: @fl-body-muted-color;
font-size: 11px;
}
}
.user-search-result {
& .avatar {
.avatar-size(24px);
margin: -2px 10px -2px 0;
}
}