diff --git a/src/components/closed.jsx b/src/components/closed.jsx index 86679842f..cd6a7ae45 100644 --- a/src/components/closed.jsx +++ b/src/components/closed.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import Header from './header' import Summary from './widget-summary' import './login-page.scss' +import EmbedFooter from './widget-embed-footer'; const Closed = () => { @@ -45,6 +46,7 @@ const Closed = () => {

{ state.summary }

{ state.description }

+ diff --git a/src/components/embedded-only.jsx b/src/components/embedded-only.jsx index 4caf60eec..d176a52f6 100644 --- a/src/components/embedded-only.jsx +++ b/src/components/embedded-only.jsx @@ -1,18 +1,21 @@ import React from 'react'; import Summary from './widget-summary' +import EmbedFooter from './widget-embed-footer'; const EmbeddedOnly = () => { return ( -
-
- +
+
+ -
-

Not Playable Here

- Your instructor has not made this widget available outside of the LMS. -
-
-
+
+

Not Playable Here

+ Your instructor has not made this widget available outside of the LMS. +
+ + +
+
) } diff --git a/src/components/login-page.jsx b/src/components/login-page.jsx index 4f9ebf07b..541bf9143 100644 --- a/src/components/login-page.jsx +++ b/src/components/login-page.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react' import Header from './header' import Summary from './widget-summary' import './login-page.scss' +import EmbedFooter from './widget-embed-footer' const LoginPage = () => { @@ -107,6 +108,7 @@ const LoginPage = () => { : '' } + { state.context && state.context == 'widget' ? : ''} diff --git a/src/components/login-page.scss b/src/components/login-page.scss index 3c1b7cfc4..ebafcf27b 100644 --- a/src/components/login-page.scss +++ b/src/components/login-page.scss @@ -3,5 +3,5 @@ span.subtitle { font-size: .7em; - font-weight: 300; + font-weight: 400; } diff --git a/src/components/no-attempts.jsx b/src/components/no-attempts.jsx index e4a3faf80..562e35cdb 100644 --- a/src/components/no-attempts.jsx +++ b/src/components/no-attempts.jsx @@ -1,21 +1,22 @@ import React, { useState, useEffect} from 'react' import Summary from './widget-summary' import Header from './header' +import EmbedFooter from './widget-embed-footer' const NoAttempts = () => { - const [attempts, setAttempts] = useState(null) - const [scoresPath, setScoresPath] = useState(null) + const [attempts, setAttempts] = useState(null) + const [scoresPath, setScoresPath] = useState(null) - useEffect(() => { - waitForWindow().then(() => { - const scoresPath = `/scores${window.IS_EMBEDDED ? '/embed' : ''}/${window.WIDGET_ID}`; + useEffect(() => { + waitForWindow().then(() => { + const scoresPath = `/scores${window.IS_EMBEDDED ? '/embed' : ''}/${window.WIDGET_ID}`; - setScoresPath(scoresPath); - setAttempts(window.ATTEMPTS) - }) - }, []) + setScoresPath(scoresPath); + setAttempts(window.ATTEMPTS) + }) +}, []) - const waitForWindow = async () => { +const waitForWindow = async () => { while(!window.hasOwnProperty('WIDGET_ID') && !window.hasOwnProperty('IS_EMBEDDED') && !window.hasOwnProperty('ATTEMPTS')) { @@ -23,31 +24,33 @@ const NoAttempts = () => { } } - let bodyRender = null - if (!!attempts) { - bodyRender = ( -
-
- - -
-

No remaining attempts

- You've used all { attempts } available attempts. -

- Review previous scores -

-
-
-
- ) - } - - return ( - <> -
- { bodyRender } - - ) + let bodyRender = null + if (!!attempts) { + bodyRender = ( +
+
+ + +
+

No remaining attempts

+ You've used all { attempts } available attempts. +

+ Review previous scores +

+
+ + +
+
+ ) +} + +return ( + <> +
+ { bodyRender } + +) } export default NoAttempts diff --git a/src/components/pre-embed-common-styles.scss b/src/components/pre-embed-common-styles.scss index a67fbc50e..7dbc158eb 100644 --- a/src/components/pre-embed-common-styles.scss +++ b/src/components/pre-embed-common-styles.scss @@ -75,6 +75,17 @@ body { text-align: center; clear: both; + &.pre-embed { + padding: 2em 0; + + background: #f3f3f3; + border-radius: 4px; + + .action_button { + margin: 24px; + } + } + h2 { font-size: 18pt; } @@ -102,11 +113,22 @@ body { .widget_info { position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 1em; min-height: 122px; - padding-left: 110px; + width: calc(100% + 20px); - list-style: none; + top: -15px; + left: -10px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + background: #0093e7; + color: #fff; + li { display: block; margin-right: 10px; @@ -126,18 +148,7 @@ body { } .widget_icon { - position: absolute; - top: 0; - left: -25px; - background: #0093e7; - width: 92px; - height: 92px; - padding: 15px; - text-align: center; - color: #fff; - font-size: 10px; - line-height: 13px; - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + padding-left: 15px; img { width: 92px; @@ -149,6 +160,7 @@ body { } ul.widget_about { + margin: 0; padding: 0; list-style-type: none; @@ -169,6 +181,33 @@ body { } } + .widget-embed-footer { + position: absolute; + bottom: 5px; + + display: flex; + justify-content: space-between; + align-items: center; + + width: calc(100% - 20px); + + font-size: 0.7em; + font-weight: 400; + + color: #5e5e5e; + + a { + &.materia-logo { + + img { + width: auto; + height: 15px; + margin-top: 1px; + } + } + } + } + div#form { ul { diff --git a/src/components/pre-embed-placeholder.jsx b/src/components/pre-embed-placeholder.jsx index ae8e411c9..397aaaec8 100644 --- a/src/components/pre-embed-placeholder.jsx +++ b/src/components/pre-embed-placeholder.jsx @@ -1,8 +1,10 @@ import React, { useState, useEffect} from 'react' import Summary from './widget-summary' +import EmbedFooter from './widget-embed-footer' import './pre-embed-common-styles.scss' + const PreEmbedPlaceholder = () => { const [instId, setInstId] = useState(null) @@ -27,9 +29,10 @@ const PreEmbedPlaceholder = () => {
-
- Play + +
) diff --git a/src/components/widget-embed-footer.jsx b/src/components/widget-embed-footer.jsx new file mode 100644 index 000000000..eefbecf82 --- /dev/null +++ b/src/components/widget-embed-footer.jsx @@ -0,0 +1,15 @@ +import React from 'react' + +const EmbedFooter = () => { + + return ( +
+ materia logo + + Content embedded from Materia. Need a hand? View support options. + +
+ ) +} + +export default EmbedFooter \ No newline at end of file