gergof/PIU_proiect
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Made mobile version for all pages

Browse Source
This commit is contained in:
Fándly Gergő 2021-01-06 12:56:45 +02:00
parent 40cb9a3d78
commit 358ae2c115
21 changed files with 351 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/about.html
View File

@ -3,6 +3,7 @@
<head>
<title>Firma - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./index.js"></script>
</head>
<body>

25
src/contact.html
View File

@ -3,6 +3,7 @@
<head>
<title>Contact - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./index.js"></script>
</head>
<body>
@ -29,7 +30,7 @@
></app-button>
</div>
<div class="contact_info">
<div>
<div class="contact_info_box">
<p class="contact_info_name">SC Core Computing SRL</p>
<p class="contact_info_details">
Adresa: Oradea, Str. Universității 15
@ -41,16 +42,18 @@
CUI: 123456
</p>
</div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1143.0965017714987!2d21.920660481729392!3d47.04499920169418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47464794d87a183f%3A0x26127af0a86f755a!2sStrada%20Universit%C4%83%C8%9Bii%2015%2C%20Oradea%20417498!5e0!3m2!1shu!2sro!4v1609882271325!5m2!1shu!2sro"
width="50%"
height="250"
frameborder="0"
style="border: 0"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
></iframe>
<div class="contact_info_map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1143.0965017714987!2d21.920660481729392!3d47.04499920169418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47464794d87a183f%3A0x26127af0a86f755a!2sStrada%20Universit%C4%83%C8%9Bii%2015%2C%20Oradea%20417498!5e0!3m2!1shu!2sro!4v1609882271325!5m2!1shu!2sro"
width="100%"
height="250"
frameborder="0"
style="border: 0"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
></iframe>
</div>
</div>
</div>
</body>

1
src/index.html
View File

@ -3,6 +3,7 @@
<head>
<title>Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./index.js"></script>
</head>
<body>

1
src/prices.html
View File

@ -3,6 +3,7 @@
<head>
<title>Prețuri - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./index.js"></script>
</head>
<body>

BIN
src/res/hamburger.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/res/hamburger_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

48
src/script/components/app-header.js
View File

@ -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() {

142
src/script/components/app-price-table.js
View File

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

9
src/script/components/app-service-menu.js
View File

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

98
src/script/components/styles/app-header.scss
View File

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

10
src/script/components/styles/app-service-header.scss
View File

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

25
src/script/components/styles/app-service-menu.scss
View File

@ -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 {

1
src/services/dedicated.html
View File

@ -3,6 +3,7 @@
<head>
<title>Servere dedicate - Servicii - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../index.js"></script>
</head>
<body>

1
src/services/domain.html
View File

@ -3,6 +3,7 @@
<head>
<title>Domenii - Servicii - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../index.js"></script>
</head>
<body>

1
src/services/k8.html
View File

@ -3,6 +3,7 @@
<head>
<title>Kubernetes - Servicii - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../index.js"></script>
</head>
<body>

1
src/services/saas.html
View File

@ -3,6 +3,7 @@
<head>
<title>SaaS - Servicii - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../index.js"></script>
</head>
<body>

1
src/services/vps.html
View File

@ -3,6 +3,7 @@
<head>
<title>VPS - Servicii - Core Computing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../index.js"></script>
</head>
<body>

10
src/style/about.scss
View File

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

19
src/style/contact.scss
View File

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

21
src/style/index.scss
View File

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

2
src/style/services.scss
View File

@ -5,7 +5,7 @@
margin-top: 60px;
margin-left: 400px;
@include tablet {
@include tabletMobile {
margin-left: 0;
}
}