Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Real minor fixes #713

Merged
merged 5 commits into from
Jan 14, 2018
Merged

Real minor fixes #713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6af069
Add key prop to global search sem badges
taneliang Jan 14, 2018
92164ca
Fix warning: You tried to return focus to but it is not in the DOM a…
taneliang Jan 14, 2018
dc03231
Fix bad scroll perf on Safari on macOS
taneliang Jan 14, 2018
dffa690
Merge branch 'master' into real-minor-fixes
taneliang Jan 14, 2018
fb759a3
Add comment and simplify new key
taneliang Jan 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
"react-dom": "^16.2.0",
"react-feather": "1.0.8",
"react-helmet": "^5.2.0",
"react-modal": "^3.1.7",
"react-modal": "^3.1.10",
"react-qr-svg": "^2.1.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.2.2",
Expand Down
188 changes: 97 additions & 91 deletions www/src/js/views/layout/GlobalSearch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,37 +121,39 @@ class GlobalSearch extends Component<Props, State> {
<div className={styles.container}>
{searchForm}

<div className={styles.selectList}>
<div className={styles.noResults}>
<Help />
<p>
No results found for{' '}
<strong className={styles.searchTerm}>&quot;{inputValue}&quot;</strong>
</p>
<p>
Try searching all{' '}
<button
{...getItemProps({
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
})}
className={classnames('btn btn-inline', {
[styles.selected]: highlightedIndex === 0,
})}
>
modules
</button>{' '}
or{' '}
<button
{...getItemProps({
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
})}
className={classnames('btn btn-inline', {
[styles.selected]: highlightedIndex === 1,
})}
>
venues
</button>
</p>
<div className={styles.selectListContainer}>
<div className={styles.selectList}>
<div className={styles.noResults}>
<Help />
<p>
No results found for{' '}
<strong className={styles.searchTerm}>&quot;{inputValue}&quot;</strong>
</p>
<p>
Try searching all{' '}
<button
{...getItemProps({
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
})}
className={classnames('btn btn-inline', {
[styles.selected]: highlightedIndex === 0,
})}
>
modules
</button>{' '}
or{' '}
<button
{...getItemProps({
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
})}
className={classnames('btn btn-inline', {
[styles.selected]: highlightedIndex === 1,
})}
>
venues
</button>
</p>
</div>
</div>
</div>
</div>
Expand All @@ -166,80 +168,84 @@ class GlobalSearch extends Component<Props, State> {
<div className={styles.container}>
{searchForm}

<div className={styles.selectList}>
{hasModules && (
<Fragment>
<div
{...getItemProps({
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
})}
className={classnames(styles.selectHeader, {
[styles.selected]: highlightedIndex === 0,
})}
>
<span className={styles.headerName}>Modules</span>
<span className="btn-svg">
View All <ChevronRight className={styles.svg} />
</span>
</div>

{modules.map((module, index) => (
{/* Wrap select list in absolute-positioned container to fix macOS Safari scrolling perf */}
<div className={styles.selectListContainer}>
<div className={styles.selectList}>
{hasModules && (
<Fragment>
<div
{...getItemProps({
key: module.ModuleCode,
item: [MODULE_RESULT, module],
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
})}
className={classnames(styles.option, {
[styles.selected]: highlightedIndex === index + 1,
className={classnames(styles.selectHeader, {
[styles.selected]: highlightedIndex === 0,
})}
>
<span>{highlight(`${module.ModuleCode} ${module.ModuleTitle}`, tokens)}</span>

<span className={styles.semesters}>
{module.Semesters.sort().map((semester) => (
<span
className={classnames('badge', BADGE_COLOR[semester])}
title={config.semesterNames[semester]}
>
{config.shortSemesterNames[semester]}
</span>
))}
<span className={styles.headerName}>Modules</span>
<span className="btn-svg">
View All <ChevronRight className={styles.svg} />
</span>
</div>
))}
</Fragment>
)}
{hasVenues && (
<Fragment>
<div
{...getItemProps({
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
})}
className={classnames(styles.selectHeader, {
[styles.selected]: highlightedIndex === venueHeaderIndex,
})}
>
<span className={styles.headerName}>Venues</span>
<span className="btn-svg">
View All <ChevronRight className={styles.svg} />
</span>
</div>

{venues.map((venue, index) => (
{modules.map((module, index) => (
<div
{...getItemProps({
key: module.ModuleCode,
item: [MODULE_RESULT, module],
})}
className={classnames(styles.option, {
[styles.selected]: highlightedIndex === index + 1,
})}
>
<span>{highlight(`${module.ModuleCode} ${module.ModuleTitle}`, tokens)}</span>

<span className={styles.semesters}>
{module.Semesters.sort().map((semester) => (
<span
key={semester}
className={classnames('badge', BADGE_COLOR[semester])}
title={config.semesterNames[semester]}
>
{config.shortSemesterNames[semester]}
</span>
))}
</span>
</div>
))}
</Fragment>
)}
{hasVenues && (
<Fragment>
<div
{...getItemProps({
key: venue,
item: [VENUE_RESULT, venue],
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
})}
className={classnames(styles.option, {
[styles.selected]: highlightedIndex === venueItemOffset + index,
className={classnames(styles.selectHeader, {
[styles.selected]: highlightedIndex === venueHeaderIndex,
})}
>
<span>{highlight(venue, tokens)}</span>
<span className={styles.headerName}>Venues</span>
<span className="btn-svg">
View All <ChevronRight className={styles.svg} />
</span>
</div>
))}
</Fragment>
)}

{venues.map((venue, index) => (
<div
{...getItemProps({
key: venue,
item: [VENUE_RESULT, venue],
})}
className={classnames(styles.option, {
[styles.selected]: highlightedIndex === venueItemOffset + index,
})}
>
<span>{highlight(venue, tokens)}</span>
</div>
))}
</Fragment>
)}
</div>
</div>
</div>
);
Expand Down
8 changes: 5 additions & 3 deletions www/src/js/views/layout/GlobalSearch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,19 +73,21 @@ $icon-dist-lg: $input-width-open-lg - $input-width;
transform: translate(0);
}

.selectList {
composes: list-unstyled scrollable-y from global;
.selectListContainer {
position: absolute;
top: $navbar-height - 0.5rem;
right: 0;
z-index: $module-select-z-index;
max-height: $dropdown-height;
color: var(--body-color);
border: $input-btn-border-width solid $input-border-color;
border-width: 0 $input-btn-border-width $input-btn-border-width;
border-radius: 0 0 $btn-border-radius $btn-border-radius;
background: var(--body-bg);
}

.selectList {
composes: list-unstyled scrollable-y from global;
max-height: $dropdown-height;
@media (max-height: $dropdown-height + 5rem) {
max-height: calc(90vh - #{$navbar-height});
}
Expand Down
6 changes: 3 additions & 3 deletions www/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6969,9 +6969,9 @@ react-hot-loader@^3.1.3:
redbox-react "^1.3.6"
source-map "^0.6.1"

react-modal@^3.1.7:
version "3.1.7"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.7.tgz#21feb937c95cd722bf2d375cada751fdc8189c0e"
react-modal@^3.1.10:
version "3.1.10"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.10.tgz#8898b5cc4ebba78adbb8dea4c55a69818aa682cc"
dependencies:
exenv "^1.2.0"
prop-types "^15.5.10"
Expand Down