Skip to content

[#27] [#774] breakpoints service, wise gutters - #2189

Merged
aluarius merged 28 commits into
epicmaxco:release/1.5.0from
aluarius:feat/breakpoints-service
Sep 15, 2022
Merged

[#27] [#774] breakpoints service, wise gutters#2189
aluarius merged 28 commits into
epicmaxco:release/1.5.0from
aluarius:feat/breakpoints-service

Conversation

@aluarius

@aluarius aluarius commented Aug 1, 2022

Copy link
Copy Markdown
Contributor

Close: #27
Close: #774
Close: #2216
Close: #2225

New breakpoints service with amount of features.

Description

This service allows us to:

  1. use reactive breakpoints helpers (lg (bool), lgUp (bool), lgDown (bool), width (number), height (number), current (string) etc.) inside of template or setup function;

image

image

  1. use reactive body class;

image

image

  1. set up own thresholds via Vuestic UI config;
  2. disable the whole service or body class feature via Vuestic UI config;

image

  1. use --va-media-ratio variable for breakpoint-based calculations. For example, it's already done for gutters and spacings:

Lg:
image

Sm:
image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

@aluarius aluarius self-assigned this Aug 1, 2022
@aluarius aluarius added this to the 1.5.0 milestone Aug 1, 2022
@m0ksem

m0ksem commented Aug 1, 2022

Copy link
Copy Markdown
Member

Can we have some type of gutters, while it adds space only between items, but not around them? In addition to current gutters. Quite useful feature, for me at least.

@aluarius

aluarius commented Aug 2, 2022

Copy link
Copy Markdown
Contributor Author

Can we have some type of gutters, while it adds space only between items, but not around them? In addition to current gutters. Quite useful feature, for me at least.

Done.

image

Spacing between items also depends on current breakpoint.

@m0ksem m0ksem left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Le't show some 😎 in plugin service folder and merge it.

Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
@aluarius aluarius mentioned this pull request Aug 9, 2022
Comment thread packages/docs/src/locales/en/en.json Outdated
Comment thread packages/docs/src/locales/en/en.json Outdated
Comment thread packages/docs/src/locales/en/en.json Outdated
Comment thread packages/docs/src/page-configs/services/breakpoints/page-config.ts Outdated
Comment thread packages/ui/src/styles/grid/VaSpacingPlayground.demo.vue
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/docs/src/page-configs/services/breakpoints/code-examples/helpers.ts Outdated
@aluarius
aluarius requested a review from RVitaly1978 August 25, 2022 08:57
@rustem-nasyrov

rustem-nasyrov commented Aug 26, 2022

Copy link
Copy Markdown
Contributor

Oh, I've missed in PR description, that we need to update the docs.

@aluarius

Copy link
Copy Markdown
Contributor Author

Oh, I've missed in PR description, that we need to update the docs.

it's ok, docs are already updated and mentioned problems will be moved to different issues because the are not linked to this one.

Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/services/breakpoints/index.ts Outdated
Comment thread packages/ui/src/composables/useBreakpoints.ts Outdated
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
@aluarius
aluarius requested a review from m0ksem August 29, 2022 12:25
Comment thread packages/docs/src/locales/en/en.json
Comment thread packages/ui/src/services/breakpoints/plugin/index.ts Outdated
Comment thread packages/ui/src/composables/useBreakpoints.ts Outdated
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts
Comment thread packages/ui/src/services/breakpoints/plugin/create-service.ts Outdated
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
Comment thread packages/ui/src/styles/grid/_grid-variables.scss
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
Comment thread packages/ui/src/styles/grid/_grid-variables.scss Outdated
# Conflicts:
#	packages/docs/src/layouts/default.vue
#	packages/docs/src/page-configs/styles/grid/examples/Gutters.vue
#	packages/ui/src/composables/index.ts
#	packages/ui/src/styles/grid/VaCssGridTest.demo.vue
feat: all demos included to demo route
@@ -0,0 +1,19 @@
import { BreakpointsConfig, ThresholdsConfig } from './types'

export const vaBreakpointsSymbol = Symbol('vaBreakpoints')

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest renaming breakpoints to breakpoint almost everywhere, similarly to how other services are implemented.

Logically, breakpoints would mean breakpoint list, which is not the case. Instead it's breakpoint service, which also contains other stuff.

image

Comment thread packages/ui/src/styles/resources/VaBreakpoints.demo.vue Outdated
Comment thread packages/docs/src/page-configs/services/breakpoints/page-config.ts

@asvae asvae left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks excellent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants