Work-Related/TYPO3ContentElements
1
0
mirror of https://github.com/SkillDisplay/TYPO3ContentElements.git synced 2024-12-24 23:16:08 +01:00
Code Releases Activity

Integrate CSS and HTML

Browse source
This commit is contained in:
Daniel Siepmann 2020-10-19 11:41:57 +02:00
parent a1dda725a0
commit dc6a6c9c96
Signed by: Daniel Siepmann
GPG key ID: 33D6629915560EF4
11 changed files with 288 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Configuration/TypoScript/setup.typoscript
View file

@ -21,3 +21,9 @@ tt_content.skilldisplay_skillset {
}
}
}
page {
includeCSS {
skilldisplay = EXT:skilldisplay/Resources/Public/Css/Styles.css
}
}

3
README.rst
View file

@ -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/
}

30
Resources/Private/Partials/ContentElements/VerificationBox.html Normal file
View file

@ -0,0 +1,30 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="sd-verification-box sd-font sd-drop-shadow">
<div class="sd-header">
<div>
<span class="sd-title">{title}</span>
<div class="sd-info">
<f:if condition="{count}">
<span>{skillSet.skills -> f:count()}</span>
</f:if>
<a href="{detailUrl}" target="_blank">View on SkillDisplay</a>
</div>
</div>
<div class="sd-brand">
<img src="{f:uri.resource(extensionName: 'skilldisplay', path: 'Images/htl3r.jpg')}" />
</div>
</div>
<p class="sd-description">{description -> f:format.html()}</p>
<div class="sd-buttons">
<a href="{verificationUrl}" class="sd-button sd-learner sd-verified">
<div class="sd-hint">
<f:image src="{f:uri.resource(extensionName: 'skilldisplay', path: 'Images/pending.svg')}" title="Pending" alt="Indicates self assessment is pending" />
</div>
<div class="sd-type">Self Assessment</div>
</a>
</div>
</div>
</html>

14
Resources/Private/Templates/ContentElements/SkillDisplaySkillSet.html
View file

@ -2,12 +2,12 @@
xmlns:sd="http://typo3.org/ns/SkillDisplay/Typo3Extension/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:for each="{skillSets}" as="skillSet">
<div class="card">
<div class="card-body">
<h5 class="card-title">{skillSet.name}</h5>
<p class="card-text">{skillSet.description -> f:format.html()}</p>
<sd:verification.button skillSet="{skillSet.id}"/>
</div>
</div>
{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
})}
</f:for>
</html>

13
Resources/Private/Templates/ContentElements/SkillDisplaySkills.html
View file

@ -2,12 +2,11 @@
xmlns:sd="http://typo3.org/ns/SkillDisplay/Typo3Extension/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:for each="{skills}" as="skill">
<div class="card">
<div class="card-body">
<h5 class="card-title">{skill.title}</h5>
<p class="card-text">{skill.description -> f:format.html()}</p>
<sd:verification.button skill="{skill.id}"/>
</div>
</div>
{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
})}
</f:for>
</html>

187
Resources/Public/Css/Styles.css Normal file
View file

@ -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); } }

4
Resources/Public/Images/checked.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="12" stroke="white" stroke-width="2"/>
<path d="M8 15.9091L11.8182 20L22 11" stroke="white" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

3
Resources/Public/Images/default.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="12" stroke="white" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

4
Resources/Public/Images/disabled.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="12" stroke="white" stroke-width="2"/>
<path d="M15 3C18.0593 3 20.8511 4.1448 22.9706 6.02937L6.02937 22.9706C4.1448 20.8511 3 18.0593 3 15C3 8.37258 8.37258 3 15 3ZM7.47803 24.3504L24.3504 7.47803C26.0079 9.53579 27 12.152 27 15C27 21.6274 21.6274 27 15 27C12.152 27 9.53579 26.0079 7.47803 24.3504Z" stroke="white" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 466 B

BIN
Resources/Public/Images/htl3r.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

38
Resources/Public/Images/pending.svg Normal file
View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
fill="none"
viewBox="0 0 30 30"
height="30"
width="30">
<metadata
id="metadata14">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs12"/>
<circle
id="circle4"
stroke-width="2"
stroke="white"
r="12"
cy="15"
cx="15"/>
<path
id="path6"
fill="white"
d="M18.8038 12.4494C19.385 11.735 19.7059 10.8387 19.7059 9.92687V8H10V9.92687C10 10.8387 10.3203 11.7344 10.902 12.4488L12.7747 14.7488C13.118 15.1719 13.1204 15.7644 12.7801 16.19L10.8814 18.5613C10.313 19.2713 10 20.1581 10 21.0581V23H19.7059V21.0581C19.7059 20.1581 19.3923 19.2719 18.8245 18.5619L16.9258 16.1906C16.5848 15.765 16.5873 15.1725 16.9312 14.7494L18.8038 12.4494ZM18.4926 9.87438C18.4926 10.5625 18.2724 11.1556 17.8739 11.6456L17.2806 12.375H12.4253L11.832 11.6456C11.4316 11.155 11.2132 10.5606 11.2132 9.87438H18.4926V9.87438ZM17.8885 19.3569C18.284 19.8512 18.4926 20.435 18.4926 21.125H17.849C16.6728 19.875 14.8529 19.875 14.8529 19.875C14.8529 19.875 13.0331 19.875 11.8569 21.125H11.2132C11.2132 20.435 11.4219 19.8506 11.8174 19.3569L13.7155 16.9863C13.923 16.7269 14.0619 16.4325 14.1468 16.1256H14.2463V16.7506H15.4596V16.1256H15.5584C15.644 16.4325 15.7823 16.7269 15.9897 16.9856L17.8885 19.3569ZM14.2463 18.625H15.4596V19.25H14.2463V18.625ZM14.2463 17.375H15.4596V18H14.2463V17.375Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB