Skip to content

Commit

Permalink
Addressed issue #14 Added Test for it.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JarekToro
JarekToro committed Nov 2, 2016
1 parent 78228a8 commit 0014a5e
Show file tree
Hide file tree
Showing 6 changed files with 1,392 additions and 55 deletions.
55 changes: 31 additions & 24 deletions src/main/java/com/jarektoro/responsivelayout/ResponsiveRow.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,6 @@ public class ResponsiveRow extends CssLayout {
private static final String CSS_MARGIN = "margin";
private static final String CSS_MARGIN_SMALL = "margin-small";

private static final String CSS_MARGIN_XS = "margin-xs";
private static final String CSS_MARGIN_SMALL_XS = "margin-small-xs";

private static final String CSS_MARGIN_SM = "margin-sm";
private static final String CSS_MARGIN_SMALL_SM = "margin-small-sm";

private static final String CSS_MARGIN_MD = "margin-md";
private static final String CSS_MARGIN_SMALL_MD = "margin-small-md";

private static final String CSS_MARGIN_LG = "margin-lg";
private static final String CSS_MARGIN_SMALL_LG = "margin-small-lg";

private static final String CSS_V_COL_SPACING = "v-col-spacing";
private static final String CSS_V_COL_SPACING_SMALL = "v-col-spacing-small";

Expand Down Expand Up @@ -61,6 +49,7 @@ public ResponsiveRow() {

setPrimaryStyleName(CSS_ROW);
setWidthUndefined();
addStyleName(CSS_MARGIN);


VerticalLayout verticalLayout = new VerticalLayout();
Expand All @@ -87,30 +76,48 @@ public void setMargin(boolean margin) {


if (margin) {
addStyleName(CSS_MARGIN);
setMargin(MarginSize.NORMAL, ResponsiveColumn.DisplaySize.XS, margin);
} else {
removeStyleName(CSS_MARGIN);
removeStyleName(CSS_MARGIN + "-xs");
}


}


public void setMargin(MarginSize marginSize, boolean margin) {
public void setMargin(MarginSize marginSize, ResponsiveColumn.DisplaySize displaySize, boolean margin) {

String suffix = "";

switch (displaySize) {
case XS:
suffix = "-xs";
break;
case SM:
suffix = "-sm";
break;
case MD:
suffix = "-md";
break;
case LG:
suffix = "-lg";
break;
}

if (margin) {
removeStyleName(CSS_MARGIN);
removeStyleName(CSS_MARGIN_SMALL);
removeStyleName(CSS_MARGIN + suffix);
removeStyleName(CSS_MARGIN + suffix +"-"+ CSS_MARGIN_SMALL + suffix);
if (marginSize == MarginSize.NORMAL) {
addStyleName(CSS_MARGIN);
addStyleName(CSS_MARGIN + suffix);


} else if (marginSize == MarginSize.SMALL) {
addStyleName(CSS_MARGIN);
addStyleName(CSS_MARGIN_SMALL);
addStyleName(CSS_MARGIN + suffix);
addStyleName(CSS_MARGIN + suffix +"-"+ CSS_MARGIN_SMALL + suffix);
}
} else {
removeStyleName(CSS_MARGIN);
removeStyleName(CSS_MARGIN_SMALL);
removeStyleName(CSS_MARGIN + suffix);
removeStyleName(CSS_MARGIN + suffix +"-"+ CSS_MARGIN_SMALL + suffix);
}


Expand Down Expand Up @@ -304,8 +311,8 @@ public ResponsiveRow withMargin(boolean margin) {
return this;
}

public ResponsiveRow withMargin(MarginSize size, boolean margin) {
setMargin(size, margin);
public ResponsiveRow withMargin(MarginSize size, ResponsiveColumn.DisplaySize displaySize, boolean margin) {
setMargin(size,displaySize, margin);
return this;
}

Expand Down
221 changes: 197 additions & 24 deletions src/main/resources/com/jarektoro/responsivelayout/_row.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,45 +60,218 @@
}

&-margin {
margin: 2rem !important;

margin: 0;

&.v-col-spacing {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
margin-top: -1rem;
margin-bottom: -1rem;
}
&.h-col-spacing {
margin-right: 1rem !important;
margin-left: 1rem !important;
margin-right: -1rem;
margin-left: -1rem;
> .rl-col {
padding-left: 1rem;
padding-right: 1rem;
}
}

&.v-col-spacing > .rl-col {
padding-top: 1rem;
padding-bottom: 1rem;
}

&.v-col-spacing.v-col-spacing-small {
margin-top: 1.4rem !important;
margin-bottom: 1.4rem !important;
margin-top: -.3rem;
margin-bottom: -.3rem;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: 1.4rem !important;
margin-left: 1.4rem !important;
margin-right: -.3rem;
margin-left: -.3rem;
> .rl-col {
padding-left: .3rem;
padding-right: .3rem;
}
}
&-small {
margin: 1rem !important;
&.v-col-spacing {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
&.v-col-spacing.v-col-spacing-small > .rl-col {
padding-top: .3rem;
padding-bottom: .3rem;
}
@media only screen and (max-width: 47em) {

&.margin-xs {
margin: 2rem !important;

&.v-col-spacing {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
&.h-col-spacing {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: 1.4rem !important;
margin-bottom: 1.4rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: 1.4rem !important;
margin-left: 1.4rem !important;
}
&-margin-small-xs {
margin: 1rem !important;
&.v-col-spacing {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
&.h-col-spacing {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: .7rem !important;
margin-bottom: .7rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: .7rem !important;
margin-left: .7rem !important;
}
}
}
&.h-col-spacing {
margin-right: 0rem !important;
margin-left: 0rem !important;
}

@media only screen and (min-width: 48em) {
//SM
&.margin-sm {
margin: 2rem !important;

&.v-col-spacing {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
&.h-col-spacing {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: 1.4rem !important;
margin-bottom: 1.4rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: 1.4rem !important;
margin-left: 1.4rem !important;
}
&-margin-small-sm {
margin: 1rem !important;
&.v-col-spacing {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
&.h-col-spacing {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: .7rem !important;
margin-bottom: .7rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: .7rem !important;
margin-left: .7rem !important;
}
}
}
&.v-col-spacing.v-col-spacing-small {
margin-top: .7rem !important;
margin-bottom: .7rem !important;

}

@media only screen and (min-width: 62em) {
//MD
&.margin-md {
margin: 2rem !important;

&.v-col-spacing {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
&.h-col-spacing {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: 1.4rem !important;
margin-bottom: 1.4rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: 1.4rem !important;
margin-left: 1.4rem !important;
}
&-margin-small-md {
margin: 1rem !important;
&.v-col-spacing {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
&.h-col-spacing {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: .7rem !important;
margin-bottom: .7rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: .7rem !important;
margin-left: .7rem !important;
}
}
}
&.h-col-spacing.h-col-spacing-small {
margin-right: .7rem !important;
margin-left: .7rem !important;
}

@media only screen and (min-width: 75em) {
//LG
&.margin-lg {
margin: 2rem !important;

&.v-col-spacing {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
&.h-col-spacing {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: 1.4rem !important;
margin-bottom: 1.4rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: 1.4rem !important;
margin-left: 1.4rem !important;
}
&-margin-small-lg {
margin: 1rem !important;
&.v-col-spacing {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
&.h-col-spacing {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
&.v-col-spacing.v-col-spacing-small {
margin-top: .7rem !important;
margin-bottom: .7rem !important;
}
&.h-col-spacing.h-col-spacing-small {
margin-right: .7rem !important;
margin-left: .7rem !important;
}
}
}
}

}
}

}
}

Loading

0 comments on commit 0014a5e

Please sign in to comment.