Skip to content

Commit

Permalink
Use raw HTML rather than collapse toggles
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarina
sarina committed Dec 6, 2024
1 parent bedd6c1 commit 0c4da76
Showing 1 changed file with 106 additions and 95 deletions.
201 changes: 106 additions & 95 deletions source/community/release_notes/sumac/customizing_header.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,28 +36,33 @@ With frontend plugin slots, you can now hide the "Help" button:

.. image:: /_images/release_notes/sumac/sumac-header-easy-after.png

For site operators, here is a sample of the ``env.config.jsx`` file used to hide
the the content:
.. raw:: html

.. toggle::
<details>
<summary><a>For site operators, here is a sample of the <code>env.config.jsx</code> file used to hide
the the content.</a></summary>

.. code-block:: javascript
.. code-block:: jsx
import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
const config = {
pluginSlots: {
learning_help_slot: {
plugins: [
{
op: PLUGIN_OPERATIONS.Hide,
},
]
const config = {
pluginSlots: {
learning_help_slot: {
plugins: [
{
op: PLUGIN_OPERATIONS.Hide,
},
},
}
]
},
},
}
export default config;
export default config;
.. raw:: html

</details>

Medium-effort example: Replacing "Course Info" with a custom component
**********************************************************************
Expand All @@ -72,89 +77,95 @@ this case, an icon of a book) in place of the course info component:

.. image:: /_images/release_notes/sumac/sumac-header-medium-after.png

For site operators, here is a sample of the ``env.config.jsx`` file used to
render the custom component:

.. toggle::
.. raw:: html

<details>
<summary><a>For site operators, here is a sample of the <code>env.config.jsx</code> file used to hide
the the content.</a></summary>

.. code-block:: jsx
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import {Helmet} from "react-helmet";
const config = {
pluginSlots: {
course_info_slot: {
keepDefault: false,
plugins: [
{
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'custom_course_info_component',
type: DIRECT_PLUGIN,
RenderWidget: ({ courseTitle }) => (
<>
<Helmet>
<style>
{/*
styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
by Mina Mounir https://codepen.io/mina-mounir under MIT as per
CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
*/}
{`
.book {
margin-left: 20px;
width: 80px;
height: 120px;
padding: 6px;
background: #f3efe1;
border-left: 6px solid #929292;
transform: rotate(-45deg) skewX(10deg) scale(.8);
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
}
.bookHeader {
margin: 0 0 4px 0;
padding: 0;
text-align: center;
font-size: 18px !important;
color: #716f6f;
}
.book:before {
content: "";
width: 6px;
height: 100%;
background: #848484;
position: absolute;
top: 0;
left: 0;
transform: skewY(-45deg) translate(-11.4px, -8.6px);
}
.book:after {
content: "";
width: 106%;
height: 6px;
background: #CCC;
position: absolute;
bottom: 0;
left: 0;
transform: skewX(-45deg) translate(-2.2px, 6px)
}
`}
</style>
</Helmet>
<div class="book">
<div class="bookHeader">{courseTitle}</div>
</div>
</>
),
},
},
]
}
},
}
.. code-block::
export default config;
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import {Helmet} from "react-helmet";
.. raw:: html

const config = {
pluginSlots: {
course_info_slot: {
keepDefault: false,
plugins: [
{
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'custom_course_info_component',
type: DIRECT_PLUGIN,
RenderWidget: ({ courseTitle }) => (
<>
<Helmet>
<style>
{/*
styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
by Mina Mounir https://codepen.io/mina-mounir under MIT as per
CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
*/}
{`
.book {
margin-left: 20px;
width: 80px;
height: 120px;
padding: 6px;
background: #f3efe1;
border-left: 6px solid #929292;
transform: rotate(-45deg) skewX(10deg) scale(.8);
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
}
.bookHeader {
margin: 0 0 4px 0;
padding: 0;
text-align: center;
font-size: 18px !important;
color: #716f6f;
}
.book:before {
content: "";
width: 6px;
height: 100%;
background: #848484;
position: absolute;
top: 0;
left: 0;
transform: skewY(-45deg) translate(-11.4px, -8.6px);
}
.book:after {
content: "";
width: 106%;
height: 6px;
background: #CCC;
position: absolute;
bottom: 0;
left: 0;
transform: skewX(-45deg) translate(-2.2px, 6px)
}
`}
</style>
</Helmet>
<div class="book">
<div class="bookHeader">{courseTitle}</div>
</div>
</>
),
},
},
]
}
},
}
</details>

export default config;

Advanced example: Replacing the entire header
*********************************************
Expand Down

0 comments on commit 0c4da76

Please sign in to comment.