diff --git a/src/App.css b/src/App.css index b49ed393..2d03aa84 100644 --- a/src/App.css +++ b/src/App.css @@ -54,3 +54,9 @@ html { ::-webkit-resizer { background-color: #666; } + +@media (min-width: 980px) { + #main-searchbar { + display: none; + } +} diff --git a/src/components/CaptureTheFlag/CTFElements.jsx b/src/components/CaptureTheFlag/CTFElements.jsx index 8afb1d08..9eab3056 100644 --- a/src/components/CaptureTheFlag/CTFElements.jsx +++ b/src/components/CaptureTheFlag/CTFElements.jsx @@ -241,7 +241,7 @@ export const SearchContainer = styled.div` /* margin: 10px 0; */ background: #090909; border-radius: 4px; - padding: 25px; + padding: 5px; `; export const SearchDifficulty = styled.div` diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx index 52091b67..f0f38c59 100644 --- a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx +++ b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx @@ -27,6 +27,11 @@ export const SearchBox = styled.div` align-items: center; background: #252525; border-radius: 5px; + width: auto; + + @media screen and (width <= 980px) { + width: 100%; + } `; export const SearchIcon = styled.div` diff --git a/src/components/Common/SocialSidebar/Sidebar.jsx b/src/components/Common/SocialSidebar/Sidebar.jsx index e6ee9623..92d55871 100644 --- a/src/components/Common/SocialSidebar/Sidebar.jsx +++ b/src/components/Common/SocialSidebar/Sidebar.jsx @@ -22,6 +22,7 @@ const Sidebar = ({ data, selectedTags, setSelectedTags, + hideNav = false, }) => { const renderFollowingFilterButtons = () => ( <> @@ -87,7 +88,7 @@ const Sidebar = ({ ); return ( - + {sidebarType === "blogs" && (
{user?.role === "admin" || user?.role === "team" ? ( diff --git a/src/components/Common/SocialSidebar/SidebarElements.jsx b/src/components/Common/SocialSidebar/SidebarElements.jsx index ed13e6c9..e524aa30 100644 --- a/src/components/Common/SocialSidebar/SidebarElements.jsx +++ b/src/components/Common/SocialSidebar/SidebarElements.jsx @@ -13,6 +13,14 @@ export const SidebarContainer = styled.div` color: #fff; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); border-radius: 10px; + + @media screen and (width <= 1280px) { + min-width: 80%; + } + + @media screen and (width <= 1080px) { + width: 96%; + } `; export const FilterButton = styled.button` diff --git a/src/components/Feeds/Feeds.jsx b/src/components/Feeds/Feeds.jsx index d31dfa57..944d4800 100644 --- a/src/components/Feeds/Feeds.jsx +++ b/src/components/Feeds/Feeds.jsx @@ -100,6 +100,7 @@ const Feeds = () => { data={feeds} selectedTags={selectedTags} setSelectedTags={setSelectedTags} + hideNav={true} /> diff --git a/src/components/Feeds/FeedsElements.jsx b/src/components/Feeds/FeedsElements.jsx index ab68c496..517519ff 100644 --- a/src/components/Feeds/FeedsElements.jsx +++ b/src/components/Feeds/FeedsElements.jsx @@ -8,6 +8,11 @@ export const FeedsContainer = styled.div` display: flex; flex-direction: row; justify-content: space-around; + + @media screen and (width <= 1160px) { + gap: 1%; + } + `; export const MiddleSection = styled.div` diff --git a/src/components/Feeds/PostForm/ModifyFeed.jsx b/src/components/Feeds/PostForm/ModifyFeed.jsx index 77503f8b..d7d8690f 100644 --- a/src/components/Feeds/PostForm/ModifyFeed.jsx +++ b/src/components/Feeds/PostForm/ModifyFeed.jsx @@ -9,6 +9,9 @@ import { cdnContentImagesUrl } from "src/features/apiUrl"; import { CircleSpinner } from "react-spinners-kit"; import { toast } from "react-toastify"; import { ImageInput, ImagePreview, useUploadImages } from "src/components/Common/ImageUpload"; +import { SearchContainer } from "src/components/CaptureTheFlag/CTFElements"; +import SearchInputBox from "src/components/Common/SearchInputBox"; +import { RouterNavCreateButtonLink } from "src/components/Header/Navbar/NavbarElements"; const MAX_IMAGE_SIZE_BYTES = 1048576; const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" }) => { @@ -37,10 +40,14 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" }) const [content, setContent] = useState(editFeed?.content || ""); const [tags, setTags] = useState(editFeed?.tags || []); const [showAuthPopup, setShowAuthPopup] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); const MAX_CHARACTER_COUNT = 1500; const [remainingCharacters, setRemainingCharacters] = useState(MAX_CHARACTER_COUNT); + const handleSearchTermChange = (event) => { + setSearchTerm(event.target.value); + }; useEffect(() => { setRemainingCharacters(MAX_CHARACTER_COUNT - content.length); @@ -98,65 +105,87 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" }) const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id); const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || editFeed?.avatar || "avatar.png")); return ( - onImageDrop(e, true, 4)} onDragOver={onImageDragOver}> - {!editFeed && ( - - - - )} - -
- onImagePaste(e, true, 4)} + <> + + onImageDrop(e, true, 4)} onDragOver={onImageDragOver}> + {!editFeed && ( + + + + )} + +
+ onImagePaste(e, true, 4)} + /> +

+ {remainingCharacters < 0 ? "-" : ""} {Math.abs(remainingCharacters)} +

+
+ + + + {showPostTags && } + + + onImageChange(e, true, 4)} + labelStyles={{ background: "transparent", border: "transparent", padding: "0" }} + filesName={imagesName} + multiple + key={editFeed ? `${editFeed._id}feedImage` : "feedImage"} + /> + + {isFeedLoading ? ( + + + + ) : ( + {editFeed ? "Update" : "Create"} + )} + +
+ + {/* Render the AuthPopup component */} + {showAuthPopup && setShowAuthPopup(false)} />} +
+ ); }; diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx index fb0542f2..f591e9c7 100644 --- a/src/components/Header/Navbar/NavbarElements.jsx +++ b/src/components/Header/Navbar/NavbarElements.jsx @@ -220,6 +220,11 @@ export const RouterNavCreateButtonLink = styled(Link)` font-size: 12px; } + @media screen and (width <= 1280px) { + min-width: 10px; + font-size: 14px; + } + /* @media screen and (max-width: 1150px) { display: none; } diff --git a/src/index.css b/src/index.css index 3c28334f..2049d17f 100644 --- a/src/index.css +++ b/src/index.css @@ -20,3 +20,9 @@ code { background-color: #ff6b08; color: #000000; } + +@media (width <= 980px) { + .hide-nav { + display: none !important; + } +}