Millores al scroll; Mes responsive;

main
Bruno Carrión 6 months ago
parent ef9e6375a9
commit c88721f54f
  1. 6
      .eslintrc.js
  2. 4
      _includes/contact.html
  3. 446
      assets/css/pages/home.scss
  4. 46
      assets/css/pages/projects.scss
  5. 123
      assets/js/utils/SectionScroller.js
  6. 5
      assets/js/utils/viewport.js
  7. 4
      jekyll-cli

@ -3,11 +3,11 @@ module.exports = {
browser: true,
es2021: true,
},
extends: ['airbnb-base'],
extends: ["airbnb-base"],
parserOptions: {
ecmaVersion: 'latest',
ecmaVersion: "latest",
},
rules: {
arrowParens: false,
arrowParens: "as-needed",
},
};

@ -42,7 +42,7 @@
</div>
<p class="help"></p>
</div>
<div id="contactSubscription" class="contact__field field is-grouped">
<!-- <div id="contactSubscription" class="contact__field field is-grouped">
<div class="field has-text-white">Vols rebre informació sobre la cooperativa?</div>
<div class="control">
<label class="radio">
@ -55,7 +55,7 @@
</label>
</div>
<p class="help"></p>
</div>
</div> -->
<div id="contactSubmit" class="contact__submit-field field">
<div class="control">
<button class="button">Enviar</button>

