Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Commit

Permalink
style: improved responsiveness of user pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SHUHAIB-T
SHUHAIB-T committed Mar 10, 2024
1 parent b04344e commit d2b817a
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 113 deletions.
2 changes: 1 addition & 1 deletion client/src/Services/communityService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const getRecentDiscussions = async (page) => {

export const getCommunity = async function (communityId) {
try {
const response = await thaliaAPI.get(`/community/get-details/${communityId}`);
const response = await thaliaAPI.get(`/community/get_details/${communityId}`);
return response;
} catch (error) {
return error
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/UserHome/UserHome.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ export default function UserHome() {
className="absolute opacity-10 top-0 hidden md:inline-block md:w-full z-10"
alt=""
/>
<div className="fixed chat-didi flex justify-center right-7 md:bottom-10 md:right-10 z-20">
<div className="fixed chat-didi flex justify-center right-7 md:bottom-24 md:right-14 z-20">
<div className="bg-text my-tooltip mr-[-25px] pr-9 px-3 py-1 rounded-s-full">
<h1 className="text-secondary mt-2 font-semibold">
<h1 className="text-secondary mt-3 font-semibold">
Chat with Didi
</h1>
</div>
<div
onClick={() => setOpenModal(true)}
className="w-12 h-12 cursor-pointer rounded-full flex items-center justify-center bg-text"
className="w-14 h-14 cursor-pointer rounded-full flex items-center justify-center bg-text"
>
<img src={Chat} alt="" className="w-8 z-40 " />
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ViewMarkModal/ViewMarkModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ViewMarkModal({
>
<Modal.Header>{content.name}</Modal.Header>
<Modal.Body>
<ReactMarkdown className="prose lg:prose-xl">
<ReactMarkdown className="prose md:ps-32 lg:prose-xl">
{content.content}
</ReactMarkdown>
</Modal.Body>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/community/NewDiscussion/NewDiscussion.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function NewDiscussion({
onClose={() => setOpenModal(false)}
popup
>
<Modal.Body className="bg-gray-800 border text-white">
<Modal.Body className="bg-gray-800 rounded-md shadow-xl text-white">
{isLoading ? (
<Loader />
) : (
Expand Down
197 changes: 96 additions & 101 deletions client/src/pages/UserPages/Community/Community.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,114 +11,109 @@ import NewCommunity from "../../../components/community/NewCommunity";
import RecentDiscussions from "../../../components/community/RecentDiscussions/RecentDiscussions";
import YourCommunity from "../../../components/community/YourCommunity/YourCommunity";
import DiscoverCommunity from "../../../components/community/DiscoverCommunity/DiscoverCommunity";
import LayersIcon from "@mui/icons-material/Layers";

export default function Community() {
const { tab } = useParams();
const navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState("hidden");
const [currentTab, setCurrentTab] = useState(tab.toUpperCase());
const [showNewCommunity, setShowNewCommunity] = useState(false);
return (
<div className="community bg-background">
<NewCommunity
showModal={showNewCommunity}
setShowModal={setShowNewCommunity}
/>
{/* <div className="flex gap-2 col-span-12">
<button
className="p-2 sm:hidden flex rounded-sm mb-3"
onClick={() =>
setShowSidebar(
showSidebar === "block" ? "hidden" : "block"
)
}
>
<MenuIcon />
</button>
<h1
className={`${
showSidebar === "block" ? "hidden" : "block"
} sm:hidden text-xl mt-2`}
>
Community
</h1>
</div> */}
<section
className={`sidebar fixed bg-background h-screen sm:w-96 text-text flex flex-col p-5 py-8 ${showSidebar} sm:block`}
>
<h1 className="text-2xl mb-10">Community</h1>
{/* <div className="search my-5">
const { tab } = useParams();
const navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState("hidden");
const [currentTab, setCurrentTab] = useState(tab.toUpperCase());
const [showNewCommunity, setShowNewCommunity] = useState(false);
return (
<div className="community bg-background">
<NewCommunity
showModal={showNewCommunity}
setShowModal={setShowNewCommunity}
/>
<div className="flex gap-2 col-span-12">
<button
className="p-2 sm:hidden text-text flex rounded-sm mb-3"
onClick={() =>
setShowSidebar(showSidebar === "block" ? "hidden" : "block")
}
>
<LayersIcon />
</button>
<h1
className={`${
showSidebar === "block" ? "hidden" : "block"
} sm:hidden text-xl mt-2`}
>
Community
</h1>
</div>
<section
className={`sidebar fixed bg-background h-screen w-screen sm:w-96 text-text flex flex-col p-5 py-8 ${showSidebar} sm:block`}
>
<h1 className="text-2xl mb-10">Community</h1>
{/* <div className="search my-5">
<input
type="text"
placeholder="search communities"
className="bg-gray-800 rounded-md w-full"
/>
</div> */}
<div
className="nav flex flex-col gap-3"
onClick={() =>
setShowSidebar(
showSidebar === "block" ? "hidden" : "block"
)
}
>
<div
className={`item hover:bg-gray-800 ${
currentTab === "RECENT_DISCUSSIONS" &&
"bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("RECENT_DISCUSSIONS");
navigate("/community/recent_discussions");
}}
>
<h2 className="text-lg">Recent Discussions</h2>
</div>
<div
className={`item hover:bg-gray-800 ${
currentTab === "DISCOVER" && "bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("DISCOVER");
navigate("/community/discover");
}}
>
<h2 className="text-lg">Discover</h2>
</div>
<div
className={`item hover:bg-gray-800 ${
currentTab === "YOUR_COMMUNITY" &&
"bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("YOUR_COMMUNITY");
navigate("/community/your_community");
}}
>
<h2 className="text-lg">Your Community</h2>
</div>
</div>
<div className="new-community mt-7 px-5 py-3 bg-gray-800 hover:bg-gray-600 cursor-pointer rounded-md">
<button
className="text-lg flex gap-3"
onClick={() => setShowNewCommunity(true)}
>
<div className="text-primary">
<AddCircle />
</div>
Community
</button>
</div>
</section>
<section className="page-body">
{currentTab === "RECENT_DISCUSSIONS" ? (
<RecentDiscussions />
) : currentTab === "YOUR_COMMUNITY" ? (
<YourCommunity />
) : currentTab === "DISCOVER" ? (
<DiscoverCommunity />
) : null}
</section>
<div
className="nav flex flex-col gap-3"
onClick={() =>
setShowSidebar(showSidebar === "block" ? "hidden" : "block")
}
>
<div
className={`item hover:bg-gray-800 ${
currentTab === "RECENT_DISCUSSIONS" && "bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("RECENT_DISCUSSIONS");
navigate("/community/recent_discussions");
}}
>
<h2 className="text-lg">Recent Discussions</h2>
</div>
);
<div
className={`item hover:bg-gray-800 ${
currentTab === "DISCOVER" && "bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("DISCOVER");
navigate("/community/discover");
}}
>
<h2 className="text-lg">Discover</h2>
</div>
<div
className={`item hover:bg-gray-800 ${
currentTab === "YOUR_COMMUNITY" && "bg-gray-800"
} rounded-md p-5 py-3`}
onClick={() => {
setCurrentTab("YOUR_COMMUNITY");
navigate("/community/your_community");
}}
>
<h2 className="text-lg">Your Community</h2>
</div>
</div>
<div className="new-community mt-7 px-5 py-3 bg-gray-800 hover:bg-gray-600 cursor-pointer rounded-md">
<button
className="text-lg flex gap-3"
onClick={() => setShowNewCommunity(true)}
>
<div className="text-primary">
<AddCircle />
</div>
Community
</button>
</div>
</section>
<section className="page-body">
{currentTab === "RECENT_DISCUSSIONS" ? (
<RecentDiscussions />
) : currentTab === "YOUR_COMMUNITY" ? (
<YourCommunity />
) : currentTab === "DISCOVER" ? (
<DiscoverCommunity />
) : null}
</section>
</div>
);
}
6 changes: 3 additions & 3 deletions client/src/pages/UserPages/Community/ViewCommunity.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default function ViewCommunity() {
myCommunity.map((item, index) => {
return (
<div
className={`community-choose-card mb-3 flex gap-3 overflow-hidden items-center ${
className={`community-choose-card justify-center mb-3 flex gap-3 overflow-hidden items-center ${
item._id !== id
? "bg-gray-800"
: "bg-gray-700"
Expand All @@ -156,7 +156,7 @@ export default function ViewCommunity() {
</h1>
)}
</div>
<div className="deatils">
<div className="deatils flex items-center justify-center h-full">
<h1 className="text-lg">
{item.community_name}
</h1>
Expand All @@ -177,7 +177,7 @@ export default function ViewCommunity() {
className="h-14 w-14 rounded-md"
/>
) : (
<h1 className="text-2xl bg-gray-700 px-8 py-3 rounded-md">
<h1 className="text-2xl bg-gray-700 text-text px-8 py-3 rounded-md">
{currentCommunity?.community_name[0].toUpperCase()}
</h1>
)}
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/UserPages/MyBodyPage/MyBodyPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function MyBodyPage() {
{count > 0 && (
<Pagination
currentPage={currentPage}
totalPages={parseInt(count / 10)}
totalPages={Math.ceil(count / 10)}
onPageChange={onPageChange}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/UserPages/MyLawsPage/MyLawsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function MyLawsPage() {
{count > 0 && (
<Pagination
currentPage={currentPage}
totalPages={parseInt(count / 10)}
totalPages={Math.ceil(count / 10)}
onPageChange={onPageChange}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/UserPages/MyMindPage/MyMindPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function MyMindPage() {
{count > 0 && (
<Pagination
currentPage={currentPage}
totalPages={parseInt(count / 10)}
totalPages={Math.ceil(count / 10)}
onPageChange={onPageChange}
/>
)}
Expand Down

0 comments on commit d2b817a

Please sign in to comment.