Merge pull request #2 from urbanlaunchpad/gh-pages

merging changes
urbanlaunchpad · Feb 1, 2015 · beb3b9f · beb3b9f
2 parents 85ded1c + fcc1cbf
commit beb3b9f
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -330,6 +330,7 @@
         this.scFilters = document.createElement("select");
         this.scFilters.id = "subcategory_filter";
         this.scFilters.multiple = true;
+        this.scFilters.style.width='320px';
         this.scOptions =[];
         for (var key in subcategories){
           var option = document.createElement("option");
@@ -668,6 +669,9 @@ <h4 id="kelurahan_name"></h4>
       <div id="main">
         <div id="map-canvas"></div>
         <div id="year_selector">
+          <div class="year-header">
+            <p>Tahun penyaring</p>
+          </div>
         </div>
       </div>  
       <div id="list" class="pure-u"> 

diff --git a/src/css/structure.css b/src/css/structure.css
@@ -11,7 +11,7 @@
     background-color: #e9e9e9;
 }
 
-#list-header {
+#list-header, #year-selector {
     background-color: #dbdbdb;
     z-index: 2;
 }
@@ -29,6 +29,7 @@
 #nav,
 #list,
 #list-header,
+#year-selector,
 #main {
     margin: 0;
     padding: 0;
@@ -53,6 +54,22 @@
     border-top: 1px solid #bdbdbd;
 }
 
+#year-selector {
+    height: auto;
+    position: relative;
+    float: right;
+    margin: 1em;
+    border: 1px solid #bdbdbd;
+}
+
+#year-selector .year-header {
+    height: 100%;
+    display: block;
+    position: relative;
+    float: left;
+    padding: 8px 16px;
+}
+
 /* Make the navigation 100% width on phones */
 
 #nav {

diff --git a/src/css/style.css b/src/css/style.css
@@ -265,7 +265,7 @@ p {
 }
 
 #list ul li article p{
-    padding: 20px;
+    padding: 0px 20px;
 }
 
 #list ul li input:checked ~ article{
@@ -281,4 +281,93 @@ p {
 }
 .icon-block {
     background: rgba(0,0,0,0.1);
+}
+
+/*============YEAR SELECTOR============*/
+
+#year_selector .year-header p {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.675em;
+    font-weight: 600;
+    color: #222;
+    padding: 0;
+    margin: 1px auto 0;
+}
+
+/*#year-selector label.year-button {
+    width: auto;
+    height: 100%;
+    position: relative;
+    font-size: 0.875em;
+    background-color: #e9e9e9;
+    text-decoration: none;
+    color: #111;
+    float: left;
+    padding: 8px 16px;
+    border-left: 1px solid rgba(255,255,255,0.25);
+}
+
+#year-selector label.year-button:hover {
+    background-color: #444;
+    color: #fff;
+}
+
+#year-selector label.year-button:active {
+    background-color: #111;
+}*/
+
+.ui-helper-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+.ui-widget {
+    font-family: "Raleway",Verdana,Arial,sans-serif;
+    font-size: 1em;
+}
+.ui-button-text-only .ui-button-text {
+    padding: .25em 0.75em;
+}
+
+/* Interaction states (for the year selector)
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+    border-left: 1px solid #3D3D3D;
+    border-top: 0px;
+    border-bottom: 0px;
+    background: #222222;
+    font-weight: normal;
+    color: #ffffff;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+    background: #000;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+    background: #A6A939;
+}
+.ui-state-active:hover {
+    background: #747628; 
+}
+.ui-corner-left {
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 0px;
+}
+.ui-corner-right {
+    border-bottom-right-radius: 0px;
+    border-top-right-radius: 0px;
 }
diff --git a/structure.html b/structure.html
@@ -57,6 +57,20 @@ <h6 style="margin-top:0; padding-top:0.5em">Solo City Map</h6>
 		<h4 id="kelurahan_name"></h4>
 	</div>
 
+	<div id="year-selector">
+		<div class="year-header">
+			<p>Filter Year</p>
+		</div>
+		<input type="checkbox" id="check1" class="ui-helper-hidden-accessible"><label for="check1" class="year-button">2010</label>
+		<input type="checkbox" id="check2" class="ui-helper-hidden-accessible"><label for="check2" class="year-button">2011</label>
+		<input type="checkbox" id="check3" class="ui-helper-hidden-accessible"><label for="check3" class="year-button">2012</label>
+		<input type="checkbox" id="check3" class="ui-helper-hidden-accessible"><label for="check3" class="year-button">2013</label>
+		<!-- <a href="#2010" class="year-button">2010</a>
+		<a href="#2011" class="year-button">2011</a>
+		<a href="#2012" class="year-button">2012</a>
+		<a href="#2013" class="year-button">2013</a> -->
+	</div>
+
 	<div id="main">
 		<div id="map-canvas"></div>
 	</div>