diff --git a/dist/blocks.style.build.css b/dist/blocks.style.build.css index 158f604..006f097 100644 --- a/dist/blocks.style.build.css +++ b/dist/blocks.style.build.css @@ -1 +1 @@ -.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon time{font-size:1rem}.wp-block-cgb-block-mobilizon h2{margin:0.5rem 0}.wp-block-cgb-block-mobilizon li{margin-bottom:2.5rem}.wp-block-cgb-block-mobilizon img{width:100%} +.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon time{font-size:1rem}.wp-block-cgb-block-mobilizon h2{margin:0.5rem 0}.wp-block-cgb-block-mobilizon li{margin-bottom:3rem}.wp-block-cgb-block-mobilizon a,.wp-block-cgb-block-mobilizon a:hover{text-decoration:none}.wp-block-cgb-block-mobilizon img{width:100%}.modal{-ms-flex-align:center;align-items:center;background:var(--global--color-background);bottom:0;display:none;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal:target,.modal.active{display:-ms-flexbox;display:flex;opacity:1;z-index:400}.modal:target .modal-overlay,.modal.active .modal-overlay{bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal:target .modal-container,.modal.active .modal-container{-webkit-animation:slide-down .2s ease 1;animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:inherit}.modal.modal-lg .modal-container{max-width:960px}.modal-container{-webkit-box-shadow:0 .2rem .5rem rgba(0,0,0,0.3);box-shadow:0 .2rem .5rem rgba(0,0,0,0.3);background:inherit;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:inherit;padding:.8rem}.modal-container .modal-header .btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem;cursor:pointer;border-radius:.1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;font-size:1.5rem;text-align:center;-webkit-transition:background .2s,border .2s,color .2s,-webkit-box-shadow .2s;transition:background .2s,border .2s,color .2s,-webkit-box-shadow .2s;-o-transition:background .2s,border .2s,box-shadow .2s,color .2s;transition:background .2s,border .2s,box-shadow .2s,color .2s;transition:background .2s,border .2s,box-shadow .2s,color .2s,-webkit-box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.modal-container .modal-header .btn-clear::before{content:"\2715"}.modal-container .modal-header .float-right{float:right !important}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-body .event-description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-wrap:wrap;flex-wrap:wrap}.modal-container .modal-body .event-description-wrapper .event-metadata{min-width:20rem;-ms-flex:1;flex:1;padding-left:1rem;margin:2rem auto;display:block}.modal-container .modal-body .event-description-wrapper .event-metadata .eventMetaDataBlock{margin-bottom:1rem}.modal-container .modal-body .event-description-wrapper .event-description{min-width:20rem;padding:1rem;-ms-flex:2;flex:2}.modal-container .modal-footer{padding:.8rem;text-align:right}.modal-container .modal-footer a:hover{text-decoration:underline} diff --git a/plugin.php b/plugin.php index 303d806..161c821 100644 --- a/plugin.php +++ b/plugin.php @@ -5,7 +5,7 @@ * Description: Mobilizon Block is a Gutenberg Block which can display events from Mobilizon. * Author: André Menrath * Author URI: https://graz.social/@linos - * Version: 0.2 + * Version: 0.3 * License: GPLv3 * License URI: https://www.gnu.org/licenses/gpl-3.0.txt * diff --git a/readme.md b/readme.md index e1e65ba..bb1761e 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ # About +This Plugin is beta-state. Use it carefully! But you are welcome to report bugs or feature wishes. This Wordpress-Plugin is inspired by https://github.com/wordpress-connector-for-mobilizon/connector-mobilizon/. ## Differences to connector-mobilizon @@ -6,6 +7,9 @@ This Wordpress-Plugin is inspired by https://github.com/wordpress-connector-for- - Fetches the events on the server side (php), not on the client side (JavaSkript), which is out-of-the-box GDPR-compatible. # Changelog +## v0.3 - 04. August 2021 +- Add event descriptions in modal box (not optional yet) + ## v0.2 - 04. August 2021 - Enhance backend design - Make setup more fail-proof diff --git a/src/block/style.scss b/src/block/style.scss index 020ec32..09fad5c 100644 --- a/src/block/style.scss +++ b/src/block/style.scss @@ -4,6 +4,28 @@ * CSS for both Frontend+Backend. */ +$zindex-0: 1 !default; +$zindex-1: 100 !default; +$zindex-2: 200 !default; +$zindex-3: 300 !default; +$zindex-4: 400 !default; +$control-width-xs: 180px !default; +$control-width-sm: 320px !default; +$control-width-md: 640px !default; +$control-width-lg: 960px !default; +$unit-h: .1rem !default; +$unit-1: .2rem !default; +$unit-2: .4rem !default; +$unit-3: .6rem !default; +$unit-4: .8rem !default; +$border-radius: $unit-h !default; +$layout-spacing: $unit-2 !default; +$layout-spacing-sm: $unit-1 !default; + +@mixin shadow-variant($offset) { + box-shadow: 0 $offset ($offset + .05rem) * 2 rgba(black, .3); +} + .wp-block-cgb-block-mobilizon { margin: 0 auto; max-width: 600px; @@ -16,9 +38,154 @@ margin: 0.5rem 0; } li { - margin-bottom: 2.5rem; + margin-bottom: 3rem; + } + a, a:hover { + text-decoration: none; } img { width: 100%; } + } + + // Modals + .modal { + align-items: center; + background: var(--global--color-background); + bottom: 0; + display: none; + justify-content: center; + left: 0; + opacity: 0; + overflow: hidden; + padding: $layout-spacing; + position: fixed; + right: 0; + top: 0; + + &:target, + &.active { + display: flex; + opacity: 1; + z-index: $zindex-4; + + .modal-overlay { + //background: rgba($bg-color, .75); + bottom: 0; + cursor: default; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + .modal-container { + animation: slide-down .2s ease 1; + z-index: $zindex-0; + } + } + + &.modal-sm { + .modal-container { + max-width: $control-width-sm; + padding: 0 $unit-2; + } + } + + &.modal-lg { + .modal-overlay { + background: inherit; + } + + .modal-container { + //box-shadow: none; + max-width: $control-width-lg; + } + } +} + +.modal-container { + @include shadow-variant(.2rem); + background: inherit; + border-radius: $border-radius; + display: flex; + flex-direction: column; + max-height: 75vh; + max-width: $control-width-md; + padding: 0 $unit-4; + width: 100%; + + &.modal-fullheight { + max-height: 100vh; + } + + .modal-header { + color: inherit; + padding: $unit-4; + .btn-clear { + background: 0 0; + border: 0; + color: currentColor; + height: 1rem; + line-height: .8rem; + margin-left: .2rem; + margin-right: -2px; + opacity: 1; + padding: .1rem; + text-decoration: none; + width: 1rem; + cursor: pointer; + border-radius: .1rem; + appearance: none; + outline: 0; + font-size: 1.5rem; + text-align: center; + transition: background .2s,border .2s,box-shadow .2s,color .2s; + user-select: none; + white-space: nowrap; + } + .btn-clear::before { + content: "\2715"; + } + .float-right { + float: right !important; + } + } + + .modal-body { + overflow-y: auto; + padding: $unit-4; + position: relative; + .event-description-wrapper { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + .event-metadata { + min-width: 20rem; + flex: 1; + padding-left: 1rem; + margin: 2rem auto; + display: block; + .eventMetaDataBlock { + margin-bottom: 1rem; + } + } + .event-description { + min-width: 20rem; + padding: 1rem; + flex: 2; + } + } + } + + .modal-footer { + padding: $unit-4; + text-align: right; + a:hover { + text-decoration: underline; + } + } +} + diff --git a/src/init.php b/src/init.php index 813c9fa..b15f62b 100644 --- a/src/init.php +++ b/src/init.php @@ -56,11 +56,6 @@ function mobilizon_query($baseURL, $query) { return(wp_remote_post($endpoint, $args)); } - - - - - ob_start(); function block_render_callback($attributes, $content) { // var_dump($attributes); // Debugging only @@ -97,12 +92,27 @@ function block_render_callback($attributes, $content) { url, beginsOn, endsOn, - physicalAddress { - description, - locality - } + description, + attributedTo { + name, + url }, - total + organizerActor { + name, + url + }, + onlineAddress, + picture { + url + }, + physicalAddress { + postalCode, + description, + locality, + street + } + }, + total } } } @@ -119,13 +129,24 @@ function block_render_callback($attributes, $content) { beginsOn, endsOn, status, + description, + attributedTo { + name, + url + }, + organizerActor { + name, + url + }, + onlineAddress, picture { - url + url }, physicalAddress { - id, - description, - locality + postalCode, + description, + locality, + street } }, total @@ -153,14 +174,19 @@ function block_render_callback($attributes, $content) { // Display the event-array in as html list echo '';