Maximize button on blog

elmahio · Apr 29, 2024 · b2d2738 · b2d2738
1 parent 317ba0a
commit b2d2738
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -601,7 +601,7 @@ code.powershell.hljs:not(.language-yml) {
  z-index: 1025;
  width: 100%;
  height: 100vh;
- background: #ffffff;
+ background: transparent;
  color: #D8DEE9;
  overflow: auto;
  visibility: hidden;
@@ -611,6 +611,7 @@ code.powershell.hljs:not(.language-yml) {
 .fullscreen-code.is-open {
  visibility: visible;
  transform: scale(1);
+ background: #fff;
 }
 .fullscreen-code pre {
  margin: 0;
@@ -1424,6 +1425,25 @@ kbd {
 }
 
 /* Console hljs - CMD */
+.is-console {
+ background: #0c0c0c !important;
+}
+.is-console .cmd {
+ margin: 0;
+ height: 100%;
+}
+.is-console .fa-square {
+ position: relative;
+ right: -2px;
+ top: -1px;
+}
+.is-console .fa-square::after {
+ content: "\f0c8";
+ position: absolute;
+ left: 14px;
+ top: 11px;
+ background: #2e2e2e;
+}
 .cmd {
  border: 1px solid #393a3b;
  border-radius: 4px;
@@ -1449,15 +1469,27 @@ kbd {
  margin: 0 17px;
  font-size: 13px;
  color: #fff;
+ height: 100%;
+ align-content: center;
 }
 .cmd .cmd-bar .cmd-buttons i:first-child {
  position: relative;
  top: -5px;
 }
+.cmd .cmd-bar .cmd-buttons i:nth-child(2) {
+ z-index: 999;
+ width: 45px;
+ text-align: center;
+ margin: 0;
+}
 .cmd .cmd-bar .cmd-buttons i:last-child {
  margin-right: 6px;
  font-size: 17px;
 }
+.cmd .cmd-bar .cmd-buttons i.btn-fullscreen-mode {
+ padding: unset;
+ background-color: transparent;
+}
 .cmd .cmd-bar .cmd-title {
  position: relative;
  display: flex;
@@ -1624,7 +1656,7 @@ img.gif {
 }
 
 .kg-width-full img,
-.kg-width-wide img{
+.kg-width-wide img {
  // required by gcsan to properly validate the theme
 }
 .kg-gallery-container figcaption {

diff --git a/assets/css/style.min.css b/assets/css/style.min.css
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -71,26 +71,36 @@ $(document).ready(function(){
  var screenScroll = 0;
  var fullScreenWindow = $('.js-fullscreen-code')[0];
 
- $('body').on('click', '.btn-fullscreen-mode', function() {
+ $('body').on('click', '.btn-fullscreen-mode', function(e) {
+ e.stopPropagation();
+
  if (isFullScreenModeCodeOn) {
  $('body').css('overflow', '');
- $(fullScreenWindow).removeClass('is-open').empty();
+ $(fullScreenWindow).removeClass('is-open is-console').empty();
  isFullScreenModeCodeOn = false;
  } else {
- var codeBlock = this.parentNode.parentNode.cloneNode(true);
- $('body').css('overflow', 'hidden');
- $(fullScreenWindow).append(codeBlock);
- $(fullScreenWindow).find('.btn-fullscreen-mode').attr('title', 'Leave fullscreen mode');
- $(fullScreenWindow).find('.btn-fullscreen-mode i').removeClass('fa-expand').addClass('fa-compress');
- $(fullScreenWindow).addClass('is-open');
- isFullScreenModeCodeOn = true;
+ if (e.currentTarget.parentElement.classList.contains('cmd-buttons')) {
+ var codeBlock = this.parentNode.parentNode.parentNode.cloneNode(true);
+ $('body').css('overflow', 'hidden');
+ $(fullScreenWindow).append(codeBlock);
+ $(fullScreenWindow).addClass('is-open is-console');
+ isFullScreenModeCodeOn = true;
+ } else {
+ var codeBlock = this.parentNode.parentNode.cloneNode(true);
+ $('body').css('overflow', 'hidden');
+ $(fullScreenWindow).append(codeBlock);
+ $(fullScreenWindow).find('.btn-fullscreen-mode').attr('title', 'Leave fullscreen mode');
+ $(fullScreenWindow).find('.btn-fullscreen-mode i').removeClass('fa-expand').addClass('fa-compress');
+ $(fullScreenWindow).addClass('is-open');
+ isFullScreenModeCodeOn = true;
+ }
  }
  });
 
  $(document).keyup(function(e) {
  if($(fullScreenWindow).hasClass('is-open') && e.key === "Escape") {
  $('body').css('overflow', '');
- $(fullScreenWindow).removeClass('is-open').empty();
+ $(fullScreenWindow).removeClass('is-open is-console').empty();
  isFullScreenModeCodeOn = false;
  }
  });
@@ -266,7 +276,7 @@ $(window).on('load', function() {
  $(".language-console").each(function(){
  $(this).parent().addClass('pre-console');
  $(this).parent().wrap(function() { return $("<div class='cmd'></div>"); });
- $(this).parent().parent().prepend("<div class='cmd-bar'><div class='cmd-title'><div class='bottom-edges'></div><i class='fal fa-terminal'></i><span class='d-none d-md-inline-block'>Command Prompt</span><span class='d-inline-block d-md-none'>CMD</span><i class='fal fa-times ml-auto mr-0' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod></i></div><div class='cmd-actions' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod><i class='fal fa-plus'></i><i class='fal fa-horizontal-rule'></i><i class='fal fa-chevron-down'></i></div><div class='cmd-buttons d-flex' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod><i class='fal fa-window-minimize'></i><i class='fal fa-square'></i><i class='fal fa-times'></i></div></div>");
+ $(this).parent().parent().prepend("<div class='cmd-bar'><div class='cmd-title'><div class='bottom-edges'></div><i class='fal fa-terminal'></i><span class='d-none d-md-inline-block'>Command Prompt</span><span class='d-inline-block d-md-none'>CMD</span><i class='fal fa-times ml-auto mr-0' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod></i></div><div class='cmd-actions' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod><i class='fal fa-plus'></i><i class='fal fa-horizontal-rule'></i><i class='fal fa-chevron-down'></i></div><div class='cmd-buttons d-flex' href='https://blog.elmah.io/content/images/2019/12/bsod.png' data-bsod><i class='fal fa-window-minimize'></i><i class='fal fa-square btn-fullscreen-mode'></i><i class='fal fa-times'></i></div></div>");
  });
  $('.cmd-title').dblclick(function() {
  $.fancybox.open({

diff --git a/assets/js/main.min.js b/assets/js/main.min.js
diff --git a/assets/js/main.min.js.map b/assets/js/main.min.js.map