RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-12 12:04:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
SrGooglo 2022-12-16 09:21:17 +00:00
parent 0c8423ce37
commit 6fcb52b40a
2 changed files with 75 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/FeaturedEventAnnouncement/index.jsx
View File

@ -24,17 +24,21 @@ export default (props) => {
}} }}
onClick={onClickEvent} onClick={onClickEvent}
> >
<div className="indicator"> <div className="featuredEvent_wrapper">
<Icons.Target /> <span>Featured event</span>
</div>
<div className="logo"> <div className="logo">
<img <img
src={logoImg} src={logoImg}
/> />
</div> </div>
<div className="content"> <div className="content">
<h1>{title}</h1> <h1>{title}</h1>
<h3>{description}</h3> <h3>{description}</h3>
</div> </div>
</div> </div>
<div className="indicator">
<Icons.Target /> <span>Featured event</span>
</div>
</div>
} }

49
packages/app/src/components/FeaturedEventAnnouncement/index.less
View File

@ -6,7 +6,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; //justify-content: flex-start;
min-width: 300px; min-width: 300px;
max-width: 350px; max-width: 350px;
@ -21,17 +21,15 @@
cursor: pointer; cursor: pointer;
.indicator { .featuredEvent_wrapper {
position: absolute; display: flex;
z-index: 55; flex-direction: row;
font-size: 0.6rem; width: 100%;
height: 100%;
bottom: 0; align-items: center;
right: 0; justify-content: space-between;
padding: 10px;
}
.logo { .logo {
height: 100%; height: 100%;
@ -50,7 +48,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-self: flex-end;
width: 100%;
max-width: calc(90% - 70px);
overflow: hidden;
margin-left: 20px; margin-left: 20px;
margin-bottom: 10px; margin-bottom: 10px;
@ -59,11 +62,35 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
h3 { h3 {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
} }
} }
} }
.indicator {
position: absolute;
z-index: 55;
font-size: 0.6rem;
bottom: 0;
right: 0;
padding: 10px;
}
}