Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
beyaz committed Oct 20, 2024
1 parent 01eeafa commit 283c664
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 15 deletions.
4 changes: 2 additions & 2 deletions ReactWithDotNet.WebSite/Components/PlayButton.cs
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ protected override Element render()

for (var i = 300; i < 700; i += 50)
{
style.Add(WhenMediaWidthGreaterThan(i, Width(i - 50)));
style.Add(WhenMediaWidthGreaterThan(i, Height(h * i / w)));
style.Add(WhenMediaMinWidth(i, Width(i - 50)));
style.Add(WhenMediaMinWidth(i, Height(h * i / w)));
}

return new Backdrop
Expand Down
2 changes: 1 addition & 1 deletion ReactWithDotNet.WebSite/Extensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ static partial class Extensions

public static StyleModifier BorderRadiusForPaper => BorderRadius(4);

public static StyleModifier DisplayNoneWhenMobile => WhenMediaWidthLessThan(MD,DisplayNone);
public static StyleModifier DisplayNoneWhenMobile => WhenMediaMaxWidth(MD,DisplayNone);
public static StyleModifier DisplayNoneWhenNotMobile => MD(DisplayNone);


Expand Down
4 changes: 2 additions & 2 deletions ReactWithDotNet.WebSite/HeaderComponents/HeaderMenuBar.cs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ protected override Element render()
{
new Logo(),
SpaceX(24),
new nav(DisplayFlex, AlignItemsCenter, WhenMediaWidthLessThan(MD, DisplayNone))
new nav(DisplayFlex, AlignItemsCenter, WhenMediaMaxWidth(MD, DisplayNone))
{
MenuAccess.MenuList.Select(x => new MenuView { Model = x })
}
Expand Down Expand Up @@ -52,7 +52,7 @@ protected override Element render()
}
};

return new FlexRow(Gap(15), AlignItemsCenter, MarginRight(50), WhenMediaWidthLessThan(MD, DisplayNone))
return new FlexRow(Gap(15), AlignItemsCenter, MarginRight(50), WhenMediaMaxWidth(MD, DisplayNone))
{
socialMediaLinks.Select(x => new a(Href(x.Link))
{
Expand Down
2 changes: 1 addition & 1 deletion ReactWithDotNet.WebSite/Pages/PageMain.cs
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ protected override Element render()
{
return new FlexColumn(AlignItemsCenter)
{
new div(FontFamily_PlusJakartaSans_ExtraBold, FontSize40, LG(FontSize50), FontWeight800, WhenMediaWidthLessThan(MD, TextAlignCenter))
new div(FontFamily_PlusJakartaSans_ExtraBold, FontSize40, LG(FontSize50), FontWeight800, WhenMediaMaxWidth(MD, TextAlignCenter))
{
LineHeight(50), LG(LineHeight(60)),

Expand Down
2 changes: 1 addition & 1 deletion ReactWithDotNet.WebSite/Pages/PageMileStones.cs
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ class Progressbar : PureComponent

protected override Element render()
{
return new div(SizeFull, BorderRadius(4), Border(1, solid, Blue300), Size(200, 25), WhenMediaWidthGreaterThan(450, Width(300)))
return new div(SizeFull, BorderRadius(4), Border(1, solid, Blue300), Size(200, 25), WhenMediaMinWidth(450, Width(300)))
{
new FlexRowCentered(Width(Value, 100), Background(linear_gradient(90, Blue100, Blue300)), HeightFull, FontSize11, BorderRadius(4)),

Expand Down
16 changes: 8 additions & 8 deletions ReactWithDotNet/Mixin.6.MediaQueries.cs
Original file line number Diff line number Diff line change
Expand Up @@ -47,39 +47,39 @@ public static StyleModifier WhenMediaWidthBetween(int minWidthAsPixel, int maxWi
/// <summary>
/// min-width: <paramref name="widthAsPixel" /> + 'px'
/// </summary>
public static StyleModifier WhenMediaWidthGreaterThan(int widthAsPixel, params StyleModifier[] styleModifiers)
public static StyleModifier WhenMediaMinWidth(int widthAsPixel, params StyleModifier[] styleModifiers)
{
return MediaQuery($"(min-width: {widthAsPixel}px)", styleModifiers);
}

/// <summary>
/// Sample Usage:
/// <code>
/// WhenMediaWidthGreaterThan(SM, BorderRadius(8))
/// WhenMediaMinWidth(SM, BorderRadius(8))
/// </code>
/// </summary>
public static StyleModifier WhenMediaWidthGreaterThan(Func<StyleModifier[], StyleModifier> breakpoint, params StyleModifier[] styleModifiers)
public static StyleModifier WhenMediaMinWidth(Func<StyleModifier[], StyleModifier> breakpoint, params StyleModifier[] styleModifiers)
{
return WhenMediaWidthGreaterThan(ConvertToNumber(breakpoint), styleModifiers);
return WhenMediaMinWidth(ConvertToNumber(breakpoint), styleModifiers);
}

/// <summary>
/// max-width: <paramref name="widthAsPixel" /> + 'px'
/// </summary>
public static StyleModifier WhenMediaWidthLessThan(int widthAsPixel, params StyleModifier[] styleModifiers)
public static StyleModifier WhenMediaMaxWidth(int widthAsPixel, params StyleModifier[] styleModifiers)
{
return MediaQuery($"(max-width: {widthAsPixel}px)", styleModifiers);
}

/// <summary>
/// Sample Usage:
/// <code>
/// WhenMediaWidthLessThan(SM, BorderRadius(8))
/// WhenMediaMaxWidth(SM, BorderRadius(8))
/// </code>
/// </summary>
public static StyleModifier WhenMediaWidthLessThan(Func<StyleModifier[], StyleModifier> breakpoint, params StyleModifier[] styleModifiers)
public static StyleModifier WhenMediaMaxWidth(Func<StyleModifier[], StyleModifier> breakpoint, params StyleModifier[] styleModifiers)
{
return WhenMediaWidthLessThan(ConvertToNumber(breakpoint), styleModifiers);
return WhenMediaMaxWidth(ConvertToNumber(breakpoint), styleModifiers);
}

/// <summary>
Expand Down

0 comments on commit 283c664

Please sign in to comment.