From 358ae2c11593dfc75f6887539a9881ddc4354827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1ndly=20Gerg=C5=91?= Date: Wed, 6 Jan 2021 12:56:45 +0200 Subject: [PATCH] feat: Made mobile version for all pages --- src/about.html | 1 + src/contact.html | 25 +-- src/index.html | 1 + src/prices.html | 1 + src/res/hamburger.png | Bin 24363 -> 25251 bytes src/res/hamburger_dark.png | Bin 0 -> 25298 bytes src/script/components/app-header.js | 48 ++++++ src/script/components/app-price-table.js | 142 +++++++++++++----- src/script/components/app-service-menu.js | 9 ++ src/script/components/styles/app-header.scss | 98 ++++++++++++ .../components/styles/app-service-header.scss | 10 +- .../components/styles/app-service-menu.scss | 25 +++ src/services/dedicated.html | 1 + src/services/domain.html | 1 + src/services/k8.html | 1 + src/services/saas.html | 1 + src/services/vps.html | 1 + src/style/about.scss | 10 +- src/style/contact.scss | 19 +++ src/style/index.scss | 21 ++- src/style/services.scss | 2 +- 21 files changed, 351 insertions(+), 66 deletions(-) create mode 100644 src/res/hamburger_dark.png diff --git a/src/about.html b/src/about.html index 21b9735..dc05fc1 100644 --- a/src/about.html +++ b/src/about.html @@ -3,6 +3,7 @@ Firma - Core Computing + diff --git a/src/contact.html b/src/contact.html index 8b212b7..d066498 100644 --- a/src/contact.html +++ b/src/contact.html @@ -3,6 +3,7 @@ Contact - Core Computing + @@ -29,7 +30,7 @@ >
-
+

SC Core Computing SRL

Adresa: Oradea, Str. Universității 15 @@ -41,16 +42,18 @@ CUI: 123456

