danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-27 04:24:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow examples to split even if they can't split in the middle

Browse Source
This commit is contained in:
Natalie Weizenbaum 2019-03-28 19:12:50 -07:00
parent f56c48cafc
commit be95e0c7df
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
helpers/sass_helpers.rb
View File

@ -202,11 +202,21 @@ module SassHelpers
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 < 55 && max_css_width < 55
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 #{'can-split' if can_split}",
"data-unique-id": @unique_id)
"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')

6
source/assets/css/components/_sass-syntax-switcher.scss
View File

@ -147,14 +147,14 @@ html .ui-button.ui-state-disabled:active { background: none; }
@mixin -split-css-tabs {
.ui-tabs.can-split {
.ui-tabs-panel {
width: calc(50% - 5px);
&.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; }
}
@ -169,7 +169,7 @@ html .ui-button.ui-state-disabled:active { background: none; }
.css-tab {
position: absolute;
left: 49%;
left: calc(var(--split-location) - 1%);
@include -active-tab;
&,