Skip to content

Commit

Permalink
Styling things
Browse files Browse the repository at this point in the history
  • Loading branch information
admin authored and admin committed Apr 24, 2018
1 parent 9ac38d0 commit 41311d0
Show file tree
Hide file tree
Showing 14 changed files with 927 additions and 17 deletions.
55 changes: 55 additions & 0 deletions buttons.js
View file
@@ -0,0 +1,55 @@
styleBtn.addEventListener("click", function(){
console.log(document.getElementById("style-img").src == "./images/pngs/listBtn.png");
if(document.getElementById("style-type").innerHTML == "List View") {
document.getElementById('view-type').classList.remove("d-lg-none");
document.getElementById('view-type').classList.remove("d-md-none");
document.getElementById('view-type').classList.remove("d-sm-none");
document.getElementById('view-type').classList.add("col-lg-6");
document.getElementById('view-type').classList.add("col-md-6");
document.getElementById('view-type').classList.add("col-sm-6");
document.getElementById('mapfit').classList.remove("col-lg-12");
document.getElementById('mapfit').classList.remove("col-md-12");
document.getElementById('mapfit').classList.remove("col-sm-12");
document.getElementById('mapfit').classList.add("col-lg-6")
document.getElementById('mapfit').classList.add("col-sm-6")
document.getElementById('mapfit').classList.add("col-md-6")
document.getElementById("style-type").innerHTML = "Map View"
map.setCenter([40.714997, -73.985367], 0)
map.setLatLngBounds(currentBounds,80,80);
}else{
document.getElementById('view-type').classList.add("d-lg-none");
document.getElementById('view-type').classList.add("d-md-none");
document.getElementById('view-type').classList.add("d-sm-none");
document.getElementById('view-type').classList.remove("col-lg-6");
document.getElementById('view-type').classList.remove("col-md-6");
document.getElementById('view-type').classList.remove("col-sm-6");
document.getElementById('mapfit').classList.add("col-lg-12");
document.getElementById('mapfit').classList.add("col-md-12");
document.getElementById('mapfit').classList.add("col-sm-12");
document.getElementById('mapfit').classList.remove("col-lg-6")
document.getElementById('mapfit').classList.remove("col-sm-6")
document.getElementById('mapfit').classList.remove("col-md-6")
document.getElementById("style-type").innerHTML = "List View"
listOpen = false;
};

if(document.getElementById("style-img").src.includes("pngs/listBtn.png")){
document.getElementById("style-img").src = "./images/pngs/mapviewBtn.png"
}else{
document.getElementById("style-img").src = "./images/pngs/listBtn.png"
};

})

gitLogo.addEventListener("mouseover", function(){
this.src = "./images/pngs/git-logo-hover.png"
})
gitLogo.addEventListener("mouseout", function(){
this.src = "./images/pngs/git-logo.png"
})

appHeader.addEventListener("click",function(){
detailPage.style.display = "none"
app.style.display = "flex"
listingLocation.innerHTML = ""
})
Binary file added fonts/HarmoniaSansStd-Regular.otf
View file
Binary file not shown.
Binary file added images/pngs/apt.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pngs/black.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pngs/blue.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pngs/git-logo-hover.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pngs/listBtn.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pngs/mapviewBtn.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 20 additions & 4 deletions index.html
View file
Expand Up @@ -9,20 +9,36 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="container-fluid h-100 d-flex flex-column" >
<img src="./images/pngs/git-logo.png" width="28px" height="28px" id="git-link" title="Find this project on GitHub">
<a href="https://github.com/mapfit/Aptfit" ><img src="./images/pngs/git-logo.png" width="28px" height="28px" id="git-link" title="Find this project on GitHub"></a>
<div id="top-bar"class = "row" >
<div class = "col-sm-12 col-lg-12 col-md-12"><h1 id="app-header">Aptfit</h1><span>Sample Apartment Finder</span></div>
</div>
<div id="second-bar" class = "row" >
<div class = "col-sm-12 col-lg-12 col-md-12"><h2> New York City </h2><span> Select a neighborhood </span></div>
<div class = "col-sm-12 col-lg-12 col-md-12"><h2> New York City </h2><span id="district"> Select a neighborhood </span><span id="listing-location"></span><div id="style-btn"><span id="style-type">List View</span><img id="style-img" src="./images/pngs/listBtn.png" align="right" ></div></div>
</div>
<div class="row h-100">
<div id="app" class="row h-100">
<div id = "view-type" class = "d-lg-none d-sm-none d-md-none"><ul id="listings"></ul></div>
<div class= "col-sm-12 col-lg-12 col-md-12" id="mapfit"></div>
</div>
<div id="detail" class="row h-100">
<h2 id="detail-location"></h2>
<p>Available: June 14th, 2018</p>
<span id="detail-price"></span>
<span id="room-specs">1 BD | 1BA | 700SF</span>
<img id="detail-image" src="./images/pngs/apt.jpg" width="400px"/>
<h2>Neighborhood</h2>
<span id="detail-neighborhood"></span>
<div id="detail-map" ></div>
<footer>
<p>Start building with this template</p>
<p>Made with love by the Mapfit team</p>
</footer>
</div>
<script src="https://cdn.mapfit.com/v2-3/assets/js/tetragon.js"></script>
<script src="http://cdn.mapfit.com/v2-3/assets/js/mapfit.js"></script>
<script src="./real-estate-demo.json"></script>
<script src="./wof_nyc.json"></script>
<script src="./vars.js"></script>
<script src="./buttons.js"></script>
<script src="./real-estate-demo.js"></script>
</body>
</html>
101 changes: 101 additions & 0 deletions mapfit-grayscale.yaml
View file
@@ -0,0 +1,101 @@
# Mapfit Grayscale Theme
# Last updated Mar 19, 2018

