Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

adding a max-width style to the repeater container #9

Merged
merged 6 commits into from
Dec 17, 2018
Merged

adding a max-width style to the repeater container #9

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
830ff13
adding a max-width style to the repeater container
Blackbaud-BrandonJones Dec 5, 2018
bd83ef8
scrolling to element for visual test
Blackbaud-BrandonJones Dec 5, 2018
dc2ac01
Merge branch 'master' into feature-max-width-repeater
Blackbaud-BrandonJones Dec 17, 2018
678ab94
overflow for content
Blackbaud-BrandonJones Dec 17, 2018
9890a24
removed space
Blackbaud-BrandonJones Dec 17, 2018
bef4a61
updated test to no longer be random image, updated e2e screen shot name
Blackbaud-BrandonJones Dec 17, 2018
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
9 changes: 9 additions & 0 deletions e2e/repeater.e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,15 @@ describe('Repeater', () => {
});
});

it('should match previous repeater screenshot in max-width container', (done) => {
SkyHostBrowser.get('visual/repeater');
SkyHostBrowser.setWindowBreakpoint('lg');
SkyHostBrowser.scrollTo('#screenshot-repeater-max-width');
expect('#screenshot-repeater-max-width').toMatchBaselineScreenshot(done, {
screenshotName: 'screenshot-repeater-max-width'
Copy link
Member

Choose a reason for hiding this comment

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

The other screenshots start with repeater-. Mind?

screenshotName: 'repeater-max-width'

});
});

it('should match previous repeater screenshot with a context menu', (done) => {
SkyHostBrowser.get('visual/repeater');
SkyHostBrowser.setWindowBreakpoint('lg');
Expand Down
1 change: 1 addition & 0 deletions src/app/public/modules/repeater/repeater-item.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
}

.sky-repeater-item-right {
max-width: 100%;
Blackbaud-BrandonJones marked this conversation as resolved.
Show resolved Hide resolved
flex-grow: 1;
}

Expand Down
26 changes: 26 additions & 0 deletions src/app/visual/repeater/repeater-visual.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,31 @@
</sky-repeater>
</div>

<div id="screenshot-repeater-max-width">
<div class="sky-repeater-max-width">
<sky-repeater [expandMode]="'multiple'">
<sky-repeater-item [isExpanded]="true">
<sky-repeater-item-title>Title 1</sky-repeater-item-title>
<sky-repeater-item-content>
<pre class="unbroken-long">
<code>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, sint amet. Fugiat sit,adipisci accusantium debitis alias necessitatibus porro nobis, sed veniam, natus enim hic nisi officia quas dolor magni?
</code>
</pre>
</sky-repeater-item-content>
</sky-repeater-item>
<sky-repeater-item [isExpanded]="false">
<sky-repeater-item-title>Title 2</sky-repeater-item-title>
<sky-repeater-item-content>Content 2</sky-repeater-item-content>
</sky-repeater-item>
<sky-repeater-item [isExpanded]="true">
<sky-repeater-item-title>Title 3</sky-repeater-item-title>
<sky-repeater-item-content>Content 3</sky-repeater-item-content>
</sky-repeater-item>
</sky-repeater>
</div>
</div>

<div id="screenshot-repeater-context-menu">
<sky-repeater [expandMode]="'single'">
<sky-repeater-item>
Expand Down Expand Up @@ -92,3 +117,4 @@
</sky-repeater-item>
</sky-repeater>
</div>

15 changes: 15 additions & 0 deletions src/app/visual/repeater/repeater-visual.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,18 @@
height: 250px;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3);
}

.sky-repeater-max-width {
width: 500px;

.unbroken-long {
border: 1px solid black;
border-top: none;
margin-top: 0;
padding: 10px;
background-color: #fff;
overflow-x: auto;
margin-bottom: 10px * 2;
}
}