Commit 825c1d24 authored by Antonio's avatar Antonio 🇪🇺

Work On How To

parent c07cc05c
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
.sc_card{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);border-radius:4px;background:#fff;margin:2em auto;width:100%;overflow:hidden;padding:1em}.sc_card h1,.sc_card h2,.sc_card h3,.sc_card h4,.sc_card h5,.sc_card h6{font-size:1em;line-height:1.2em;margin:0 0 1em;font-weight:700}.sc_card p{font-size:1em}.sc_card p:last-child{margin-bottom:0}.sc_card p:empty{display:none;margin-bottom:0}.sc_card img{margin-bottom:1em;margin-top:-1em}.sc_card .sc_row{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:15px;margin-top:15px}.sc_card .sc_company{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:15px}.sc_card .sc_company-logo-wrapper,.sc_card .sc_person-image-wrapper{height:auto;margin-top:15px;background:#fff;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.16),0 0 1px rgba(0,0,0,0.08);box-shadow:0 2px 2px rgba(0,0,0,0.16),0 0 1px rgba(0,0,0,0.08);border-radius:4px;max-width:100%;width:auto;overflow:hidden;margin-bottom:12px}.sc_card .sc_company-logo-wrapper img,.sc_card .sc_person-image-wrapper img{width:auto;height:auto;max-width:100%;margin:0}.sc_card .sc_grey-box{background:#f2f2f2;border-radius:4px;padding:16px}.sc_card .sc_grey-box .sc_box-label{font-style:normal;font-weight:600;font-size:14px;line-height:150%;text-transform:uppercase;color:#000;margin-bottom:12px}.sc_card .sc_input-group .sc_input-label{font-style:normal;font-weight:700;font-size:12px;line-height:150%;color:#000}.sc_card .wp-block-structured-content-person__colleague_url{font-size:.875em;word-break:break-word}@media (max-width: 468px){.sc_card p{padding:0 1em 1em}}@media (min-width: 469px){.sc_card img{float:right;margin-left:1em}}@media (max-width: 640px){.sc_card .sc_row{grid-template-columns:1fr;margin-top:0}.sc_card .sc_company{grid-template-columns:1fr}.sc_card .sc_grey-box{margin-top:15px}}.w-100{width:100%}i.mce-ico.mce-i-structured-content{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE5SURBVHgBrZThUcMwDIWfQrgDfiUbdASPkG7ABsAEhU3YAJigsEFHMBtkg+YX9OBi8YyTNmAuuG3enRM7tj/JkhVpzPkaQIFp1OQDWNO9OdYakIER7eZkFtb5cdT/3pv3WzJkty0+XjOcLBzwxIUVP9ehqeG8OugL4AxX05hjE8vGOagC94HTycOA05lyAYe9xTr0tXZwkkEWQN59F3rWeg8LwqqeI4yhxkfe9ocqdkY8TM2vfgScRNsYKvSmtJtHHKC1ObsWyMMP4G7y4jIEPEVZU9q3Z/zlYS+BLv0zTRq2jAF59DmS1UbJi4C8b1dIls/wpx0F0kPGMLkUvYd3o8DCvpc4QhGQ93KJPX4WdGA+CvSlhGTp/0kp7GaPLMcalt6Kt73GASLA9PU89LBSHF/WBOoKk0mbL1wWbz1nKPlvAAAAAElFTkSuQmCC") !important;background-size:85%;background-repeat:no-repeat;background-position:center;margin-right:4px}.mce-window.mce-container.mce-sc_panel .mce-container-body.mce-abs-layout{overflow:hidden}
/**
* #.# Common SCSS
*
* Can include things like variables and mixins
* that are used across the project.
*/
/**
Sizes
*/
/**
Fonts
*/
/**
Colors
*/
/**
Common Styles
*/
.sc_card {
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
background: #fff;
margin: 2em auto;
width: 100%;
overflow: hidden;
padding: 1em; }
.sc_card h1, .sc_card h2, .sc_card h3, .sc_card h4, .sc_card h5, .sc_card h6 {
font-size: 1em;
line-height: 1.2em;
margin: 0 0 1em;
font-weight: 700; }
.sc_card p {
font-size: 1em; }
.sc_card p:last-child {
margin-bottom: 0; }
.sc_card p:empty {
display: none;
margin-bottom: 0; }
.sc_card img {
margin-bottom: 1em;
margin-top: -1em; }
.sc_card .sc_row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15px;
margin-top: 15px; }
.sc_card .sc_company {
display: grid;
grid-template-columns: 2fr 1fr;
grid-column-gap: 15px; }
.sc_card .sc_company-logo-wrapper,
.sc_card .sc_person-image-wrapper {
height: auto;
margin-top: 15px;
background: #fff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
max-width: 100%;
width: auto;
overflow: hidden;
margin-bottom: 12px; }
.sc_card .sc_company-logo-wrapper img,
.sc_card .sc_person-image-wrapper img {
width: auto;
height: auto;
max-width: 100%;
margin: 0; }
.sc_card .sc_grey-box {
background: #f2f2f2;
border-radius: 4px;
padding: 16px; }
.sc_card .sc_grey-box .sc_box-label {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 150%;
text-transform: uppercase;
color: #000;
margin-bottom: 12px; }
.sc_card .sc_input-group .sc_input-label {
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 150%;
color: #000; }
.sc_card .wp-block-structured-content-person__colleague_url {
font-size: .875em;
word-break: break-word; }
@media (max-width: 468px) {
.sc_card p {
padding: 0 1em 1em; } }
@media (min-width: 469px) {
.sc_card img {
float: right;
margin-left: 1em; } }
@media (max-width: 640px) {
.sc_card .sc_row {
grid-template-columns: 1fr;
margin-top: 0; }
.sc_card .sc_company {
grid-template-columns: 1fr; }
.sc_card .sc_grey-box {
margin-top: 15px; } }
/** TinyMCE **/
.w-100 {
width: 100%; }
/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
i.mce-ico.mce-i-structured-content {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE5SURBVHgBrZThUcMwDIWfQrgDfiUbdASPkG7ABsAEhU3YAJigsEFHMBtkg+YX9OBi8YyTNmAuuG3enRM7tj/JkhVpzPkaQIFp1OQDWNO9OdYakIER7eZkFtb5cdT/3pv3WzJkty0+XjOcLBzwxIUVP9ehqeG8OugL4AxX05hjE8vGOagC94HTycOA05lyAYe9xTr0tXZwkkEWQN59F3rWeg8LwqqeI4yhxkfe9ocqdkY8TM2vfgScRNsYKvSmtJtHHKC1ObsWyMMP4G7y4jIEPEVZU9q3Z/zlYS+BLv0zTRq2jAF59DmS1UbJi4C8b1dIls/wpx0F0kPGMLkUvYd3o8DCvpc4QhGQ93KJPX4WdGA+CvSlhGTp/0kp7GaPLMcalt6Kt73GASLA9PU89LBSHF/WBOoKk0mbL1wWbz1nKPlvAAAAAElFTkSuQmCC") !important;
background-size: 85%;
background-repeat: no-repeat;
background-position: center;
margin-right: 4px; }
.mce-window.mce-container.mce-sc_panel .mce-container-body.mce-abs-layout {
overflow: hidden; }
/**
* #.# Styles
*
* CSS for both Frontend+Backend.
*/
......@@ -62,7 +62,7 @@ class StructuredContent_Register_Blocks {
private function __construct() {
$this->_slug = 'structured-content';
$this->blocks = [ 'faq', 'job', 'event', 'person', 'course' ];
$this->blocks = [ 'faq', 'job', 'event', 'person', 'course', 'howto' ];
add_action( 'init', array( $this, 'register_blocks' ), 99 );
}
......
......@@ -79,6 +79,7 @@ class StructuredContent_Shortcodes {
add_shortcode( 'sc_fs_event', [ $this, 'event' ] );
add_shortcode( 'sc_fs_person', [ $this, 'person' ] );
add_shortcode( 'sc_fs_course', [ $this, 'course' ] );
add_shortcode( 'sc_fs_howto', [ $this, 'course' ] );
}
......@@ -223,6 +224,98 @@ class StructuredContent_Shortcodes {
}
}
static public function howto( $atts, $content = null ) {
$merged_atts = shortcode_atts(
array(
'css_class' => '',
'question_tag' => 'h2',
'elements' => '',
), $atts );
if ( $merged_atts['elements'] === '' ) {
$merged_atts = shortcode_atts(
[
'css_class' => '',
'headline' => 'h2',
'img' => 0,
'img_alt' => '',
'question' => '',
'answer' => '',
'html' => 'true',
'elements' => '',
], $atts );
if ( ! empty( $merged_atts['img'] ) ) {
$image_id = intval( $merged_atts['img'] );
$image_url = wp_get_attachment_url( $image_id );
$image_thumburl = wp_get_attachment_image_url( $image_id, array( 150, 150 ) );
$image_meta = wp_get_attachment_metadata( $image_id );
if ( $image_thumburl !== false && $image_meta !== false && $image_url !== false ) {
$merged_atts['img_url'] = $image_url;
$merged_atts['thumbnail_url'] = $image_thumburl;
$merged_atts['img_size'] = array( $image_meta['width'], $image_meta['height'] );
if ( empty( $merged_atts['img_alt'] ) ) {
$merged_atts['img_alt'] = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
}
} else {
$merged_atts['img'] = 0;
}
}
$merged_atts['headline_open_tag'] = '<' . $merged_atts["headline"] . '>';
$merged_atts['headline_close_tag'] = '</' . $merged_atts["headline"] . '>';
$atts = $merged_atts;
if ( isset( $atts['description'] ) && $atts['description'] !== '' ) {
$content = $atts['description'];
}
ob_start();
include STRUCTURED_CONTENT_PLUGIN_DIR . 'shortcodes/faq-deprecated.php';
$output = ob_get_contents();
ob_end_clean();
return $output;
} else {
if ( ! is_array( $merged_atts['elements'] ) ) {
$a = str_replace( "'", '"', $merged_atts['elements'] );
$a = unserialize( $a );
$merged_atts['elements'] = $a;
}
foreach ( $merged_atts['elements'] as $key => $element ) {
if ( ! empty( $element['imageID'] ) ) {
$image_id = intval( $element['imageID'] );
$image_url = wp_get_attachment_url( $image_id );
$image_thumburl = wp_get_attachment_image_url( $image_id, array( 150, 150 ) );
$image_meta = wp_get_attachment_metadata( $image_id );
if ( $image_thumburl !== false && $image_meta !== false && $image_url !== false ) {
$merged_atts['elements'][ $key ]['img_url'] = $image_url;
$merged_atts['elements'][ $key ]['thumbnail_url'] = $image_thumburl;
$merged_atts['elements'][ $key ]['img_size'] = array( $image_meta['width'], $image_meta['height'] );
if ( empty( $merged_atts['elements'][ $key ]['img_alt'] ) ) {
$merged_atts['elements'][ $key ]['img_alt'] = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
}
} else {
$merged_atts['elements'][ $key ]['img'] = 0;
}
}
}
$atts = $merged_atts;
ob_start();
include STRUCTURED_CONTENT_PLUGIN_DIR . 'shortcodes/faq.php';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
}
static public function job( $atts, $content = null ) {
$merged_atts = shortcode_atts(
array(
......
......@@ -16,3 +16,4 @@ import './blocks/job/index.jsx';
import './blocks/event/index.jsx';
import './blocks/person/index.jsx';
import './blocks/course/index.jsx';
import './blocks/howto/index.jsx';
This diff is collapsed.
/**
/* Internal dependencies
*/
import {icons} from '../../utils/icons.jsx'
/**
* WordPress dependencies
*/
const {__} = wp.i18n
export const patterns = [
{
name : 'simple',
label : __('Simple', 'structured-content'),
icon : 'howto',
},
{
name : 'video',
label : __('Video', 'structured-content'),
icon : 'playOutline',
},
{
name : 'direction-and-tips',
label : __('Direction & Tips', 'structured-content'),
icon : 'lightBulb',
},
];
\ No newline at end of file
......@@ -12,6 +12,11 @@
$border-radius: 4px;
$main-unit: 16px;
/**
Fonts
*/
$os-fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/**
Colors
*/
......@@ -19,6 +24,9 @@ $main-unit: 16px;
$green: #114431;
$light-green: #DAF1E8;
/**
Common Styles
*/
.sc_card {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: $border-radius;
......
......@@ -135,9 +135,147 @@
}
}
}
.sc_row {
.sc_row {
align-items: end;
}
@at-root #{&}--parts {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr $main-unit * 1.875;
grid-column-gap: $main-unit;
margin-top: $main-unit * .5;
}
}
.sc_input__id {
color: #718096;
}
.sc_howToLayout {
background: #F7FAFC;
border: 16px solid white;
border-radius: $border-radius;
box-shadow: 0 0 0 1px #E2E8ED;
color: #1A202C;
margin-bottom: $main-unit * 2;
padding: 1em;
min-height: $main-unit * 15;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@at-root #{&}__label {
font-family: $os-fontFamily;
font-size: $main-unit;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: $main-unit;
svg {
fill: currentColor;
margin-right: 1ch;
}
}
@at-root #{&}__instructions {
font-family: $os-fontFamily;
font-size: $main-unit * .875;
line-height: $main-unit * 1.125;
max-width: 30ch;
margin-bottom: 24px;
}
@at-root #{&}__options {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
list-style: none;
margin: 0;
> li {
list-style: none;
margin: 0 $main-unit * .5 $main-unit * .5;
flex-shrink: 1;
}
}
@at-root #{&}__fieldset {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
max-width: 400px;
flex-wrap: wrap;
z-index: 1;
}
@at-root #{&}__optionsButton {
background: white;
border: 1px solid #CBD5E0;
box-sizing: border-box;
border-radius: $border-radius;
padding: $main-unit;
color: #1A202C;
font-size: $main-unit;
line-height: $main-unit;
text-align: center;
font-family: $os-fontFamily;
font-weight: bold;
cursor: pointer;
&[disabled] {
opacity: .5;
pointer-events: none;
}
&:not([disabled]):hover {
border-color: #1A202C;
background-color: #1A202C;
color: white;
}
}
}
.sc_howToStep {
display: grid;
grid-template-columns: 32px 8fr;
grid-column-gap: 24px;
margin-top: 16px;
@at-root #{&}__Id {
width: 32px;
height: 32px;
border-radius: 100%;
text-align: center;
background: #F7FAFC;
border: 1px solid #CBD5E0;
font-size: 14px;
color: #4A5568;
font-weight: bold;
line-height: 1;
padding: 8px 0;
}
@at-root #{&}__delete {
margin-top: 8px;
}
@at-root #{&}__aside {
text-align: center;
}
@at-root #{&}__main {
.sc_row {
display: grid;
grid-template-columns: auto 128px;
margin: 0;
}
}
}
}
\ No newline at end of file
......@@ -13,30 +13,35 @@ const iconClasses = 'dashicon components-structuredcontent-svg';
*/
icons.faq =
<svg className={ iconClasses } width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 20a10 10 0 110-20 10 10 0 010 20zm2-13c0 .3-.2.8-.4 1L10 9.6c-.6.6-1 1.6-1 2.4v1h2v-1c0-.3.2-.8.4-1L13 9.4c.6-.6 1-1.6 1-2.4a4 4 0 10-8 0h2a2 2 0 114 0zm-3 8v2h2v-2H9z"/>
</svg>;
icons.job =
<svg className={ iconClasses } width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12H1v6a2 2 0 002 2h14a2 2 0 002-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 012-2h4a2 2 0 012 2v1h4a2 2 0 012 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
</svg>;
icons.event =
<svg className={ iconClasses } width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 012 2v14a2 2 0 01-2 2H3a2 2 0 01-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"/>
</svg>;
icons.person =
<svg className={ iconClasses } width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2C0 .9.9 0 2 0h16a2 2 0 012 2v16a2 2 0 01-2 2H2a2 2 0 01-2-2V2zm7 4v2a3 3 0 106 0V6a3 3 0 00-6 0zm11 9.1a16 16 0 00-16 0V18h16v-2.9z"/>
</svg>;
icons.course =
<svg className={ iconClasses } width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.3 8l6.7 4 10-6-10-6L0 6h10v2H3.3zM0 8v8l2-2.2V9.2L0 8zm10 12l-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z"/>
</svg>;
icons.howto =
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4h2v2H1V4zm4 0h14v2H5V4zM1 9h2v2H1V9zm4 0h14v2H5V9zm-4 5h2v2H1v-2zm4 0h14v2H5v-2z"/>
</svg>;
/**
* UI Icons
*/
......@@ -81,4 +86,15 @@ icons.minus =
<path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm5-11H5v2h10V9z"/>
</svg>;
export { icons, iconColor };
\ No newline at end of file
icons.playOutline =
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.93 17.07A10 10 0 1117.07 2.93 10 10 0 012.93 17.07zm12.73-1.41A8 8 0 104.34 4.34a8 8 0 0011.32 11.32zM7 6l8 4-8 4V6z"/>
</svg>;
icons.lightBulb =
<svg className={iconClasses} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 13.33a7 7 0 116 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 017 18.5V17zm2-5.1V14h2v-2.1a5 5 0 10-2 0z"/>
</svg>;
export {icons, iconColor};
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment