From 7f12f5307ff7821d88ec712eb755eab5edcb0e79 Mon Sep 17 00:00:00 2001 From: Issey9119 <96811888+Issey9119@users.noreply.github.com> Date: Tue, 13 Sep 2022 11:31:03 +0530 Subject: [PATCH 1/3] Fix: installation page update --- source/articles/installation/index.html.erb | 116 +++++++- source/javascripts/main.js | 82 +++++- .../partials/articles/_article.scss | 260 +++++++++++++++--- 3 files changed, 414 insertions(+), 44 deletions(-) diff --git a/source/articles/installation/index.html.erb b/source/articles/installation/index.html.erb index 3496110..ab19658 100644 --- a/source/articles/installation/index.html.erb +++ b/source/articles/installation/index.html.erb @@ -24,8 +24,114 @@ platforms: href: /articles/installation/vm --- - + +
+
+
+
+
+
+

Install on Windows

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+ Download for Windows +
For Windows 10 and higher
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1'))
+
Click to copy
+
+
+
+
+
+
+
+

Install on MacOS

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
bash + <(curl -s https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1)
+
Click to copy
+
+
+
+
+
+
+
+

Install on Linux (Ubuntu)

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
wget https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1 -O - | bash
+
Click to copy
+
+
+
+
+
+
+
+

Install on Virtual Machine

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
+

If you cannot get SplashKit working natively, you can download and use the provided SplashKit Virtual Machine. The provided virtual maching comes with everything you need to get started quickly with SplashKit.

+ +

The provided virtual machine is portable and will work with VirtualBox or VMware Player.

+ +
    +
  • Download the SplashKitVM.ova virtual machine archive file
    • +
  • Import this file into your local virtual machine host (eg VirtualBox or VMWare)
    • +
  • Start the virtual machine and login using skuser as the username and splashkit.io as the password.
    • +
+ +

This comes with everything you need installed including:

+ +
    +
  • Ubuntu operating system
    • +
  • Visual Studio Code
    • +
  • Terminal
    • +
  • C/C++ using the clang++ compiler
    • +
  • .NET using dotnet core
    • +
+ +
+ +
+
+
+
+
+
+

Sorry!

+
+
Splashkit isn't available on mobile devices.
+
+
+
+
+
+
+

Other Platforms