- +
+ +
diff --git a/src/index.html b/src/index.html index 15f8732..32dc648 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,7 @@ Core Computing + diff --git a/src/prices.html b/src/prices.html index 06fde75..8a98537 100644 --- a/src/prices.html +++ b/src/prices.html @@ -3,6 +3,7 @@ Prețuri - Core Computing + diff --git a/src/res/hamburger.png b/src/res/hamburger.png index ce515a5bd371fd8c2b16ebf494f1006eccf6eb11..ac6c950fd7b62d5591f3d5c381e3d8b96f41dd39 100644 GIT binary patch delta 286 zcmZ3zk8$x)#t9Zo)=M^8H8HarS(%zy8JJH#%xn*5bF$1;v9L@sG*2=$(@jn?Pu5K~ zH%ZY=vPiPjH8M;zH8)AMG%-p{-F%8=0n_CBtgg((iDi>D+3Zvjlgtt=5{(UYlPxS# zb&U;7EOir8EKPKc%#+d*jS?*lO%qKgce6RLnwVJ`8&AH#)-rh=8<#|KMq*xiYKon{ ujec>7YgvgERA90*yE=;b#JCD*z8%~vglyOhw84;N&$$^|oAWI8ssRAPx>vmb delta 62 zcmZ2{lyUVw#t9Zo7CIZPnwZ%Qtqe@8j7=vWX10g3Ia%gTPG?iwe1>Hn)8a>5hAcCa M`QtV}v)-!)0A@TCWB>pF diff --git a/src/res/hamburger_dark.png b/src/res/hamburger_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..151efa4812aa0b2f97e62cb303007c1998a19651 GIT binary patch literal 25298 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 window.innerWidth < 720; + class AppHeader extends HTMLElement { constructor() { super(); @@ -10,9 +12,28 @@ class AppHeader extends HTMLElement { style.textContent = styles; root.appendChild(style); + const mobileHeader = document.createElement('div'); + mobileHeader.className = 'header_mobile'; + + const hamburger = document.createElement('div'); + hamburger.className = 'header_mobile_hamburger'; + mobileHeader.appendChild(hamburger); + + const mobileLogo = document.createElement('img'); + mobileLogo.src = '/res/logo.png'; + mobileLogo.alt = 'logo'; + mobileLogo.className = 'header_mobile_icon'; + mobileHeader.appendChild(mobileLogo); + + root.appendChild(mobileHeader); + const div = document.createElement('div'); div.className = 'header'; + const mobileClose = document.createElement('div'); + mobileClose.className = 'header_mobile_close'; + div.appendChild(mobileClose); + const logo = document.createElement('img'); logo.src = '/res/logo.png'; logo.alt = 'logo'; @@ -23,10 +44,26 @@ class AppHeader extends HTMLElement { div.appendChild(logo); this.getMenuItems().forEach(item => { + let submenu; + if (item.to == '/services/') { + submenu = document.createElement('div'); + submenu.className = 'header_mobile_submenu'; + + const serviceMenu = document.createElement('app-service-menu'); + serviceMenu.dataset.embedded = true; + submenu.appendChild(serviceMenu); + } + const menuItem = document.createElement('div'); menuItem.className = 'header_item'; menuItem.innerText = item.name; menuItem.onclick = () => { + console.log('wut', isMobile()); + if (item.to == '/services/' && isMobile()) { + submenu.classList.toggle('header_mobile_submenu_open'); + return; + } + window.location.href = item.to; }; @@ -35,9 +72,20 @@ class AppHeader extends HTMLElement { } div.appendChild(menuItem); + + if (item.to == '/services/') { + div.appendChild(submenu); + } }); root.appendChild(div); + + hamburger.onclick = () => { + div.classList.add('header_open'); + }; + mobileClose.onclick = () => { + div.classList.remove('header_open'); + }; } getMenuItems() { diff --git a/src/script/components/app-price-table.js b/src/script/components/app-price-table.js index e0e1a55..ceda8b6 100644 --- a/src/script/components/app-price-table.js +++ b/src/script/components/app-price-table.js @@ -1,57 +1,119 @@ import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss'; +const isMobile = () => window.innerWidth < 720; + class AppPriceTable extends HTMLElement { constructor() { super(); + + this.isMobile = isMobile(); + + window.addEventListener('resize', this.resized.bind(this)); } connectedCallback() { + this.root = this.attachShadow({ mode: 'open' }); + + const style = document.createElement('style'); + style.textContent = styles; + this.root.appendChild(style); + fetch(this.dataset.content) .then(response => response.json()) .then(data => { - const root = this.attachShadow({ mode: 'open' }); - - const style = document.createElement('style'); - style.textContent = styles; - root.appendChild(style); - - const table = document.createElement('table'); - table.className = 'table'; - table.cellSpacing = 0; - - const thead = document.createElement('thead'); - - const theadRow = document.createElement('tr'); - - data.columns.forEach(column => { - const col = document.createElement('th'); - col.innerText = column; - theadRow.appendChild(col); - }); - - thead.appendChild(theadRow); - table.appendChild(thead); - - const tbody = document.createElement('tbody'); - - data.data.forEach(item => { - const row = document.createElement('tr'); - - item.forEach((field, i) => { - const cell = document.createElement('td'); - cell.innerText = field + ' ' + data.units[i]; - row.appendChild(cell); - }); - - tbody.appendChild(row); - }); - - table.appendChild(tbody); - - root.appendChild(table); + this.data = data; + this.renderTable(); }); } + renderTable() { + if (this.table) { + this.table.remove(); + } + + this.table = document.createElement('table'); + this.table.className = 'table'; + this.table.cellSpacing = 0; + + const thead = document.createElement('thead'); + + const theadRow = document.createElement('tr'); + + if (this.isMobile) { + const detailsCol = document.createElement('th'); + detailsCol.innerText = 'Detalii'; + theadRow.appendChild(detailsCol); + + const priceCol = document.createElement('th'); + priceCol.innerText = this.data.columns[this.data.columns.length - 1]; + theadRow.appendChild(priceCol); + } else { + this.data.columns.forEach(column => { + const col = document.createElement('th'); + col.innerText = column; + theadRow.appendChild(col); + }); + } + + thead.appendChild(theadRow); + this.table.appendChild(thead); + + const tbody = document.createElement('tbody'); + + this.data.data.forEach(item => { + const row = document.createElement('tr'); + + if (this.isMobile) { + const detailsCell = document.createElement('td'); + + const detailsTable = document.createElement('table'); + const detailsTableBody = document.createElement('tbody'); + + item.slice(0, -1).forEach((field, i) => { + const detailsRow = document.createElement('tr'); + const nameCell = document.createElement('td'); + const valueCell = document.createElement('td'); + + nameCell.innerText = this.data.columns[i] + ': '; + valueCell.innerText = field + ' ' + this.data.units[i]; + + detailsRow.appendChild(nameCell); + detailsRow.appendChild(valueCell); + + detailsTableBody.appendChild(detailsRow); + }); + + detailsTable.appendChild(detailsTableBody); + detailsCell.appendChild(detailsTable); + row.appendChild(detailsCell); + + const priceCell = document.createElement('td'); + priceCell.innerText = + item[item.length - 1] + ' ' + this.data.units[item.length - 1]; + row.appendChild(priceCell); + } else { + item.forEach((field, i) => { + const cell = document.createElement('td'); + cell.innerText = field + ' ' + this.data.units[i]; + row.appendChild(cell); + }); + } + + tbody.appendChild(row); + }); + + this.table.appendChild(tbody); + + this.root.appendChild(this.table); + } + + resized() { + if (isMobile() != this.isMobile) { + this.isMobile = isMobile(); + this.renderTable(); + } + } + static get observedAttributes() { return ['data-content']; } diff --git a/src/script/components/app-service-menu.js b/src/script/components/app-service-menu.js index 5f79827..3ea1386 100644 --- a/src/script/components/app-service-menu.js +++ b/src/script/components/app-service-menu.js @@ -3,7 +3,9 @@ import styles from '!raw-loader!sass-loader!./styles/app-service-menu.scss'; class AppServiceMenu extends HTMLElement { constructor() { super(); + } + connectedCallback() { const root = this.attachShadow({ mode: 'open' }); const style = document.createElement('style'); @@ -16,6 +18,9 @@ class AppServiceMenu extends HTMLElement { const div = document.createElement('div'); div.className = 'menu'; + if (this.dataset.embedded) { + div.classList.add('menu_asChild'); + } const closeButton = document.createElement('div'); closeButton.className = 'menu_closeMenu'; @@ -76,6 +81,10 @@ class AppServiceMenu extends HTMLElement { { name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' } ]; } + + static get observedAttributes() { + return ['data-embedded']; + } } customElements.define('app-service-menu', AppServiceMenu); diff --git a/src/script/components/styles/app-header.scss b/src/script/components/styles/app-header.scss index 2763f99..17bd984 100644 --- a/src/script/components/styles/app-header.scss +++ b/src/script/components/styles/app-header.scss @@ -1,3 +1,5 @@ +@import '../../../style/mixins.scss'; + .header { display: flex; flex-direction: row; @@ -13,10 +15,95 @@ right: 0; z-index: 1000; + @include mobile { + flex-direction: column; + align-items: stretch; + padding: 20px 0; + height: 100vh; + box-shadow: none; + overflow: hidden; + width: 0; + transition: width 0.3s ease-out; + + &_open { + width: 100vw; + } + } + + &_mobile { + display: none; + + @include mobile { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + padding: 0 20px; + height: 60px; + background-color: #ffffff; + box-shadow: 0 5px 5px #00000010; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; + + &_hamburger { + display: block; + cursor: pointer; + background: url('../../../res/hamburger_dark.png') center center; + background-size: contain; + width: 40px; + height: 40px; + margin-right: 30px; + } + + &_icon { + height: 80%; + } + } + + &_close { + display: none; + + @include mobile { + display: block; + cursor: pointer; + background: url('../../../res/back.png') center center; + background-size: contain; + width: 40px; + height: 40px; + margin-bottom: 20px; + margin-left: 20px; + } + } + + &_submenu { + display: none; + + @include mobile { + margin-left: 50px; + display: block; + height: 0; + overflow: hidden; + transition: height 0.3s ease-out; + + &_open { + height: 290px; + } + } + } + } + &_icon { height: 80%; margin-right: 30px; cursor: pointer; + + @include mobile { + height: 80px; + margin: 0 auto; + } } &_item { @@ -34,12 +121,23 @@ border-bottom: 5px solid transparent; padding-top: 5px; + @include mobile { + height: 80px; + border-bottom: none; + border-left: 5px solid transparent; + } + &:hover { background-color: #0072bc10; } &_active { border-bottom: 5px solid #0072bc; + + @include mobile { + border-bottom: none; + border-left: 5px solid #0072bc; + } } } } diff --git a/src/script/components/styles/app-service-header.scss b/src/script/components/styles/app-service-header.scss index fdc3546..fa7ac79 100644 --- a/src/script/components/styles/app-service-header.scss +++ b/src/script/components/styles/app-service-header.scss @@ -9,7 +9,7 @@ padding: 20px 40px; margin-bottom: 60px; - @include tablet { + @include tabletMobile { justify-content: flex-end; margin-bottom: 20px; } @@ -33,6 +33,10 @@ &_icon { width: 150px; + + @include mobile { + width: 50px; + } } } @@ -41,7 +45,7 @@ line-height: 37px; color: #ffffff; - @include tablet { + @include tabletMobile { display: none; } } @@ -49,7 +53,7 @@ &_underDescription { display: none; - @include tablet { + @include tabletMobile { display: block; font-size: 28px; line-height: 37px; diff --git a/src/script/components/styles/app-service-menu.scss b/src/script/components/styles/app-service-menu.scss index 3d99b55..e959b21 100644 --- a/src/script/components/styles/app-service-menu.scss +++ b/src/script/components/styles/app-service-menu.scss @@ -21,6 +21,21 @@ } } + @include mobile { + display: none; + position: unset; + left: unset; + top: unset; + bottom: unset; + width: 100%; + box-shadow: unset; + z-index: unset; + + &_asChild { + display: block; + } + } + &_hamburger { display: none; @@ -65,6 +80,12 @@ cursor: pointer; width: 400px; + @include mobile { + width: 100%; + height: 30px; + padding: 10px 0; + } + &:hover { background-color: #0072bc10; } @@ -72,6 +93,10 @@ &_image { width: 50px; margin-right: 20px; + + @include mobile { + width: 30px; + } } &_text { diff --git a/src/services/dedicated.html b/src/services/dedicated.html index 1842ee7..21b23ee 100644 --- a/src/services/dedicated.html +++ b/src/services/dedicated.html @@ -3,6 +3,7 @@ Servere dedicate - Servicii - Core Computing + diff --git a/src/services/domain.html b/src/services/domain.html index eec7d32..9250ada 100644 --- a/src/services/domain.html +++ b/src/services/domain.html @@ -3,6 +3,7 @@ Domenii - Servicii - Core Computing + diff --git a/src/services/k8.html b/src/services/k8.html index 56bc858..f8a0ba9 100644 --- a/src/services/k8.html +++ b/src/services/k8.html @@ -3,6 +3,7 @@ Kubernetes - Servicii - Core Computing + diff --git a/src/services/saas.html b/src/services/saas.html index 184c184..6a9f00e 100644 --- a/src/services/saas.html +++ b/src/services/saas.html @@ -3,6 +3,7 @@ SaaS - Servicii - Core Computing + diff --git a/src/services/vps.html b/src/services/vps.html index 296b8c5..5414ebf 100644 --- a/src/services/vps.html +++ b/src/services/vps.html @@ -3,6 +3,7 @@ VPS - Servicii - Core Computing + diff --git a/src/style/about.scss b/src/style/about.scss index 8c20aa9..a32d914 100644 --- a/src/style/about.scss +++ b/src/style/about.scss @@ -19,7 +19,7 @@ width: 60%; margin: auto; - @include tablet { + @include tabletMobile { width: 100%; padding: 20px; } @@ -38,7 +38,7 @@ display: flex; justify-content: flex-start; - @include tablet { + @include tabletMobile { flex-wrap: wrap; } @@ -59,7 +59,7 @@ font-size: 24px; line-height: 36px; - @include tablet { + @include tabletMobile { width: 100%; display: flex; flex-direction: column; @@ -71,7 +71,7 @@ font-size: 24px; line-height: 36px; - @include tablet { + @include tabletMobile { width: 100%; order: 1; } @@ -81,7 +81,7 @@ width: 300px; margin: 0 10px; - @include tablet { + @include tabletMobile { width: 100%; margin: 10px 0; order: 2; diff --git a/src/style/contact.scss b/src/style/contact.scss index 335ad05..53aa219 100644 --- a/src/style/contact.scss +++ b/src/style/contact.scss @@ -78,6 +78,25 @@ margin-bottom: 40px; } + @include mobile { + flex-wrap: wrap; + } + + &_box { + @include mobile { + width: 100%; + margin-bottom: 20px; + } + } + + &_map { + width: 50%; + + @include mobile { + width: 100%; + } + } + &_name { font-size: 18px; line-height: 24px; diff --git a/src/style/index.scss b/src/style/index.scss index 1fa9418..3e94504 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -21,7 +21,7 @@ padding: 0 70px; margin-top: 60px; - @include tablet { + @include tabletMobile { padding: 0 20px; flex-wrap: wrap; justify-content: center; @@ -30,7 +30,7 @@ &_box { width: 450px; - @include tablet { + @include tabletMobile { width: 100%; } } @@ -38,10 +38,10 @@ &_scroll { display: none; - @include tablet { + @include tabletMobile { display: block; width: 100%; - margin-top: 50px; + margin-top: 20px; margin-bottom: 50vh; } } @@ -55,6 +55,10 @@ max-width: 350px; margin-top: 60px; margin-bottom: 80px; + + @include mobile { + margin-bottom: 20px; + } } &_description { @@ -65,10 +69,11 @@ text-shadow: 0 0 10px #000000b2; max-width: 500px; - @include tablet { + @include tabletMobile { text-align: right; float: right; clear: right; + margin: 0; } } @@ -80,11 +85,15 @@ width: 450px; margin-left: 40px; - @include tablet { + @include tabletMobile { margin: auto; margin-bottom: 30vh; } + @include mobile { + width: 100%; + } + &_title { font-size: 32px; line-height: 48px; diff --git a/src/style/services.scss b/src/style/services.scss index 3162255..841f1b6 100644 --- a/src/style/services.scss +++ b/src/style/services.scss @@ -5,7 +5,7 @@ margin-top: 60px; margin-left: 400px; - @include tablet { + @include tabletMobile { margin-left: 0; } }