Skip to content

Commit 277fb01

Browse files
fzaninottofzaninotto
authored
Merge pull request #9430 from marmelab/revamp-demos-page
Revamp demo page and add EE demo
2 parents 7d8a5b0 + 3da3b2c commit 277fb01

6 files changed

+233
-4
lines changed

‎docs/Demos.md

+233-4
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,217 @@ layout: default
33
title: "React-admin demos"
44
---
55

6+
<script src="https://player.vimeo.com/api/player.js"></script>
7+
68
# React-admin Demos
79

810
If you want to see what react-admin is capable of, or if you want to learn from apps built by seasoned react-admin developers, check out these demos.
911

12+
## Overview
13+
14+
<style>
15+
.demos-list {
16+
display: grid;
17+
grid-template-columns: repeat(2, 1fr);
18+
grid-gap: 10px;
19+
}
20+
21+
@media (max-width: 600px) {
22+
.demos-list {
23+
grid-template-columns: repeat(1, 1fr);
24+
}
25+
.iframe-wrapper {
26+
max-width: 100%;
27+
}
28+
}
29+
30+
.card {
31+
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
32+
transition: 0.3s;
33+
background-color: rgba(243, 246, 249, 0.4);
34+
border: 1px solid rgba(0,0,0,0.25);
35+
border-radius: 10px;
36+
margin: 0;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
.card:hover {
42+
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
43+
}
44+
45+
.card > img, .card > video {
46+
border-radius: 5px;
47+
max-width: 100%;
48+
}
49+
50+
.mardown-section > video, .markdown-section, img {
51+
max-width: 100%;
52+
}
53+
54+
.content-card {
55+
padding: 2px;
56+
margin-left: 1rem;
57+
margin-right: 1rem;
58+
text-decoration: none !important;
59+
}
60+
61+
.title-card {
62+
margin-bottom: 0.4rem !important;
63+
font-size: 1.75em;
64+
color: black;
65+
}
66+
67+
.description-card {
68+
color: rgb(100,100,100);
69+
}
70+
71+
.card-footer {
72+
flex-grow: 1;
73+
display: flex;
74+
flex-direction: column-reverse;
75+
}
76+
77+
.links-container {
78+
padding: 2px;
79+
margin-left: calc(1rem - 10px);
80+
margin-right: calc(1rem - 10px);
81+
display: flex;
82+
justify-content: space-between;
83+
}
84+
85+
.link {
86+
color: rgb(0, 127, 255) !important;
87+
padding: 10px;
88+
border-radius: 5px
89+
}
90+
91+
.link:hover {
92+
background-color: rgba(0, 127, 255, 0.07) !important;
93+
}
94+
95+
.no-decoration, .link {
96+
text-decoration: none !important;
97+
}
98+
99+
.iframe-wrapper {
100+
float: none;
101+
clear: both;
102+
max-width: 92.25%;
103+
position: relative;
104+
padding-bottom: 56.25%;
105+
padding-top: 25px;
106+
height: 0;
107+
}
108+
109+
.iframe-wrapper iframe {
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
width: 100%;
114+
height: 100%;
115+
}
116+
</style>
117+
118+
<div class="demos-list">
119+
<div class="card">
120+
<img src="./img/demo-ecommerce-oss.png" alt="ecommerce-oss">
121+
<div class="content-card">
122+
<a href="#e-commerce" class="no-decoration">
123+
<p class="title-card"><b>E-commerce</b></p>
124+
<p class="description-card">The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.</p>
125+
</a>
126+
</div>
127+
<div class="card-footer">
128+
<div class="links-container">
129+
<p><b><a href="https://marmelab.com/react-admin-demo/" class="demo link">Demo</a></b></p>
130+
<p><b><a href="https://github.com/marmelab/react-admin/tree/master/examples/demo" class="source-code link">Source code</a></b></p>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="card">
135+
<img src="./img/demo-ecommerce-ee.png" alt="ecommerce-ee">
136+
<div class="content-card">
137+
<a href="#e-commerce-enterprise" class="no-decoration">
138+
<p class="title-card"><b>E-commerce Enterprise</b></p>
139+
<p class="description-card">Based on the E-commerce demo and upgraded with some React Admin Enterprise features. Built by the core team.</p>
140+
</a>
141+
</div>
142+
<div class="card-footer">
143+
<div class="links-container">
144+
<p><b><a href="https://marmelab.com/ra-enterprise-demo/" class="demo link">Demo</a></b></p>
145+
<p><b><a href="https://github.com/marmelab/ra-enterprise-demo" class="source-code link">Source code</a></b></p>
146+
</div>
147+
</div>
148+
</div>
149+
<div class="card">
150+
<img src="./img/demo-CRM.png" alt="CRM">
151+
<div class="content-card">
152+
<a href="#crm" class="no-decoration">
153+
<p class="title-card"><b>CRM</b></p>
154+
<p class="description-card">A complete CRM app allowing to manage contacts, companies, deals, notes, tasks, and tags. Built by the core team.</p>
155+
</a>
156+
</div>
157+
<div class="card-footer">
158+
<div class="links-container">
159+
<p><b><a href="https://marmelab.com/react-admin-crm/" class="demo link">Demo</a></b></p>
160+
<p><b><a href="https://github.com/marmelab/react-admin/tree/master/examples/crm" class="source-code link">Source code</a></b></p>
161+
</div>
162+
</div>
163+
</div>
164+
<div class="card">
165+
<img src="./img/demo-help-desk.png" alt="help-desk">
166+
<div class="content-card">
167+
<a href="#help-desk" class="no-decoration">
168+
<p class="title-card"><b>Help Desk</b></p>
169+
<p class="description-card">A simple help desk app allowing to manage tickets, users, and tags. Built by the core team.</p>
170+
</a>
171+
</div>
172+
<div class="card-footer">
173+
<div class="links-container">
174+
<p><b><a href="https://marmelab.com/react-admin-helpdesk/" class="demo link">Demo</a></b></p>
175+
<p><b><a href="https://github.com/marmelab/react-admin-helpdesk" class="source-code link">Source code</a></b></p>
176+
</div>
177+
</div>
178+
</div>
179+
<div class="card">
180+
<img src="./img/navidrome.png" alt="Music Player">
181+
<div class="content-card">
182+
<a href="#music-player" class="no-decoration">
183+
<p class="title-card"><b>Music Player</b></p>
184+
<p class="description-card">Navidrome is a Spotify clone allowing to manage songs, artists, playlists, and favorites.</p>
185+
</a>
186+
</div>
187+
<div class="card-footer">
188+
<div class="links-container">
189+
<p><b><a href="https://demo.navidrome.org/app/" class="demo link">Demo</a></b></p>
190+
<p><b><a href="https://github.com/navidrome/navidrome/" class="source-code link">Source code</a></b></p>
191+
</div>
192+
</div>
193+
</div>
194+
<div class="card">
195+
<img src="./img/blog_demo.png" alt="Blog">
196+
<div class="content-card">
197+
<a href="#blog" class="no-decoration">
198+
<p class="title-card"><b>Blog</b></p>
199+
<p class="description-card">A simple application with posts, comments and users that we use for our e2e tests. Not designed to have a good UX, but to use most of the react-admin features. Built by the core team.</p>
200+
</a>
201+
</div>
202+
<div class="card-footer">
203+
<div class="links-container">
204+
<p><b><a href="https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple" class="demo link">Demo</a></b></p>
205+
<p><b><a href="https://github.com/marmelab/react-admin/tree/master/examples/simple" class="source-code link">Source code</a></b></p>
206+
</div>
207+
</div>
208+
</div>
209+
</div>
210+
10211
## E-commerce
11212

12213
The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.
13214

14-
[![react-admin-demo](https://marmelab.com/react-admin/img/react-admin-demo-still.png)](https://vimeo.com/474999017)
215+
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/474999017?h=4557e43b02&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
216+
<br>
15217

16218
* Demo: [https://marmelab.com/react-admin-demo/](https://marmelab.com/react-admin-demo/)
17219
* Source code: [https://github.com/marmelab/react-admin/tree/master/examples/demo](https://github.com/marmelab/react-admin/tree/master/examples/demo)
@@ -29,11 +231,38 @@ The source shows how to implement the following features:
29231
- [Custom page with static list](https://github.com/marmelab/react-admin/blob/master/examples/demo/src/routes.tsx)
30232
- [Edit view in a sidebar](https://github.com/marmelab/react-admin/blob/master/examples/demo/src/reviews/ReviewList.tsx)
31233

234+
## E-commerce Enterprise
235+
236+
Based on the E-commerce demo and upgraded with some React Admin Enterprise features.
237+
238+
<div style="padding:56.93% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/884005183?h=7f12a85dcf&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
239+
<br>
240+
241+
* Demo: [https://marmelab.com/ra-enterprise-demo/](https://marmelab.com/ra-enterprise-demo/)
242+
* Source code: [https://github.com/marmelab/ra-enterprise-demo](https://github.com/marmelab/ra-enterprise-demo)
243+
244+
The source shows how to implement the following features:
245+
246+
- [AccordionForm](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/products/ProductEdit.tsx)
247+
- [Breadcrumb](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/layout/Breadcrumb.tsx)
248+
- [SolarLayout](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/layout/Layout.tsx)
249+
- [Locks](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/products/GridList.tsx)
250+
- [ListLive](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/orders/OrderList.tsx)
251+
- [RealtimeDataProvider](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/dataProvider/addRealtimeMethodsWithFakeTransport.ts)
252+
- [CompleteCalendar](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/visits/VisitList.tsx)
253+
- [Audit Log](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/i18n/en.ts)
254+
- [SearchWithResult](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/layout/SearchSubMenu.tsx)
255+
- [TreeWithDetails](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/categories/CategoryList.tsx)
256+
- [MarkdownField](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/products/ProductPreview.tsx)
257+
- [MarkdownInput](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/products/ProductCreate.tsx)
258+
- [Tours](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/tours/TourList.tsx)
259+
- [EditableDatagrid](https://github.com/marmelab/ra-enterprise-demo/blob/master/src/stores/StoreList.tsx)
260+
32261
## CRM
33262

34263
A complete CRM app allowing to manage contacts, companies, deals, notes, tasks, and tags. Built by the core team.
35264

36-
<video src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" controls="controls" style="max-width: 100%"></video>
265+
<video src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" controls="controls"></video>
37266

38267
* Demo: [https://marmelab.com/react-admin-crm/](https://marmelab.com/react-admin-crm/)
39268
* Source code: [https://github.com/marmelab/react-admin/tree/master/examples/crm](https://github.com/marmelab/react-admin/tree/master/examples/crm)
@@ -52,7 +281,7 @@ The source shows how to implement the following features:
52281

53282
A simple help desk app allowing to manage tickets, users, and tags. Built by the core team.
54283

55-
<video src="https://user-images.githubusercontent.com/99944/212743583-a4ee135f-f55b-4305-86c4-a3da1c49bb98.mov" controls="controls" style="max-width: 100%"></video>
284+
<video src="https://user-images.githubusercontent.com/99944/212743583-a4ee135f-f55b-4305-86c4-a3da1c49bb98.mov" controls="controls"></video>
56285

57286
* Demo: [https://marmelab.com/react-admin-helpdesk/](https://marmelab.com/react-admin-helpdesk/)
58287
* Source code: [https://github.com/marmelab/react-admin-helpdesk](https://github.com/marmelab/react-admin-helpdesk)
@@ -95,7 +324,7 @@ A simple application with posts, comments and users that we use for our e2e test
95324

96325
A framework built on top of react-admin for building developer portals.
97326

98-
<iframe width="560" height="315" src="https://www.youtube.com/embed/ecHsgNmug9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
327+
<div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/ecHsgNmug9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
99328

100329
* Source code: [https://github.com/CAAPIM/APIHub](https://github.com/CAAPIM/APIHub)
101330

‎docs/img/blog_demo.png

-87.6 KB
Loading

‎docs/img/demo-CRM.png

176 KB
Loading

‎docs/img/demo-ecommerce-ee.png

268 KB
Loading

‎docs/img/demo-ecommerce-oss.png

338 KB
Loading

‎docs/img/demo-help-desk.png

231 KB
Loading

0 commit comments

Comments
 (0)