+ +
+
+
+ Install on Windows + Install on MacOS + Install on Linux + Install on VM +
+
+
+ diff --git a/source/javascripts/main.js b/source/javascripts/main.js index 561a77e..611af0d 100644 --- a/source/javascripts/main.js +++ b/source/javascripts/main.js @@ -1,3 +1,83 @@ //= require_tree ./vendor //= require_tree . -$('#sticky').Stickyfill(); \ No newline at end of file +$('#sticky').Stickyfill(); + + +$(document).ready(function () { + if (detectMobile()) { + $('.os_mobile').show(); + return; + } + var OSName = "Unknown"; + if (navigator.platform.indexOf("Win") != -1) OSName = "Windows"; + else if (navigator.platform.indexOf("Mac") != -1) OSName = "MacOS"; + else if (navigator.platform.indexOf("X11") != -1) OSName = "MacOS"; + else if (navigator.platform.indexOf("Linux") != -1) OSName = "Linux"; + if (OSName == "MacOS") { + $('.os_mac').show(); + } else if (OSName == "Linux") { + $('.os_linux').show(); + } else { + $('.os_windows').show(); + } + +}); +$('#btn_platforms').click(function (e) { + $('.button_area').slideToggle(200); + +}); +$(".copy_code").click(function (e) { + let code = $('.sk_cli_code').text(); + + $('.copy_code').fadeOut(600); + $('.sk_cli_area').css('overflow', 'scroll'); + if (navigator.clipboard) { + navigator.clipboard.writeText(code); + $(this).text("Copied") + } +}); +$('.sk_cli_area').mouseenter(function () { + $('.copy_code').fadeIn(200); + $(".copy_code").text("Click to copy"); + $('.sk_cli_area').css('overflow', 'hidden'); +}); +$('.sk_cli_area').mouseleave(function () { + $('.copy_code').fadeOut(200); +}); +$('.sk_btn_light').click(function (e) { + e.preventDefault(); + let cid = this.id; + if (cid == "windows") { + $('.content_area').hide(); + $('.os_windows').show(300); + } + if (cid == "mac") { + $('.content_area').hide(); + $('.os_mac').show(300); + } + if (cid == "linux") { + $('.content_area').hide(); + $('.os_linux').show(300); + } + if (cid == "vm") { + $('.content_area').hide(); + $('.os_vm').show(300); + } + +}); + +function detectMobile() { + const toMatch = [ + /Android/i, + /webOS/i, + /iPhone/i, + /iPad/i, + /iPod/i, + /BlackBerry/i, + /Windows Phone/i, + ]; + + return toMatch.some((toMatchItem) => { + return navigator.userAgent.match(toMatchItem); + }); +} \ No newline at end of file diff --git a/source/stylesheets/partials/articles/_article.scss b/source/stylesheets/partials/articles/_article.scss index e6b4b03..4d0c4ad 100644 --- a/source/stylesheets/partials/articles/_article.scss +++ b/source/stylesheets/partials/articles/_article.scss @@ -1,53 +1,237 @@ -body.articles main#content .container { - margin-top: 3.5rem; +@media (min-width: 1400px) { + .container { + max-width: 1140px !important; + } } -.sk-article + .sk-sidebar { - margin-top: 4rem; - margin-bottom: 4rem; +@media (max-width: 800px) { + .container { + max-width: 576px; + } + .sk-search { + display: none; + } + .cont_left { + width: 100% !important; + } + .cont_right { + width: 100% !important; + height: 200px !important; + } + .cont_right img { + object-position: center !important; + } + .cont_left { + text-align: center; + } + .sk_btn_area { + width: 100% !important; + padding: 20px; + } + .sk_btn_light { + width: 220px; + } } -.sk-article:first-child { - margin: 4rem auto 2.5em; - - @include media-breakpoint-down(sm) { - padding: 1.5rem 1.5rem 0; - margin: 0 auto; +@media (max-width: 768px) { + .container { + max-width: 576px; } } -.sk-article img { - @extend .img-thumbnail; + + +a { + color: #0275d8; + text-decoration: none !important; } -.sk-text-center { - text-align: center; +.container { + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 5px; + padding-top: 5px; +} + +.content_area { + overflow: auto; + display: none; + min-height: 300px; } -.sk-article-nav-root { - // Just use the API nav root style - @extend .sk-api-nav-root; +.cont_left { + width: 70%; + float: left; } -a.sk-article-link { - color: unset; - margin-top: 1rem; - margin-bottom: 1rem; - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); +.sk_btn_light, +.sk_btn_light:hover { + border-radius: 3px; + border: 2px solid #36459b; + color: #36459b; + text-decoration: none; display: inline-block; - padding: 1rem; - &:hover { - text-decoration: none; - background-color: $gray-lightest; - span.sk-read-more { - color: $link-hover-color; - } - } - p { - font-size: 0.9rem; - } - span.sk-read-more { - color: $link-color; - } + margin-top: 20px; + text-align: center; + padding: 5px; + margin: 5px; + padding-left: 20px; + padding-right: 20px; } + +.sk_btn_light:hover { + background-color: #828fda; +} + +.sk_btn_light i { + font-size: 1.8rem; + color: #e47d00; + padding-right: 5px; +} + +.cont_right { + width: 30%; + height: 240px; + padding-top: 40px; + float: right; +} + +.cont_right img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: right bottom; + /*-webkit-filter: drop-shadow( 10px 3px 5px rgba(0, 0, 0, .5)); + filter: drop-shadow( 10px 10px 5px rgba(0, 0, 0, .5));*/ +} + +.sk_cli_code { + padding: 15px; + padding-left: 25px; + border-radius: 3px; + background-color: #dbdbdb; + line-height: 2.5rem; + width: max-content; +} + +.sk_cli_area { + overflow: scroll; + position: relative; +} + +.sk_cli_code:hover { + background-color: #cfcfcf; + cursor: pointer; +} + + +.form-control { + border-radius: 0; + box-shadow: none; +} + + +.v_space_40 { + height: 40px; +} + +.sk_btn_dark, +.sk_btn_dark:hover { + padding: 10px; + border-radius: 3px; + background-color: #36459b; + color: #ffffff; + text-decoration: none; + display: block; + margin-top: 20px; + text-align: center; +} + +.sk_btn_dark:hover { + background-color: #828fda; +} + +.sk_btn_dark i { + font-size: 1.8rem; + color: #ffb03a; + padding-right: 5px; +} + +.sk_btn_area { + width: 250px; + margin-bottom: 15px; +} + +.sk_btn_info { + text-align: center; + color: #878787; + font-size: 1.2rem; + padding-top: 5px; +} + +.other_title { + text-align: center; +} + +.other_title h2 { + margin-bottom: 0px; + padding-bottom: 0px; +} + +.other_title span { + font-size: 2rem; + padding: 10px; + padding-top: 0px; + cursor: pointer; + border-color: #ffffff; + transition: border-color 1s; +} + +.other_title span:hover { + color: #707477; + border-radius: 3px; + border: 1px solid #707477; + border-color: #707477; + padding-bottom: 5px; +} + +.button_area { + text-align: center; + display: none; +} + +::-webkit-scrollbar { + width: 3px; + height: 4px; +} + +::-webkit-scrollbar-track { + background: transparent; + height: 5px; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.5); + border-radius: 20px; + border: transparent; +} + +.copy_code { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.766); + color: #ffffff; + text-align: center; + cursor: pointer; + line-height: 5.5rem; + display: none; +} + +.v_space_20 { + height: 20px; +} \ No newline at end of file From 2e7731763edabf02b6b122ad076e9f0eb9671292 Mon Sep 17 00:00:00 2001 From: Issey9119 <96811888+Issey9119@users.noreply.github.com> Date: Tue, 27 Sep 2022 07:36:42 +0530 Subject: [PATCH 2/3] Fix: script links updated --- source/articles/installation/index.html.erb | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/source/articles/installation/index.html.erb b/source/articles/installation/index.html.erb index ab19658..7fd8303 100644 --- a/source/articles/installation/index.html.erb +++ b/source/articles/installation/index.html.erb @@ -40,7 +40,7 @@ platforms:
To install using CLI, Run the following code at the PowerShell Terminal:
-
iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1'))
+
iex ((New-Object System.Net.WebClient).DownloadString('iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh'))'))
Click to copy
@@ -55,8 +55,7 @@ platforms:
To install using CLI, Run the following code at the PowerShell Terminal:
-
bash - <(curl -s https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1)
+
bash <(curl -s https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh)
Click to copy
@@ -71,7 +70,7 @@ platforms:
To install using CLI, Run the following code at the PowerShell Terminal:
-
wget https://raw.githubusercontent.com/abvitasa/splashkit-installer/master/skpackage-install.ps1 -O - | bash
+
wget https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh -O - | bash
Click to copy
From 826ee27a93479938f493c9ece5ebcd5ee0a5d71a Mon Sep 17 00:00:00 2001 From: Issey9119 <96811888+Issey9119@users.noreply.github.com> Date: Sat, 1 Oct 2022 07:34:51 +0530 Subject: [PATCH 3/3] Update index.html.erb --- source/articles/installation/index.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/articles/installation/index.html.erb b/source/articles/installation/index.html.erb index 7fd8303..cb860cf 100644 --- a/source/articles/installation/index.html.erb +++ b/source/articles/installation/index.html.erb @@ -35,7 +35,7 @@ platforms:
SplashKit is a beginner's all-purpose software toolkit.
- Download for Windows + Download for Windows
For Windows 10 and higher
To install using CLI, Run the following code at the PowerShell Terminal: