Skip to content

Commit

Permalink
Adding side menu to new map page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvance43776
mvance43776 committed Feb 12, 2020
1 parent c86c20a commit 78c3970
Show file tree
Hide file tree
Showing 3 changed files with 205 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/pages/Home/_MapPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@
}
@media (max-width: 500px) {
left: calc(50% - 30px);
top: 60px !important;
top: 60px;
}
}

Expand Down
93 changes: 92 additions & 1 deletion src/pages/Home/subcomponents/NewUserCity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function NewUserCity(props) {
const [travelScoreIndexArray, handleTravelScoreIndexArray] = useState([]);
const [clickedCityArray, handleClickedCityArray] = useState([]);
const [newLiveCity, handleNewLiveCity] = useState();
const [showSideMenu, handleSideMenu] = useState(false);
const mapRef = useRef();
const clusterPast = useRef();
const clusterFuture = useRef();
Expand Down Expand Up @@ -778,14 +779,17 @@ function NewUserCity(props) {

function showPopup() {
handleActivePopup(!activePopup);
handleSideMenu(false);
}

function showSuggest() {
handleSuggestedPopup(!suggestPopup);
handleSideMenu(false);
}

function showImport() {
handleImportPopup(!importPopup);
handleSideMenu(false);
}

function handleContinents(contArray) {
Expand Down Expand Up @@ -830,6 +834,93 @@ function NewUserCity(props) {
return (
<>
<div className="city-new-map-container">
<div
className="city-new-side-menu"
style={showSideMenu ? { width: "250px" } : { width: "40px" }}
>
{!showSideMenu ? (
<a className="opennav" onClick={() => handleSideMenu(true)}>
&raquo;
</a>
) : (
<>
<a className="closebtn" onClick={() => handleSideMenu(false)}>
&times;
</a>
<div className="side-menu-container">
<div
className="city-new-map-scorecard"
id="scorecard-side-menu"
>
<MapScorecard
tripTimingCounts={tripTimingCounts}
activeTimings={activeTimings}
sendActiveTimings={handleActiveTimings}
/>
</div>
<div
id="new-country-map-button-side-menu"
className="sc-controls sc-controls-left"
onClick={goToCountryMap}
>
<span className="new-map-suggest">
<span className="sc-control-label">Country map</span>
<span id="map-change-icon" onClick={goToCountryMap}>
<MapChangeIcon />
</span>
</span>
</div>
<div className="sc-controls" id="sc-controls-side-menu">
{timingState !== 2 ? (
<span className="new-map-suggest">
<span className="sc-control-label">Tap cities</span>
<span onClick={showSuggest}>
<SuggestionsIcon />
</span>
</span>
) : null}
<span className="new-map-clear">
<span className="sc-control-label">Clear</span>
<button
onClick={() => handleDeletePrompt(true)}
className="clear-map-button"
></button>
<div
className={
deletePrompt ? "delete-prompt" : "delete-prompt-hide"
}
>
Are you sure you wish to delete all cities?
<span>
<button className="button confirm" onClick={deleteAll}>
Yes
</button>
<button
className="button deny"
onClick={() => handleDeletePrompt(false)}
>
No
</button>
</span>
</div>
</span>
<span className="new-map-share">
<span className="sc-control-label">Share/Save</span>
<span onClick={showPopup}>
<ShareIcon />
</span>
</span>
<span className="new-map-import">
<span className="sc-control-label">Import</span>
<span onClick={showImport}>
<ImportIcon />
</span>
</span>
</div>
</div>
</>
)}
</div>
<div className="map-header-button">
<div
id="new-country-map-button"
Expand Down Expand Up @@ -966,7 +1057,7 @@ function NewUserCity(props) {
sendActiveTimings={handleActiveTimings}
/>
</div>
<span className="georney-score">
<span className="georney-score" id="new-map-georney-score">
<span className="gs-title">{"GeorneyScore"}</span>
<span className="gs-score">{Math.ceil(travelScore)}</span>
</span>
Expand Down
120 changes: 112 additions & 8 deletions src/pages/Home/subcomponents/_NewUserCity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
font-family: "Segoe UI", sans-serif;
font-size: 30px;
color: rgb(248, 248, 252);
@media screen and (max-width: 450px) {
@media screen and (max-width: 520px) {
flex-direction: column;
font-size: 24px;
}
select {
background: none;
Expand All @@ -23,6 +24,10 @@
color: rgb(248, 248, 252);
margin-left: 4px;
border-bottom: 1px solid rgb(248, 248, 252);
@media screen and (max-width: 520px) {
flex-direction: column;
font-size: 24px;
}
option {
background: #dee2e6;
color: rgb(74, 89, 90);
Expand Down Expand Up @@ -254,17 +259,26 @@
min-width: 600px;
box-shadow: 0 3px 6px 2px rgba(black, 0.15);
background: rgb(248, 248, 252);
@media screen and (max-width: 600px) {
@media screen and (max-width: 700px) {
min-width: 500px;
}
@media screen and (max-width: 450px) {
@media screen and (max-width: 600px) {
min-width: 450px;
}
@media screen and (max-width: 550px) {
min-width: 400px;
top: 80px;
}
@media screen and (max-width: 320px) {
max-width: 300px;
@media screen and (max-width: 500px) {
min-width: 350px;
}
@media screen and (max-width: 450px) {
min-width: 300px;
}
@media screen and (max-width: 400px) {
max-width: 280px;
min-width: 280px;
}
input {
color: rgb(74, 89, 90) !important;
min-width: 560px;
Expand Down Expand Up @@ -517,14 +531,19 @@
}
}

.georney-score {
#new-map-georney-score {
position: absolute;
bottom: 60px;
left: calc(50%);
left: calc(50% - 100px);
display: flex;
flex-direction: column;
align-items: center;

@media screen and (max-height: 1200px) {
bottom: 80px;
}
@media screen and (max-height: 600px) {
display: none;
}
.gs-title {
color: #cfd4da;
font-weight: 550;
Expand All @@ -546,3 +565,88 @@
background: #f1f3f5;
}
}

.city-new-side-menu {
height: 100%; /* 100% Full-height */
width: 250px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: rgba(#4F5867, 0.95); /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
z-index: 5000;
a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: rgb(248, 248, 252);
display: block;
transition: 0.3s;
}
.opennav {
position: absolute;
top: 0;
right: 0px;
font-size: 48px;
margin-left: 50px;
cursor: pointer;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
cursor: pointer;
}
.side-menu-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
#scorecard-side-menu {
position: relative;
display: flex;
top: 80px;
left: 25px;
}
#new-country-map-button-side-menu {
display: flex;
position: relative;
top: 140px;
left: 0px;
width: 60px;
height: 42px;
svg {
transform: none;
}
.sc-control-label {
top: 40px;
left: -14px;
color: rgb(228, 228, 232);
}
}
#sc-controls-side-menu {
display: flex;
flex-direction: column;
width: 80px;
height: 300px;
left: 85px;
top: 400px;
}
.delete-prompt {
right: -100px;
min-width: 240px;
span {
margin-top: 10px;
}
}
}
@media screen and (min-width: 900px) {
display: none;
}
}

0 comments on commit 78c3970

Please sign in to comment.