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 @@
>
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;
}
}