Skip to content

added always even positions to the smart-layout with an extra padding of 2 #1392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions cli/lib/compass/sass_extensions/sprites/layout/smart.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,54 @@ def layout!
calculate_positions!
end

private # ===========================================================================================>
private # ===========================================================================================>

def calculate_positions!
fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images)
fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images, 1700)

extra_x = 0
extra_y = 0
current_y = 0

fitter.fit!.each do |row|
current_x = 0

row.images.each_with_index do |image, index|

image.left = current_x
image.top = current_y
current_x += image.width

# adds a margin between the sprites on even pixels

if current_x.odd?
current_x += 3
extra_x += 3
else
current_x += 2
extra_x += 2
end

end

current_y += row.height

# adds a margin between the sprites on even pixels

if current_y.odd?
current_y += 3
extra_y += 3
else
current_y += 2
extra_y += 2
end

end
@width = fitter.width
@height = fitter.height

@width = fitter.width + extra_x
@height = fitter.height + extra_y

end

end
end
end
Expand Down
3 changes: 2 additions & 1 deletion cli/lib/compass/sass_extensions/sprites/row_fitter.rb
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ class RowFitter
attr_reader :images, :rows
def_delegators :rows, :[]

def initialize(images)
def initialize(images, width = nil)
@width = width if width
@images = images.sort do |a,b|
if a.height == b.height
b.width <=> a.width
Expand Down
4 changes: 2 additions & 2 deletions cli/test/integrations/sprites_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -572,11 +572,11 @@ def clean(string)
}

.foo {
background-position: 0 50%;
background-position: 56.61972% 0;
}

.bar {
background-position: 33.33333% 100%;
background-position: 68.31169% 0;
}
CSS
end
Expand Down
6 changes: 3 additions & 3 deletions cli/test/units/sprites/layout_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,9 @@ def horizontal(options= {}, uri=URI)
base = smart
base.generate
assert base.smart?
assert_equal 400, base.width
assert_equal 60, base.height
assert_equal [[0, 0], [20, 120], [20, 0], [20, 100], [20, 160]], base.images.map {|i| [i.top, i.left]}
assert_equal 810, base.width
assert_equal 42, base.height
assert_equal [[0, 0], [0, 526], [0, 402], [0, 504], [0, 568]], base.images.map {|i| [i.top, i.left]}
assert File.exists?(base.filename)
FileUtils.rm base.filename
end
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.showgrid { font-family: url('http://assets3.example.com/fonts/grid-BUSTED.ttf'); }

.no-buster { font-family: url('http://assets3.example.com/fonts/grid.ttf'); }

.buster-by-default { font-family: url('http://assets3.example.com/fonts/grid-BUSTED.ttf'); }

.feed { font-family: url('http://assets3.example.com/fonts/feed.ttf?query_string'); }

.dk { font-family: url('http://assets1.example.com/fonts/sub/dk.ttf?query_string'); }
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.showgrid { background-image: url('http://assets0.example.com/images/grid-BUSTED.png'); }

.inlinegrid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUEAYAAACv1qP4AAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAZ0lEQVRYw+3QwQ2AIBAFUTEUwI3+uzN7gDscsIgxEuO8An52J11X73OudfxMraXkzHfO3Y98nQEhA0IGhAwIGRAyIGRAyICQASEDQgaEDAgZEDIgZEDIgJABoZzSGK3tPuN9ERFP7Nw4fg+c5g8V1wAAAABJRU5ErkJggg=='); }

.no-buster { background-image: url('http://assets0.example.com/images/grid.png'); }

.feed { background-image: url('http://assets0.example.com/images/feed.png?query_string'); }

.dk { background-image: url('http://assets0.example.com/images/flags/dk.png?query_string'); }
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@-moz-keyframes test {
0%, 100% {
opacity: 1; }

50% {
opacity: 0; } }
@-webkit-keyframes test {
0%, 100% {
opacity: 1; }

50% {
opacity: 0; } }
@keyframes test {
0%, 100% {
opacity: 1; }

50% {
opacity: 0; } }
.animation {
-moz-animation: test;
-webkit-animation: test;
animation: test; }
22 changes: 22 additions & 0 deletions core/test/integrations/projects/compass/tmp/animation.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@-moz-keyframes test {
0%, 100% {
background-color: red; }

50% {
background-color: blue; } }
@-webkit-keyframes test {
0%, 100% {
background-color: red; }

50% {
background-color: blue; } }
@keyframes test {
0%, 100% {
background-color: red; }

50% {
background-color: blue; } }
.animation {
-moz-animation: test;
-webkit-animation: test;
animation: test; }
3 changes: 3 additions & 0 deletions core/test/integrations/projects/compass/tmp/appearance.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.searchfield {
-moz-appearance: searchfield;
-webkit-appearance: searchfield; }
11 changes: 11 additions & 0 deletions core/test/integrations/projects/compass/tmp/background-clip.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.background-clip {
-moz-background-clip: border;
-o-background-clip: border-box;
-webkit-background-clip: border;
background-clip: border-box; }