@ -15,15 +15,16 @@
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* min-height: calc(var(--vh, 1vh) * 100); */
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
transition: height 100ms ease;
/* min-height: 100vh; */
.is-mobile & {
padding-top: $mobile-header-height;
}
&#home {
padding-bottom: 55px;
padding-bottom: calc(calc(100 * (var(--vh, 1vh) - var(--icbh, 1vh))) + 55px);
}
}
@ -39,11 +40,18 @@
@include m-media(zr, sm) {
flex-direction: column;
.is-mobile & {
@include m-media(landscape) {
flex-direction: row;
}
}
}
@media (orientation: portrait) {
flex-direction: column;
}
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
flex-direction: column;
@ -51,7 +59,6 @@
}
}
.home__section-column.column {
display: flex;
flex-direction: column;
@ -59,11 +66,18 @@
@include m-media(zr, sm) {
width: 100%;
.is-mobile & {
@include m-media(landscape) {
width: 50%;
}
}
}
@media (orientation: portrait) {
width: 100%;
}
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
width: 100%;
@ -118,6 +132,12 @@
right: 0;
margin: auto;
padding: 0 10vw;
.is-mobile & {
@include m-media(landscape) {
top: calc(50% - 40px);
}
}
}
.title {
@ -173,6 +193,10 @@
.is-mobile & {
font-size: 1.5rem;
@include m-media(landscape) {
margin-top: 10px;
}
}
}
}
@ -205,47 +229,6 @@
.home__services {
padding-right: 5%;
.subtitle {
margin-bottom: .5em;
}
picture {
display: block;
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
.is-mobile & {
@media (orientation: portrait) {
width: 50vw;
@media (max-height: 500px) {
width: 40vw;
}
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
@include m-media(xsm) {
width: 240px;
}
@include m-media(sm) {
width: 300px;
}
@media screen and (max-height: 750px){
width: 200px;
}
}
}
.home__section-row {
&:not(:last-child) {
padding-top: 1em;
@ -254,18 +237,10 @@
@include m-media(zr, sm) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
}
@ -274,105 +249,151 @@
@include m-media(zr, sm) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
}
.button {
width: fit-content;
padding: 0 1em;
margin-top: 1rem;
@include m-media(zr, sm) {
text-align: center;
.is-mobile & {
@include m-media(landscape) {
text-align: start;
}
}
}
@include m-media(zr, sm) {
@media (orientation: portrait) {
text-align: center;
.button {
margin: auto;
}
}
}
@media (orientation: portrait) {
text-align: center;
.title {
margin-bottom: 0px;
.button {
margin: auto;
}
}
@include m-media(zr, sm) {
font-size: ms(1);
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
@include m-media(portrait) {
font-size: ms(1);
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
+ .subtitle {
margin-top: 0rem;
}
}
.home__section-column {
@include m-media(zr, sm) {
.title {
font-size: ms(1);
margin-bottom: .5em;
.subtitle {
margin-bottom: .5em;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
@media (max-height: 750px) and (orientation: portrait) {
display: none;
}
.subtitle {
display: none;
}
.is-mobile & {
@media (min-height: 550px) {
display: block;
}
.button {
font-size: 0.85em;
}
}
@include m-media(landscape) {
@media (max-height: 450px) {
display: none;
}
}
}
}
@media (orientation: portrait) {
.title {
font-size: ms(1);
margin-bottom: .5em;
.button {
width: fit-content;
padding: 0 1em;
margin-top: 1rem;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
@include m-media(zr, sm) {
font-size: .85em;
margin: auto;
.subtitle {
display: none;
}
.is-mobile & {
@include m-media(landscape) {
margin: unset;
}
}
}
.button {
font-size: 0.85em;
}
}
@include m-media(portrait) {
font-size: .85em;
margin: auto;
}
}
&.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
@include m-media(portrait) {
align-items: center;
}
@include m-media(zr, sm) {
align-items: center;
}
figcaption {
text-align: center;
margin-top: .5em;
font-weight: bold;
font-size: 1.5em;
}
figcaption {
text-align: center;
margin-top: .5em;
font-weight: bold;
font-size: 1.5em;
}
}
}
picture {
display: block;
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
@include m-media(landscape) {
width: 35vh;
}
@include m-media(portrait) {
width: 40vw;
@include m-media(xsm) {
width: 30vw;
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
}
}
}
}
#team {
@media (orientation: portrait) {
@include m-media(portrait) {
.home__section-row {
flex-flow: column-reverse;
}
@ -381,9 +402,16 @@
padding-top: 0px;
}
}
@media screen and (max-width: 1050px) {
@media (max-width: 1050px) {
.home__section-row {
flex-flow: column-reverse;
.is-mobile & {
@include m-media(landscape) {
flex-flow: row;
}
}
}
.home__section-column:first-child {
@ -391,6 +419,14 @@
}
}
.is-mobile & {
@include m-media(landscape) {
.home__section-column:last-child {
display: none;
}
}
}
.home__us {
.title {
margin-bottom: .5rem;
@ -405,13 +441,21 @@
display: none;
}
}
@media screen and (max-height:750px){
}
.us__information-description {
@media (max-height: 750px){
.hiddable {
display: none;
}
}
}
@include m-media(zr, xsm, landscape) {
@media (max-height: 400px) {
display: none;
}
}
}
.home__profiles-wrapper {
display: flex;
@ -447,7 +491,7 @@
}
}
}
.home__team-picture {
display: block;
width: 100%;
@ -506,24 +550,6 @@
}
}
.scroll-viewport {
position: absolute;
z-index: 90;
pointer-events: none;
top: 0px;
left: 0px;
width: 100vw;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: auto;
}
.scroll-span {
width: 100%;
margin-top: calc(#{$header-height} * -1);
background: transparent;
}
#projects {
.projects__content {
flex: 1;
@ -532,82 +558,46 @@
justify-content: center;
}
.home__projects {
@include m-media(zr, sm) {
.button {
font-size: 0.85em;
}
}
@media (orientation: portrait) {
.button {
font-size: 0.85em;
}
}
}
.projects__data {
padding: 0px;
}
.projects__product {
width: 100%;
&:not(:last-child) {
padding-bottom: 2rem;
@media screen and (max-height: 520px) {
padding-bottom: 1.5rem;
}
}
&:last-child {
margin-top: unset;
}
@include m-media(md) {
width: 50%;
&:nth-child(odd) {
padding-right: 1rem;
}
&:nth-child(even) {
padding-left: 1rem;
}
.projects__data {
@include m-media(portrait) {
@media (max-height: 500px) {
padding-bottom: 2rem;
}
}
&:not(:last-child) {
padding-bottom: 0px;
}
}
.is-mobile & {
@include m-media(landscape) {
padding-bottom: 0;
}
}
}
> a > img {
@media screen and (max-height: 520px) {
height: 30vw;
}
}
.projects__product {
.projects__product-body {
width: 100%;
}
&:not(:last-child) {
@include m-media(portrait) {
@media (max-height: 500px) {
padding-bottom: 1rem;
}
}
}
.is-mobile & {
.projects__product-title {
margin-top: .5rem;
}
}
}
picture > img {
height: 30vw;
max-height: 20vh;
.container__home__projects {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
@include m-media(md) {
height: 20vw;
max-height: unset;
}
}
}
.projects__product-tags {
@media (orientation: portrait) and (max-height: 500px) {
display: none;
@include m-media(portrait) {
@media (max-height: 500px) {
display: none;
}
}
li {
@ -619,3 +609,29 @@
}
}
}
#contact {
height: auto;
min-height: unset;
overflow: visible;
scroll-snap-align: end;
scroll-snap-stop: unset;
}
.scroll-viewport {
position: absolute;
z-index: 90;
pointer-events: none;
top: 0px;
left: 0px;
width: 100vw;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: auto;
}
.scroll-span {
width: 100%;
margin-top: calc(#{$header-height} * -1);
background: transparent;
}

@ -5,7 +5,7 @@
@import "breakpoints";
main.archive {
padding: $header-height $site-paddings 175px;
padding: $header-height $site-paddings 0;
min-height: 100vh;
.projects__title {
@ -35,11 +35,7 @@ main.archive {
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 50px 0;
@include m-media(zr, xsm) {
padding: 0px;
}
padding: 1rem 0 3rem;
}
.projects__product {
@ -52,22 +48,24 @@ main.archive {
padding-bottom: 3rem;
}
&:last-child {
margin-top: unset;
}
@include m-media(md) {
width: 50%;
&:nth-child(odd) {
padding-right: 1rem;
}
&:nth-child(even) {
padding-left: 1rem;
}
&:nth-child(odd) { padding-right: 1rem; }
&:nth-child(even) { padding-left: 1rem; }
&:not(:last-child) { padding-bottom: 3rem; }
}
.is-mobile & {
@include m-media(landscape) {
width: 50%;
&:nth-child(odd) { padding-right: 1rem; }
&:nth-child(even) { padding-left: 1rem; }
&:not(:last-child) { padding-bottom: 3rem; }
}
}
> a {
display: block;
width: 100%;
@ -83,16 +81,24 @@ main.archive {
width: 100%;
height: 40vw;
box-shadow: 0px 0px 6px #0003;
border-radius: 2px;
height: 30vw;
border-radius: 5px;
height: 40vw;
max-height: 30vh;
@include m-media(md) {
height: 20vw;
max-height: unset;
}
}
}
}
.projects__product-body {
padding-left: 2px;
width: 100%;
}
h2 {
margin-top: 1rem;
}
@ -103,7 +109,7 @@ main.archive {
margin-bottom: .5rem;
@include m-media(zr, xsm){
font-size:1em;
font-size: 1em;
}
}

@ -61,16 +61,14 @@ var SectionSnapScroller = (function () {
var styles = "html, body { overscroll-behavior-y: contain; }";
if (isMobile() || isTouchEnabled()) {
styles +=
".scroll-root { overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }";
".scroll-root { display: flex; flex-direction: column; overflow-y: scroll; height: 100vh; height: calc(var(--vh, 1vh) * 100); }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; }";
styles +=
".scroll-root .scroll-section:last-child { height: 0px; min-height: 0px; scroll-snap-align: end; }";
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }";
} else {
styles +=
".scroll-root { overflow: hidden; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overscroll-behavior-y: contain; }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); }";
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); overflow: hidden; }";
styles +=
".scroll-viewport { position: absolute; z-index: 90; pointer-events: none; top: 0px; left: 0px; width: 100vw; width: calc(var(--vw, 1vw) * 100); height: 100vh; height: calc(var(--vh, 1vh) * 100); overflow-x: hidden; overflow-y: auto; }";
styles += ".scroll-viewport .scroll-span { width: 100%; background: transparent; }";
@ -101,7 +99,7 @@ var SectionSnapScroller = (function () {
return logger;
}
var onScroll = (function () {
var _onScroll = (function () {
var self, direction, overflow, delayed;
var scrolling = false;
@ -140,7 +138,7 @@ var SectionSnapScroller = (function () {
)
)
];
var nextSectionOverflow = getSectionOverflow(nextSection, direction);
var nextSectionOverflow = _getSectionOverflow(nextSection, direction);
if (this.behavior === "mandatory") {
offset =
@ -156,7 +154,7 @@ var SectionSnapScroller = (function () {
};
})();
function getSectionOverflow(id, direction) {
function _getSectionOverflow(id, direction) {
if (direction === void 0) {
console.warn(
"getSectionOverflow needs a direction to compute the sections overflow. Direction mus't be a positive integer like 1 to get descending overflow, and negative integer, like -1, to get ascending overflow. When no direction is informed, then it uses 1 as a fallback value."
@ -175,7 +173,7 @@ var SectionSnapScroller = (function () {
return Math.abs(overflow) <= 5 ? 0 : overflow;
}
var onTouchScroll = (function () {
var _onTouchScroll = (function () {
var self;
var debounced;
@ -193,6 +191,13 @@ var SectionSnapScroller = (function () {
};
})();
function _onResize(ev) {
if (isMobile() || isTouchEnabled()) return;
// console.log(this.getCurrentSectionOverflow());
var box = this.currentSectionEl.getBoundingClientRect();
this.$el.scrollBy(0, box.top);
}
/* PUBLIC INTERFACE */
function SectionSnapScroller(scrollEl, settings) {
var self = this;
@ -280,74 +285,64 @@ var SectionSnapScroller = (function () {
Object.defineProperty(this, "currentSectionEl", {
get: function () {
return Array.apply(
null,
self.$el.getElementsByClassName(self._sectionClass)
).filter(function (el) {
return el.id === self.currentSection;
});
return Array.apply(null, self.$el.getElementsByClassName(self._sectionClass))
.filter(function (el) {
return el.id === self.currentSection;
})
.pop();
},
});
if (isMobile() || isTouchEnabled()) {
var lastChild = document.createElement("div");
lastChild.classList.add(this._sectionClass);
this.$el.appendChild(lastChild);
onTouchScroll = onTouchScroll.bind(this);
var onTouchScroll = _onTouchScroll.bind(this);
this.$el.addEventListener("scroll", onTouchScroll);
function setupInlineStyles() {
self.$el.style.scrollBehavior = "smooth";
self.$el.style.scrollSnapType = "y mandatory";
Array.apply(null, self.$el.getElementsByClassName(self._sectionClass)).forEach(
function ($section) {
$section.style.scrollSnapStop = "always";
}
);
self.$el.style.scrollBehavior = "smooth";
}
var currentSection = location.hash.split("/").pop().replace(/#/, "");
if (currentSection && currentSection !== this.sections[0]) {
setTimeout(function () {
self.$el.scrollBy({
behavior: "smooth",
left: 0,
top: document.getElementById(currentSection).getBoundingClientRect().top,
});
var delayed;
function whileScroll() {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
self.$el.scrollBy({
behavior: "auto",
left: 0,
top: document.getElementById(currentSection).getBoundingClientRect().top,
});
function onScrollEnds() {
self.$el.removeEventListener("scroll", whileScroll);
setupInlineStyles();
}
var delayed;
function whileScroll() {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
self.$el.addEventListener("scroll", whileScroll);
}, 0);
function onScrollEnds() {
setupInlineStyles();
self.$el.removeEventListener("scroll", whileScroll);
}
self.$el.addEventListener("scroll", whileScroll);
} else {
setTimeout(setupInlineStyles, 500);
setupInlineStyles();
}
} else {
onScroll = onScroll.bind(this);
var onScroll = _onScroll.bind(this);
document.addEventListener("wheel", onScroll, true);
setTimeout(function () {
self.$viewport = _setupScrollViewport(self.getContentHeight.bind(self));
self.$el.appendChild(self.$viewport);
self.$viewport = _setupScrollViewport(self.getContentHeight.bind(self));
self.$el.appendChild(self.$viewport);
var hashId = location.hash.replace(/#/, "");
var visibleSection = document.getElementById(hashId) || self.getVisibleSection();
_currentSection = visibleSection.id;
location.hash = _currentSection;
var hashId = location.hash.replace(/#/, "");
var visibleSection = document.getElementById(hashId) || self.getVisibleSection();
_currentSection = visibleSection.id;
location.hash = _currentSection;
if (self.getCurrentSectionOverflow(1) > 0) {
self.scrollTo(_currentSection, 1, "auto");
} else {
self.$viewport.scrollBy(0, self.$el.scrollTop);
}
self._delayed = false;
}, 0);
if (self.getCurrentSectionOverflow(1) > 0) {
self.scrollTo(_currentSection, 1, "auto");
} else {
self.$viewport.scrollBy(0, self.$el.scrollTop);
}
self._delayed = false;
}
function onPopState() {
@ -362,6 +357,18 @@ var SectionSnapScroller = (function () {
window.addEventListener("popstate", onPopState);
var onResize = (function (self) {
var onResize = _onResize.bind(self);
var debounced;
return function (ev) {
clearTimeout(debounced);
debounced = setTimeout(function () {
onResize(ev);
}, 100);
};
})(this);
window.addEventListener("resize", onResize);
// this.$logger = _setupLogger();
/* SCROLL HOOKS */
@ -401,7 +408,7 @@ var SectionSnapScroller = (function () {
};
SectionSnapScroller.prototype.getCurrentSectionOverflow = function (direction) {
return getSectionOverflow(this.currentSection, direction);
return _getSectionOverflow(this.currentSection, direction);
};
SectionSnapScroller.prototype.scrollTo = function (id, direction, behavior) {

@ -1,9 +1,14 @@
function setViewport() {
var vh = window.innerHeight * 0.01;
var vw = window.innerWidth * 0.01;
var icbh = document.documentElement.clientHeight * 0.01;
var icbw = document.documentElement.clientWidth * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
document.documentElement.style.setProperty("--vw", `${vw}px`);
document.documentElement.style.setProperty("--icbh", `${icbh}px`);
document.documentElement.style.setProperty("--icbw", `${icbw}px`);
}
window.addEventListener("resize", setViewport);
setTimeout(setViewport, 0);

@ -36,9 +36,9 @@ if [[ -z "$order" ]]; then
fi
if [[ "$order" == "serve" ]]; then
bundle exec jekyll serve --livereload -P 8050
bundle exec jekyll serve -H 0.0.0.0 --livereload -P 8050
elif [[ "$order" == "serve:drafts" ]]; then
bundle exec jekyll serve --livereload -P 8050 --drafts
bundle exec jekyll serve -H 0.0.0.0 --livereload -P 8050 --drafts
elif [[ "$order" == "build:pre" ]]; then
if [[ -f "dist.zip" ]]; then
rm dist.zip

Loading…
Cancel
Save