diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript index e87cb76..49d0364 100644 --- a/Configuration/TypoScript/setup.typoscript +++ b/Configuration/TypoScript/setup.typoscript @@ -21,3 +21,9 @@ tt_content.skilldisplay_skillset { } } } + +page { + includeCSS { + skilldisplay = EXT:skilldisplay/Resources/Public/Css/Styles.css + } +} diff --git a/README.rst b/README.rst index a8b5263..ef8a889 100644 --- a/README.rst +++ b/README.rst @@ -32,6 +32,9 @@ In order to allow TYPO3 to find the Fluid templates for content elements, either add the path `EXT:skilldisplay/Resources/Private/Templates/ContentElements/` in TypoScript, e.g.:: lib.contentElement { + partialRootPaths { + 50 = EXT:skilldisplay/Resources/Private/Partials/ContentElements/ + } templateRootPaths { 50 = EXT:skilldisplay/Resources/Private/Templates/ContentElements/ } diff --git a/Resources/Private/Partials/ContentElements/VerificationBox.html b/Resources/Private/Partials/ContentElements/VerificationBox.html new file mode 100644 index 0000000..4e0be9c --- /dev/null +++ b/Resources/Private/Partials/ContentElements/VerificationBox.html @@ -0,0 +1,30 @@ + + +
+
+
+ {title} +
+ + {skillSet.skills -> f:count()} + + View on SkillDisplay +
+
+
+ +
+
+

{description -> f:format.html()}

+
+ +
+ +
+
Self Assessment
+ +
+
+ + diff --git a/Resources/Private/Templates/ContentElements/SkillDisplaySkillSet.html b/Resources/Private/Templates/ContentElements/SkillDisplaySkillSet.html index 965e5ad..b4d9895 100644 --- a/Resources/Private/Templates/ContentElements/SkillDisplaySkillSet.html +++ b/Resources/Private/Templates/ContentElements/SkillDisplaySkillSet.html @@ -2,12 +2,12 @@ xmlns:sd="http://typo3.org/ns/SkillDisplay/Typo3Extension/ViewHelpers" data-namespace-typo3-fluid="true"> -
-
-
{skillSet.name}
-

{skillSet.description -> f:format.html()}

- -
-
+ {f:render(partial: 'VerificationBox', arguments: { + title: skillSet.name, + count: '{skillSet.skills -> f:count()}', + detailUrl: 'https://my.skilldisplay.eu/skillset/{skillSet.id}', + verificationUrl: '{sd:verification.url(skillSet: skillSet.id)}', + description: skillSet.description + })} diff --git a/Resources/Private/Templates/ContentElements/SkillDisplaySkills.html b/Resources/Private/Templates/ContentElements/SkillDisplaySkills.html index 4b59455..67151c4 100644 --- a/Resources/Private/Templates/ContentElements/SkillDisplaySkills.html +++ b/Resources/Private/Templates/ContentElements/SkillDisplaySkills.html @@ -2,12 +2,11 @@ xmlns:sd="http://typo3.org/ns/SkillDisplay/Typo3Extension/ViewHelpers" data-namespace-typo3-fluid="true"> -
-
-
{skill.title}
-

{skill.description -> f:format.html()}

- -
-
+ {f:render(partial: 'VerificationBox', arguments: { + title: skill.title, + detailUrl: 'https://my.skilldisplay.eu/skill/{skill.id}/0', + verificationUrl: '{sd:verification.url(skill: skill.id)}', + description: skill.description + })} diff --git a/Resources/Public/Css/Styles.css b/Resources/Public/Css/Styles.css new file mode 100644 index 0000000..66df744 --- /dev/null +++ b/Resources/Public/Css/Styles.css @@ -0,0 +1,187 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); +.sd-font { + font-family: 'Lato', sans-serif; + color: #111111; } + +.sd-drop-shadow { + box-shadow: 0 0.2rem 0.25rem 0 rgba(0, 0, 0, 0.1); } + +.sd-verification-box { + margin: 0.5rem; + border: 0.075rem solid #F2F2F2; + border-radius: 0.4rem; + display: flex; + flex-direction: column; + overflow: hidden; + background-color: #ffffff; + box-sizing: content-box; } + +.sd-header { + padding: 1rem; + background-color: #F9F9F9; + border-bottom: 0.075rem solid #F2F2F2; + display: flex; + flex-direction: row; + align-items: center; + position: relative; } + .sd-header :first-child { + flex-grow: 1; } + .sd-header .sd-title { + font-size: 175%; } + .sd-header .sd-info a { + color: #2FB4BC; } + .sd-header .sd-info :nth-child(n) { + margin-right: 1rem; + position: relative; } + .sd-header .sd-info :nth-child(n):after { + content: ''; + width: 0.25rem; + height: 0.25rem; + position: absolute; + background-color: #BDBDBD; + border-radius: 50%; + margin-left: 0.5rem; + top: 50%; } + .sd-header .sd-info :last-child:after { + display: none; } + .sd-header .sd-brand { + height: 2rem; + padding: 0.5rem 1rem; + border-radius: 2.5rem; + border: 0.075rem solid #F2F2F2; + background-color: #ffffff; + overflow: hidden; } + .sd-header .sd-brand img { + height: 100%; } + @media only screen and (max-width: 640px) { + .sd-header .sd-brand { + display: none; } } + +.sd-description { + padding: 1rem; + padding-bottom: 0; + margin: 0; } + +.sd-buttons { + padding: 1rem; + padding-bottom: 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + overflow: hidden; } + +.sd-button { + height: 3rem; + flex-basis: 100%; + border-radius: 0.4rem; + background-color: #F9F9F9; + text-decoration: none; + color: #111111; + overflow: hidden; + display: flex; + flex-direction: row; + flex-grow: 1; + align-items: center; + position: relative; + margin-right: 1rem; + margin-bottom: 0.5rem; + cursor: pointer; } + @media only screen and (min-width: 640px) { + .sd-button { + flex-basis: 40%; } } + @media only screen and (min-width: 920px) { + .sd-button { + flex-basis: 20%; } } + .sd-button:last-child { + margin-bottom: 1rem; } + .sd-button > * { + z-index: 1; } + .sd-button:hover div.sd-hint { + width: 100%; } + .sd-button:active div.sd-type { + background-color: rgba(242, 242, 242, 0.6); } + .sd-button div.sd-hint { + background-color: #828282; + position: absolute; + width: 3rem; + height: 3rem; + transition: 0.5s width; } + .sd-button img { + width: 2.25rem; + height: 2.25rem; + margin: 0.375rem; } + .sd-button div.sd-type { + margin-left: 3rem; + padding-left: 1rem; + background-color: rgba(242, 242, 242, 0.8); + height: 100%; + width: 100%; + display: flex; + align-items: center; + transition: 0.2s background-color; } + @media only screen and (max-width: 640px) { + .sd-button { + margin-right: 0; } } + @media only screen and (min-width: 640px) { + .sd-button:nth-child(even) { + margin-right: 0; } } + @media only screen and (min-width: 920px) { + .sd-button:nth-child(even) { + margin-right: 1rem; } + .sd-button:last-child { + margin-right: 0; } } + +.sd-button.sd-verified div.sd-hint { + width: 100%; } + +.sd-button.sd-learner > div.sd-hint { + background-color: #32BE8C; } + +.sd-button.sd-educator > div.sd-hint { + background-color: #4A89C4; } + +.sd-button.sd-business > div.sd-hint { + background-color: #F7BF5D; } + +.sd-button.sd-certifier > div.sd-hint { + background-color: #E04C5D; } + +.sd-button.sd-disabled { + cursor: default; } + .sd-button.sd-disabled:hover div.sd-hint { + width: 3rem; } + .sd-button.sd-disabled > div.sd-hint { + background-color: #828282 !important; } + +.sd-loading-indicator { + display: flex; + position: absolute; + left: 0; + top: 0; + width: 3rem; + height: 3rem; } + +.sd-loading-indicator:after { + content: ''; + display: block; + position: absolute; + width: 2.35rem; + height: 2.35rem; + transform: translate(0.2rem, 0.2rem); + border-radius: 50%; + border: 0.125rem solid #F9F9F9; + border-color: #F9F9F9 transparent #F9F9F9 transparent; + -webkit-animation: sd-dual-ring 1.2s linear infinite; + animation: sd-dual-ring 1.2s linear infinite; } + +@-webkit-keyframes sd-dual-ring { + 0% { + transform: translate(0.2rem, 0.2rem) rotate(0deg); } + 100% { + transform: translate(0.2rem, 0.2rem) rotate(360deg); } } + +@keyframes sd-dual-ring { + 0% { + transform: translate(0.2rem, 0.2rem) rotate(0deg); } + 100% { + transform: translate(0.2rem, 0.2rem) rotate(360deg); } } diff --git a/Resources/Public/Images/checked.svg b/Resources/Public/Images/checked.svg new file mode 100644 index 0000000..4bcee57 --- /dev/null +++ b/Resources/Public/Images/checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Resources/Public/Images/default.svg b/Resources/Public/Images/default.svg new file mode 100644 index 0000000..405a3e7 --- /dev/null +++ b/Resources/Public/Images/default.svg @@ -0,0 +1,3 @@ + + + diff --git a/Resources/Public/Images/disabled.svg b/Resources/Public/Images/disabled.svg new file mode 100644 index 0000000..35b2296 --- /dev/null +++ b/Resources/Public/Images/disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Resources/Public/Images/htl3r.jpg b/Resources/Public/Images/htl3r.jpg new file mode 100644 index 0000000..3d5d99d Binary files /dev/null and b/Resources/Public/Images/htl3r.jpg differ diff --git a/Resources/Public/Images/pending.svg b/Resources/Public/Images/pending.svg new file mode 100644 index 0000000..e29fffa --- /dev/null +++ b/Resources/Public/Images/pending.svg @@ -0,0 +1,38 @@ + + + + + + image/svg+xml + + + + + + + + +