feat: Moved buttons and author for mobile
This commit is contained in:
florian
parent
c7552d8e9e
commit
808a8e84fc
@ -1,8 +1,7 @@
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@ -27,7 +27,7 @@ const DetailsAuthor = ({ profile, npub, setActiveImageIdx }: DetailsAuthorProps)
|
||||
}}
|
||||
></div>
|
||||
|
||||
{profile?.displayName || profile?.name}
|
||||
<div className="author-name">{profile?.displayName || profile?.name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -23,28 +23,6 @@
|
||||
}
|
||||
|
||||
.details {
|
||||
/*
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
font-size: 1.2rem;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
z-index: 500;
|
||||
padding: 2em;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: 90%;
|
||||
height: 85%;
|
||||
*/
|
||||
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
@ -85,9 +63,7 @@
|
||||
padding: 0.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
||||
cursor: pointer;
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
.details-actions > div {
|
||||
@ -102,6 +78,7 @@
|
||||
.details-actions .heart.liked svg {
|
||||
animation: bump 1s ease-in-out;
|
||||
overflow: visible;
|
||||
fill: #ff0000;
|
||||
}
|
||||
|
||||
.details-actions .zap svg {
|
||||
@ -109,7 +86,6 @@
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
cursor: pointer;
|
||||
fill: rgb(228, 185, 104);
|
||||
}
|
||||
|
||||
.details-actions .zap.zapped svg {
|
||||
@ -135,6 +111,7 @@
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
@ -161,7 +138,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.details {
|
||||
overflow-y: scroll;
|
||||
@ -170,7 +146,27 @@
|
||||
padding: 0;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
.details-author {
|
||||
position: absolute;
|
||||
top: -104px;
|
||||
align-items: center;
|
||||
}
|
||||
.details-author .author-image {
|
||||
margin: 0px;
|
||||
}
|
||||
.details-author .author-name {
|
||||
width: 17em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-height: 3em;
|
||||
}
|
||||
.details-actions {
|
||||
position: fixed;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.details-contents {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
@ -186,28 +182,18 @@
|
||||
-webkit-backdrop-filter: blur(20px) brightness(0.5);
|
||||
background-color: transparent;
|
||||
max-height: none;
|
||||
|
||||
}
|
||||
.detail-description {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
.closeButton {
|
||||
top: 1.5em;
|
||||
.details .closeButton {
|
||||
top: 2em;
|
||||
left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 1em;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@ -54,6 +54,8 @@
|
||||
@media screen and (max-width: 600px) {
|
||||
.imagegrid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
grid-gap: 8px;
|
||||
padding: 8px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
const IconBolt = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
|
||||
<path d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.5L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.5L349.4 44.6z" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="zap" viewBox="0 0 16 20" fill="none">
|
||||
<path
|
||||
d="M8.8333 1.70166L1.41118 10.6082C1.12051 10.957 0.975169 11.1314 0.972948 11.2787C0.971017 11.4068 1.02808 11.5286 1.12768 11.6091C1.24226 11.7017 1.46928 11.7017 1.92333 11.7017H7.99997L7.16663 18.3683L14.5888 9.46178C14.8794 9.11297 15.0248 8.93857 15.027 8.79128C15.0289 8.66323 14.9719 8.54141 14.8723 8.46092C14.7577 8.36833 14.5307 8.36833 14.0766 8.36833H7.99997L8.8333 1.70166Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
const IconHeart = ({ filled }: { filled: boolean }) => {
|
||||
if (filled)
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
|
||||
<path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
|
||||
</svg>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
|
||||
<path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z" />
|
||||
</svg>
|
||||
);
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="heart" viewBox="0 0 20 18" fill="none">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9.99425 3.315C8.32813 1.36716 5.54975 0.843192 3.4622 2.62683C1.37466 4.41048 1.08077 7.39264 2.72012 9.50216C4.08314 11.2561 8.2081 14.9552 9.56004 16.1525C9.7113 16.2865 9.78692 16.3534 9.87514 16.3798C9.95213 16.4027 10.0364 16.4027 10.1134 16.3798C10.2016 16.3534 10.2772 16.2865 10.4285 16.1525C11.7804 14.9552 15.9054 11.2561 17.2684 9.50216C18.9077 7.39264 18.6497 4.39171 16.5263 2.62683C14.4029 0.861954 11.6604 1.36716 9.99425 3.315Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconHeart;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user