studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(demo) add a footer

Browse Source 
Add a footer to display some useful links
This commit is contained in:
jbpenrath
2024-02-15 11:14:28 +01:00
committed by Jean-Baptiste PENRATH
parent bacd9446b4
commit d119b79c3f
3 changed files with 172 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -23,7 +23,7 @@
<div align="center">
[![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/main.svg?style=svg)](https://circleci.com/gh/openfun/cunningham/tree/main)
[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/3qjUJjp)
[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/TXPSCMeDzd)
</div>

71
apps/demo/src/Home.tsx
View File

@@ -54,8 +54,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
}, [pagination.page, sortModel, modal.isOpen, refresh]);
return (
<div className="page__home">
<div className="page__home__title">
<main className="page__home">
<header className="page__home__title">
<h1 className="clr-greyscale-900">
{/* eslint-disable-next-line react/no-unescaped-entities */}
🍿Cunningham's <span className="clr-primary-400">Cast</span>
@@ -76,7 +76,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
>
Add character
</Button>
</div>
</header>
<section>
<div className="card">
<DataGrid
columns={[
@@ -152,6 +153,68 @@ export const Home = ({ modal }: { modal: PageProps }) => {
onRowSelectionChange={setRowSelection}
/>
</div>
</div>
</section>
<footer className="links">
<ul>
<li>
<Button
size="small"
color="tertiary-text"
target="_blank"
rel="noopener noreferrer"
href="https://www.france-universite-numerique.fr/en/"
>
France Université Numérique
</Button>
</li>
</ul>
<ul>
<li>
<Button
size="small"
color="tertiary-text"
target="_blank"
rel="noopener noreferrer"
href="https://discord.gg/TXPSCMeDzd"
>
Discord
</Button>
</li>
<li>
<Button
size="small"
color="tertiary-text"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/openfun/cunningham"
>
Github
</Button>
</li>
<li>
<Button
size="small"
color="tertiary-text"
target="_blank"
rel="noopener noreferrer"
href="https://openfun.github.io/cunningham/storybook"
>
Documentation
</Button>
</li>
<li>
<Button
size="small"
color="tertiary-text"
target="_blank"
rel="noopener noreferrer"
href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"
>
UI Kit
</Button>
</li>
</ul>
</footer>
</main>
);
};

34
apps/demo/src/index.scss
View File

@@ -23,10 +23,15 @@ a {
// App
html {
min-height: 100vh;
background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
}
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
}
.pattern {
position: absolute;
z-index: -1;
@@ -65,6 +70,7 @@ html {
.container {
margin: auto;
position: relative;
height: 100%;
width: 1100px;
@media (max-width: 1200px) {
@@ -75,6 +81,10 @@ html {
// Home
.page__home {
display: flex;
height: 100%;
flex-direction: column;
&__title {
gap: 1.5rem;
margin: 4rem 0;
@@ -86,6 +96,10 @@ html {
margin-top: 1.5rem;
}
}
section {
flex: 1;
}
}
html[data-theme="redflux"] {
@@ -150,3 +164,21 @@ html[data-theme="blueney"] {
justify-content: center;
}
}
// links
.links {
border-top: thin solid var(--c--theme--colors--greyscale-300);
display: flex;
justify-content: space-between;
gap: 0.5rem;
ul {
text-align: right;
padding: 0;
}
ul li {
display: inline-block;
padding: 0 0.5rem;
white-space: nowrap;
}
}