From a5e447603b92c859e6195ec0b4a6f9d48f732f08 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Tue, 21 Jun 2022 20:43:52 +0200
Subject: [PATCH 1/9] Add icons to pads
---
docs/documentation.html | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/docs/documentation.html b/docs/documentation.html
index eb40694c617..cb13a131fe5 100644
--- a/docs/documentation.html
+++ b/docs/documentation.html
@@ -50,6 +50,7 @@
<h2>Tutorial</h2>
Get the basics in 30 mins
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Admin.html">
@@ -59,6 +60,7 @@ <h2>App configuration</h2>
<code><Resource></code> and
<code><CustomRoutes></code> explained.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./DataProviderIntroduction.html">
@@ -66,6 +68,7 @@ <h2>App configuration</h2>
<h2>Data Provider</h2>
Plugging in a REST or GraphQL API
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Authentication.html">
@@ -73,6 +76,7 @@ <h2>Data Provider</h2>
<h2>Auth Provider</h2>
Securing the app with authentication and permissions
</div>
+ <div class="material-icons"></div>
</a>
<a href="./ListTutorial.html">
@@ -82,6 +86,7 @@ <h2>List pages</h2>
<code><Datagrid></code>, filters, sorting,
etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./EditTutorial.html">
@@ -91,6 +96,7 @@ <h2>Edition pages</h2>
<code><Create></code>,
<code><Form></code>, validation, etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Show.html">
@@ -99,6 +105,7 @@ <h2>Show pages</h2>
<code><Show></code>,
<code><SimpleShowLayout></code>, etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./useRecordContext.html">
@@ -108,6 +115,7 @@ <h2>Common Hooks</h2>
<code>useNotify</code>, <code>useRedirect</code>,
etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Fields.html">
@@ -116,8 +124,9 @@ <h2>Fields</h2>
<code><TextField></code>,
<code><SelectField></code>,
<code><ReferenceField></code>, etc.
- </div></a
- >
+ </div>
+ <div class="material-icons"></div>
+ </a>
<a href="./Inputs.html">
<div class="docBlock">
@@ -125,6 +134,7 @@ <h2>Inputs</h2>
<code><TextInput></code>,
<code><AutocompleteInput></code>, etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Store.html">
@@ -133,6 +143,7 @@ <h2>The Store</h2>
Persisting user preferences with
<code>useStore</code>
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Translation.html">
@@ -140,6 +151,7 @@ <h2>The Store</h2>
<h2>I18N</h2>
Translating the interface
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Buttons.html">
@@ -149,6 +161,7 @@ <h2>UI components</h2>
<code><AppBar></code>,
<code><Button></code>, etc.
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Theming.html">
@@ -156,6 +169,7 @@ <h2>UI components</h2>
<h2>Theming</h2>
Customizing the look and feel
</div>
+ <div class="material-icons"></div>
</a>
<a href="./Caching.html">
@@ -163,6 +177,7 @@ <h2>Theming</h2>
<h2>Recipes</h2>
For advanced configuration
</div>
+ <div class="material-icons"></div>
</a>
</div>
</div>
From 825f7bed1164f018ff2ca92a8bb4eee5aba6ca09 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 00:03:28 +0200
Subject: [PATCH 2/9] Clean sticky table of content
---
docs/_layouts/default.html | 6 +-
docs/css/style-v12.css | 128 +++++++++++++----
docs/documentation.html | 282 +++++++++++++++++++------------------
3 files changed, 243 insertions(+), 173 deletions(-)
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 4785faa8523..d49e7d9fa59 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -58,14 +58,14 @@
</header>
<main>
- <div class="container">
+ <div class="container sticker-container">
<div class="row">
<div
- class="col s12 m8 offset-m1 xl7 offset-xl1 markdown-section DocSearch-content toc-content"
+ class="col s12 m8 markdown-section DocSearch-content toc-content"
>
{{ content }}
</div>
- <div class="col hide-on-small-only m3 xl3 offset-xl1">
+ <div class="col hide-on-small-only m4 toc-container">
<div class="toc"></div>
</div>
</div>
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index 30593ac5604..f2c2164453e 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -1,23 +1,21 @@
/* Layout */
-header,
-main,
-footer {
- padding-left: 300px;
+main > .container {
+ padding-top: 30px;
+}
+@media only screen and (min-width: 992px) {
+ body:not(.no-sidebar) header,
+ body:not(.no-sidebar) main,
+ body:not(.no-sidebar) footer {
+ padding-left: 300px;
+ }
}
-
@media only screen and (max-width: 992px) {
- header,
- main,
- footer {
+ body header,
+ body main,
+ body footer {
padding-left: 0;
}
- main > .container {
- padding-top: 70px;
- }
- nav {
- position: fixed;
- }
}
@media only screen and (min-width: 601px) {
@@ -26,10 +24,21 @@ footer {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
- main > .container {
- padding-top: 50px;
- width: 100%;
- }
+}
+
+/* TOC */
+
+.sticker-container {
+ position: relative;
+}
+.toc-container {
+ position: sticky;
+ align-self: start;
+ top: 20px;
+ padding-left: 1em;
+}
+.toc.is-position-fixed {
+ position: static !important;
}
/* Navigation */
@@ -88,6 +97,7 @@ nav ul#nav-mobile a {
.sidenav ul {
padding: 0.5em 0 0.5em 1em;
}
+
.sidenav ul div {
text-transform: uppercase;
font-weight: bold;
@@ -156,19 +166,24 @@ ul.sidenav code {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
}
+
.markdown-section * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
+
.markdown-section *:focus {
outline: none;
}
+
.markdown-section > :first-child {
margin-top: 0 !important;
}
+
.markdown-section > :last-child {
margin-bottom: 0 !important;
}
+
.markdown-section blockquote,
.markdown-section code,
.markdown-section figure,
@@ -178,6 +193,7 @@ ul.sidenav code {
.markdown-section tr {
page-break-inside: avoid;
}
+
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
@@ -186,6 +202,7 @@ ul.sidenav code {
orphans: 3;
widows: 3;
}
+
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
@@ -193,13 +210,16 @@ ul.sidenav code {
.markdown-section h5 {
page-break-after: avoid;
}
+
.markdown-section b,
.markdown-section strong {
font-weight: 700;
}
+
.markdown-section em {
font-style: italic;
}
+
.markdown-section blockquote,
.markdown-section dl,
.markdown-section ol,
@@ -217,11 +237,13 @@ ul.sidenav code {
.markdown-section ul > li {
list-style-type: disc;
}
+
.markdown-section a {
color: #4183c4;
text-decoration: none;
background: 0 0;
}
+
.markdown-section a:active,
.markdown-section a:focus,
.markdown-section a:hover {
@@ -229,7 +251,7 @@ ul.sidenav code {
}
@media only screen and (max-width: 992px) {
- img {
+ img:not(.no-shadow) {
width: 100%;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.22);
}
@@ -252,14 +274,17 @@ ul.sidenav code {
background-color: #e7e7e7;
border: none;
}
+
.markdown-section hr:after,
.markdown-section hr:before {
display: table;
content: ' ';
}
+
.markdown-section hr:after {
clear: both;
}
+
.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
@@ -267,9 +292,11 @@ ul.sidenav code {
margin-bottom: 0.85em;
font-weight: 700;
}
+
.markdown-section h1 {
font-size: 2.5em;
}
+
.markdown-section h2 {
font-size: 1.75em;
}
@@ -277,11 +304,13 @@ ul.sidenav code {
margin-top: 1.5em;
font-size: 1.25em;
}
+
.markdown-section h4 {
margin-top: 1.25em;
font-size: 1em;
font-weight: bold;
}
+
.markdown-section code,
.markdown-section pre {
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@@ -291,6 +320,7 @@ ul.sidenav code {
border: none;
color: inherit;
}
+
.markdown-section pre {
overflow: auto;
word-wrap: normal;
@@ -423,27 +453,55 @@ ul.sidenav code {
}
.docBlocks a {
- color: inherit;
- border: solid 1px lightgrey;
+ position: relative;
+ padding: 1em 1.5em 1.5em 1em;
+ overflow: hidden;
+ border-width: 1px;
+ border-style: solid;
border-radius: 5px;
- padding: 1em;
+ border-color: #d7d7d7;
+ box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0);
+ color: inherit;
+ transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.docBlocks a:hover {
- border-color: black;
+ border: #c0c0c0 1px solid;
+ box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1);
+}
+
+.docBlocks a .docBlock {
+ position: relative;
+ z-index: 10;
+}
+
+.docBlocks a .material-icons {
+ position: absolute;
+ z-index: 1;
+ font-size: 36px;
+ opacity: 0.06;
+ top: 70%;
+ left: 80%;
+ transform: translate(-50%, -50%) scale(3) rotate(30deg);
+ transition: transform 0.2s ease-in-out, right 0.2s ease-in-out,
+ top 0.2s ease-in-out, left 0.2s ease-in-out;
+}
+.docBlocks a:hover .material-icons {
+ top: 60%;
+ left: 60%;
+ transform: scale(7) rotate(40deg);
}
.docBlock h2 {
margin: 0 0 0.5em 0;
+ color: var(--docsearch-primary-color);
font-size: 1.5em;
line-height: 1.2;
}
-@media only screen and (max-width: 992px) {
+@media only screen and (max-width: 1100px) {
.docBlocks {
- grid-template-columns: 1fr 1fr 1fr;
- margin: 0;
- padding-top: 5em;
+ grid-template-columns: 1fr 1fr;
}
}
@@ -451,16 +509,26 @@ ul.sidenav code {
.docBlocks {
display: block;
margin: 0;
- padding-top: 5em;
}
.docBlocks a {
- padding: 0.5em;
- margin-bottom: 1em;
display: block;
+ margin-bottom: 1em;
}
.docBlock h2 {
margin: 0 0 0.2em 0;
}
+ .docBlocks a .material-icons {
+ left: auto;
+ top: 50%;
+ right: -16px;
+ transform: translate(-50%, -50%) scale(3.5) rotate(30deg);
+ }
+ .docBlocks a:hover .material-icons {
+ left: auto;
+ top: 50%;
+ right: 16px;
+ transform: translate(-50%, -50%) scale(2) rotate(0deg);
+ }
}
/* Prism overrides */
diff --git a/docs/documentation.html b/docs/documentation.html
index cb13a131fe5..743b6a74cc3 100644
--- a/docs/documentation.html
+++ b/docs/documentation.html
@@ -39,149 +39,151 @@
<link rel="stylesheet" href="css/docsearch.css" />
</head>
- <body>
+ <body class="no-sidebar">
{% include nav.html %}
-
- <div class="container">
- <div class="row nav_root">
- <div class="docBlocks">
- <a href="./Tutorial.html">
- <div class="docBlock">
- <h2>Tutorial</h2>
- Get the basics in 30 mins
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Admin.html">
- <div class="docBlock">
- <h2>App configuration</h2>
- <code><Admin></code>,
- <code><Resource></code> and
- <code><CustomRoutes></code> explained.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./DataProviderIntroduction.html">
- <div class="docBlock">
- <h2>Data Provider</h2>
- Plugging in a REST or GraphQL API
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Authentication.html">
- <div class="docBlock">
- <h2>Auth Provider</h2>
- Securing the app with authentication and permissions
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./ListTutorial.html">
- <div class="docBlock">
- <h2>List pages</h2>
- <code><List></code>,
- <code><Datagrid></code>, filters, sorting,
- etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./EditTutorial.html">
- <div class="docBlock">
- <h2>Edition pages</h2>
- <code><Edit></code>,
- <code><Create></code>,
- <code><Form></code>, validation, etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Show.html">
- <div class="docBlock">
- <h2>Show pages</h2>
- <code><Show></code>,
- <code><SimpleShowLayout></code>, etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./useRecordContext.html">
- <div class="docBlock">
- <h2>Common Hooks</h2>
- <code>useRecordContext</code>,
- <code>useNotify</code>, <code>useRedirect</code>,
- etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Fields.html">
- <div class="docBlock">
- <h2>Fields</h2>
- <code><TextField></code>,
- <code><SelectField></code>,
- <code><ReferenceField></code>, etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Inputs.html">
- <div class="docBlock">
- <h2>Inputs</h2>
- <code><TextInput></code>,
- <code><AutocompleteInput></code>, etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Store.html">
- <div class="docBlock">
- <h2>The Store</h2>
- Persisting user preferences with
- <code>useStore</code>
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Translation.html">
- <div class="docBlock">
- <h2>I18N</h2>
- Translating the interface
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Buttons.html">
- <div class="docBlock">
- <h2>UI components</h2>
- App building blocks: <code><Menu></code>,
- <code><AppBar></code>,
- <code><Button></code>, etc.
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Theming.html">
- <div class="docBlock">
- <h2>Theming</h2>
- Customizing the look and feel
- </div>
- <div class="material-icons"></div>
- </a>
-
- <a href="./Caching.html">
- <div class="docBlock">
- <h2>Recipes</h2>
- For advanced configuration
- </div>
- <div class="material-icons"></div>
- </a>
+ <main>
+ <div class="container">
+ <div class="row nav_root">
+ <div class="docBlocks">
+ <a href="./Tutorial.html">
+ <div class="docBlock">
+ <h2>Tutorial</h2>
+ Get the basics in 30 mins
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Admin.html">
+ <div class="docBlock">
+ <h2>App configuration</h2>
+ <code><Admin></code>,
+ <code><Resource></code> and
+ <code><CustomRoutes></code> explained.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./DataProviderIntroduction.html">
+ <div class="docBlock">
+ <h2>Data Provider</h2>
+ Plugging in a REST or GraphQL API
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Authentication.html">
+ <div class="docBlock">
+ <h2>Auth Provider</h2>
+ Securing the app with authentication and
+ permissions
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./ListTutorial.html">
+ <div class="docBlock">
+ <h2>List pages</h2>
+ <code><List></code>,
+ <code><Datagrid></code>, filters, sorting,
+ etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./EditTutorial.html">
+ <div class="docBlock">
+ <h2>Edition pages</h2>
+ <code><Edit></code>,
+ <code><Create></code>,
+ <code><Form></code>, validation, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Show.html">
+ <div class="docBlock">
+ <h2>Show pages</h2>
+ <code><Show></code>,
+ <code><SimpleShowLayout></code>, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./useRecordContext.html">
+ <div class="docBlock">
+ <h2>Common Hooks</h2>
+ <code>useRecordContext</code>,
+ <code>useNotify</code>,
+ <code>useRedirect</code>, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Fields.html">
+ <div class="docBlock">
+ <h2>Fields</h2>
+ <code><TextField></code>,
+ <code><SelectField></code>,
+ <code><ReferenceField></code>, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Inputs.html">
+ <div class="docBlock">
+ <h2>Inputs</h2>
+ <code><TextInput></code>,
+ <code><AutocompleteInput></code>, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Store.html">
+ <div class="docBlock">
+ <h2>The Store</h2>
+ Persisting user preferences with
+ <code>useStore</code>
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Translation.html">
+ <div class="docBlock">
+ <h2>I18N</h2>
+ Translating the interface
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Buttons.html">
+ <div class="docBlock">
+ <h2>UI components</h2>
+ App building blocks: <code><Menu></code>,
+ <code><AppBar></code>,
+ <code><Button></code>, etc.
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Theming.html">
+ <div class="docBlock">
+ <h2>Theming</h2>
+ Customizing the look and feel
+ </div>
+ <div class="material-icons"></div>
+ </a>
+
+ <a href="./Caching.html">
+ <div class="docBlock">
+ <h2>Recipes</h2>
+ For advanced configuration
+ </div>
+ <div class="material-icons"></div>
+ </a>
+ </div>
</div>
</div>
- </div>
+ </main>
<script src="js/materialize.min.js"></script>
<script></script>
From a6797981d4ddd005290b65b981e2755ee84229a1 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 00:38:17 +0200
Subject: [PATCH 3/9] Fix logo as required / add home link
---
docs/_includes/nav.html | 14 +++++-----
docs/_includes/ra-monochrome.svg | 48 ++++++++++++++++++++++++++++++++
docs/css/style-v12.css | 31 ++++++++++++++++++++-
3 files changed, 85 insertions(+), 8 deletions(-)
create mode 100644 docs/_includes/ra-monochrome.svg
diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html
index 89380594476..09418697cc1 100644
--- a/docs/_includes/nav.html
+++ b/docs/_includes/nav.html
@@ -1,11 +1,11 @@
<nav>
- <a href="#" data-target="slide-out" class="sidenav-trigger"
- ><i class="material-icons">menu</i></a
- >
- <div
- class="nav-wrapper"
- style="background: linear-gradient(145deg, #027be3 11%, #1a237e 75%)"
- >
+ <a href="#" data-target="slide-out" class="sidenav-trigger">
+ <i class="material-icons"></i>
+ </a>
+ <div class="nav-wrapper">
+ <div class="left react-admin-logo">
+ <a href="{{ site.url }}"> {% include ra-monochrome.svg %} </a>
+ </div>
<div class="left">
<div id="docsearch" class="center"></div>
</div>
diff --git a/docs/_includes/ra-monochrome.svg b/docs/_includes/ra-monochrome.svg
new file mode 100644
index 00000000000..e435de8de80
--- /dev/null
+++ b/docs/_includes/ra-monochrome.svg
@@ -0,0 +1,48 @@
+<svg version="1.0" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 130 130" >
+<style type="text/css">
+ :root{
+ --color: #ffffff;
+ }
+ .st0{opacity:0.3;}
+ .st2{opacity:0.6;}
+ .st1{fill: var(--color);}
+</style>
+<g id="layer3Fill" class="st0">
+ <polygon class="st1" points="67.4,117.7 81.3,125.7 88.7,112.9 75.7,112.9 "/>
+ <polygon class="st1" points="12.3,67.5 4.4,81.2 17.2,88.6 17.2,76 "/>
+ <polygon class="st1" points="62.6,12.3 48.8,4.3 41.4,17.1 54.2,17.1 "/>
+ <polygon class="st1" points="117.7,62.6 125.7,48.8 112.8,41.3 112.8,54.1 "/>
+</g>
+<g id="layer3Border" class="st2">
+ <path class="st1" d="M39.2,17.1c0.5,0,1.7,0,2.2,0l7.4-12.8l13.8,8l1.9-1.1L48.1,1.7L39.2,17.1z"/>
+ <path class="st1" d="M112.8,39.1c0,0.5,0,1.7,0,2.2l12.9,7.5l-8,13.8c0.3,0.5,0.8,1.5,1.1,2l9.5-16.5L112.8,39.1z"/>
+ <path class="st1" d="M88.7,112.9l-7.4,12.8l-13.9-8l-1.9,1.1l16.5,9.5l8.9-15.4C90.4,112.9,89.2,112.9,88.7,112.9z"/>
+ <path class="st1" d="M12.3,67.5c-0.3-0.5-0.8-1.4-1.1-1.9L1.8,82l15.4,8.9c0-0.6,0-1.7,0-2.3L4.4,81.2L12.3,67.5z"/>
+</g>
+<g id="layer2Fill" class="st2">
+ <polygon class="st1" points="41.9,112.9 48.9,125.1 70.1,112.9 "/>
+ <polygon class="st1" points="17.2,70.1 17.2,41.9 5,49 "/>
+ <polygon class="st1" points="60.1,17.1 88.1,17.1 81.1,5 "/>
+ <polygon class="st1" points="112.8,60 112.8,88.2 125,81.1 "/>
+</g>
+<g id="layer2Border">
+ <polygon class="st1" points="17.2,76 17.2,70.1 5,49 17.2,41.9 17.2,38.5 1,47.9 "/>
+ <path class="st1" d="M54.2,17.1h5.9c0,0,19.9-11.5,21-12.1l7,12.1c0.8,0,2.5,0,3.3,0L82.1,1L54.2,17.1z"/>
+ <polygon class="st1" points="112.8,54.1 112.8,60 125,81.1 112.8,88.2 112.8,91.5 129,82.2 "/>
+ <path class="st1" d="M48.9,125.1l-7-12.2c-0.8,0-2.6,0-3.4,0l9.3,16.1c6.7-3.9,21.4-12.3,27.9-16.1c-1.4,0-5.6,0-5.6,0L48.9,125.1z
+ "/>
+</g>
+<path id="raBorder" class="st1" d="M17,17v96h96V17H17z M108,108H22V22h86V108z"/>
+<g id="ra">
+ <path id="aLetter" class="st1" d="M96.1,55.4c-0.7-1.9-2-3.2-3.7-4c-1.9-0.8-4.6-1.2-8.2-1.2c-4.2,0-7.9,0.3-11.1,1v4.2
+ c1.2-0.2,2.7-0.4,4.7-0.5c1.9-0.1,3.5-0.2,4.8-0.2c2.9,0,5,0.2,6.2,0.5c1.3,0.4,2.1,1.2,2.5,2.3c0.5,1.2,0.7,3.2,0.7,6.1V66
+ c-6.2-0.2-9.9-0.3-11.1-0.3c-2.5,0-4.5,0.3-5.9,1c-1.4,0.7-2.3,1.8-2.9,3.2c-0.6,1.4-0.9,3.5-0.9,6.2c0,3.9,0.9,6.5,2.4,8
+ c1.7,1.5,4.2,2.1,7.8,2.1c2.4,0,4.6-0.4,6.4-1.1c1.9-0.7,3.2-2.1,4-4.3h0.3l0.3,4.9h4.7v-22C97.1,60,96.8,57.3,96.1,55.4z M92,71.6
+ c0,2.9-0.4,5.4-1.3,7.1c-0.6,1.2-1.6,2-2.7,2.3c-1.3,0.4-2.8,0.6-4.7,0.8c-2,0-3.4-0.2-4.4-0.5c-0.9-0.4-1.6-1-2-1.8
+ c-0.4-0.8-0.6-2.1-0.6-3.8s0.2-3,0.5-3.9c0.3-0.9,0.9-1.5,1.7-1.8s2.1-0.5,3.7-0.5H92V71.6z"/>
+ <path id="rLetter" class="st1" d="M62.4,61.2c0.9-2.2,1.3-5.1,1.3-8.5c0-3.1-0.3-5.7-0.8-7.6c-0.5-2-1.7-3.5-3.4-4.7
+ c-1.8-1.2-4.4-1.8-7.9-1.8H33.5v47.1H39V67h11.9h1.2l6.5,18.8h5.9L57.3,66C59.9,65,61.6,63.4,62.4,61.2z M55.4,61.2
+ c-1.3,0.7-3.1,1-5.6,1H39V43.5h11.2c2.4,0,4.2,0.3,5.4,1c1.2,0.7,2,1.6,2.2,2.8c0.3,1.3,0.5,3,0.5,5.5c0,2.3-0.2,4.2-0.6,5.5
+ C57.3,59.5,56.6,60.5,55.4,61.2z"/>
+</g>
+</svg>
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index f2c2164453e..dc030b3f0cb 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -26,7 +26,7 @@ main > .container {
}
}
-/* TOC */
+/* Sticky TOC */
.sticker-container {
position: relative;
@@ -43,6 +43,9 @@ main > .container {
/* Navigation */
+.nav-wrapper {
+ background: linear-gradient(145deg, #027be3 11%, #1a237e 75%);
+}
nav ul#nav-mobile a {
font-family: 'Roboto', sans-serif;
font-size: 16px;
@@ -531,6 +534,32 @@ ul.sidenav code {
}
}
+/* Documentation summary navigation tweaks */
+
+.react-admin-logo {
+ margin: 0 0.5em 0 1em;
+ display: none;
+ padding: 0.5em 0;
+ height: 100%;
+}
+body.no-sidebar .react-admin-logo {
+ display: block;
+}
+.react-admin-logo svg {
+ height: 100%;
+ width: auto;
+ aspect-ratio: 1;
+}
+.react-admin-logo:hover svg {
+ opacity: 1;
+}
+body.no-sidebar .react-admin-logo {
+ display: block;
+}
+body.no-sidebar .sidenav-trigger {
+ display: none;
+}
+
/* Prism overrides */
/* Added the container selector to have a greater specificity */
.container .token.operator,
From d2f170a138215197734efee5bebe5fc314148d96 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 00:41:38 +0200
Subject: [PATCH 4/9] Card bgcolor fix
---
docs/css/style-v12.css | 2 ++
1 file changed, 2 insertions(+)
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index dc030b3f0cb..0aafa3e64d0 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -459,6 +459,7 @@ ul.sidenav code {
position: relative;
padding: 1em 1.5em 1.5em 1em;
overflow: hidden;
+ background: #efefef;
border-width: 1px;
border-style: solid;
border-radius: 5px;
@@ -499,6 +500,7 @@ ul.sidenav code {
margin: 0 0 0.5em 0;
color: var(--docsearch-primary-color);
font-size: 1.5em;
+ font-weight: 700;
line-height: 1.2;
}
From 3b2df026c0b9d62a4711f2883b8544d97f1908ed Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 08:53:45 +0200
Subject: [PATCH 5/9] Correct logo size
---
docs/css/style-v12.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index 0aafa3e64d0..d5f4135b2c3 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -541,7 +541,7 @@ ul.sidenav code {
.react-admin-logo {
margin: 0 0.5em 0 1em;
display: none;
- padding: 0.5em 0;
+ padding: 0.75em 0;
height: 100%;
}
body.no-sidebar .react-admin-logo {
From f0aceb19676d4c03c93e236a3609d9ecb95dd0db Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 13:51:01 +0200
Subject: [PATCH 6/9] Correction from PR
https://github.com/marmelab/react-admin/pull/7876#issuecomment-1162825870
---
docs/css/style-v12.css | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index d5f4135b2c3..a93c8766ec1 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -24,6 +24,10 @@ main > .container {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
+ main > .container {
+ width: 100%;
+ padding: 1em;
+ }
}
/* Sticky TOC */
From 68fcadfdaa7a9c010fbaa877d1b16722c948b68a Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 16:20:21 +0200
Subject: [PATCH 7/9] Comments from FZ
---
docs/_layouts/default.html | 12 +++++++-----
docs/css/style-v12.css | 14 +++++++++++---
2 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index d49e7d9fa59..df763f57f91 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -60,12 +60,14 @@
<main>
<div class="container sticker-container">
<div class="row">
- <div
- class="col s12 m8 markdown-section DocSearch-content toc-content"
- >
- {{ content }}
+ <div class="col s12 m9">
+ <div
+ class="markdown-section DocSearch-content toc-content"
+ >
+ {{ content }}
+ </div>
</div>
- <div class="col hide-on-small-only m4 toc-container">
+ <div class="col hide-on-small-only m3 toc-container">
<div class="toc"></div>
</div>
</div>
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index a93c8766ec1..f1bc8917fd3 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -1,7 +1,11 @@
/* Layout */
main > .container {
- padding-top: 30px;
+ padding-top: 50px;
+}
+main > .container .markdown-section {
+ max-width: 700px;
+ margin: 0 auto;
}
@media only screen and (min-width: 992px) {
body:not(.no-sidebar) header,
@@ -24,9 +28,13 @@ main > .container {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
+ main .markdown-section {
+ padding-left: 2em;
+ }
main > .container {
width: 100%;
- padding: 1em;
+ padding-left: 1em;
+ padding-right: 1em;
}
}
@@ -47,7 +55,7 @@ main > .container {
/* Navigation */
-.nav-wrapper {
+nav {
background: linear-gradient(145deg, #027be3 11%, #1a237e 75%);
}
nav ul#nav-mobile a {
From 1d051e9cfbf349ecc0735f3d023d6a2925538fb6 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 18:15:13 +0200
Subject: [PATCH 8/9] Correction from PR
---
docs/css/style-v12.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index f1bc8917fd3..1719da98e7c 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -4,7 +4,7 @@ main > .container {
padding-top: 50px;
}
main > .container .markdown-section {
- max-width: 700px;
+ max-width: 750px;
margin: 0 auto;
}
@media only screen and (min-width: 992px) {
From 578b1e42636caf5efb8679d163fca9bf9816e911 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 22 Jun 2022 18:20:12 +0200
Subject: [PATCH 9/9] Comment from PR
---
docs/css/style-v12.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/css/style-v12.css b/docs/css/style-v12.css
index 1719da98e7c..2fde1fdad4c 100644
--- a/docs/css/style-v12.css
+++ b/docs/css/style-v12.css
@@ -4,7 +4,7 @@ main > .container {
padding-top: 50px;
}
main > .container .markdown-section {
- max-width: 750px;
+ max-width: 740px;
margin: 0 auto;
}
@media only screen and (min-width: 992px) {