Skip to content

Commit 64f1dbb

Browse files
bishaboshabishabosha
committed
update to new style, fix for english page
1 parent 71cf7e9 commit 64f1dbb

31 files changed

+315
-437
lines changed

‎_includes/alt-details.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="alt-details">
2-
<button class="alt-details-toggle" onclick="toggleElement(event, '{{include.targetId}}')">{{include.title}}</button>
3-
<div id="{{include.targetId}}" class="{{include.extraClasses}} alt-details-detail">
1+
<div {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
2+
<button class="alt-details-toggle">{{include.title}}</button>
3+
<div class="alt-details-detail">
44
{{include.detail}}
55
</div>
66
</div>

‎_includes/code-snippet.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="snippet">
1+
<div class="code-snippet-area">
22
{% unless include.nocopy %}
3-
<div class="buttons">
4-
<div><button class="copy-button" onclick="copySnippet(event)"><i class="fa fa-clone"></i></button></div>
3+
<div class="code-snippet-buttons">
4+
<button class="copy-button"><i class="fa fa-clone"></i></button>
55
</div>
66
{% endunless %}
7-
<pre class="snippet-code"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>
7+
<pre class="code-snippet-display"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>
88
</div>

‎_includes/getting-started.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,27 +24,24 @@ Install it on your system with the following instructions.
2424
Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL{% endcapture %}
2525

2626
<div class="main-download">
27-
<div class="recommended-install scala-in-action">
28-
<div class="scala-in-action-content">
29-
<div class="scala-in-action-code">
30-
<div class="scala-text scala-text-large">
31-
{% include tabsection.html language='en' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %}
32-
{% capture checkSetupDetail %}
33-
<div class="wrap">
34-
<p>Check your setup with the command <code>scala -version</code>, which should output:</p>
35-
{% include code-snippet.html codeSnippet=scalaDemo language='bash' nocopy=true %}
36-
<p>If that does not work, you may need to log out and log back in (or reboot) in order for the changes to take effect.</p>
37-
</div>
38-
{% endcapture %}
39-
{% include alt-details.html
40-
title='Testing your setup'
41-
detail=checkSetupDetail
42-
targetId='macos-get-started-alt1'
43-
extraClasses='scala-text scala-text-large'
44-
%}
45-
</div>
27+
<div class="recommended-install">
28+
<div class="place-inline">
29+
{% include tabsection.html language='en' id='install-cs-setup-tabs' collection=site.install_tabs %}
30+
</div>
31+
{% capture checkSetupDetail %}
32+
<div class="wrap-inline">
33+
<div class="wrap">
34+
<p>Check your setup with the command <code>scala -version</code>, which should output:</p>
35+
{% include code-snippet.html nocopy=true language='bash' codeSnippet=scalaDemo %}
36+
<p>If that does not work, you may need to log out and log back in (or reboot) in order for the changes to take
37+
effect.
38+
</p>
4639
</div>
4740
</div>
41+
{% endcapture %}
42+
<div class="place-inline">
43+
{% include alt-details.html id='testing-your-setup' title='Testing your setup' detail=checkSetupDetail %}
44+
</div>
4845
</div>
4946
</div>
5047

‎_includes/tabsection.html

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
<div class="tabsection {{include.extraClasses}}">
2-
<div class="tab">
1+
<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
2+
<ul class="nav-tab">
33
{% for tabRoot in include.collection %}
44
{% if tabRoot.language == include.language %}
5-
<button
6-
id="{{include.category}}-tab-{{tabRoot.tabId}}"
7-
class="tablinks-{{include.category}} tablinks{%if tabRoot.isDefault %} default-tab{% endif %}{% if tabRoot.isDefault or tabRoot.fallbackNoJS %} active{% endif %}"
8-
onclick="openTab(event, '{{include.category}}', '{{tabRoot.tabId}}')"
9-
>{{tabRoot.tabLabel}}</button>
5+
<li class="item-tab">
6+
<a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
7+
data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
8+
</li>
109
{% endif %}
1110
{% endfor %}
12-
</div>
11+
</ul>
1312
{% for tabRoot in include.collection %}
1413
{% if tabRoot.language == include.language %}
15-
<div id="{{include.category}}-{{tabRoot.tabId}}"
16-
{% if tabRoot.isDefault or tabRoot.fallbackNoJS %}
17-
style="display:block;"
18-
{% else %}
19-
style="display: none;"
20-
{% endif %}
21-
class="tabcontent-{{include.category}} tabcontent">{{tabRoot.content}}</div>
14+
<div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
15+
{{tabRoot.content}}
16+
</div>
2217
{% endif %}
2318
{% endfor %}
2419
</div>

‎_install_tabs/1-macos.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
tabId: osx
3+
tabLabel: macOS
4+
language: en
5+
---
6+
<div class="wrap-inline">
7+
<div class="wrap">
8+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
9+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %}
10+
{% assign homebrewAlt = "Alternatively, if you don't use Homebrew:" %}
11+
{% capture homebrewDetail %}
12+
<div class="wrap-narrow">
13+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %}
14+
</div>
15+
{% endcapture %}
16+
{% include alt-details.html
17+
title=homebrewAlt
18+
detail=homebrewDetail
19+
%}
20+
</div>
21+
</div>

