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 ce515a5..ac6c950 100644 Binary files a/src/res/hamburger.png and b/src/res/hamburger.png differ diff --git a/src/res/hamburger_dark.png b/src/res/hamburger_dark.png new file mode 100644 index 0000000..151efa4 Binary files /dev/null and b/src/res/hamburger_dark.png differ diff --git a/src/script/components/app-header.js b/src/script/components/app-header.js index c24e8e0..2ed5ed1 100644 --- a/src/script/components/app-header.js +++ b/src/script/components/app-header.js @@ -1,5 +1,7 @@ import styles from '!raw-loader!sass-loader!./styles/app-header.scss'; +const isMobile = () => 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; } }