Skip to content

Commit

Permalink
Merge pull request #8 from kitconcept/css-fix
Browse files Browse the repository at this point in the history 
center single-testimonial block, show arrows only when hover
  • Loading branch information
@jonaspiterek
jonaspiterek authored Dec 5, 2024
2 parents 0fe75f7 + 218f5e6 commit 1296bb0
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 90 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@

<!-- towncrier release notes start -->

## 1.0.3 (2024-12-05)

### Bugfix

- fix mobile view of testimonial, align the arrows with the testimonial @jonaspiterek [#2](https://github.com/kitconcept/volto-testimonials-block/pull/2)
- fix quote's in testimonials being typographically not correct. @jonaspiterek [#5](https://github.com/kitconcept/volto-testimonials-block/pull/5)

### Internal

- next/prev slides should not be visible @jonaspiterek [#6](https://github.com/kitconcept/volto-testimonials-block/pull/6)

## 1.0.2 (2024-01-12)

### Internal
Expand Down
118 changes: 53 additions & 65 deletions acceptance/cypress/tests/basic.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,78 @@
context('Basic Acceptance Tests', () => {
describe('Text Block Tests', () => {
context("Basic Acceptance Tests", () => {
describe("Text Block Tests", () => {
beforeEach(() => {
cy.intercept('GET', `/**/*?expand*`).as('content');
cy.intercept('GET', '/**/Document').as('schema');
cy.intercept("GET", "/**/*?expand*").as("content");
cy.intercept("GET", "/**/Document").as("schema");

// given a logged in editor and a page in edit mode
cy.autologin();
cy.createContent({
contentType: 'Image',
contentId: 'image',
contentTitle: 'my-image',
contentType: "Image",
contentId: "image",
contentTitle: "my-image",
});
cy.createContent({
contentType: 'Document',
contentId: 'document',
contentTitle: 'Document',
contentType: "Document",
contentId: "document",
contentTitle: "Document",
});
cy.visit('/');
cy.wait('@content');
cy.visit("/");
cy.wait("@content");
});

it('As editor I can add a page with a testimonials block with multiple slides', function () {
// when I add a page with a testimonials block with multiple slides
cy.get('#toolbar-add').click();
cy.get('#toolbar-add-document').click();
cy.get('.documentFirstHeading')
.type('My Page')
.get('.documentFirstHeading')
.contains('My Page');
it("As editor I can add a page with a testimonials block with multiple slides", () => {
cy.get("#toolbar-add > .icon").click();
cy.get("#toolbar-add-document").click();
cy.get(".documentFirstHeading")
.type("My Page")
.get(".documentFirstHeading")
.contains("My Page");

cy.get('[aria-multiline="false"] > p').click();
cy.get('.text-slate-editor-inner > .ui > .icon').click();
cy.get('[aria-label="Unfold Text blocks"]').click();
cy.get(".slate-editor > div > p").click();
cy.get(".text-slate-editor-inner > .ui > .icon").click();
cy.get(
'[style="transition: opacity 500ms ease 0ms;"] > :nth-child(3) > .ui > .icon'
'[style="transition: opacity 500ms;"] > :nth-child(6) > .ui > .icon',
).click();
// slide 0
cy.get('#field-testimonial-0-slides-0')
.click()
.type(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
);
cy.get("#field-testimonial-0-slides-0").type(
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
);
cy.get(
'.field-wrapper-image-1-slides-0 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon'
".field-wrapper-image-1-slides-0 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon",
).click();
cy.get('.secondary > .ui > :nth-child(1) > .icon').click();
cy.get('[title="/image (Image)"]').dblclick();
cy.get('#field-name-2-slides-0').click().type('Lorem Ipsum');
cy.get('#field-additionalData-3-slides-0')
.click()
.type('Lorem Ipsum dolor sit amet');
// slide 1
cy.get('.add-item-button-wrapper > .ui').click();
cy.get('#field-testimonial-0-slides-1')
.click()
.type(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
);
cy.get("#field-name-2-slides-0").type("Lorem Ipsum");
cy.get("#field-additionalData-3-slides-0").type(
"Lorem Ipsum dolor sit amet",
);
cy.get(".add-item-button-wrapper > .ui").click();
cy.get("#field-testimonial-0-slides-1").type(
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
);
cy.get(
'.field-wrapper-image-1-slides-1 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon'
".field-wrapper-image-1-slides-1 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon",
).click();
cy.get('.secondary > .ui > :nth-child(1) > .icon').click();
cy.get('[title="/image (Image)"]').dblclick();
cy.get('#field-name-2-slides-1').click().type('Lorem Ipsum');
cy.get('#field-additionalData-3-slides-1')
.click()
.type('Lorem Ipsum dolor sit amet');
// slide 2
cy.get('.add-item-button-wrapper > .ui').click();
cy.get('#field-testimonial-0-slides-2')
.click()
.type(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
);
cy.get("#field-name-2-slides-1").type("Lorem Ipsum");
cy.get("#field-additionalData-3-slides-1").type(
"Lorem Ipsum dolor sit amet",
);
cy.get(".add-item-button-wrapper > .ui").click();
cy.get("#field-testimonial-0-slides-2").type(
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
);
cy.get(
'.field-wrapper-image-1-slides-2 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon'
".field-wrapper-image-1-slides-2 > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon",
).click();
cy.get('.secondary > .ui > :nth-child(1) > .icon').click();
cy.get('[title="/image (Image)"]').dblclick();
cy.get('#field-name-2-slides-2').click().type('Lorem Ipsum');
cy.get('#field-additionalData-3-slides-2')
.click()
.type('Lorem Ipsum dolor sit amet');
cy.get('#toolbar-save > .icon').click();
cy.wait('@content');
cy.url().should('eq', Cypress.config().baseUrl + '/my-page');
cy.get("#field-name-2-slides-2").type("Lorem Ipsum");
cy.get("#field-additionalData-3-slides-2").click();
cy.get("#field-additionalData-3-slides-2").type(
"Lorem Ipsum dolor sit amet",
);
cy.get("#toolbar-save > .icon").click();
// wait for content to load, then visit the page
cy.wait("@content");
cy.url().should("eq", `${Cypress.config().baseUrl}/my-page`);
});
});
});
1 change: 0 additions & 1 deletion news/2.bugfix
View file

This file was deleted.

1 change: 0 additions & 1 deletion news/5.bugfix
View file

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kitconcept/volto-testimonials-block",
"version": "1.0.2",
"version": "1.0.3",
"description": "volto-testimonials-block: Volto add-on",
"main": "src/index.js",
"license": "MIT",
Expand Down
43 changes: 21 additions & 22 deletions src/components/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,22 @@ const TestimonialsView = (props) => {
const scrollPrev = useCallback(() => {
if (emblaApi) {
emblaApi.scrollPrev();
setSlideIndex && setSlideIndex(selectedIndex - 1);
setSlideIndex?.(selectedIndex - 1);
}
}, [emblaApi, selectedIndex, setSlideIndex]);

const scrollNext = useCallback(() => {
if (emblaApi) {
emblaApi.scrollNext();
setSlideIndex && setSlideIndex(selectedIndex + 1);
setSlideIndex?.(selectedIndex + 1);
}
}, [emblaApi, selectedIndex, setSlideIndex]);

const scrollTo = useCallback(
(index) => {
if (emblaApi) {
emblaApi.scrollTo(index);
setSlideIndex && setSlideIndex(index);
setSlideIndex?.(index);
}
},
[emblaApi, setSlideIndex],
Expand Down Expand Up @@ -98,25 +98,24 @@ const TestimonialsView = (props) => {
)}
<div className="testimonials-viewport" ref={emblaRef}>
<div className="testimonial-container">
{data.slides &&
data.slides.map((item, index) => {
return (
<div key={item['@id']} className="testimonial-slide">
<Body
{...props}
key={item['@id']}
data={item}
isEditMode={isEditMode}
dataBlock={data}
index={index}
block={block}
openObjectBrowser={openObjectBrowser}
onChangeBlock={onChangeBlock}
isActive={selectedIndex === index}
/>
</div>
);
})}
{data.slides?.map((item, index) => {
return (
<div key={item['@id']} className="testimonial-slide">
<Body
{...props}
key={item['@id']}
data={item}
isEditMode={isEditMode}
dataBlock={data}
index={index}
block={block}
openObjectBrowser={openObjectBrowser}
onChangeBlock={onChangeBlock}
isActive={selectedIndex === index}
/>
</div>
);
})}
</div>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/theme/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ html {
.testimonial-button {
position: absolute;
z-index: 10;
display: none;
width: 50px;
height: 100%;
padding: 0;
Expand Down Expand Up @@ -127,6 +128,10 @@ html {
padding-bottom: 4em;
}

&:hover .testimonial-button {
display: block;
}

.testimonial {
margin: 20px 45px;
}
Expand Down

0 comments on commit 1296bb0

Please sign in to comment.