Overlay a Bootstrap Row completely - html

Question

In many web environments with some degree of interaction among Users, if the platform allows, one can block another and effectively not even see the blocked person' posts.
Thinking about it, I decided to implement such a feature in a commenting system I made. Here's a fragment of it.
Through a class .blocked added to the wrapper of two Bootstrap 5 .row, I managed to style the pseudo-selector ::before to cover the whole content as desired, but in order to add some text in a non-hard-coded way, I ended up having to use a data-attribute.
It works, yes, but even though the visual background extends to the whole width, this added content does not, it gets limited by the width of these two rows within.
Also, it's not very much flexible as it limits my customization options, especially through Javascript, since I don't have other tags within to manipulate.
So, how could I accomplish my goal in a flexible way?
html,
body {
height: 100%;
width: 75%;
margin-top: 5%;
}
.wrapper {
min-height: 100vh;
height: 100vh;
}
main {
flex: 1;
}
/** This is not really hard-coded like, but... */
#comment_851030477 {
border: 1px solid black;
padding: 1rem;
}
.blocked {
background-color: #000;
display: flex;
bottom: 0;
left: 0;
position: relative;
top: 0;
}
.blocked>* {
visibility: hidden;
}
.blocked::before {
align-self: center;
color: #FFF;
content: attr(data-blocked);
display: flex;
margin: -1rem;
visibility: visible;
width: 100%;
}
.picture {
border: 1px solid blue;
}
/** Icons */
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.edit,
.icon.delete {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
.icon.block,
.icon.unblock {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
.icon.follow,
.icon.unfollow {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<main class="container-fluid">
<div class="row w-100 px-3">
<div class="col">
<section>
<div class="container blocked" id="comment_851030477" data-blocked="THIS USER IS BLOCKED">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="d-none block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
<div class="container mt-3" id="comment_851030477">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture foil"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
</section>
</div>
</div>
</main>

Answer 1

After cooling down a bit, I decided to have all of the necessary markup ready with control-classes to be manipulated with Javascript.
This is the final result, despite the positioning awkwardness and the fact SVG icons remain visible here.
$( '#comments' ).on( 'click', '.blocked a.reveal', function() {
$( this ).closest( '.container' )
.removeClass( 'blocked' )
.find( '.blocked-overlay' )
.addClass( 'd-none' );
})
html, body {
height: 100%;
width: 75%;
margin-top: 5%;
}
.wrapper {
min-height: 100vh;
height: 100vh;
}
main {
flex: 1;
}
/** This is not really hard-coded like this, but... */
#comment_851030477 {
border: 1px solid black;
padding: 1rem;
position: relative;
}
.blocked .blocked-overlay {
background-color: #FFF;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.blocked .blocked-overlay .reveal {
margin-left: .3rem;
}
.picture {
border: 1px solid blue;
}
/** Icons */
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.edit, .icon.delete {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
.icon.block, .icon.unblock {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
.icon.follow, .icon.unfollow {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="d-flex flex-column" data-loaded="true">
<main class="container-fluid">
<div class="row w-100 px-3">
<div class="col">
<section id="comments">
<div class="container blocked" id="comment_851030477">
<div class="blocked-overlay">
<p class="d-inline-flex justify-content-center">
You have blocked the author of this comment
</p>
<p class="d-inline-flex justify-content-center">
If you still want to see it,
<a href="javascript:void(0)" class="reveal">
<span>click here</span>
</a>
</p>
</div>
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="d-none block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
<div class="container mt-3" id="comment_851030477">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture foil"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
</section>
</div>
</div>
</main>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="edit-symbol" viewBox="0 0 24 24">
<path d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z" />
</symbol>
<symbol id="delete-symbol" viewBox="0 0 24 24">
<path d="M18.984 3.984v2.016h-13.969v-2.016h3.469l1.031-0.984h4.969l1.031 0.984h3.469zM6 18.984v-12h12v12q0 0.797-0.609 1.406t-1.406 0.609h-7.969q-0.797 0-1.406-0.609t-0.609-1.406z" />
</symbol>
<symbol id="block-symbol" viewBox="0 0 24 28">
<path d="M20.5 13.953c0-1.703-0.5-3.281-1.359-4.609l-11.781 11.766c1.344 0.875 2.938 1.391 4.641 1.391 4.688 0 8.5-3.828 8.5-8.547zM4.891 18.625l11.797-11.781c-1.344-0.906-2.953-1.422-4.688-1.422-4.688 0-8.5 3.828-8.5 8.531 0 1.734 0.516 3.328 1.391 4.672zM24 13.953c0 6.656-5.375 12.047-12 12.047s-12-5.391-12-12.047c0-6.641 5.375-12.031 12-12.031s12 5.391 12 12.031z"/>
</symbol>
<symbol id="unblock-symbol" viewBox="0 0 24 24">
<path d="M11.859 9h0.141q1.219 0 2.109 0.891t0.891 2.109v0.188zM7.547 9.797q-0.563 1.125-0.563 2.203 0 2.063 1.477 3.539t3.539 1.477q1.078 0 2.203-0.563l-1.547-1.547q-0.375 0.094-0.656 0.094-1.219 0-2.109-0.891t-0.891-2.109q0-0.281 0.094-0.656zM2.016 4.266l1.266-1.266 17.719 17.719-1.266 1.266q-0.234-0.234-1.477-1.453t-1.898-1.875q-2.016 0.844-4.359 0.844-3.703 0-6.703-2.063t-4.313-5.438q0.516-1.219 1.617-2.695t2.133-2.273q-0.563-0.563-1.57-1.594t-1.148-1.172zM12 6.984q-0.938 0-1.828 0.375l-2.156-2.156q1.828-0.703 3.984-0.703 3.703 0 6.68 2.063t4.289 5.438q-1.125 2.766-3.422 4.734l-2.906-2.906q0.375-0.891 0.375-1.828 0-2.063-1.477-3.539t-3.539-1.477z"></path>
</symbol>
<symbol id="follow-symbol" viewBox="0 0 32 28">
<path d="M11 14c-3.313 0-6-2.688-6-6s2.688-6 6-6 6 2.688 6 6-2.688 6-6 6zM26 16h5.5c0.266 0 0.5 0.234 0.5 0.5v3c0 0.266-0.234 0.5-0.5 0.5h-5.5v5.5c0 0.266-0.234 0.5-0.5 0.5h-3c-0.266 0-0.5-0.234-0.5-0.5v-5.5h-5.5c-0.266 0-0.5-0.234-0.5-0.5v-3c0-0.266 0.234-0.5 0.5-0.5h5.5v-5.5c0-0.266 0.234-0.5 0.5-0.5h3c0.266 0 0.5 0.234 0.5 0.5v5.5zM14.5 19.5c0 1.094 0.906 2 2 2h4v3.719c-0.766 0.562-1.734 0.781-2.672 0.781h-13.656c-2.5 0-4.172-1.5-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.25 0 0.422 0.109 0.609 0.266 1.531 1.172 3.016 1.906 4.984 1.906s3.453-0.734 4.984-1.906c0.187-0.156 0.359-0.266 0.609-0.266 1.328 0 2.5 0.5 3.391 1.5h-3.484c-1.094 0-2 0.906-2 2v3z"/>
</symbol>
<symbol id="unfollow-symbol" viewBox="0 0 32 28">
<path d="M11 14c-3.313 0-6-2.688-6-6s2.688-6 6-6 6 2.688 6 6-2.688 6-6 6zM27.828 19l3.891 3.891c0.094 0.094 0.141 0.219 0.141 0.359 0 0.125-0.047 0.25-0.141 0.344l-2.125 2.125c-0.094 0.094-0.219 0.141-0.344 0.141-0.141 0-0.266-0.047-0.359-0.141l-3.891-3.891-3.891 3.891c-0.094 0.094-0.219 0.141-0.359 0.141-0.125 0-0.25-0.047-0.344-0.141l-2.125-2.125c-0.094-0.094-0.141-0.219-0.141-0.344 0-0.141 0.047-0.266 0.141-0.359l3.891-3.891-3.891-3.891c-0.094-0.094-0.141-0.219-0.141-0.359 0-0.125 0.047-0.25 0.141-0.344l2.125-2.125c0.094-0.094 0.219-0.141 0.344-0.141 0.141 0 0.266 0.047 0.359 0.141l3.891 3.891 3.891-3.891c0.094-0.094 0.219-0.141 0.359-0.141 0.125 0 0.25 0.047 0.344 0.141l2.125 2.125c0.094 0.094 0.141 0.219 0.141 0.344 0 0.141-0.047 0.266-0.141 0.359zM20.047 19l-2.828 2.828c-0.375 0.375-0.578 0.891-0.578 1.422 0 0.516 0.203 1.031 0.578 1.406l1.297 1.297c-0.219 0.031-0.453 0.047-0.688 0.047h-13.656c-2.5 0-4.172-1.5-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.25 0 0.422 0.109 0.609 0.266 1.5 1.188 3.031 1.906 4.984 1.906s3.484-0.719 4.984-1.906c0.187-0.156 0.359-0.266 0.609-0.266 0.297 0 0.594 0.031 0.891 0.094-0.516 0.5-0.844 0.906-0.844 1.656 0 0.531 0.203 1.047 0.578 1.422z"/>
</symbol>
</defs>
<g id="edit">
<use xlink:href="#edit-symbol"/>
</g>
<g id="delete">
<use xlink:href="#delete-symbol"/>
</g>
<g id="block">
<use xlink:href="#block-symbol"/>
</g>
<g id="unblock">
<use xlink:href="#unblock-symbol"/>
</g>
<g id="follow">
<use xlink:href="#follow-symbol"/>
</g>
<g id="unfollow">
<use xlink:href="#unfollow-symbol"/>
</g>
</svg>
</body>
</html>
During the loop where I render each entry, if I receive the Response indicating a User is blocked I add the class .blocked to the parent container and flip the displayability of the inner .blocked-overlay by removing Bootstrap's d-none
Then, separately, I attach a simple Event Handler to temporarily reveal the hidden content.