Skip to content
This repository was archived by the owner on Apr 28, 2023. It is now read-only.

Minor musette updates #210

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Minor musette updates #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8dd4b9c
simple rtl
davidseguin Sep 13, 2022
4330d80
DIGCOLL-5758-rtl fix offset
davidseguin Sep 14, 2022
6c4feb2
update story
davidseguin Sep 28, 2022
d294e89
Update README.md
stephenhmarsh Sep 28, 2022
5a91d1a
Update README.md
stephenhmarsh Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 9 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,14 @@

# Table Of Contents


- ### [What is Marble?](#What-is-Marble?)
- ### [Component Explorer](#Component-Explorer)
- ### [Design Documentation and Homepage](#Design-Documentation-and-Homepage)
- ### [Using Marble In Your Project](#Using-Marble-In-Your-Project)
- ### [How To Contribute To Marble](#Contributing-To-Marble)
- ### [Marble Development As A Local Package](#Marble-Development-As-A-Local-Package)
- ### [Storybook Development](#Storybook-Development)
- ### [Webpack Build for Release And Production](#[Webpack-Build-for-Release-And-Production)
- ### [Browsers We Support](#Browsers-We-Support)
- [What is Marble?](#What-is-Marble)
Copy link
Collaborator

Choose a reason for hiding this comment

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

thank you for the README improvements! i added a couple more

- [Component Explorer](#Component-Explorer)
- [Using Marble In Your Project](#Using-Marble-In-Your-Project)
- [How To Contribute To Marble](#Contributing-To-Marble)
- [Marble Development As A Local Package](#Marble-Development-As-A-Local-Package)
- [Storybook Development](#Storybook-Development)
- [Webpack Build for Release And Production](#Webpack-Build-for-Release-And-Production)
- [Browsers We Support](#Browsers-We-Support)

# What is Marble?

Expand All @@ -29,14 +27,8 @@ https://about.gitlab.com/topics/version-control/what-is-innersource/) project.

Our component explorer, powered by [Storybook](https://storybook.js.org/docs/basics/introduction/), lives on Chromatic at:

## 🏛️ [main--5ef272f9ab690c0022ef30ab.chromatic.com](https://main--5ef272f9ab690c0022ef30ab.chromatic.com) 📙


# Design Documentation and Homepage:
## 🏛️ [marble.metmuseum.org](https://marble.metmuseum.org) 📙

Marble's design docs and homepage are at:

🎨 https://marble.metmuseum.org/ 🏡

# Using Marble In Your Project

Expand Down Expand Up @@ -222,8 +214,6 @@ It is **not recommended** to point your installation of Marble to an environment

# Contributing To Marble

# WIP

## Conventions

- mock your data separately
Expand Down
14 changes: 9 additions & 5 deletions src/components/musette/musette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,26 @@ $button-height: 42px;
width: 100%;
}

.la-musette-offset > :first-child {
margin-left: 7.5vw;
.la-musette--offset > :first-child {
margin-left: $spacing-component-margin;
}

.la-musette-offset > :last-child {
margin-right: 7.5vw;
.la-musette--offset > :last-child {
margin-right: $spacing-component-margin;
}

.la-musette-no-scrollbar {
.la-musette--no-scrollbar {
scrollbar-width: none;

&::-webkit-scrollbar {
display: none;
}
}

.la-musette--rtl {
Copy link
Collaborator

Choose a reason for hiding this comment

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

would prefer if all new code has snapshot coverage... that's kind of the point! :)

flex-direction: row-reverse;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does direction: rtl; work here? If the musette gets embedded in some other component that's already rtl we probably don't want to still row-reverse do we ?

}

//navigation
.musette-move-left,
.musette-move-right {
Expand Down
2 changes: 1 addition & 1 deletion src/components/musette/musette.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const slideTemplate = (args) => {
const Musette = () => {
useEffect(() => { initialize(); });
return html`
<div class="la-musette la-musette-no-scrollbar js-la-musette">
<div class="la-musette la-musette--no-scrollbar js-la-musette">
${titles.map((title, index) => slideTemplate({ title: title, imageURL: images[index % 3].srcSet.fallback })).join("")}
</div>`;
};
Expand Down