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

feat: add responsive design (fix #33) #47

Merged
merged 10 commits into from
Mar 17, 2022
Merged

feat: add responsive design (fix #33) #47

merged 10 commits into from
Mar 17, 2022

Conversation

hugoattal
Copy link
Collaborator

Linked to: #33

Description

It's not 100% done yet, but I feel like it's a good first step (and that the PR is long enough)
It's missing controls, for now you can just select a file and a variant.

I'll add the control panel in another PR

Additional context

You can select story/variant with a menu available at the top of the screen:
image
image


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

@hugoattal hugoattal added the enhancement New feature or request label Mar 16, 2022
@hugoattal hugoattal requested a review from Akryum March 16, 2022 22:41
@hugoattal hugoattal self-assigned this Mar 16, 2022
@netlify
Copy link

netlify bot commented Mar 16, 2022

✔️ Deploy Preview for histoire-controls ready!

🔨 Explore the source changes: 50a4b98

🔍 Inspect the deploy log: https://app.netlify.com/sites/histoire-controls/deploys/62330c07f48ede0008a4cb7b

😎 Browse the preview: https://deploy-preview-47--histoire-controls.netlify.app

@netlify
Copy link

netlify bot commented Mar 16, 2022

✔️ Deploy Preview for histoire-site ready!

🔨 Explore the source changes: 50a4b98

🔍 Inspect the deploy log: https://app.netlify.com/sites/histoire-site/deploys/62330c07ec3c8600099092f8

😎 Browse the preview: https://deploy-preview-47--histoire-site.netlify.app

@netlify
Copy link

netlify bot commented Mar 16, 2022

✔️ Deploy Preview for histoire-examples-vue3 ready!

🔨 Explore the source changes: 50a4b98

🔍 Inspect the deploy log: https://app.netlify.com/sites/histoire-examples-vue3/deploys/62330c07e25791000858a34d

😎 Browse the preview: https://deploy-preview-47--histoire-examples-vue3.netlify.app

@Akryum
Copy link
Member

Akryum commented Mar 16, 2022

Why did you rename the files to scss? We don't use Sass, we only use PostCSS. 🐈
If you want you can rename them to .postcss or .pcss

@hugoattal
Copy link
Collaborator Author

hugoattal commented Mar 16, 2022

The content of those files wasn't "pure" CSS (and I thought it was SASS?), here are a few examples:

.htw-prose {
  h1, h2, h3, h4 {
    &:not(:hover) {
      .header-anchor[aria-hidden="true"] {
        visibility: hidden;
      }
    }
  }
}

or

.__histoire-scale-x {
  &-enter-active,
  &-leave-active {
    transition: transform .15s, opacity .15s;
  }

  &-enter-from,
  &-leave-to {
    transform: scaleX(0);
    opacity: 0;
  }
}

So my IDE complained a lot and formatting was impossible...

EDIT: ooooh, ok, I'll rename in pcss then!

@Akryum Akryum merged commit 17ff259 into main Mar 17, 2022
@Akryum Akryum deleted the responsive-design branch March 17, 2022 10:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants