fix: auto height

src/js/auto-height.js

@@ -0,0 +1,51 @@
+class AutoHeight {
+  static instance;
+  elements;
+
+  constructor(breakpoint) {
+    if (AutoHeight.instance) {
+      throw new Error('New instance cannot be created!');
+    }
+    AutoHeight.instance = this;
+    this.breakpoint = breakpoint;
+  }
+
+  setElements = elements => {
+    this.elements = elements;
+  };
+
+  set = () => {
+    this.elements.forEach(element => {
+      element.maxHeight = this.getMaxHeight(element.nodeList);
+      this.setHeight(element.nodeList, element.maxHeight);
+    });
+
+    if (window.innerWidth < this.breakpoint) {
+      this.elements.forEach(el => this.resetHeight(el.nodeList));
+    }
+  };
+
+  getMaxHeight = nodes => {
+    return Math.max(
+      ...Array.from(nodes).map(node => {
+        node.style.height = 'auto';
+        return node.offsetHeight;
+      }),
+    );
+  };
+
+  resetHeight = nodes => {
+    nodes.forEach(node => {
+      node.style.height = 'auto';
+    });
+  };
+
+  setHeight = (nodes, maxHeight) => {
+    nodes.forEach(node => {
+      node.style.height = `${maxHeight}px`;
+    });
+  };
+}
+
+const autoHeight = new AutoHeight(768);
+export default autoHeight;

src/js/bootstrap.js

@@ -1,5 +1,26 @@
-import setWrappersHeight from './utils';
+import autoHeight from './auto-height';
 
-window.addEventListener('resize', setWrappersHeight);
+window.addEventListener('DOMContentLoaded', () => {
+  const elements = [
+    {
+      nodeList: document.querySelectorAll('.education-list__time'),
+      maxHeight: -1,
+    },
+    {
+      nodeList: document.querySelectorAll('.education-list__specialty'),
+      maxHeight: -1,
+    },
+    {
+      nodeList: document.querySelectorAll('.education-list__university'),
+      maxHeight: -1,
+    },
+    {
+      nodeList: document.querySelectorAll('.education-list__description'),
+      maxHeight: -1,
+    },
+  ];
+  autoHeight.setElements(elements);
+  autoHeight.set();
+});
 
-window.addEventListener('DOMContentLoaded', setWrappersHeight);
+window.addEventListener('resize', () => autoHeight.set());

src/js/language.js

@@ -1,4 +1,5 @@
 import i18next from 'i18next';
+import autoHeight from './auto-height';
 
 const DEFAULT_LANG = 'en';
 
@@ -11,6 +12,7 @@ const updateContent = () => {
     const translation = i18next.t(key);
     element.innerHTML = translation;
   });
+  autoHeight.set();
 };
 
 const initLocalization = async () => {
@@ -48,7 +50,6 @@ const switchLanguage = () => {
   localStorage.setItem('lang', nextLang);
   setLanguageIcon(nextLang);
   i18next.changeLanguage(nextLang);
-  setWrappersHeight();
 };
 
 const hideNonDefaultIcons = () => {