Skip to content

Commit

Permalink
clean
Browse files Browse the repository at this point in the history
  • Loading branch information
@s-alad
s-alad committed Aug 14, 2024
1 parent 3a12d76 commit 419cbbf
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 73 deletions.
159 changes: 93 additions & 66 deletions client/components/instant/instant.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,19 @@
width: 100%;
display: flex;
padding: 12px 10px;

.pfp {
width: 50px;
@include c.center();

img {
height: 30px;
width: 30px;
border-radius: 100%;
object-fit: cover;
background-color: white;
}

.letter {
height: 30px;
width: 30px;
Expand All @@ -41,30 +44,37 @@
color: black;
}
}

.details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;

.username {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}

.location {
font-size: 10px;
text-decoration: underline;
color: rgb(158, 158, 158);
}

.timeposted {
font-size: 10px;
color: rgb(158, 158, 158);
}
}

.trash {
width: 30px;
@include c.center();
cursor: pointer;
}

.btsView {
width: 30px;
@include c.center();
Expand All @@ -91,6 +101,7 @@
height: calc(100% - 60px);
left: 0;
padding: 10px;

.secondary {
border-radius: 8px;
width: 100px;
Expand All @@ -99,6 +110,7 @@
z-index: 101;
}
}

.realmojis {
position: absolute;
left: 0;
Expand All @@ -114,11 +126,12 @@
.carousel {
width: 100%;
height: 100%;

.realmoji {
position: relative;
width: 48px;
height: 50px;

/* margin-right: 10px; */
.moji {
position: absolute;
Expand All @@ -127,7 +140,9 @@
z-index: 10;
font-size: 18px;
}
img {border: 1px solid white;

img {
border: 1px solid white;
position: absolute;
right: 0;
top: 4px;
Expand All @@ -146,6 +161,7 @@
height: 100%;
color: white;
@include c.center();

.add {
background-color: rgba(0, 0, 0, 0.155);
height: 100%;
Expand All @@ -160,14 +176,16 @@
height: 50px;
margin-right: 4px;
cursor: pointer;

.moji {
position: absolute;
left: 2px;
font-size: 18px;
z-index: 10;
}

img {border: 1px solid white;
img {
border: 1px solid white;
position: absolute;
right: 0;
top: 4px;
Expand Down Expand Up @@ -213,6 +231,7 @@
padding: 10px;
display: flex;
justify-content: space-between;

input {
height: 30px;
width: 77%;
Expand All @@ -236,6 +255,7 @@
color: black;
cursor: pointer;
}

.addloading {
height: 30px;
width: 20%;
Expand Down Expand Up @@ -267,11 +287,17 @@
.expand {
font-size: 14px;
height: 25px;

.click {
cursor: pointer;
}
}
.holder {height: 25px; font-size: 14px; color: rgb(158, 158, 158);}

.holder {
height: 25px;
font-size: 14px;
color: rgb(158, 158, 158);
}

.comment {
display: flex;
Expand All @@ -281,6 +307,7 @@
&:last-child {
margin-bottom: 12px;
}

img {
height: 30px;
width: 30px;
Expand All @@ -293,12 +320,14 @@
display: flex;
flex-direction: column;
margin-left: 10px;

.username {
font-size: 10px;
font-weight: 500;
margin-bottom: 2px;
color: rgb(158, 158, 158);
}

.convo {
font-size: 14px;
}
Expand All @@ -311,66 +340,64 @@
margin-right: 0px;
margin-bottom: 12px;
}

.musicContainer {
display: flex;
align-items: center;
gap: 15px;
padding: 4px;
border-radius: 5px;
background-color: #0e1b29;
cursor: pointer; /* Indicate that it is clickable */
position: relative; /* For tooltip positioning */

&:hover::after {
content: attr(title); /* Use the title attribute for the tooltip */
position: absolute;
bottom: 100%; /* Position above the element */
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text wrapping */
font-size: 12px;
z-index: 10;
opacity: 0.9;
}
}


.musicCoverArt {
width: 40px;
height: 40px;
border-radius: 10%;
object-fit: cover;
}

.musicDetails {
display: flex;
flex-direction: column;
}

.musicTitle {
margin: 0;
font-size: 10px;
font-weight: bold;
}

.musicArtist {
margin: 0;
font-size: 9px;
color: #555;
}


.noMusicTitle {
font-size: 10px;
color: rgb(158, 158, 158);
}



}

.musicContainer {
display: flex;
align-items: center;
gap: 15px;
padding: 4px;
border-radius: 5px;
background-color: #0e1b29;
cursor: pointer;
position: relative;

&:hover::after {
content: attr(title);
/* Use the title attribute for the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
white-space: nowrap;
/* Prevent text wrapping */
font-size: 12px;
z-index: 10;
opacity: 0.9;
}
}


.musicCoverArt {
width: 40px;
height: 40px;
border-radius: 10%;
object-fit: cover;
}

.musicDetails {
display: flex;
flex-direction: column;
}

.musicTitle {
margin: 0;
font-size: 10px;
font-weight: bold;
}

.musicArtist {
margin: 0;
font-size: 9px;
color: #555;
}


.noMusicTitle {
font-size: 10px;
color: rgb(158, 158, 158);
}
}
11 changes: 4 additions & 7 deletions client/components/instant/instant.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
const googleMapsLink = `https://www.google.com/maps?q=${lat},${long}`;

setLocation(
<div>
<p>{locationString}</p>
<a href={googleMapsLink} target="_blank" rel="noopener noreferrer">View on Google Maps</a>
</div>
<a href={googleMapsLink} target="_blank" rel="noopener noreferrer">{locationString}</a>
);
} catch (error) {
console.log(error);
Expand All @@ -126,7 +123,7 @@ export default function Instant({ instance, mymojis }: _Instant) {

async function getMusicData() {
if (instance.music === undefined) {
setMusic( <p className={s.noMusicTitle}>No music data</p> );
setMusic( <div className={s.noMusicTitle}>No music data</div> );
return;
}

Expand All @@ -141,8 +138,8 @@ async function getMusicData() {
>
<img src={coverArt} alt="Cover Art" className={s.musicCoverArt} />
<div className={s.musicDetails}>
<p className={s.musicTitle}>🎵 {songTitle}</p>
<p className={s.musicArtist}>by {songArtist}</p>
<div className={s.musicTitle}>🎵 {songTitle}</div>
<div className={s.musicArtist}>by {songArtist}</div>
</div>
</div>
);
Expand Down

1 comment on commit 419cbbf

@Professoroink167
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When did you fix for germany ?

Please sign in to comment.