‎_install_tabs/1-macos.md

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎_install_tabs/2-linux.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
tabId: linux
3+
tabLabel: Linux
4+
language: en
5+
---
6+
<div class="wrap-inline">
7+
<div class="wrap">
8+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
9+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %}
10+
</div>
11+
</div>

‎_install_tabs/2-linux.md

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎_install_tabs/3-windows.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
tabId: windows
3+
tabLabel: Windows
4+
language: en
5+
---
6+
<div class="wrap-inline">
7+
<div class="wrap">
8+
<p>Download and execute <a href="{{site.data.setup-scala.windows-link}}">the Scala
9+
installer for Windows</a> based on Coursier, and follow the on-screen instructions.</p>
10+
</div>
11+
</div>

‎_install_tabs/3-windows.md

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎_install_tabs/4-other.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
tabId: other
3+
tabLabel: Other
4+
fallbackNoJS: true
5+
language: en
6+
---
7+
<div class="wrap-inline">
8+
<div class="wrap">
9+
<noscript>
10+
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
11+
</noscript>
12+
<p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation"
13+
target="_blank">how to install and run <code>cs setup</code></a>.</p>
14+
</div>
15+
</div>

‎_install_tabs/4-other.md

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎_install_tabs/fr-1-macos.md renamed to ‎_install_tabs/fr-1-macos.html

File renamed without changes.

‎_install_tabs/fr-2-linux.md renamed to ‎_install_tabs/fr-2-linux.html

File renamed without changes.

‎_install_tabs/fr-3-windows.md renamed to ‎_install_tabs/fr-3-windows.html

File renamed without changes.

‎_install_tabs/fr-4-other.md renamed to ‎_install_tabs/fr-4-other.html

File renamed without changes.

‎_install_tabs/ja-1-macos.md renamed to ‎_install_tabs/ja-1-macos.html

File renamed without changes.

‎_install_tabs/ja-2-linux.md renamed to ‎_install_tabs/ja-2-linux.html

File renamed without changes.

‎_install_tabs/ja-3-windows.md renamed to ‎_install_tabs/ja-3-windows.html

File renamed without changes.

‎_install_tabs/ja-4-other.md renamed to ‎_install_tabs/ja-4-other.html

File renamed without changes.

‎_sass/base/helper.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,23 @@
77
@include padding(0 20px);
88
}
99

10+
.place-inline {
11+
// add vertical margin
12+
@include outer-container;
13+
@include margin(20px 0);
14+
}
15+
16+
.wrap-inline {
17+
// add vertical padding
18+
@include outer-container;
19+
@include padding(20px 0);
20+
}
21+
22+
.wrap-narrow {
23+
@include outer-container;
24+
@include padding(0 10px);
25+
}
26+
1027
.dot {
1128
font-size: 10px;
1229
color: rgba($base-font-color-light, 0.6);

‎_sass/components/alt-details.scss

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// ALT-DETAILS
2+
//------------------------------------------------
3+
//------------------------------------------------
4+
5+
.alt-details {
6+
@include span-columns(12);
7+
8+
.alt-details-toggle {
9+
@include span-columns(12);
10+
border: none;
11+
background-color: $brand-tertiary;
12+
padding: 5px 10px;
13+
border-radius: $border-radius-large;
14+
font-size: $font-size-medium;
15+
cursor: pointer;
16+
font-weight: 500;
17+
color: $gray-dark;
18+
19+
&:hover {
20+
background-color: darken($brand-tertiary, 15%);
21+
}
22+
23+
&:after {
24+
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
25+
font-family: "Font Awesome 5 Free";
26+
font-weight: 900;
27+
font-size: 15px;
28+
float: right;
29+
margin-top: 2px;
30+
}
31+
32+
&.alt-details-closed:after {
33+
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
34+
}
35+
}
36+
37+
.alt-details-detail {
38+
// The detail box appears to be underneath the toggle button
39+
// so we add a padding to the top and push it up.
40+
border: $base-border-gray;
41+
padding-top: 15px;
42+
margin-top: 15px;
43+
}
44+
}

‎_sass/components/code.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,45 @@
2323

2424
}
2525
}
26+
27+
.code-snippet-area {
28+
width: 100%;
29+
margin-top: 1em;
30+
margin-bottom: 1em;
31+
position: relative; // so we can position the buttons
32+
33+
&:hover {
34+
35+
// display the copy buttons on hover of the whole area
36+
.code-snippet-buttons {
37+
opacity: 0.95;
38+
39+
&:active {
40+
transition: none;
41+
opacity: 0.7;
42+
}
43+
}
44+
}
45+
46+
.code-snippet-buttons {
47+
opacity: 0; // default invisible until hover
48+
transition: $base-transition;
49+
position: absolute; // so we can position the buttons
50+
right: 3px;
51+
top: 5px;
52+
53+
button {
54+
border: none;
55+
background: #fff;
56+
font-size: $font-size-medium;
57+
color: $gray-darker;
58+
cursor: pointer;
59+
}
60+
}
61+
62+
.code-snippet-display {
63+
margin-top: 0px;
64+
margin-bottom: 0px;
65+
width: 100%;
66+
}
67+
}

0 commit comments

Comments
 (0)