Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

local push

Browse Source
This commit is contained in:
scarlett kadan
2024-05-10 01:50:18 -04:00
parent fa8f1441c8
commit ac94ad837f
6 changed files with 252 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/stylesheets/browse.scss
View File

@@ -50,9 +50,22 @@ $white: #fff;
margin-bottom: 50px;
}
.browse-title {
width: 80%;
height: auto;
font-size: 32px;
font-weight: bold;
color: $white;
font-family: "Gotham Medium";
margin: 10px;
background-color: transparent;
margin-bottom: 20px;
text-align: left;
}
.browse-cable {
width: 80%;
height: 100px;
height: 150px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
@@ -64,7 +77,6 @@ $white: #fff;
flex-direction: row;
border-radius: 20px;
border: 1px solid $gray;
padding: 25px;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
@@ -80,8 +92,9 @@ $white: #fff;
.browse-cable-image {
width: auto;
height: 100%;
height: 75%;
margin-right: 25px;
margin-left: 20px;
background-color: transparent;
border: $gray solid 1px;
border-radius: 10px;
@@ -98,6 +111,7 @@ $white: #fff;
width: auto;
height: auto;
font-size: 35px;
margin-right: 20px;
transform: scaleY(2);
font-family: "Gotham Book";
color: $medium-blue;
@@ -129,7 +143,8 @@ $white: #fff;
.browse-cable-position,
.browse-cable-category {
background-color: transparent;
font-size: 16px;
font-size: 15px;
margin-bottom: 2px;
color: $light-blue;
color: $light-blue;
width: auto;

104
src/assets/stylesheets/map.scss
View File

@@ -45,7 +45,107 @@ $white: #fff;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
overflow: visible;
background-color: transparent;
margin-bottom: 50px;
}
.map-title {
width: 80%;
height: auto;
font-size: 32px;
font-weight: bold;
color: $white;
font-family: "Gotham Medium";
margin: 10px;
background-color: transparent;
margin-bottom: 25px;
}
.map-boxContainer {
width: 80%;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
background-color: transparent;
overflow: visible;
}
.map-box, .map-details {
height: 600px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
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));
overflow: visible;
}
.map-box {
width: 60%;
}
.map-details {
width: 38%;
}
.map-box-row {
width: 100%;
height: 60px;
background-color: transparent;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
overflow: visible;
}
.map-box-circle, .map-box-spacer {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: $white;
margin-left: 3px;
margin-right: 3px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
}
.map-box-circle {
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
cursor: pointer;
}
.map-box-circle:hover, .map-box:hover, .map-details:hover {
transform: translate3d(-5px, -5px, 0);
}
.map-box-spacer {
background-color: transparent;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
border: 1px solid transparent;
}
.map-box-circle-inner {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}

24
src/assets/stylesheets/summary.scss
View File

@@ -64,6 +64,7 @@ $white: #fff;
.summary-grid {
width: 80%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -71,6 +72,8 @@ $white: #fff;
align-items: flex-start;
background-color: transparent;
overflow: visible;
// add row gap
gap: 20px;
}
.summary-grid-container {
@@ -81,10 +84,12 @@ $white: #fff;
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
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;
@@ -99,15 +104,16 @@ $white: #fff;
}
.summary-iframe {
width: 95%; /* Ensure iframes take up full width of their grid cell */
height: 95%; /* Adjust the height of iframes */
border-radius: 20px;
// .summary-iframe {
// width: 100%; /* Ensure iframes take up full width of their grid cell */
// height: 300px; /* Adjust the height of iframes */
// // Debug Borders
// Debug Borders
// border-width: 5px;
// border-style: solid;
// }
}
// .summary-iframe {
// width: 400px;

1
src/components/BrowseComponent.js
View File

@@ -152,6 +152,7 @@ export default class BrowseComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="browse-fieldContainer">
<h1 className="browse-title">Browse</h1>
{this.state.cableList.map((cableObj, index) => (
<React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
))}

96
src/components/MapComponent.js
View File

@@ -3,6 +3,17 @@ import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/map.scss";
export default class MapComponent extends Component {
renderCircle(id, color) {
return (
<div className="map-box-circle" id={id}>
<div
className="map-box-circle-inner"
style={{ border: `${color} 4px solid` }}
></div>
</div>
);
}
render() {
return (
<div className="map">
@@ -10,6 +21,91 @@ export default class MapComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="map-fieldContainer">
<h1 className="map-title">Map</h1>
<div className="map-boxContainer">
<div className="map-box">
<div className="map-box-row" id="row-1">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
</div>
<div className="map-box-row" id="row-2">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-3">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
{this.renderCircle("circle-7", "#004990")}
</div>
<div className="map-box-row" id="row-4">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-5">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-6">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-7">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
{this.renderCircle("circle-7", "#004990")}
</div>
<div className="map-box-row" id="row-8">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-9">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
</div>
</div>
<div className="map-details"></div>
</div>
</div>
</div>
);

18
src/components/SummaryComponent.js
View File

@@ -12,7 +12,23 @@ export default class SummaryComponent extends Component {
<div className="summary-fieldContainer">
<h1 className="summary-title">Summary</h1>
<div className="summary-grid">
<div className="summary-grid-container"></div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
</div>
</div>
</div>