mirror of
https://github.com/SkillDisplay/TYPO3ContentElements.git
synced 2024-11-24 11:56:09 +01:00
Integrate CSS and HTML
This commit is contained in:
parent
a1dda725a0
commit
dc6a6c9c96
GPG key ID:
33D6629915560EF4
11 changed files with 288 additions and 14 deletions
|
|
@ -21,3 +21,9 @@ tt_content.skilldisplay_skillset {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
page {
|
||||
includeCSS {
|
||||
skilldisplay = EXT:skilldisplay/Resources/Public/Css/Styles.css
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
187
Resources/Public/Css/Styles.css
Normal 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
4
Resources/Public/Images/checked.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 240 B |
3
Resources/Public/Images/default.svg
Normal file
3
Resources/Public/Images/default.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 168 B |
4
Resources/Public/Images/disabled.svg
Normal file
4
Resources/Public/Images/disabled.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 466 B |
BIN
Resources/Public/Images/htl3r.jpg
Normal file
BIN
Resources/Public/Images/htl3r.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
38
Resources/Public/Images/pending.svg
Normal file
38
Resources/Public/Images/pending.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Loading…
Reference in a new issue