seth/ipv4.army
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lint
All checks were successful
Code quality checks / biome (push) Successful in 11s
Details

Browse source
This commit is contained in:
Seth 2025-05-19 01:13:21 -04:00
parent 5d7220f5a8
commit 16ce40d1ec
2 changed files with 78 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
src/front/components/Lanyard/index.module.css
View file

@ -1,110 +1,110 @@
.card { .card {
width: 100%; width: 100%;
} }
.activityCard { .activityCard {
background-color: transparent; background-color: transparent;
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
width: 100% !important; width: 100% !important;
/* Set a max width */ /* Set a max width */
} }
.status { .status {
font-size: 14px; font-size: 14px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
/* Allow wrapping for smaller screens */ /* Allow wrapping for smaller screens */
} }
.bigImage { .bigImage {
position: relative; position: relative;
width: 120px; width: 120px;
/* Set fixed width for the big image */ /* Set fixed width for the big image */
height: 120px; height: 120px;
/* Set fixed height for the big image */ /* Set fixed height for the big image */
flex-shrink: 0; flex-shrink: 0;
/* Prevent shrinking */ /* Prevent shrinking */
} }
.bigImage img { .bigImage img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
object-fit: cover; object-fit: cover;
/* Ensures the image covers the area without distortion */ /* Ensures the image covers the area without distortion */
} }
.smallImage { .smallImage {
position: absolute; position: absolute;
bottom: -8px; bottom: -8px;
right: -8px; right: -8px;
width: 40px; width: 40px;
/* Set fixed width for the small image */ /* Set fixed width for the small image */
height: 40px; height: 40px;
/* Set fixed height for the small image */ /* Set fixed height for the small image */
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
} }
.smallImage img { .smallImage img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
/* Ensures the image covers the area without distortion */ /* Ensures the image covers the area without distortion */
} }
.textInfo { .textInfo {
margin-left: 16px; margin-left: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex-grow: 1; flex-grow: 1;
/* Allow text info to grow */ /* Allow text info to grow */
} }
.appName { .appName {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.state, .state,
.details { .details {
font-size: 14px; font-size: 14px;
color: #b9bbbe; color: #b9bbbe;
} }
/* Media Queries for Responsiveness */ /* Media Queries for Responsiveness */
@media (max-width: 480px) { @media (max-width: 480px) {
.bigImage { .bigImage {
width: 80px; width: 80px;
/* Adjust size for smaller screens */ /* Adjust size for smaller screens */
height: 80px; height: 80px;
} }
.smallImage { .smallImage {
width: 30px; width: 30px;
/* Adjust size for smaller screens */ /* Adjust size for smaller screens */
height: 30px; height: 30px;
} }
.textInfo { .textInfo {
margin-left: 8px; margin-left: 8px;
/* Reduce margin for smaller screens */ /* Reduce margin for smaller screens */
} }
.appName { .appName {
font-size: 14px; font-size: 14px;
/* Adjust font size */ /* Adjust font size */
} }
.state, .state,
.details { .details {
font-size: 12px; font-size: 12px;
/* Adjust font size */ /* Adjust font size */
} }
} }

10
src/front/components/Lanyard/index.tsx
View file

@ -70,13 +70,19 @@ export default () => {
{largeImage && ( {largeImage && (
<div class={style.bigImage}> <div class={style.bigImage}>
{/* @ts-expect-error; placement is not in the types for some reason? */} {/* @ts-expect-error; placement is not in the types for some reason? */}
<mdui-tooltip content={activity.assets?.large_text} placement="top-right"> <mdui-tooltip
content={activity.assets?.large_text}
placement="top-right"
>
<img src={largeImage} alt="Large Activity" /> <img src={largeImage} alt="Large Activity" />
</mdui-tooltip> </mdui-tooltip>
{smallImage && ( {smallImage && (
<div class={style.smallImage}> <div class={style.smallImage}>
{/* @ts-expect-error; placement is not in the types for some reason? */} {/* @ts-expect-error; placement is not in the types for some reason? */}
<mdui-tooltip content={activity.assets?.small_text} placement="top-right"> <mdui-tooltip
content={activity.assets?.small_text}
placement="top-right"
>
<img src={smallImage} alt="Small Activity" /> <img src={smallImage} alt="Small Activity" />
</mdui-tooltip> </mdui-tooltip>
</div> </div>