Mobilizon
/
Wordpress-plugin-Gutenberg-Block
mirror of https://codeberg.org/linos/mobilizon-block.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix header margin, add modal backgorund fallback

This commit is contained in:
André Menrath 2021-08-04 15:43:43 +02:00
parent b1243737f6
commit 917fdf9991
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/blocks.style.build.css vendored
View File

@ -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: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}
.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon h3{margin:0.5rem 0 !important}.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;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;background:var(--global--color-background, white)}.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 h4{margin:0.5rem 0 !important}.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}

12
src/block/style.scss
View File

@ -31,11 +31,8 @@ $layout-spacing-sm: $unit-1 !default;
max-width: 600px;
padding: 0.5rem 0;
list-style: none;
time {
font-size: 1rem;
}
h2 {
margin: 0.5rem 0;
h3 {
margin: 0.5rem 0!important;
}
li {
margin-bottom: 3rem;
@ -52,7 +49,6 @@ $layout-spacing-sm: $unit-1 !default;
// Modals
.modal {
align-items: center;
background: var(--global--color-background);
bottom: 0;
display: none;
justify-content: center;
@ -84,6 +80,7 @@ $layout-spacing-sm: $unit-1 !default;
.modal-container {
animation: slide-down .2s ease 1;
z-index: $zindex-0;
background: var(--global--color-background, white);
}
}
@ -168,6 +165,9 @@ $layout-spacing-sm: $unit-1 !default;
padding-left: 1rem;
margin: 2rem auto;
display: block;
h4 {
margin: 0.5rem 0!important;
}
.eventMetaDataBlock {
margin-bottom: 1rem;
}

2
src/init.php
View File

@ -238,7 +238,7 @@ function block_render_callback($attributes, $content) {
<div class="modal-container">
<div class="modal-header">
<a href="#close" class="btn-clear float-right" aria-label="Close"></a>
<div class="modal-title h3">'.$event['title'].'</div>
<h3>'.$event['title'].'</h3>
</div>
<div class="modal-body">
<div class="event-description-wrapper">