mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
Merge pull request #317 from sass/adjacent-tabs
Render syntax examples using adjacent tabs if they're narrow enough Closes #311
This commit is contained in:
Natalie Weizenbaum
GitHub
commit
bf21b7f160
@ -200,9 +200,23 @@ module SassHelpers
|
||||
_syntax_div("CSS Output", "css", css_sections, css_paddings, id)
|
||||
end
|
||||
|
||||
max_source_width = (scss_sections + sass_sections).map {|s| s.split("\n")}.flatten.map(&:size).max
|
||||
max_css_width = css_sections.map {|s| s.split("\n")}.flatten.map(&:size).max
|
||||
|
||||
can_split = max_css_width && (max_source_width + max_css_width) < 110
|
||||
if can_split
|
||||
if max_source_width < 55 && max_css_width < 55
|
||||
split_location = 0.5
|
||||
else
|
||||
# Put the split exactly in between the two longest lines.
|
||||
split_location = 0.5 + (max_source_width - max_css_width) / 110.0 / 2
|
||||
end
|
||||
end
|
||||
|
||||
text = content_tag(:div, contents,
|
||||
class: "code-example",
|
||||
"data-unique-id": @unique_id)
|
||||
class: "code-example #{'can-split' if can_split}",
|
||||
"data-unique-id": @unique_id,
|
||||
"style": ("--split-location: #{split_location * 100}%" if split_location))
|
||||
|
||||
# Newlines between tags cause Markdown to parse these blocks incorrectly.
|
||||
text = text.gsub(%r{\n+<(/?[a-z0-9]+)}, '<\1')
|
||||
|
||||
@ -1,5 +1,40 @@
|
||||
.ui-helper-reset { line-height: inherit; }
|
||||
|
||||
@mixin -active-tab {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $sl-color--regent-grey;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #f8f8f8;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #ebebeb;
|
||||
border-width: 11px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tabs {
|
||||
|
||||
&,
|
||||
@ -7,6 +42,8 @@
|
||||
.ui-tabs-nav li.ui-tabs-active,
|
||||
.ui-tabs-panel { padding: 0; }
|
||||
|
||||
.ui-tabs-panel-inactive { display: none; }
|
||||
|
||||
.ui-tabs-nav {
|
||||
margin-top: -1rem;
|
||||
margin-left: -1em;
|
||||
@ -19,41 +56,11 @@
|
||||
box-shadow:none !important;
|
||||
}
|
||||
|
||||
.ui-tabs-active {
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #f8f8f8;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #ebebeb;
|
||||
border-width: 11px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
.ui-tabs-active { @include -active-tab; }
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
&,
|
||||
&.ui-tabs-active { margin: 0; }
|
||||
|
||||
margin: 0;
|
||||
|
||||
&.css-tab {
|
||||
|
||||
@ -72,8 +79,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tabs-active a { color: $sl-color--regent-grey; }
|
||||
|
||||
.ui-tabs-anchor { padding: .75rem 1rem; }
|
||||
}
|
||||
|
||||
@ -138,3 +143,47 @@ html .ui-button.ui-state-disabled:active { background: none; }
|
||||
&,
|
||||
* { font-size: 1rem; }
|
||||
}
|
||||
|
||||
@mixin -split-css-tabs {
|
||||
.ui-tabs.can-split {
|
||||
.ui-tabs-panel {
|
||||
&.scss, &.sass {
|
||||
width: calc(var(--split-location) - 5px);
|
||||
display: inline-block;
|
||||
&.ui-tabs-panel-inactive { display: none; }
|
||||
}
|
||||
|
||||
&.css {
|
||||
width: calc(100% - var(--split-location) - 5px);
|
||||
float: right;
|
||||
&.ui-tabs-panel-inactive { display: block; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ui-tabs-panel-css-is-active {
|
||||
.scss, .sass {
|
||||
&.ui-tabs-panel.ui-tabs-panel-previously-active { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
||||
.css-tab {
|
||||
position: absolute;
|
||||
left: calc(var(--split-location) - 1%);
|
||||
@include -active-tab;
|
||||
|
||||
&,
|
||||
&.ui-tabs-active { margin-left: 0; }
|
||||
|
||||
::before {content: none}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: sl-px-to-rem(1500px)) {
|
||||
body.documentation { @include -split-css-tabs }
|
||||
}
|
||||
|
||||
@media screen and (min-width: sl-px-to-rem(1000px)) {
|
||||
body.guide { @include -split-css-tabs }
|
||||
}
|
||||
|
||||
@ -47,7 +47,32 @@ $(function() {
|
||||
.prepend("<a href='#example-" + id + "-css'>CSS</a>"));
|
||||
}
|
||||
|
||||
figure.prepend(ul).tabs({active: 0});
|
||||
figure.prepend(ul).tabs({
|
||||
active: 0,
|
||||
beforeActivate: function(event, ui) {
|
||||
// If multiple panels are visible, the CSS tab shouldn't be clickable.
|
||||
if (ui.newPanel.hasClass('css') &&
|
||||
allPanels.filter(":visible").length > 1) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
activate: function(event, ui) {
|
||||
if (ui.newPanel.hasClass('css')) {
|
||||
figure.addClass('ui-tabs-panel-css-is-active');
|
||||
} else {
|
||||
figure.removeClass('ui-tabs-panel-css-is-active');
|
||||
}
|
||||
|
||||
allPanels.removeClass('ui-tabs-panel-previously-active');
|
||||
ui.oldPanel.addClass('ui-tabs-panel-inactive').addClass('ui-tabs-panel-previously-active');
|
||||
ui.newPanel.removeClass('ui-tabs-panel-inactive');
|
||||
allPanels.css('display', '');
|
||||
}
|
||||
});
|
||||
var allPanels = figure.find(".ui-tabs-panel");
|
||||
|
||||
allPanels.slice(1).addClass('ui-tabs-panel-inactive');
|
||||
allPanels.css('display', '');
|
||||
});
|
||||
|
||||
// Switch ALL the tabs (Sass/SCSS) together
|
||||
|
||||
Loading…
Reference in New Issue
Block a user