mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
fix: fix cover image themes sizes issue
This commit is contained in:
Rutik Wankhade
parent
13a8eb1950
commit
28c4aa6daa
@ -41,13 +41,11 @@ const CoverImage = (props) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="md:w-full md:scale-100 scale-50">
|
||||
{selectTheme(theme)} </div>
|
||||
<div className={`border-2 border-gray-50 md:scale-100 scale-50 ${props.platform}`}>
|
||||
{selectTheme(theme)}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default CoverImage;
|
||||
|
||||
@ -2,11 +2,11 @@ import React from 'react';
|
||||
|
||||
|
||||
const BasicTheme = ({ config }) => {
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-white ">
|
||||
<div className={`overflow-y-hidden flex text-gray-800 items-center h-full ${platform} ${pattern} `}
|
||||
<div className=" bg-white w-full h-full ">
|
||||
<div className={`overflow-y-hidden flex text-gray-800 items-center h-full ${pattern} `}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
@ -33,8 +33,8 @@ const BasicTheme = ({ config }) => {
|
||||
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const MobileMockupTheme = ({ config }) => {
|
||||
const { bgColor, platform, title,font } = config;
|
||||
const { bgColor, title, font } = config;
|
||||
|
||||
const [image, setImage] = useState()
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-white">
|
||||
<div className={`bg-white w-full h-full`}>
|
||||
|
||||
|
||||
<div className={`overflow-y-hidden flex flex-row px-10 items-center justify-center rounded px-8 pt-4 ${platform}`}
|
||||
<div className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
|
||||
<h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
|
||||
|
||||
<div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
|
||||
<div className="w-5/12 mx-auto m-4 mt-10 group h-full shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
|
||||
<div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
|
||||
|
||||
<div className="flex mx-auto items-center">
|
||||
|
||||
@ -3,12 +3,12 @@ import React from 'react';
|
||||
|
||||
const ModernTheme = ({ config }) => {
|
||||
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
|
||||
|
||||
return (
|
||||
<div className="w-full p-4 bg-white ">
|
||||
<div className=" overflow-y-hidden w-full flex items-center">
|
||||
<div className={` h-full w-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} ${platform}`}
|
||||
<div className="w-full h-full bg-white ">
|
||||
<div className=" overflow-y-hidden w-full h-full flex items-center">
|
||||
<div className={` h-full w-full p-4 text-gray-800 flex items-center ${pattern} `}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
const OutlineTheme = ({ config }) => {
|
||||
const { title, bgColor, author, icon, font, customIcon, platform } = config;
|
||||
const { title, bgColor, author, icon, font, customIcon } = config;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-white ">
|
||||
<div className="w-full h-full bg-white ">
|
||||
|
||||
|
||||
<div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10 ${platform} `}
|
||||
<div className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const PreviewTheme = ({ config }) => {
|
||||
const { bgColor, platform, title, font } = config;
|
||||
const { bgColor, title, font } = config;
|
||||
|
||||
const [image, setImage] = useState()
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-white">
|
||||
<div className="w-full h-full bg-white">
|
||||
|
||||
|
||||
<div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}
|
||||
<div className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
|
||||
<h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
|
||||
|
||||
<div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white">
|
||||
@ -30,7 +29,6 @@ const PreviewTheme = ({ config }) => {
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{image ?
|
||||
<div className="">
|
||||
<img src={image && image} className="object-cover " alt="preview" />
|
||||
@ -48,13 +46,8 @@ const PreviewTheme = ({ config }) => {
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import unsplash from "../../utils/unsplashConfig";
|
||||
import { ImgContext } from '../../utils/ImgContext';
|
||||
|
||||
const StylishTheme = ({ config }) => {
|
||||
const { title, author, font, icon, customIcon, platform,bgColor } = config;
|
||||
const { title, author, font, icon, customIcon, bgColor } = config;
|
||||
|
||||
// const [image, setImage] = useState({})
|
||||
|
||||
@ -65,14 +65,14 @@ const StylishTheme = ({ config }) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className=" bg-white rounded">
|
||||
<div className=" bg-white w-full h-full">
|
||||
|
||||
|
||||
<div className={` overflow-y-hidden flex flex-col rounded ${platform}`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
<div className={` overflow-y-hidden flex flex-col`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
<div className="flex flex-row items-center bg-white justify-center m-4 ">
|
||||
<div className="flex flex-row items-center bg-white justify-center">
|
||||
|
||||
<div className="h-full w-1/2 bg-white rounded-l-xl">
|
||||
<div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
|
||||
@ -101,11 +101,11 @@ const StylishTheme = ({ config }) => {
|
||||
<div className='relative flex group'>
|
||||
|
||||
<div className="h-96 w-96 ">
|
||||
|
||||
|
||||
|
||||
|
||||
<img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96 " alt="preview" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setUnsplashImage('')}
|
||||
className="absolute top-4 right-2 cursor-pointer">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user