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.

Sign up for GitHub

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

Remove images borders, scale wide images a bit larger #2605

Merged
merged 3 commits into from
May 9, 2019
Merged

Remove images borders, scale wide images a bit larger #2605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e78d46
Rework image alignment
nathanstitt May 7, 2019
1914cb0
full-width images inside problems
nathanstitt May 8, 2019
9003f37
scale wide images to 80% width
nathanstitt May 9, 2019
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
5 changes: 5 additions & 0 deletions tutor/resources/styles/book-content/figure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.os-figure {



}
3 changes: 3 additions & 0 deletions tutor/resources/styles/book-content/note.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ $tutor-note-margin-vertical: 48px;
.problem {
clear: both;
}
.os-problem-container {
img { width: 100%; }
}

}

Expand Down
154 changes: 63 additions & 91 deletions tutor/resources/styles/mixins/figures.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,88 @@
@mixin tutor-figure() {

.os-figure.tutor-ui-vertical-img,
.os-figure.tutor-ui-horizontal-img,
figure {
display: flex;
flex-direction: column;
margin-bottom: 20px;
&.tutor-ui-horizontal-img {
max-width: 50%;
align-items: center;
}
&.small-img-width {
max-width: 100%;
}
&.medium-img-width {
max-width: 75%;
}
&.tutor-ui-vertical-img {
margin-right: $book-content-vertical-image-margin;
width: calc(50% - #{$book-content-vertical-image-margin});
&:not(:last-child) {
// float: left; //disabled until content that isn't plain txt is styled properly
}
& + .tutor-ui-vertical-img {
margin-left: $book-content-vertical-image-margin;
margin-right: 0;
}
& + .example-video {
// force break
&:before {
content: ' ';
width: 100%;
display: table;
figure,
.os-figure {
display: flex;
flex-direction: column;
}

.os-figure {
&:not(.splash):not(.full-width) {
width: 50%;
margin-bottom: 20px;

padding: 1rem;
float: left;

&.standalone {
float: none;
margin: auto;
width: 60%;
&.tutor-ui-horizontal-img.medium-img-width {
width: 80%;
}
}
// don't float if there's 3 in a row
// there's an example of this in physics section 1.1
& + .tutor-ui-vertical-img + .tutor-ui-vertical-img {

& + .os-figure + .os-figure {
clear: both;
padding-right: 1rem;
margin-right: 1rem;
}
& + .os-figure + .os-figure + .os-figure{
clear: none;
}

& + :not(.os-figure) {
clear: left;
}
}

> [data-type="media"] { width: 100%; }
img {
width: 100%;
height: auto;
}
}

figcaption {
width: 100%;
min-width: 100;
order: 99; // high enought to always be last

caption-side: bottom;
.os-caption-container {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $border-color;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
color: $caption-font-color;
padding: 10px 0;
font-weight: 300;
font-style: italic;
line-height: 150%;

border-bottom: 1px solid;
border-color: $border-color;
&::before {
counter-increment: figure;
content: "Figure " counter(figure);
.os-title-label,
.os-number {
font-style: italic;
font-weight: 800;
display: block;
}
}

figure {
flex: 1;
}

&.with-child-figures {
width: 100%;
}

img {
max-width: 100%;
border: 1px solid $border-color;
margin: 10px 0 0 0;
}
.os-title-label + .os-number {
margin-left: 0.5rem;
}
.os-divider {
flex: 1;
min-width: 1rem;
}
}

[data-type="note"] figure.tutor-ui-vertical-img {
margin-right: 0;
max-width: 50%;
float: none;
}
figcaption {
width: 100%;
min-width: 100%;
order: 99; // high enough to always be last

.os-caption-container {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $border-color;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
caption-side: bottom;
color: $caption-font-color;
.os-title-label,
.os-number {
font-style: italic;
padding: 10px 0;
font-weight: 300;
font-style: italic;
line-height: 150%;

border-bottom: 1px solid;
border-color: $border-color;
&::before {
counter-increment: figure;
content: "Figure " counter(figure);
font-weight: 800;
}
.os-title-label + .os-number {
margin-left: 0.5rem;
}
.os-divider {
flex: 1;
min-width: 1rem;
display: block;
}
}


}
28 changes: 25 additions & 3 deletions tutor/src/components/book-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,33 @@ const LEARNING_OBJECTIVE_SELECTORS = '.learning-objectives, [data-type=abstract]
const IS_INTRO_SELECTORS = '.splash img, [data-type="cnx.flag.introduction"]';
const INTER_BOOK_LINKS = 'a[href^=\'/book/\']';


function hasSiblingFigure(el) {
return Boolean(
(el.previousElementSibling &&
dom(el.previousElementSibling).matches('.os-figure')
) || (
el.nextElementSibling && dom(el.nextElementSibling).matches('.os-figure')
)
);
}

// called with the context set to the image
function processImage() {
const img = dom(this);
const figure = img.closest('.os-figure')
|| img.closest('figure')
|| img.closest('[data-type=media]');
if (!figure) { return; }

if (figure.querySelector('.splash')) {
figure.classList.add('full-width');
}
if (figure.classList.contains('splash')) { return; }
// figures that are not in a series
if (!hasSiblingFigure(figure)) {
figure.classList.add('standalone');
Copy link
Member

Choose a reason for hiding this comment

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

Didn't you already do this on another PR but called this 'independent'?

Copy link
Member

Choose a reason for hiding this comment

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

Ah nvm I see you just renamed it

Copy link
Member Author

Choose a reason for hiding this comment

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

yeah, i thought "standalone" was clearer but 🤷‍♂

}

const { parentNode } = figure;
if (parentNode && parentNode.nodeName === 'FIGURE') {
Expand All @@ -42,9 +61,12 @@ function processImage() {
const aspectRatio = this.naturalWidth / this.naturalHeight;

// let wide, square, and almost square figures be natural.
if ((aspectRatio > 0.9) || ((figure.parentNode != null ? figure.parentNode.dataset.orient : undefined) === 'horizontal')) {
if (
(aspectRatio > 0.9) ||
((figure.parentNode != null ? figure.parentNode.dataset.orient : undefined) === 'horizontal')
) {
figure.classList.add('tutor-ui-horizontal-img');
if (this.naturalWidth < 1200) {
if (this.naturalWidth < 350) {
figure.classList.add('small-img-width');
} else {
figure.classList.add('medium-img-width');
Expand Down Expand Up @@ -238,7 +260,7 @@ class BookPage extends React.Component {
}

detectImgAspectRatio(root) {
root.querySelectorAll('figure:not(.splash) img').forEach((img) =>
root.querySelectorAll('figure img').forEach((img) =>
img.complete ? processImage.call(img) : (img.onload = processImage));
}

Expand Down