DOCS: Hiding Transition to API 2.0 banner - for master (#14949)

Using cookies to keep the banner hidden once the user has closed it.

docs/_static/css/custom.css

@@ -166,15 +166,32 @@ div.highlight {
     border: none;
     border-radius: 0;
     font-weight: bold;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
 }
 
 .transition-banner > p {
     margin-bottom: 0;
 }
 
-.transition-banner .close {
+.transition-banner .close-banner {
+    position:absolute;
+    top:0;
+    right:0;
     padding: 0 1.25rem;
     color: #000;
+    background-color: transparent;
+    border: 0;
+    float: right;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5;
+}
+.hidden-banner {
+    display: none!important;
 }
 
 /* responsiveness */

docs/_static/js/hide_banner.js

@@ -0,0 +1,15 @@
+function closeTransitionBanner() {
+   var cookieContent = 'TransitionBannerIsHiddenX=true;';
+   var expiry ='expires=';
+   var date = new Date();
+   var expirationDate = date.getTime() + (365 * 24 * 60 * 60 * 1000);
+   date.setTime(expirationDate);
+   expiry += date.toUTCString();
+   document.cookie = cookieContent + expiry;
+   var transitionBanner = document.getElementById("info-banner");
+   transitionBanner.classList.add("hidden-banner");
+   }
+ if (document.cookie.split(';').filter(function (find_cookie_name) {return find_cookie_name.trim().indexOf('TransitionBannerIsHiddenX=') === 0; }).length) {
+     var transitionBanner = document.getElementById("info-banner");
+     transitionBanner.classList.add("hidden-banner");
+}

docs/_templates/layout.html

@@ -17,10 +17,11 @@
 
 {% block docs_navbar %}
 {{ super() }}
-<div class="transition-banner container-fluid alert alert-info alert-dismissible fade show" role="alert">
+<div id="info-banner" class="transition-banner">
     <p>OpenVINO 2022.1 introduces a new version of OpenVINO API (API 2.0). For more information on the changes and transition steps, see the <a href="https://docs.openvino.ai/latest/openvino_2_0_transition_guide.html">transition guide</a></p>
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <button type="button" class="close-banner" onclick="closeTransitionBanner()">
       <span aria-hidden="true">&times;</span>
     </button>
 </div>
+<script src="{{ pathto('_static/js/hide_banner.js', 1) }}"></script>
 {% endblock %}