From d979a6489c4014f704a2d45a3835060bfcb67b72 Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Mon, 25 Dec 2023 13:01:13 +0530 Subject: [PATCH 1/7] Added Code Copy Button at top of code block --- input/_Layout.cshtml | 46 +++++++++++++++++++++++++++++++++++++ input/assets/css/theme.scss | 44 +++++++++++++++++++++++------------ 2 files changed, 75 insertions(+), 15 deletions(-) diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 884a87d..a4941ca 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -14,6 +14,7 @@ } } + @@ -345,6 +346,51 @@ }); } }); + + // Create the SVG element + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + svg.setAttribute("height", "16"); + svg.setAttribute("width", "14"); + svg.setAttribute("viewBox", "0 0 448 512"); + svg.innerHTML = ''; + + // use a class selector if available + let blocks = document.querySelectorAll("pre"); + + blocks.forEach((block) => { + // only add button if browser supports Clipboard API + if (navigator.clipboard) { + let button = document.createElement("button"); + + // Clone the SVG and append it to the button + button.appendChild(svg.cloneNode(true)); + + // Add a title attribute for accessibility + button.title = "Copy Code"; + + block.appendChild(button); + + button.addEventListener("click", async () => { + await copyCode(block, button); + }); + } + }); + + async function copyCode(block, button) { + let code = block.querySelector("code"); + let text = code.innerText; + + await navigator.clipboard.writeText(text); + + // visual feedback that task is completed + button.innerHTML = ''; + + setTimeout(() => { + button.innerHTML = svg.cloneNode(true).outerHTML; + }, 1000); + } + @await RenderSectionAsync(SectionNames.Scripts, false) diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index a393d64..70f729f 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -237,21 +237,7 @@ code, code[class*="language-"], pre[class*="language-"] { background: $primary linear-gradient(155deg, $primary, $secondary) repeat-x !important; } -#content { - ul:not([class]), ul[class=""] { - li { - padding-top: $spacer * .25; - padding-bottom: $spacer * .25; - } - } - &.p-4 > pre[class*="language-"] { - margin-left: -$spacer * 1.5; - margin-right: -$spacer * 1.5; - padding-left: $spacer * 1.5; - padding-right: $spacer * 1.5; - } -} #footer { background-color: $gray-900; @@ -469,4 +455,32 @@ code, code[class*="language-"], pre[class*="language-"] { .cluster rect { fill: $gray-100 !important; stroke: $gray-300 !important; - } \ No newline at end of file + } + +/* Search Button*/ +pre[class*="language-"] { + position: relative; + overflow: visible; + margin: 5px 0; + border-radius: 10px; + padding-top: 30px !important; + + button { + position: absolute; + top: 5px; + right: 5px; + font-size: 0.9rem; + padding: 0.15rem; + background-color: #828282; + border: ridge 1px #7b7b7c; + border-radius: 5px; + text-shadow: #c4c4c4 0 0 2px; + outline: none; + background-clip: padding-box; + + &:hover { + cursor: pointer; + background-color: #bcbabb; + } + } +} From 44e540a11b254452b6747ea8763d7beac16cb7f1 Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Mon, 25 Dec 2023 16:12:53 +0530 Subject: [PATCH 2/7] fix: Prevent Button from Scrolling with Horizontal Scroll by Introducing Wrapper --- input/_Layout.cshtml | 9 ++++++++- input/assets/css/theme.scss | 40 ++++++++++++++++++++++++++++--------- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index a4941ca..97927b5 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -369,7 +369,14 @@ // Add a title attribute for accessibility button.title = "Copy Code"; - block.appendChild(button); + // Wrap the pre element with a div of class "language" + let languageDiv = document.createElement("div"); + languageDiv.classList.add("language"); + block.parentNode.insertBefore(languageDiv, block); + languageDiv.appendChild(block); + + // Append the button to the languageDiv + languageDiv.appendChild(button); button.addEventListener("click", async () => { await copyCode(block, button); diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index 70f729f..ca877d9 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -458,20 +458,15 @@ code, code[class*="language-"], pre[class*="language-"] { } /* Search Button*/ -pre[class*="language-"] { +.language { position: relative; - overflow: visible; - margin: 5px 0; - border-radius: 10px; - padding-top: 30px !important; button { - position: absolute; + position: absolute; /* Change this line to fixed */ top: 5px; right: 5px; font-size: 0.9rem; - padding: 0.15rem; - background-color: #828282; + background-color: #bcbabb; border: ridge 1px #7b7b7c; border-radius: 5px; text-shadow: #c4c4c4 0 0 2px; @@ -480,7 +475,34 @@ pre[class*="language-"] { &:hover { cursor: pointer; - background-color: #bcbabb; + background-color: #828282; } } } + +pre[class*="language-"] { + overflow: visible; + margin: 5px 0; + border-radius: 10px; + padding-top: 30px !important; + + /* custom scrollbar */ + &::-webkit-scrollbar { + width: 20px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: #a8bbbf; + } +} From ed74632fc48506928923dd7c1266527957c50978 Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Mon, 25 Dec 2023 16:23:13 +0530 Subject: [PATCH 3/7] Not ment to remove this style --- input/assets/css/theme.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index ca877d9..ca5951b 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -237,7 +237,14 @@ code, code[class*="language-"], pre[class*="language-"] { background: $primary linear-gradient(155deg, $primary, $secondary) repeat-x !important; } - +#content { + ul:not([class]), ul[class=""] { + li { + padding-top: $spacer * .25; + padding-bottom: $spacer * .25; + } + } +} #footer { background-color: $gray-900; From 57ebdcf0f8808cada4013061e5ad4cded865de60 Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Mon, 25 Dec 2023 16:29:16 +0530 Subject: [PATCH 4/7] Removed Unwanted Comments & fixed whitespaces --- input/_Layout.cshtml | 92 ++++++++++++++++++------------------- input/assets/css/theme.scss | 2 +- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 97927b5..8cdc435 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -347,56 +347,56 @@ } }); - // Create the SVG element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("height", "16"); - svg.setAttribute("width", "14"); - svg.setAttribute("viewBox", "0 0 448 512"); - svg.innerHTML = ''; - - // use a class selector if available - let blocks = document.querySelectorAll("pre"); - - blocks.forEach((block) => { - // only add button if browser supports Clipboard API - if (navigator.clipboard) { - let button = document.createElement("button"); - - // Clone the SVG and append it to the button - button.appendChild(svg.cloneNode(true)); - - // Add a title attribute for accessibility - button.title = "Copy Code"; - - // Wrap the pre element with a div of class "language" - let languageDiv = document.createElement("div"); - languageDiv.classList.add("language"); - block.parentNode.insertBefore(languageDiv, block); - languageDiv.appendChild(block); - - // Append the button to the languageDiv - languageDiv.appendChild(button); - - button.addEventListener("click", async () => { - await copyCode(block, button); - }); - } - }); + // Create the SVG element + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + svg.setAttribute("height", "16"); + svg.setAttribute("width", "14"); + svg.setAttribute("viewBox", "0 0 448 512"); + svg.innerHTML = ''; + + // use a class selector if available + let blocks = document.querySelectorAll("pre"); + + blocks.forEach((block) => { + // only add button if browser supports Clipboard API + if (navigator.clipboard) { + let button = document.createElement("button"); + + // Clone the SVG and append it to the button + button.appendChild(svg.cloneNode(true)); + + // Add a title attribute for accessibility + button.title = "Copy Code"; + + // Wrap the pre element with a div of class "language" + let languageDiv = document.createElement("div"); + languageDiv.classList.add("language"); + block.parentNode.insertBefore(languageDiv, block); + languageDiv.appendChild(block); + + // Append the button to the languageDiv + languageDiv.appendChild(button); + + button.addEventListener("click", async () => { + await copyCode(block, button); + }); + } + }); - async function copyCode(block, button) { - let code = block.querySelector("code"); - let text = code.innerText; + async function copyCode(block, button) { + let code = block.querySelector("code"); + let text = code.innerText; - await navigator.clipboard.writeText(text); + await navigator.clipboard.writeText(text); - // visual feedback that task is completed - button.innerHTML = ''; + // visual feedback that task is completed + button.innerHTML = ''; - setTimeout(() => { - button.innerHTML = svg.cloneNode(true).outerHTML; - }, 1000); - } + setTimeout(() => { + button.innerHTML = svg.cloneNode(true).outerHTML; + }, 1000); + } diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index ca5951b..dc17513 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -469,7 +469,7 @@ code, code[class*="language-"], pre[class*="language-"] { position: relative; button { - position: absolute; /* Change this line to fixed */ + position: absolute; top: 5px; right: 5px; font-size: 0.9rem; From 7318bfc3ce0aed08867ca342db4536fc5dcee3ef Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Fri, 29 Dec 2023 21:05:38 +0530 Subject: [PATCH 5/7] Remove extra css styles --- input/_Layout.cshtml | 1 - 1 file changed, 1 deletion(-) diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 8cdc435..a42d98f 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -14,7 +14,6 @@ } } - From 250c1e94d34fee0bd18cb92e7bf1def4c781043c Mon Sep 17 00:00:00 2001 From: RohitM-IN Date: Sat, 30 Dec 2023 01:20:39 +0530 Subject: [PATCH 6/7] Auto Scroll to Active Item #36 --- input/_Layout.cshtml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index a42d98f..f66521e 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -278,6 +278,15 @@ } } } + + // Find the active element + var activeElement = $("#left-sidebar .sidebar-nav-item.active"); + + if (activeElement.length > 0) { + // Scroll to the active element + $("#left-sidebar").scrollTop(activeElement.position().top); + } + } function stickSidebar(sidebar, rect) { // Bottom From ff8c4274bdb6d8f46043d10aba5f5396989ef68f Mon Sep 17 00:00:00 2001 From: Rohit Mahajan Date: Thu, 8 Feb 2024 22:28:24 +0530 Subject: [PATCH 7/7] Fix Scroll for overflow of text instead of visible --- input/assets/css/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index dc17513..dac7535 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -488,7 +488,7 @@ code, code[class*="language-"], pre[class*="language-"] { } pre[class*="language-"] { - overflow: visible; + overflow: auto; margin: 5px 0; border-radius: 10px; padding-top: 30px !important;