lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: centered some titles

Browse source
This commit is contained in:
Lukian 2025-04-08 22:51:16 +02:00
parent a3c2465247
commit edc6f34733
2 changed files with 53 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

80
front/src/pages/Home.tsx
View file

@ -156,45 +156,47 @@ export default function Home() {
</div> </div>
<div className="channels"> <div className="channels">
<h2>Channels</h2> <h2>Channels</h2>
<Link to={'/channels'}>All channels</Link> <div className="channels-content">
{user && ( <Link to={'/channels'}>All channels</Link>
<Link to={'/create-channel'}>Create channel</Link> {user && (
)} <Link to={'/create-channel'}>Create channel</Link>
<div className="channels-recent"> )}
<h3>Recent active channels</h3> <div className="channels-recent">
<ul> <h3>Recent active channels</h3>
{channels?.map((channel) => ( <ul>
<li key={channel.id}> {channels?.map((channel) => (
<Link to={`/c/${channel.name}`}>{channel.name}</Link> <li key={channel.id}>
</li> <Link to={`/c/${channel.name}`}>{channel.name}</Link>
))} </li>
</ul> ))}
</div> </ul>
<div className="channels-new"> </div>
<h3>Last created channels</h3> <div className="channels-new">
<ul> <h3>Last created channels</h3>
{newChannels?.map((channel) => ( <ul>
<li key={channel.id}> {newChannels?.map((channel) => (
<Link to={`/c/${channel.name}`}>{channel.name}</Link> <li key={channel.id}>
</li> <Link to={`/c/${channel.name}`}>{channel.name}</Link>
))} </li>
</ul> ))}
</div> </ul>
<div className="channels-search"> </div>
<h3>Search channels</h3> <div className="channels-search">
<input <h3>Search channels</h3>
type="text" <input
placeholder="Search channels" type="text"
value={search} placeholder="Search channels"
onChange={(e) => setSearch(e.target.value)} value={search}
/> onChange={(e) => setSearch(e.target.value)}
<ul> />
{searchedChannels?.map((channel) => ( <ul>
<li key={channel.id}> {searchedChannels?.map((channel) => (
<Link to={`/c/${channel.name}`}>{channel.name}</Link> <li key={channel.id}>
</li> <Link to={`/c/${channel.name}`}>{channel.name}</Link>
))} </li>
</ul> ))}
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>

12
front/src/styles/Home.css
View file

@ -31,6 +31,9 @@
border: 1px solid #270722; border: 1px solid #270722;
padding: 10px; padding: 10px;
background-color: #fff6fd; background-color: #fff6fd;
display: flex;
flex-direction: column;
align-items: center;
} }
.messages-list { .messages-list {
@ -50,8 +53,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff6fd; background-color: #fff6fd;
align-items: center;
} }
.channels-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 800px) { @media (max-width: 800px) {
.home-header { .home-header {
flex-direction: column; flex-direction: column;