RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24: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

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

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

97
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,6 +21,67 @@
cursor: pointer; cursor: pointer;
.featuredEvent_wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-between;
.logo {
height: 100%;
width: fit-content;
max-width: 70px;
img {
height: 100%;
width: 100%;
}
}
.content {
display: flex;
flex-direction: column;
align-self: flex-end;
width: 100%;
max-width: calc(90% - 70px);
overflow: hidden;
margin-left: 20px;
margin-bottom: 10px;
h1 {
font-size: 1.5rem;
font-weight: 700;
font-family: "Space Grotesk", sans-serif;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h3 {
font-size: 0.8rem;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
}
}
.indicator { .indicator {
position: absolute; position: absolute;
z-index: 55; z-index: 55;
@ -32,38 +93,4 @@
padding: 10px; padding: 10px;
} }
.logo {
height: 100%;
width: fit-content;
max-width: 70px;
img {
height: 100%;
width: 100%;
}
}
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 20px;
margin-bottom: 10px;
h1 {
font-size: 1.5rem;
font-weight: 700;
font-family: "Space Grotesk", sans-serif;
}
h3 {
font-size: 0.8rem;
font-weight: 400;
}
}
} }