CarGDev/endorsment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Home layout and styles to three-column rounded feed (matches design)\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Browse Source
This commit is contained in:
Carlos
2026-02-14 20:43:16 -05:00
parent 9e178af349
commit 91b39adc06
2 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/index.css
View File

@@ -1,18 +1,26 @@
/* Minimal styling for layout and cards */
:root{--max-width:900px;--card-bg:#fff;--muted:#6b7280}
/* Updated styling for three-column rounded feed */
:root{--max-width:1100px;--card-bg:#fff;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;margin:0;background:#f3f4f6;color:#111}
.app main{padding:1rem}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;margin:0;background:linear-gradient(135deg,#f7f6ff 0%,#f0fbff 100%);color:#111;padding:24px}
.feed-shell{min-height:100vh;padding:20px}
.container{max-width:var(--max-width);margin:0 auto}
.card{background:var(--card-bg);border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px}
.flex{display:flex}
.center{display:flex;align-items:center;justify-content:center}
.tag{background:#eef2ff;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.main-card{background:var(--card-bg);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(16,24,40,0.08);border:1px solid rgba(0,0,0,0.04)}
.left-nav{width:200px}
.left-nav .logo{background:#111;color:#fff;padding:10px;border-radius:10px;font-weight:700;text-align:center}
.left-nav ul{list-style:none;padding:12px 0;margin:0}
.left-nav .nav-item{padding:10px 12px;border-radius:8px;margin-bottom:6px;cursor:pointer;color:#0f172a}
.left-nav .nav-item.active{background:#eef2ff;color:#1e40af}
.right-column{width:260px}
.card{background:var(--card-bg);border:1px solid #eaeef2;border-radius:12px;padding:12px;margin-bottom:12px}
.post-card{border-radius:14px;padding:14px}
.post-thumbs .thumb{width:120px;height:84px;background:linear-gradient(180deg,#f8fafc,#eef2ff);border-radius:10px}
.avatar{width:56px;height:56px;border-radius:999px;background:#e6f0ff;color:#1e40af;display:flex;align-items:center;justify-content:center;font-weight:600}
.tag{background:#eef2ff;color:#1e40af;padding:6px 10px;border-radius:999px;font-size:12px;margin-right:6px}
.button{background:#2563eb;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
.small{font-size:13px;color:var(--muted)}
.sidebar{width:300px}
.nav{background:#fff;border-bottom:1px solid #e5e7eb;padding:10px}
.nav a{margin-right:12px;color:#111;text-decoration:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:8px;padding:16px;width:min(600px,95%)}
.modal{background:#fff;border-radius:8px;padding:16px;width:min(900px,95%)}
.textarea{width:100%;min-height:100px;padding:8px;border:1px solid #e5e7eb;border-radius:6px}
.create-input{display:flex;flex-direction:column}
.rec{width:64px;height:64px;border-radius:12px;background:#f8fafc;display:flex;align-items:center;justify-content:center}

68
src/routes/Home.tsx
View File

@@ -9,16 +9,66 @@ const Home: React.FC = () => {
const suggestions = users.filter((u) => u.id !== currentUserId).slice(0, 3)
return (
<div className="container" style={{display:'flex',gap:16}}>
<div style={{flex:1}}>
<Feed />
<div className="feed-shell">
<div className="container main-card" style={{display:'flex',gap:20,alignItems:'flex-start'}}>
<nav className="left-nav">
<div className="logo">RE</div>
<ul>
<li className="nav-item active">Home</li>
<li className="nav-item">Messages</li>
<li className="nav-item">Forums</li>
<li className="nav-item">Media</li>
<li className="nav-item">Settings</li>
</ul>
</nav>
<main className="main-column" style={{flex:1,maxWidth:680}}>
<header style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
<h2>Feeds</h2>
<div className="small">Recent · Friends · Popular</div>
</header>
<Feed />
<div className="create-input card" style={{marginTop:12}}>
<input placeholder="Share something..." style={{width:'100%',border:'none',outline:'none'}} />
<div style={{display:'flex',justifyContent:'flex-end',marginTop:8}}>
<button className="button">Send</button>
</div>
</div>
</main>
<aside className="right-column">
<section className="card">
<h4>Stories</h4>
<div style={{display:'flex',gap:8,marginTop:8}}>
{suggestions.map((u)=>(
<div key={u.id} style={{textAlign:'center'}}>
<div className="avatar">{u.name[0]}</div>
<div className="small">{u.name.split(' ')[0]}</div>
</div>
))}
</div>
</section>
<section className="card" style={{marginTop:12}}>
<h4>Suggestions</h4>
{suggestions.map((u)=>(
<UserCard key={u.id} user={u} />
))}
</section>
<section className="card" style={{marginTop:12}}>
<h4>Recommendations</h4>
<div style={{display:'flex',gap:8,marginTop:8}}>
<div className="rec">X</div>
<div className="rec">Y</div>
<div className="rec">Z</div>
</div>
</section>
</aside>
</div>
<aside className="sidebar">
<h3>Suggested Researchers</h3>
{suggestions.map((u) => (
<UserCard key={u.id} user={u} />
))}
</aside>
</div>
)
}