mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Improve template obile styles
This commit is contained in:
austinkelsay
parent
25cd87c188
commit
b7d5c758c7
@ -11,6 +11,7 @@ import { useRouter } from "next/router";
|
||||
import { formatTimestampToHowLongAgo } from "@/utils/time";
|
||||
import { ProgressSpinner } from "primereact/progressspinner";
|
||||
import { Message } from "primereact/message";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import appConfig from "@/config/appConfig";
|
||||
|
||||
@ -21,6 +22,8 @@ export function CourseTemplate({ course }) {
|
||||
const [nAddress, setNAddress] = useState(null);
|
||||
const router = useRouter();
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobile = windowWidth < 768;
|
||||
|
||||
useEffect(() => {
|
||||
if (zaps.length > 0) {
|
||||
@ -75,7 +78,7 @@ export function CourseTemplate({ course }) {
|
||||
</div>
|
||||
</CardHeader>
|
||||
</div>
|
||||
<CardContent className="pt-6 pb-2 w-full flex flex-row justify-between items-center">
|
||||
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{course && course.topics && course.topics.map((topic, index) => (
|
||||
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
|
||||
@ -85,7 +88,7 @@ export function CourseTemplate({ course }) {
|
||||
</div>
|
||||
<p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
|
||||
</CardContent>
|
||||
<CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center"
|
||||
<CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
display: "-webkit-box",
|
||||
@ -99,9 +102,9 @@ export function CourseTemplate({ course }) {
|
||||
<div className="flex flex-col items-end">
|
||||
{
|
||||
course?.price && course?.price > 0 ? (
|
||||
<Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${course.price} sats`} />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${course.price} sats`} />
|
||||
) : (
|
||||
<Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,7 @@ import { formatTimestampToHowLongAgo } from "@/utils/time";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { Tag } from "primereact/tag";
|
||||
import { Message } from "primereact/message";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import appConfig from "@/config/appConfig";
|
||||
|
||||
@ -19,6 +20,8 @@ export function DocumentTemplate({ document }) {
|
||||
const [zapAmount, setZapAmount] = useState(0);
|
||||
const router = useRouter();
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobile = windowWidth < 768;
|
||||
|
||||
useEffect(() => {
|
||||
if (document && document?.id) {
|
||||
@ -64,7 +67,7 @@ export function DocumentTemplate({ document }) {
|
||||
</div>
|
||||
</CardHeader>
|
||||
</div>
|
||||
<CardContent className="pt-6 pb-2 w-full flex flex-row justify-between items-center">
|
||||
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{document?.topics?.map((topic, index) => (
|
||||
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
|
||||
@ -74,11 +77,12 @@ export function DocumentTemplate({ document }) {
|
||||
</div>
|
||||
<p className="font-bold text-gray-300 min-w-[12%]">{document?.readTime || "5 min"} read</p>
|
||||
</CardContent>
|
||||
<CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center" style={{
|
||||
overflow: "hidden",
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: "2"
|
||||
<CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: "2"
|
||||
}}>
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
{(document.summary || document.description)?.split('\n').map((line, index) => (
|
||||
@ -87,9 +91,9 @@ export function DocumentTemplate({ document }) {
|
||||
<div className="flex flex-col items-end">
|
||||
{
|
||||
document?.price && document?.price > 0 ? (
|
||||
<Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${document.price} sats`} />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${document.price} sats`} />
|
||||
) : (
|
||||
<Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,7 @@ import { useImageProxy } from "@/hooks/useImageProxy";
|
||||
import { useRouter } from "next/router";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { formatTimestampToHowLongAgo } from "@/utils/time";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import { Tag } from "primereact/tag";
|
||||
import { Message } from "primereact/message";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
@ -19,8 +20,11 @@ export function VideoTemplate({ video }) {
|
||||
const [zapAmount, setZapAmount] = useState(0);
|
||||
const [nAddress, setNAddress] = useState(null);
|
||||
const router = useRouter();
|
||||
const windowWidth = useWindowWidth();
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
|
||||
const isMobile = windowWidth < 768;
|
||||
|
||||
useEffect(() => {
|
||||
if (video && video?.pubkey && video?.kind && video?.id) {
|
||||
const addr = nip19.naddrEncode({
|
||||
@ -65,7 +69,7 @@ export function VideoTemplate({ video }) {
|
||||
</div>
|
||||
</CardHeader>
|
||||
</div>
|
||||
<CardContent className="pt-6 pb-2">
|
||||
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{video?.topics?.map((topic, index) => (
|
||||
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
|
||||
@ -75,7 +79,7 @@ export function VideoTemplate({ video }) {
|
||||
</div>
|
||||
<p className="font-bold text-gray-300 min-w-[12%]">{video?.duration || "5 min"} watch</p>
|
||||
</CardContent>
|
||||
<CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center"
|
||||
<CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
display: "-webkit-box",
|
||||
@ -89,9 +93,9 @@ export function VideoTemplate({ video }) {
|
||||
<div className="flex flex-col items-end">
|
||||
{
|
||||
video?.price && video?.price > 0 ? (
|
||||
<Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${video.price} sats`} />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${video.price} sats`} />
|
||||
) : (
|
||||
<Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
<Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user