Fix ios issue with gap and dropdown

This commit is contained in:
MD. Ariful Alam
2021-08-28 23:09:55 +06:00
parent d189751f9a
commit a40d4453f9
4 changed files with 158 additions and 106 deletions

View File

@@ -10,7 +10,7 @@ const Skill = () => {
for (let index = 0; index < 12; index++) {
array.push((
<div key={index}>
{skeleton({ width: 'w-16', height: 'h-4' })}
{skeleton({ width: 'w-16', height: 'h-4', className: 'm-1' })}
</div>
))
}
@@ -24,16 +24,18 @@ const Skill = () => {
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
<div className="card shadow-lg compact bg-base-100">
<div className="card-body">
<div className="inline-flex gap-2 flex-wrap p-3">
{
loading ? renderSkeleton() : (
config.skills.map((skill, index) => (
<div key={index} className="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
{skill}
</div>
))
)
}
<div className="p-3 flow-root">
<div className="-m-1 flex flex-wrap">
{
loading ? renderSkeleton() : (
config.skills.map((skill, index) => (
<div key={index} className="m-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
{skill}
</div>
))
)
}
</div>
</div>
</div>
</div>

View File

@@ -42,13 +42,13 @@ const ThemeChanger = () => {
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" />
</svg>
</div>
<div className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-52 rounded-b-box bg-base-200 text-base-content">
<div tabIndex={0} className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-52 rounded-b-box bg-base-200 text-base-content">
<ul className="p-4 menu compact">
{
config.themeConfig.themes.map((item, index) => (
<li key={index}>
<a
href="/#"
href="/"
onClick={(e) => changeTheme(e, item)}
className={`${theme === item ? 'active' : ''}`}
>