.background-clip-multiple {
-moz-background-clip: border, padding, content;
-o-background-clip: border-box, padding-box, content-box;
-webkit-background-clip: border, padding, content;
background-clip: border-box, padding-box, content-box; }
11 changes: 11 additions & 0 deletions core/test/integrations/projects/compass/tmp/background-origin.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.background-origin {
-moz-background-origin: border;
-o-background-origin: border-box;
-webkit-background-origin: border;
background-origin: border-box; }

.background-origin-multiple {
-moz-background-origin: border, padding, content;
-o-background-origin: border-box, padding-box, content-box;
-webkit-background-origin: border, padding, content;
background-origin: border-box, padding-box, content-box; }
17 changes: 17 additions & 0 deletions core/test/integrations/projects/compass/tmp/background-size.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.background-size-default {
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto; }

.background-size-single {
-moz-background-size: 50% 25%;
-o-background-size: 50% 25%;
-webkit-background-size: 50% 25%;
background-size: 50% 25%; }

.background-size-multiple {
-moz-background-size: 4em 3em, 100% auto, 50%;
-o-background-size: 4em 3em, 100% auto, 50%;
-webkit-background-size: 4em 3em, 100% auto, 50%;
background-size: 4em 3em, 100% auto, 50%; }
14 changes: 14 additions & 0 deletions core/test/integrations/projects/compass/tmp/border_radius.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.simple {
-moz-border-radius: 4px / 4px;
-webkit-border-radius: 4px 4px;
border-radius: 4px / 4px; }

.compound {
-moz-border-radius: 2px 5px / 3px 6px;
-webkit-border-radius: 2px 3px;
border-radius: 2px 5px / 3px 6px; }

.crazy {
-moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-webkit-border-radius: 1px 2px;
border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
14 changes: 14 additions & 0 deletions core/test/integrations/projects/compass/tmp/box-sizing.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }

.div {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box; }

.div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
103 changes: 103 additions & 0 deletions core/test/integrations/projects/compass/tmp/box.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
.hbox {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-box-align: stretch;
box-align: stretch; }
.hbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0; }

.vbox {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-box-align: stretch;
box-align: stretch; }
.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0; }

.spacer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1; }

.reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-ms-box-direction: reverse;
box-direction: reverse; }

.box-flex-0 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0; }

.box-flex-1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1; }

.box-flex-2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-ms-box-flex: 2;
box-flex: 2; }

.box-flex-group-0 {
-webkit-box-flex-group: 0;
-moz-box-flex-group: 0;
-ms-box-flex-group: 0;
box-flex-group: 0; }

.box-flex-group-1 {
-webkit-box-flex-group: 1;
-moz-box-flex-group: 1;
-ms-box-flex-group: 1;
box-flex-group: 1; }

.box-flex-group-2 {
-webkit-box-flex-group: 2;
-moz-box-flex-group: 2;
-ms-box-flex-group: 2;
box-flex-group: 2; }

.start {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-box-pack: start;
box-pack: start; }

.end {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-box-pack: end;
box-pack: end; }

.center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center; }
24 changes: 24 additions & 0 deletions core/test/integrations/projects/compass/tmp/box_shadow.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.no-box-shadow {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }

.box-shadow {
-moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
-webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; }

.single-box-shadow {
-moz-box-shadow: 0px 5px #333333;
-webkit-box-shadow: 0px 5px #333333;
box-shadow: 0px 5px #333333; }

.multiple-box-shadows {
-moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
-webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; }

.legacy-single-box-shadow {
-moz-box-shadow: 0px 5px blue;
-webkit-box-shadow: 0px 5px blue;
box-shadow: 0px 5px blue; }
14 changes: 14 additions & 0 deletions core/test/integrations/projects/compass/tmp/brightness.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.black-is-0-percent {
brightness: 0%; }

.white-is-100-percent {
brightness: 100%; }

.green-is-58-point-7-percent {
brightness: 58.7%; }

.blue-is-11-point-4-percent {
brightness: 11.4%; }

.red-is-29-point-9-percent {
brightness: 29.9%; }
Loading