Compare commits
3 Commits
1bdc2b1438
...
3781e9adcf
| Author | SHA1 | Date | |
|---|---|---|---|
| 3781e9adcf | |||
| 2e57253ac0 | |||
| 9a8efb5418 |
42
package-lock.json
generated
42
package-lock.json
generated
@ -21,9 +21,9 @@
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylelint": "^16.3.1",
|
||||
"stylelint": "^16.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"stylelint-scss": "^6.2.1"
|
||||
"stylelint-scss": "^6.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
@ -6335,9 +6335,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/css-functions-list": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
|
||||
"integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
|
||||
"integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12 || >=16"
|
||||
@ -16181,20 +16181,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint": {
|
||||
"version": "16.3.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.3.1.tgz",
|
||||
"integrity": "sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==",
|
||||
"version": "16.5.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
|
||||
"integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@csstools/css-parser-algorithms": "^2.6.1",
|
||||
"@csstools/css-tokenizer": "^2.2.4",
|
||||
"@csstools/media-query-list-parser": "^2.1.9",
|
||||
"@csstools/selector-specificity": "^3.0.2",
|
||||
"@csstools/selector-specificity": "^3.0.3",
|
||||
"@dual-bundle/import-meta-resolve": "^4.0.0",
|
||||
"balanced-match": "^2.0.0",
|
||||
"colord": "^2.9.3",
|
||||
"cosmiconfig": "^9.0.0",
|
||||
"css-functions-list": "^3.2.1",
|
||||
"css-functions-list": "^3.2.2",
|
||||
"css-tree": "^2.3.1",
|
||||
"debug": "^4.3.4",
|
||||
"fast-glob": "^3.3.2",
|
||||
@ -16223,7 +16223,7 @@
|
||||
"strip-ansi": "^7.1.0",
|
||||
"supports-hyperlinks": "^3.0.0",
|
||||
"svg-tags": "^1.0.0",
|
||||
"table": "^6.8.1",
|
||||
"table": "^6.8.2",
|
||||
"write-file-atomic": "^5.0.1"
|
||||
},
|
||||
"bin": {
|
||||
@ -16310,12 +16310,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint-scss": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.2.1.tgz",
|
||||
"integrity": "sha512-ZoGLbVb1keZYRVGQlhB8G6sZOoNqw61whzzzGFWp05N12ErqLFfBv3JPrXiMLZaW98sBS7K/vUQhRnvUj4vwdw==",
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.3.0.tgz",
|
||||
"integrity": "sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"known-css-properties": "^0.29.0",
|
||||
"known-css-properties": "^0.30.0",
|
||||
"postcss-media-query-parser": "^0.2.3",
|
||||
"postcss-resolve-nested-selector": "^0.1.1",
|
||||
"postcss-selector-parser": "^6.0.15",
|
||||
@ -16328,16 +16328,10 @@
|
||||
"stylelint": "^16.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint-scss/node_modules/known-css-properties": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
|
||||
"integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/stylelint/node_modules/@csstools/selector-specificity": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
|
||||
"integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
|
||||
"integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylelint": "^16.3.1",
|
||||
"stylelint": "^16.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"stylelint-scss": "^6.2.1"
|
||||
"stylelint-scss": "^6.3.0"
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": [
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -50,7 +50,7 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.browse-title {
|
||||
@ -71,8 +71,8 @@ $white: #fff;
|
||||
height: 150px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -86,7 +86,7 @@ $white: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.browse-cable-image {
|
||||
@ -97,7 +97,7 @@ $white: #fff;
|
||||
background-color: white;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 10px;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
@ -146,10 +146,9 @@ $white: #fff;
|
||||
font-size: 15px;
|
||||
margin-bottom: 2px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.browse-search {
|
||||
@ -157,8 +156,8 @@ $white: #fff;
|
||||
height: 50px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -171,7 +170,7 @@ $white: #fff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.browse-search input {
|
||||
@ -188,4 +187,4 @@ $white: #fff;
|
||||
border-right: none;
|
||||
padding-left: 20px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -49,7 +49,7 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.cable-main {
|
||||
@ -57,8 +57,8 @@ $white: #fff;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -71,7 +71,7 @@ $white: #fff;
|
||||
margin-top: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.cable-actions {
|
||||
@ -96,8 +96,8 @@ $white: #fff;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -107,7 +107,7 @@ $white: #fff;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -116,8 +116,8 @@ $white: #fff;
|
||||
width: auto;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 194, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 194 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@ -143,7 +143,7 @@ $white: #fff;
|
||||
margin-right: 25px;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 10px;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.cable-main-label {
|
||||
@ -183,7 +183,6 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
@ -194,8 +193,7 @@ $white: #fff;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
@ -229,7 +227,7 @@ $white: #fff;
|
||||
border: $light-blue solid 2px;
|
||||
border-radius: 20px;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0px;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.row,
|
||||
@ -339,9 +337,9 @@ th:first-child {
|
||||
|
||||
.modal-close {
|
||||
cursor: pointer;
|
||||
padding: 15px 35px 15px 35px;
|
||||
padding: 15px 35px;
|
||||
border-radius: 20px;
|
||||
background-color: $gray;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -49,7 +49,7 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
background-color: transparent;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.map-title {
|
||||
@ -75,12 +75,13 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.map-box, .map-details {
|
||||
.map-box,
|
||||
.map-details {
|
||||
height: 68vh;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -90,7 +91,7 @@ $white: #fff;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -115,15 +116,16 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.map-box-circle, .map-box-spacer {
|
||||
.map-box-circle,
|
||||
.map-box-spacer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
@ -134,13 +136,13 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.map-box-circle {
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-box-spacer {
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
@ -174,11 +176,10 @@ $white: #fff;
|
||||
width: auto;
|
||||
height: 35%;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: transparent;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 20px;
|
||||
background-color: white;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@ -202,7 +203,7 @@ $white: #fff;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Bold";
|
||||
margin-bottom: 3px;;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.map-cable-shortdescription {
|
||||
@ -235,7 +236,6 @@ $white: #fff;
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
@ -245,11 +245,11 @@ $white: #fff;
|
||||
.map-cable-moreinfo {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
@ -257,7 +257,7 @@ $white: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
@ -271,4 +271,4 @@ $white: #fff;
|
||||
color: $medium-blue;
|
||||
font-family: "Gotham Bold";
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ $white: #fff;
|
||||
|
||||
.navbar-top {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
height: 94%;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
justify-content: flex-start;
|
||||
@ -78,7 +78,8 @@ $white: #fff;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar-list-item {
|
||||
.navbar-list-item,
|
||||
.navbar-return {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 0 0 3px;
|
||||
@ -92,7 +93,8 @@ $white: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-list-item span {
|
||||
.navbar-list-item span,
|
||||
.navbar-return span {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -101,3 +103,101 @@ $white: #fff;
|
||||
color: $dark-blue;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.navbar-return {
|
||||
width: 90%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $medium-blue;
|
||||
}
|
||||
|
||||
.navbar-return span {
|
||||
color: $white;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.modal-body,
|
||||
.modal-close,
|
||||
.modal-return {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-title span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Bold";
|
||||
font-size: 32px;
|
||||
color: $dark-blue;
|
||||
background-color: transparent;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.modal-body span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 18px;
|
||||
color: $medium-blue;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-tray {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
margin-bottom: 30px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.modal-close,
|
||||
.modal-return {
|
||||
cursor: pointer;
|
||||
padding: 15px 35px;
|
||||
border-radius: 20px;
|
||||
background-color: $gray;
|
||||
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modal-close span,
|
||||
.modal-return span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 18px;
|
||||
margin-top: 3px;
|
||||
color: $dark-blue;
|
||||
}
|
||||
|
||||
.modal-return {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -50,7 +50,7 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
@ -66,13 +66,14 @@ $white: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-powerContainer, .settings-creditsContainer {
|
||||
.settings-powerContainer,
|
||||
.settings-creditsContainer {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -85,7 +86,7 @@ $white: #fff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.settings-creditsContainer {
|
||||
@ -98,17 +99,17 @@ $white: #fff;
|
||||
.settings-powerButton {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-right: 20px;
|
||||
@ -135,7 +136,10 @@ $white: #fff;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.entry-links, .entry-name, .entry-position, .settings-credits-title {
|
||||
.entry-links,
|
||||
.entry-name,
|
||||
.entry-position,
|
||||
.settings-credits-title {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
@ -175,11 +179,11 @@ $white: #fff;
|
||||
.entry-position {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $light-blue
|
||||
color: $light-blue;
|
||||
}
|
||||
|
||||
.entry-links {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $hover-blue
|
||||
}
|
||||
color: $hover-blue;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -50,7 +50,7 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.statistics-title {
|
||||
@ -69,8 +69,7 @@ $white: #fff;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
@ -84,20 +83,18 @@ $white: #fff;
|
||||
height: 300px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
margin-top: 5px;
|
||||
|
||||
display: flex; /* Center the content */
|
||||
align-items: center; /* Center vertically */
|
||||
justify-content: center; /* Center horizontally */
|
||||
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -107,10 +104,9 @@ $white: #fff;
|
||||
height: 95%; /* Adjust the height of iframes */
|
||||
border-radius: 20px;
|
||||
|
||||
|
||||
// Debug Borders
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
}
|
||||
|
||||
// .summary-iframe {
|
||||
@ -134,7 +130,6 @@ $white: #fff;
|
||||
// width: 25%;
|
||||
// }
|
||||
|
||||
|
||||
// .summary-dashboard {
|
||||
// width: 100%;
|
||||
// height: 900px;
|
||||
@ -149,4 +144,4 @@ $white: #fff;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -58,7 +58,7 @@ class Cable {
|
||||
"description",
|
||||
"application",
|
||||
"category",
|
||||
"datasheet"
|
||||
"datasheet",
|
||||
].includes(key)
|
||||
) {
|
||||
this.dynamicProps[key] = cableData[key];
|
||||
@ -120,9 +120,13 @@ export default class CableDetailComponent extends Component {
|
||||
});
|
||||
|
||||
if (modal === "modalOpen_dispense") {
|
||||
this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
} else if (modal === "modalOpen_show") {
|
||||
this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import cable from "../utils/Cable";
|
||||
import "../assets/stylesheets/map.scss";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "animate.css"
|
||||
import "animate.css";
|
||||
|
||||
export default class MapComponent extends Component {
|
||||
constructor(props) {
|
||||
@ -258,7 +258,10 @@ export default class MapComponent extends Component {
|
||||
{parseInt(cable.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
<NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
|
||||
<NavLink
|
||||
to={"/map/cable/" + cable.position}
|
||||
className="map-cable-moreinfo"
|
||||
>
|
||||
<span>More Info</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
import React, { Component } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/navbar.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
export default class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
clicks: 0,
|
||||
timer: null,
|
||||
modalOpen_return: false,
|
||||
modalOpacity: 0,
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -41,8 +47,7 @@ export default class NavBar extends Component {
|
||||
this.setState({ clicks: clicks + 1 });
|
||||
|
||||
if (clicks + 1 === 3) {
|
||||
|
||||
window.location.replace("/settings")
|
||||
window.location.replace("/settings");
|
||||
|
||||
clearTimeout(timer);
|
||||
this.setState({ clicks: 0, timer: null });
|
||||
@ -55,7 +60,59 @@ export default class NavBar extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
openModal = (modal) => {
|
||||
this.setState({ [modal]: true }, () => {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
});
|
||||
};
|
||||
|
||||
closeModal = (modal) => {
|
||||
this.setState({ modalOpacity: 0 }, () => {
|
||||
setTimeout(() => this.setState({ [modal]: false }), 300);
|
||||
});
|
||||
};
|
||||
|
||||
returnCable = (tray) => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
|
||||
);
|
||||
console.log("Cable returned from tray " + tray);
|
||||
this.closeModal("modalOpen_return");
|
||||
};
|
||||
|
||||
render() {
|
||||
const { modalOpen_return, modalOpacity } = this.state;
|
||||
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
width: "30%",
|
||||
height: "30%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "20px",
|
||||
background:
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
backdropFilter: "blur(5px)",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<div className="navbar-top">
|
||||
@ -80,6 +137,48 @@ export default class NavBar extends Component {
|
||||
</NavLink>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
className="navbar-return"
|
||||
onClick={() => this.openModal("modalOpen_return")}
|
||||
>
|
||||
<span id="browse-s">Return Cable</span>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={modalOpen_return}
|
||||
onRequestClose={() => this.closeModal("modalOpen_return")}
|
||||
contentLabel="show"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>♻️</span>
|
||||
<span>Return Cable</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Select the tray you would like to return from.</span>
|
||||
</div>
|
||||
<div className="modal-tray">
|
||||
<div className="modal-return" onClick={() => this.returnCable(0)}>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(1)}>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(2)}>
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(3)}>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
onClick={() => this.closeModal("modalOpen_return")}
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -41,37 +41,64 @@ export default class SettingsComponent extends Component {
|
||||
<div className="entry">
|
||||
<span className="entry-name">Cole Deck,</span>
|
||||
<span className="entry-position">Project Lead,</span>
|
||||
<a className="entry-links">https://deck.sh</a>
|
||||
<a className="entry-links" href="https://deck.sh">
|
||||
https://deck.sh
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Natorion Johnson,</span>
|
||||
<span className="entry-position">Lead PCB assembler,</span>
|
||||
<a className="entry-links">https://linkedin.com/in/NatorionJ</a>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://linkedin.com/in/NatorionJ"
|
||||
>
|
||||
https://linkedin.com/in/NatorionJ
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Fannie,</span>
|
||||
<span className="entry-position">CAD Design, Fabrication Planner</span>
|
||||
<a className="entry-links">https://linkedin.com/in/fannieyu</a>
|
||||
<span className="entry-position">
|
||||
CAD Design, Fabrication Planner
|
||||
</span>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://linkedin.com/in/fannieyu"
|
||||
>
|
||||
https://linkedin.com/in/fannieyu
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Elias Frey Reschly,</span>
|
||||
<span className="entry-position">Mechanical Design, Fabrication</span>
|
||||
<a className="entry-links"></a>
|
||||
<span className="entry-position">
|
||||
Mechanical Design, Fabrication
|
||||
</span>
|
||||
<div className="entry-links"></div>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Scarlett Deck,</span>
|
||||
<span className="entry-position">Front-End Dev, UI/UX Designer,</span>
|
||||
<a className="entry-links">https://kadan.live</a>
|
||||
<span className="entry-position">
|
||||
Front-End Dev, UI/UX Designer,
|
||||
</span>
|
||||
<a className="entry-links" href="https://kadan.live">
|
||||
https://kadan.live
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Lucas Ferguson,</span>
|
||||
<span className="entry-position">Front-End Dev,</span>
|
||||
<a className="entry-links">https://lucasferguson.webflow.io</a>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://lucasferguson.webflow.io"
|
||||
>
|
||||
https://lucasferguson.webflow.io
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Dustin Thomas,</span>
|
||||
<span className="entry-position">Back-End Dev,</span>
|
||||
<a className="entry-links">https://cptlobster.dev</a>
|
||||
<a className="entry-links" href="https://cptlobster.dev">
|
||||
https://cptlobster.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,26 +13,50 @@ export default class StatisticsComponent extends Component {
|
||||
<h1 className="statistics-title">📊 Statistics</h1>
|
||||
<div className="statistics-grid">
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,6 @@ socket.addEventListener("open", function (event) {
|
||||
init();
|
||||
});
|
||||
|
||||
|
||||
// Initialize the app
|
||||
const init = () => {
|
||||
const router = createBrowserRouter([
|
||||
@ -67,4 +66,4 @@ const init = () => {
|
||||
<RouterProvider router={router} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ export default class BrowseRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<BrowseComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class CableDetailRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<CableDetailComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class MapRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<MapComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class SettingsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<SettingsComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class StatisticsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<StatisticsComponent socketHandler={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user