RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve search for mobile (not fix)

Browse Source
This commit is contained in:
SrGooglo 2023-07-13 17:02:54 +00:00
parent 2a820cface
commit 6e79bd2b85
6 changed files with 100 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app/src/App.jsx
View File

@ -180,6 +180,7 @@ class ComtyApp extends React.Component {
sessionController: this.sessionController,
},
props: {
fillEnd: true,
bodyStyle: {
height: "100%",
}

8
packages/app/src/components/Layout/draggableDrawer/index.jsx
View File

@ -1,6 +1,7 @@
// © Jack Hanford https://github.com/hanford/react-drag-drawer
import React, { Component } from "react"
import { Motion, spring, presets } from "react-motion"
import classnames from "classnames"
import PropTypes from "prop-types"
import document from "global/document"
import Observer from "react-intersection-observer"
@ -329,8 +330,13 @@ export default class DraggableDrawer extends Component {
id={id}
style={containerStyle}
onMouseDown={this.onClickOutside}
className="draggable-drawer"
ref={getContainerRef}
className={classnames(
"draggable-drawer",
{
["fill-end"]: this.props.fillEnd
}
)}
>
<Observer
className={HaveWeScrolled}

37
packages/app/src/components/Layout/draggableDrawer/index.less
View File

@ -15,12 +15,15 @@
z-index: 40;
transition: background-color 0.2s linear;
overflow-y: hidden;
overscroll-behavior: none;
.draggable-drawer_body {
position: absolute;
z-index: 50;
bottom: 0px;
width: 100%;
@ -29,20 +32,21 @@
height: fit-content;
max-height: 90%;
padding: 30px 10px 10px 10px;
background-color: var(--background-color-primary);
padding: 30px 10px 10px 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
z-index: 50;
.dragger-area {
width: 100%;
height: 50px;
position: absolute;
display: flex;
align-items: flex-start;
justify-content: center;
@ -59,12 +63,14 @@
border-radius: 8px;
}
}
}
.draggable-drawer_body {
&::after {
content: "";
display: block;
position: fixed;
position: absolute;
left: 0;
bottom: 0;
@ -79,4 +85,27 @@
transform: translateY(95%);
}
}
&.fill-end {
.draggable-drawer_body {
&::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
z-index: 45;
background-color: var(--background-color-primary);
transform: translateY(95%);
}
}
}
}

4
packages/app/src/components/Searcher/index.jsx
View File

@ -154,7 +154,9 @@ export default (props) => {
if (typeof props.model === "function") {
result = await props.model(value)
} else {
result = await SearchModel.search(value)
result = await SearchModel.search(value, {
limit_per_section: app.isMobile ? 3 : 5
})
}
if (typeof props.onSearchResult === "function") {

52
packages/app/src/components/Searcher/index.less
View File

@ -1,3 +1,53 @@
html {
&.mobile {
.searcher {
display: flex;
width: 100%;
height: 100%;
overflow-y: scroll;
.searcher_results {
display: flex;
width: 100%;
height: 100%;
overflow-y: scroll;
.searcher_results_category {
display: flex;
flex-direction: column;
padding: 0;
gap: 5px;
.searcher_results_category_header {
font-size: 0.6rem;
}
.searcher_results_category_suggestions {
padding: 0 15px;
&#playlists {
display: flex;
flex-direction: column;
padding: 0;
.playlistItem {
width: 100%;
max-width: none;
}
}
}
}
}
}
}
}
.searcher {
position: relative;
@ -14,6 +64,8 @@
.results {
border-radius: 10px;
width: 100%;
overflow-x: hidden;
overflow-y: overlay;
}

8
packages/server/src/controllers/SearchController/endpoints/getSearch.js
View File

@ -6,7 +6,7 @@ export default {
route: "/",
middlewares: ["withOptionalAuthentication"],
fn: async (req, res) => {
const { keywords = "" } = req.query
const { keywords = "", params } = req.query
let suggestions = {}
@ -20,7 +20,7 @@ export default {
{ fullName: { $regex: keywords, $options: "i" } },
]
},
limit: 5,
limit: params.limit_per_section ?? 5,
select: "username fullName avatar verified",
},
{
@ -31,7 +31,7 @@ export default {
{ title: { $regex: keywords, $options: "i" } },
]
},
limit: 5,
limit: params.limit_per_section ?? 5,
},
{
id: "tracks",
@ -43,7 +43,7 @@ export default {
{ album: { $regex: keywords, $options: "i" } },
]
},
limit: 5,
limit: params.limit_per_section ?? 5,
}
]