Skip to content
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

[Playground] Resize panels #1204

Merged
merged 13 commits into from
Oct 8, 2024
Merged

[Playground] Resize panels #1204

merged 13 commits into from
Oct 8, 2024

Conversation

jamesnw
Copy link
Contributor

@jamesnw jamesnw commented Sep 27, 2024

This addresses number 4 in #779.

It adds a dependency on @spectrum-web-components/split-view. While this web component was the best fit we found as far as lightweight and fully featured, it did limit the design, so this does not match our original designs. We're happy to talk about design options or tradeoffs as needed.

https://deploy-preview-1204--sass-lang.netlify.app/playground/

jamesnw and others added 10 commits August 30, 2024 14:53
* main: (23 commits)
  [Playground] Click to Copy (sass#1177)
  Cut a release for a new Dart Sass version
  [Playground] Debug links (sass#1179)
  Add breaking change page for legacy-js-api (sass#1193)
  [Playground] Autocomplete (sass#1166)
  Add a breaking change page for color functions (sass#1192)
  Remove nonexisting `color.saturate()` function (sass#1190)
  Fix unprefixed `color.adjust()` name (sass#1188)
  Sort color functions alphabetically (sass#1187)
  Document color migrator (sass#1186)
  Cut a release for a new Dart Sass version
  Document new color spaces (sass#1055) (sass#1115)
  Cut a release for a new Dart Sass version
  Bump date-fns from 3.6.0 to 4.0.0 (sass#1181)
  Bump rollup from 4.21.2 to 4.21.3 (sass#1182)
  Bump @codemirror/autocomplete from 6.18.0 to 6.18.1 (sass#1183)
  Bump @typescript-eslint/eslint-plugin from 8.5.0 to 8.6.0 (sass#1185)
  Bump markdown-it-anchor from 9.1.0 to 9.2.0 (sass#1184)
  Fix footer not showing the latest versions. (sass#1178)
  [Playground] Code links (sass#1167)
  ...
Copy link

netlify bot commented Sep 27, 2024

Deploy Preview for sass-lang ready!

Name Link
🔨 Latest commit 35b91ac
🔍 Latest deploy log https://app.netlify.com/sites/sass-lang/deploys/670534130bfee400076982aa
😎 Deploy Preview https://deploy-preview-1204--sass-lang.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@nex3
Copy link
Contributor

nex3 commented Sep 27, 2024

I'm not intrinsically opposed to this design, but it does seem like a lot of change to the current style for a relatively limited use-case. Would it be possible to do something with the resize property that's a little less usable for people who want to do resizing but looks better in the common case where people don't?

@stacyk
Copy link
Contributor

stacyk commented Oct 3, 2024

Updates include:

  • White gap between panels (as opposed to the previous thick gray line with slightly larger gripper in the middle)
  • Focus background color matches link hover color

We could add a hover color if we want to, or keep it white.

Another option with CSS resize is in a separate PR for easier previewing

Copy link
Contributor

@nex3 nex3 left a comment

Choose a reason for hiding this comment

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

Oh, if the split-view component supports this look then I'm totally happy with the design 🙂

source/assets/js/playground/split-view.ts Outdated Show resolved Hide resolved
@jamesnw jamesnw requested a review from nex3 October 8, 2024 13:31
@nex3 nex3 merged commit fabe9ae into sass:main Oct 8, 2024
9 checks passed
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.

4 participants