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

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

@ -70,13 +70,19 @@ export default () => {
{largeImage && (
<div class={style.bigImage}>
{/* @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" />
</mdui-tooltip>
{smallImage && (
<div class={style.smallImage}>
{/* @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" />
</mdui-tooltip>
</div>