Fixed small issues with docs and search.

backend/go-app/go.mod

@@ -2,7 +2,7 @@ module main
 
 go 1.16
 
-replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
+//replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
 
 //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
 //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch
@@ -24,7 +24,7 @@ require (
 	github.com/h2non/filetype v1.1.3
 	github.com/nirasan/go-oauth-pkce-code-verifier v0.0.0-20170819232839-0fbfe93532da // indirect
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.2.68
+	github.com/shuffle/shuffle-shared v0.2.69
 	go4.org v0.0.0-20201209231011-d4a079459e60 // indirect
 	golang.org/x/crypto v0.0.0-20220112180741-5e0467b6c7ce
 	google.golang.org/api v0.65.0

frontend/src/components/AppGrid.jsx

@@ -301,7 +301,7 @@ const AppGrid = props => {
 				  <Configure clickAnalytics />
 				</InstantSearch>
 				{showSuggestion === true ? 
-					<div style={{paddingTop: 100, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
+					<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
 						<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
 							Can't find what you're looking for? 
 						</Typography>

frontend/src/components/CreatorGrid.jsx

@@ -38,7 +38,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e52
 const CreatorGrid = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs }  = props
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
-	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
+	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	const theme = useTheme();
 	//const [apps, setApps] = React.useState([]);
 	//const [filteredApps, setFilteredApps] = React.useState([]);
@@ -153,9 +153,15 @@ const CreatorGrid = props => {
 				{hits.map((data, index) => {
 					workflowDelay += 50
 
+					if (counted === 12/xs*rowHandler) {
+						return null
+					}
+
+					counted += 1
+
 					return (
 						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-							<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}>
+							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px" }}>
 								<Card>
 						  		<CardActionArea component={Link} to={"/creators/"+data.username} style={{padding: "5px 10px 5px 10px", display: "flex"}}>
 										<CardContent sx={{ flex: '1 0 auto', minWidth: 160, maxWidth: 160, overflow: "hidden", padding: 0, }}>
@@ -188,7 +194,7 @@ const CreatorGrid = props => {
 				<CustomHits hitsPerPage={5}/>
 			</InstantSearch>
 			{showSuggestion === true ? 
-				<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 100, textAlign: "center",}}>
+				<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 50, textAlign: "center",}}>
 					<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
 						Can't find what you're looking for? 
 					</Typography>
@@ -221,7 +227,7 @@ const CreatorGrid = props => {
 							}}
 							color="primary"
 							fullWidth={true}
-							placeholder="What apps do you want to see?"
+							placeholder="What are we missing?"
 							type=""
 						  id="standard-required"
 							margin="normal"

frontend/src/components/DocsGrid.jsx

@@ -133,7 +133,6 @@ const DocsGrid = props => {
 	var workflowDelay = -50
 	const Hits = ({ hits }) => {
 		const [mouseHoverIndex, setMouseHoverIndex] = useState(-1) 
-		var counted = 0
 		//console.log(hits)
 		//var curhits = hits
 		//if (hits.length > 0 && defaultApps.length === 0) {
@@ -146,6 +145,7 @@ const DocsGrid = props => {
 		//	setInnerHits(hits)
 		//}
 
+		var counted = 0
 		return (
 			<List>
 				{hits.map((data, index) => {
@@ -166,21 +166,21 @@ const DocsGrid = props => {
 						minWidth: "100%", 
 					}
 
-					//if (counted === 12/xs*rowHandler) {
+					if (counted >= 12/xs*rowHandler) {
-					//	return null
+						return null
-					//}
+					}
-
-					console.log("DATA: ", data)
 
 					counted += 1
+
 					var name = data.name === undefined ? 
 							data.filename.charAt(0).toUpperCase() + data.filename.slice(1).replaceAll("_", " ") + " - " + data.title : 
 							(data.name.charAt(0).toUpperCase()+data.name.slice(1)).replaceAll("_", " ")
 
-					if (name.length > 100) {
+					if (name.length > 96) {
-						name = name.slice(0, 100)+"..."
+						name = name.slice(0, 96)+"..."
 					}
 
+					//const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
 					const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
 					const baseImage = <PolymerIcon /> 
 					const avatar = data.image_url === undefined ? 
@@ -282,7 +282,7 @@ const DocsGrid = props => {
 					<CustomHits hitsPerPage={5}/>
 				</InstantSearch>
 				{showSuggestion === true ? 
-					<div style={{paddingTop: 100, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
+					<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
 						<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
 							Can't find what you're looking for? 
 						</Typography>
@@ -315,7 +315,7 @@ const DocsGrid = props => {
 								}}
 								color="primary"
 								fullWidth={true}
-								placeholder="What apps do you want to see?"
+								placeholder="What are we missing?"
 								type=""
 							  id="standard-required"
 								margin="normal"

frontend/src/components/WorkflowGrid.jsx

@@ -31,7 +31,7 @@ const AppGrid = props => {
     window.location.host === "shuffler.io";
 
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
-	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
+	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	const theme = useTheme();
 	//const [apps, setApps] = React.useState([]);
 	//const [filteredApps, setFilteredApps] = React.useState([]);
@@ -227,15 +227,20 @@ const AppGrid = props => {
 		const [mouseHoverIndex, setMouseHoverIndex] = useState(-1) 
 		var counted = 0
 
-
 		return (
       <Grid container spacing={4} style={paperAppContainer}>
 				{hits.map((data, index) => {
 					workflowDelay += 50
 
+					if (counted === 12/xs*rowHandler) {
+						return null
+					}
+
+					counted += 1
+
 					return (
 						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-							<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}>
+							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px" }}>
 								<WorkflowPaper key={index} data={data} />
 							</Grid>
 						</Zoom>
@@ -287,7 +292,7 @@ const AppGrid = props => {
 				<CustomHits hitsPerPage={5}/>
 			</InstantSearch>
 			{showSuggestion === true ? 
-				<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 100, textAlign: "center",}}>
+				<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 0, textAlign: "center",}}>
 					<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
 						Can't find what you're looking for? 
 					</Typography>

frontend/src/views/Docs.jsx

@@ -25,8 +25,10 @@ import {
 } from "@material-ui/icons";
 
 const Body = {
-  maxWidth: 1000,
+  //maxWidth: 1000,
-  minWidth: 768,
+  //minWidth: 768,
+  maxWidth: "100%",
+  minWidth: "100%",
   margin: "auto",
   display: "flex",
   height: "100%",
@@ -108,8 +110,8 @@ const Docs = (defaultprops) => {
   };
 
   const SideBar = {
-    maxWidth: 250,
+    minWidth: 250,
-    flex: 1,
+    maxWidth: 300,
     position: "sticky",
 		top: 100,
 		maxHeight: "83vh",
@@ -346,11 +348,12 @@ const Docs = (defaultprops) => {
 
   const markdownStyle = {
     color: "rgba(255, 255, 255, 0.65)",
-    flex: "1",
     maxWidth: mobile ? "100%" : 750,
     overflow: "hidden",
     paddingBottom: 100,
-  	marginLeft: mobile ? 0 : 50,
+		maxWidth: 750,
+		minWidth: 750,
+		margin: "auto",
   };
 
   function OuterLink(props) {
@@ -768,6 +771,7 @@ const Docs = (defaultprops) => {
             id="markdown_wrapper"
             escapeHtml={false}
             source={data}
+						style={{marginRight: 150}}
             renderers={{
               link: OuterLink,
               image: Img,

frontend/src/views/Search.jsx

@@ -30,29 +30,29 @@ const bodyDivStyle = {
 	overflowX: "hidden",
 }
 
-const boxStyle = {
-	color: "white",
-	flex: "1",
-	marginLeft: 10,
-	marginRight: 10,
-	paddingLeft: 30,
-	paddingRight: 30,
-	paddingBottom: 30,
-	paddingTop: 30,
-	display: "flex", 
-	flexDirection: "column",
-	overflowX: "hidden",
-	minHeight: 400,
-}
-
 // Should be different if logged in :|
 const Search = (props) => {
-  const { globalUrl, isLoaded, serverside, userdata } = props;
+  const { globalUrl, isLoaded, serverside, userdata, hidemargins, } = props;
 	let navigate = useNavigate();
 
   const [curTab, setCurTab] = useState(0);
   const iconStyle = { marginRight: 10 };
 
+	const boxStyle = {
+		color: "white",
+		flex: "1",
+		marginLeft: 10,
+		marginRight: 10,
+		paddingLeft: 30,
+		paddingRight: 30,
+		paddingBottom: 30,
+		paddingTop: hidemargins === true ? 0 : 30,
+		display: "flex", 
+		flexDirection: "column",
+		overflowX: "hidden",
+		minHeight: 400,
+	}
+
 	const views = {
     0: "apps",
     1: "workflows",
@@ -62,7 +62,6 @@ const Search = (props) => {
 
 	const setConfig = (event, inputValue) => {
 		const newValue = parseInt(inputValue)
-		console.log("NEW: ", newValue)
 
     setCurTab(newValue)
     if (newValue === 0) {
@@ -86,7 +85,10 @@ const Search = (props) => {
 			extraQ = "&q="+foundQuery
 		}
 
-		navigate(`/search?tab=${views[newValue]}`+extraQ)
+	
+		if ((serverside === false || serverside === undefined) && window.location.pathname.includes("/search")) {
+			navigate(`/search?tab=${views[newValue]}`+extraQ)
+		}
   }
 
 	useEffect(() => {
@@ -114,10 +116,10 @@ const Search = (props) => {
 
 	// Random names for type & autoComplete. Didn't research :^)
 	const landingpageDataBrowser = 
-		<div style={{paddingBottom: 100, color: "white", backgroundColor: theme.palette.surfacColor}}>
+		<div style={{paddingBottom: hidemargins === true ? 0 : 100, color: "white", backgroundColor: theme.palette.surfacColor}}>
 			<div style={boxStyle}>
 				<Tabs
-					style={{width: 610, margin: "auto", marginTop: 25, }}
+					style={{width: 610, margin: "auto", marginTop: hidemargins === true ? 0 : 25, }}
 					value={curTab}
 					indicatorColor="primary"
 					textColor="secondary"
@@ -152,10 +154,10 @@ const Search = (props) => {
 					<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				:
 				curTab === 2 ?
-					<DocsGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
+					<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				curTab === 3 ?
-					<CreatorGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
+					<CreatorGrid maxRows={3} parsedXs={4} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				null}
 			</div>