Merge pull request #154 from skni-kod/issue-153

Issue 153
skni-kod · Dec 11, 2024 · 93c1324 · 93c1324
2 parents 845f7aa + 1a73916
commit 93c1324
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 31 deletions.
diff --git a/src/components/common/page_content/sort_and_result/ResultCount.tsx b/src/components/common/page_content/sort_and_result/ResultCount.tsx
@@ -1,7 +1,7 @@
 const ResultCount = ({ value }: { value: number | undefined }) => {
 	return (
 		<div>
-			Znaleziono <span className="text-sky-500">{value ? value : 0}</span> elementów
+			Znalezione elementy: <span className="text-sky-500">{value ? value : 0}</span>
 		</div>
 	);
 };

diff --git a/src/components/layout/PageContent.tsx b/src/components/layout/PageContent.tsx
@@ -11,7 +11,7 @@ interface PageProps extends ComponentParentProps {
 
 export default function PageContent({ headerValue, noHeader = false, noContainer = false, children }: PageProps) {
 	const contentClasses = `text-secondary ${noHeader ? '' : ' pt-2'}`;
-	const headerClasses = `text-secondary text-semibold w-full text-4xl${noHeader ? '' : ' pb-8'}`;
+	const headerClasses = `text-secondary text-semibold w-full text-2xl xs:text-4xl ${noHeader ? '' : ' pb-8'}`;
 
 	return (
 		<Container clear={noContainer}>

diff --git a/src/components/materials/add_grade_modal/AddGradeMaterialModal.tsx b/src/components/materials/add_grade_modal/AddGradeMaterialModal.tsx
@@ -71,7 +71,7 @@ export default function AddGradeMaterialModal({
 	return (
 		<>
 			{isOpen && (
-				<Modal onClose={handleClose} className="max-w-xs xs:w-full">
+				<Modal onClose={handleClose} className="h-fit w-[90%] sm:w-2/3">
 					<div className="w-full text-center">
 						<h3 className="text-3xl font-semibold text-secondary">{getModalHeader()}</h3>
 					</div>

diff --git a/src/components/materials/add_grade_modal/stages/AddGrade.tsx b/src/components/materials/add_grade_modal/stages/AddGrade.tsx
@@ -1,15 +1,24 @@
+'use client';
 import React from 'react';
 import { Rating } from 'react-simple-star-rating';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 export default function AddGrade({ rating, onChange }: { rating: number; onChange: (rating: number) => void }) {
+	const rwd = useMediaQuery('(min-width:400px)');
+
 	const handleRatingClick = (rate: number) => {
 		onChange(rate);
 	};
 
 	return (
 		<div className="flex w-full flex-col gap-4">
 			<div className="flex items-center justify-center">
-				<Rating initialValue={rating} SVGstyle={{ display: 'inline' }} size={72} onClick={handleRatingClick} />
+				<Rating
+					initialValue={rating}
+					SVGstyle={{ display: 'inline' }}
+					size={rwd ? 72 : 52}
+					onClick={handleRatingClick}
+				/>
 			</div>
 
 			<div className="text-center text-secondary">{rating > 0 && `Wybrana ocena: ${rating}`}</div>

diff --git a/src/components/materials/add_modal/AddMaterialModal.tsx b/src/components/materials/add_modal/AddMaterialModal.tsx
@@ -68,17 +68,6 @@ export default function AddMaterialModal({ isOpen, onClose }: { isOpen: boolean;
 		}
 	};
 
-	const getModalSize = () => {
-		switch (stage) {
-			case Stage.SECTION:
-				return 'w-128';
-			case Stage.CATEGORY:
-			case Stage.DETAILS:
-			case Stage.SUMMARY:
-				return 'w-full';
-		}
-	};
-
 	const getModalHeader = () => {
 		switch (stage) {
 			case Stage.SECTION:
@@ -184,7 +173,7 @@ export default function AddMaterialModal({ isOpen, onClose }: { isOpen: boolean;
 	return (
 		<>
 			{isOpen && (
-				<Modal onClose={handleClose} className={`${getModalSize()} max-w-xs xs:w-full`}>
+				<Modal onClose={handleClose} className="h-fit w-[90%] sm:w-2/3">
 					{status === Status.ERROR || !sections ? (
 						<Error />
 					) : (

diff --git a/src/components/materials/common/page_content/MaterialResultsDisplay.tsx b/src/components/materials/common/page_content/MaterialResultsDisplay.tsx
@@ -24,7 +24,6 @@ export default function MaterialResultsDisplay({
 	searchParams,
 	DetailsDropDownComponent,
 }: MaterialResultsDisplayProps) {
-	console.log('searchParams1111111', searchParams);
 	const { data: materials, status, fetch: fetchMaterials } = useFetchState<Pageable<MaterialSearch>>();
 
 	useEffect(() => {
@@ -49,9 +48,9 @@ export default function MaterialResultsDisplay({
 
 	return (
 		<div className="py-2">
-			<div className="flex w-full items-center justify-between px-4 pt-5">
+			<div className="flex w-full flex-col items-center justify-between gap-y-4 px-0 pt-5 md:flex-row md:gap-y-0 md:px-4">
 				<SortOrderBtn activeSort={searchParams.sort} />
-				<ResultCount value={materials.content.length} />
+				{materials.content.length > 0 && <ResultCount value={materials.content.length} />}
 			</div>
 			<MaterialListBlock materials={materials.content} DetailsDropDownComponentProp={DetailsDropDownComponent} />
 			<div className="flex w-full justify-center pt-6">

diff --git a/src/components/materials/common/page_head/FiltersBlock.tsx b/src/components/materials/common/page_head/FiltersBlock.tsx
@@ -12,12 +12,12 @@ type FiltersBlockProps = ComponentParentProps & {
 };
 
 export default function FiltersBlock({ searchParams }: FiltersBlockProps) {
-	const FILTER_FIELD_CLASSNAMES = 'flex items-center gap-2.5 p-2.5 border-2 rounded-2xl overflow-hidden';
+	const FILTER_FIELD_CLASSNAMES = 'flex items-center gap-2.5 p-2.5 border-2 rounded-2xl overflow-hidden w-fit';
 
 	return (
-		<div className="w-full px-4 pt-6">
-			<h3 className="w-full pb-5 text-2xl">{TEXT.WHAT_LOOKING_FOR}</h3>
-			<div className="flex w-full flex-wrap gap-2 leading-none">
+		<div className="w-full px-0 pt-6 sm:px-4">
+			<h3 className="w-full pb-5 text-xl sm:text-2xl">{TEXT.WHAT_LOOKING_FOR}</h3>
+			<div className="flex w-full flex-wrap gap-2 text-sm leading-none xs:text-base">
 				<PhraseField className={FILTER_FIELD_CLASSNAMES} activePhrase={searchParams.fields.phrase} />
 				<MaterialSort className={FILTER_FIELD_CLASSNAMES} activeSort={searchParams.sort} />
 				<GradeField

diff --git a/src/components/materials/section_by_id_page/page_content/MaterialListItem.tsx b/src/components/materials/section_by_id_page/page_content/MaterialListItem.tsx
@@ -1,6 +1,8 @@
+'use client';
 import React, { useState } from 'react';
 import { LuDot } from 'react-icons/lu';
 import { Rating } from 'react-simple-star-rating';
+import { useMediaQuery } from '@mui/material';
 import Image from 'next/image';
 
 import calculateTimeDifference from '../../../../utils/methods/calculateTimeDifference';
@@ -15,6 +17,7 @@ type MaterialUserBlockProps = {
 
 export default function MaterialListItem({ data: material, children }: MaterialUserBlockProps) {
 	const [isOpenDetails, setIsOpenDetails] = useState<boolean>(false);
+	const rwdXS = useMediaQuery('(min-width:530px)');
 
 	const handleOpenDetails = () => {
 		setIsOpenDetails((prevState) => !prevState);
@@ -36,16 +39,24 @@ export default function MaterialListItem({ data: material, children }: MaterialU
 							readonly
 						/>
 					</div>
-					<div className="">{calculateTimeDifference(material.createdDate.toString())}</div>
+					<div className="text-xs 2xs:text-sm xs:text-base">
+						{calculateTimeDifference(material.createdDate.toString())}
+					</div>
 				</div>
 				<div className="flex w-full justify-between gap-6 py-3">
 					<div>
-						<Image src={DocumentsImage.src} alt="Materiał Kodemy" className="aspect-square" width="65" height="65" />
+						<Image
+							src={DocumentsImage.src}
+							alt="Materiał Kodemy"
+							className="aspect-square"
+							width={rwdXS ? '65' : '50'}
+							height={rwdXS ? '65' : '50'}
+						/>
 					</div>
 					<div className="flex-1">
-						<h3 className="text-lg font-semibold text-primary">{material.title}</h3>
-						<div className="pt-1">{material.author?.username}</div>
-						<div className="flex items-center pt-1.5">
+						<h3 className="text-sm font-semibold text-primary 2xs:text-base xs:text-lg">{material.title}</h3>
+						<div className="pt-1 text-xs 2xs:text-sm xs:text-base">{material.author?.username}</div>
+						<div className="flex items-center pt-1.5 text-xs 2xs:text-sm xs:text-base">
 							{material.tags.map(({ name }, index) => (
 								<React.Fragment key={index}>
 									<span>{name}</span>

diff --git a/src/components/materials/section_by_id_page/page_head/CategoryBubbleBtns.tsx b/src/components/materials/section_by_id_page/page_head/CategoryBubbleBtns.tsx
@@ -44,7 +44,7 @@ export default function CategoryBubbleBtns({ sections, activeSectionId, activesC
 	};
 
 	return (
-		<div className="flex w-full flex-wrap items-center gap-4 text-center text-xl text-secondary">
+		<div className="flex w-full flex-wrap items-center gap-2 text-center text-sm text-secondary xs:gap-4 xs:text-xl">
 			{sectionCategories().map(({ id, name }) => (
 				<CategoryBubbleBtn
 					key={id}

diff --git a/src/components/materials/section_by_id_page/page_head/filter_field/PhraseField.tsx b/src/components/materials/section_by_id_page/page_head/filter_field/PhraseField.tsx
@@ -33,7 +33,7 @@ export default function PhraseField({ className, activePhrase }: PhraseFieldProp
 		<div className={className}>
 			<input
 				placeholder={TEXT.INPUT_PHRASE}
-				className="border-0 bg-transparent focus:outline-none"
+				className="w-32 border-0 bg-transparent focus:outline-none xs:w-40"
 				value={phrase}
 				name="phrase"
 				onChange={(e) => setPhrase(e.target.value)}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 import type { Config } from 'tailwindcss';
 
 const config: Config = {