import:
- https://cdn.mapfit.com/v2-3/themes/mapfit-base-theme.yaml

global:

####### ALL COLOR VARIABLES #######

# TEXT
text_fill: rgb(126, 126, 126)
text_outline: rgba(255, 255, 255,.75)
text_fill_neighborhoods: rgba(143, 156, 179, 1)
text_fill_water: rgb(126, 126, 126)
text_outline_water: rgba(255, 255, 255,.75)
text_fill_parks: rgb(126, 126, 126)
text_outline_parks: rgba(255, 255, 255,.75)
text_beach_fill: rgb(126, 126, 126)
text_beach_outline: rgba(255, 255, 255,.75)
text_highway_fill: rgb(126, 126, 126)
text_highway_outline: rgba(255, 255, 255,.75)
text_highway_exits: rgb(126, 126, 126)
text_signs_fill: rgba(255, 255, 255, 1)

# ROADS
highway_fill: rgb(255, 255, 255)
highway_outline: rgb(255, 255, 255)
road_fill: rgb(255, 255, 255)
road_outline: rgb(255, 255, 255)
tunnel_fill: rgba(223, 223, 223,1)
tunnel_outline: rgba(223, 223, 223,1)
road_directional_arrows_fill: rgb(240, 240, 240)
pedestrian_path_fill: rgba(255, 255, 255,1)
pedestrian_path_outline: rgba(255, 255, 255,1)
pedestrian_steps_fill: rgba(242, 242, 242,1)
roads_in_park_fill: rgb(200, 200, 200)
roads_in_cemetary_fill: rgba(255, 255, 255,1)

# WATER
ocean_fill: rgb(241, 241, 241)
water_fill: rgb(241, 241, 241)

# LAND
map_background_fill: rgba(255, 255, 255,1)
land_fill: rgb(221, 221, 221)
parks_fill: rgba(182, 182, 182, 1.00)
cemetary_fill: rgba(209, 209, 209, 1.00)
protected_area_fill: rgba(182, 182, 182, 1.00)
special_parks_fill: rgba(182, 182, 182, 1.00)
stadium_fill: rgba(182, 182, 182, 1.00)
playground_fill: rgba(182, 182, 182, 1.00)
beach_fill: rgba(182, 182, 182, 1.00)
military_fill: rgba(200, 200, 200, 1.00)

# BUILDINGS
building_fill: rgb(239, 239, 239)
building_outline: rgb(206, 206, 206)

# AIRPORTS
airport_road_fill: rgba(125, 125, 125, 1.00)
airport_land_fill: rgba(180, 179, 180, 1.00)

# EDUCATION
university_fill: rgba(182, 182, 182, 1.00)
school_fill: rgb(221, 221, 221)

# HOSPITALS
hospital_fill: rgba(164, 164, 164, 1.00)

# FEATURES
ferry_fill: rgba(125, 125, 125, 1.00)
railways_fill: rgba(223, 223, 223,1)
special_pedestrian_area_fill: rgba(210, 210, 210,1)
parking_fill: rgba(200, 200, 200,1)
urbanization_fill: rgba(200, 200, 200,1)
winter_sports_area_fill: rgba(236, 235, 232,1)
tourism_area_fill: rgba(210, 210, 210,1)

# BOUNDARIES
region_boundary_fill: rgba(153, 153, 153,1)
city_wall_fill: rgba(200, 200, 200,1)


####### ALL SHOW/HIDE VARIABLES #######

show_transit: true # public transit visibility
show_3d_buildings: false # 3D building visibility
show_special_areas: true # show commercial, retail, pedestrian areas
show_parking_areas: true # show parking areas


# CAMERA OPTIONS (IF 3D BUILDINGS ARE ON)

cameras:
master:
type: perspective # choose between perspective, isometric, or flat

textures:
pois:
url: https://cdn.mapfit.com/v2-3/themes/images/refill-gray@2x.png

0 comments on commit 41311d0

Please sign in to comment.