Merge pull request #7 from eballo/develop

Version 6.0
eballo · Nov 22, 2016 · b21c088 · b21c088
2 parents 175380c + 55902de
commit b21c088
Show file tree

Hide file tree

Showing 24 changed files with 255 additions and 109 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
 .DS_Store
+.qicon
+.project
+.settings/
+
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/README.md b/README.md
@@ -4,6 +4,9 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha
 
 <img src="https://github.com/eballo/catalunya-map/blob/master/screenshot/screenshot-v5.0.png" alt="screen-shot" align="center" />
 
+## Current versions
+* Raphaël JS - 2.2.1
+* jQuery - 3.1.1
 
 ## Demo
 
@@ -17,6 +20,7 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha
 - [Demo v5.0](http://demo.catalunyamedieval.es/map50)
 - [Demo v5.1](http://demo.catalunyamedieval.es/map51)
 - [Demo v5.2](http://demo.catalunyamedieval.es/map52)
+- [Demo v6.0](http://demo.catalunyamedieval.es/map60)
 
 ##How to create a Map using a SVG file
 
@@ -101,6 +105,13 @@ v5.1
 v5.2
 - add property onClick and newWindow (requested functionality by Hector)
 
+v6.0
+- add Droid Sans Font
+- change colors
+- update Raphael JS and jQuery versions
+- add bootstrap
+- add all buildings
+
 ##License
 
 - [GNU GENERAL PUBLIC LICENSE](http://demo.catalunyamedieval.es/LICENSE.txt)
diff --git a/css/bootstrap-theme.min.css b/css/bootstrap-theme.min.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/catalunya-map.css b/css/catalunya-map.css
@@ -6,8 +6,8 @@
 }
 
 #map {
-	float:left;
-	clear:both;
+	float:right;
+    margin-left: 300px;
 }
 
 #debugInfo{
@@ -16,12 +16,17 @@
     right: 50px;
 }
 
+.llistaComarques{
+
+}
+
 /** Text */
 
 #text{
-	margin-top: 100px;
+	margin-top: 20px;
 
-	float:right;
+	float:left;
+    clear:both;
 	width:200px;
 	/*overflow: auto;*/
 
@@ -30,21 +35,21 @@
 
     /* Styles */
     background: #fff;
-    border-radius: 7px;
-    border: 1px solid rgba(0,0,0,0.15);
-    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
     cursor: pointer;
     outline: none;
 
     /* Font settings */
+    font-family: 'Droid Sans', sans-serif;
     font-weight: bold;
-    color: #8AA8BD;
+    color: #636567;
 
 }
 
 #comarcaName h1{
-    font-family: 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;
-    font-style:normal;   
+    text-align: left;
+    font-family: 'Droid Sans', sans-serif;
+    font-style: normal;   
+    font-size: 14pt;
     letter-spacing: -1px;
     padding: 0;
 }
@@ -57,8 +62,9 @@
     padding: 0;
 
     /* Font settings */
+    font-family: 'Droid Sans', sans-serif;
     font-weight: bold;
-    color: #8AA8BD;
+    color: #a07a49;
 
 }
 
@@ -68,25 +74,31 @@
 
     /* Styles */
     background: white;
+    font-family: 'Droid Sans', sans-serif;
     font-weight: normal;
     list-style: none;
 
     /* Hiding */
     pointer-events: none;
 }
 
+.llistat-edificis li:nth-child(odd){
+    background: #fff6eb;
+}
+
 .llistat-edificis li a {
     display: block;
     padding: 2px;
     width: 100%;
     text-align: left;
     margin-left: 10px;
     text-decoration: none;
-    color: #8aa8bd;
+    color: #a07a49;
 }
 
 .llistat-edificis li i {
    float: right;
    color: inherit;
    margin-right: 15px;
-}
+}
+
diff --git a/css/main.css b/css/main.css
diff --git a/img/425px-Mapa_comarcal_de_Catalunya.svg.png b/img/425px-Mapa_comarcal_de_Catalunya.svg.png
diff --git a/img/forkme_right_darkblue.png b/img/forkme_right_darkblue.png
diff --git a/index.html b/index.html
@@ -1,66 +1,88 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo V5.1</title>
+	<title>Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo V6.0</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="description" content="SVG/VML Interactive Catalunya Map">
 	<meta name="author" content="Enric Ballo">
 
 	<script type="text/javascript" src="js/raphael-min.js"></script>
 	<script type="text/javascript" src="js/scale.raphael.js"></script>
-	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
-
-	<script type="text/javascript" src="js/catalunya-map-path.js"></script>
-	<script type="text/javascript" src="js/catalunya-map-init.js"></script>
-
+	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
+
+    <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
 	<link rel="stylesheet" href="css/main.css">
 	<link rel="stylesheet" href="css/catalunya-map.css">
 
 </head>
 <body>
 
-	<h1>Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo v4.0</h1>
-	<h4> :: Catalunya Medieval Project - <a href="http://www.catalunyamedieval.es/" target="_blank" title="Catalunya Medieval">www.catalunyamedieval.es</a> ::</h4>
+	<h1 class="page-header">Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo v6.0</h1>
 
 	<a href="https://github.com/eballo/catalunya-map"><img style="position: absolute; top: 0; right: 0; border: 0;" src="img/forkme_right_darkblue.png" alt="Fork me on GitHub"></a>
 
-	<div id="container">
+	<div id="container row">
 
 		<div class="mapWrapper">
-			<div id="map"></div>
-			<div id="text">
-				<div id="comarcaName"><h1>Informaci&oacute;</h1></div>
+            <div id="text" class="col-md-4">
+				<div id="comarcaName"><h1>Catalunya Medieval</h1></div>
 				<div id="contentText">Seleccionar una comarca del mapa i fer clic per veure el seu contingut</div>
 			</div>
+			<div id="map" class="col-md-8"></div>
 		</div>
+
+        <div class="llistaComarques col-md-12">
+            <ul class="list list-group"></ul>
+        </div>
 
+    </div>
 
-		<table class="description" cellspacing="10" cellpadding="10">
-		<tbody>
-			<tr>
-				<td>
-					<strong>CAT</strong> 
-					<p>Mapa interactiu de Catalunya creat a partir d'un SVG/VML i fent ús de la llibreria <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
-				</td>
-				<td>
-					<strong>EN</strong>
-					<p>Interactive vectorial map of Catalonia based on a SVG/VML and the library <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
-				</td>
-				<td>
-					<strong>ES</strong>
-					<p>Mapa interactivo de Cataluña creado a partir de un SVG/VML y usando la libreria <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
-				</td>
-				<td>
-					<strong>NL</strong>
-					<p>Interactieve vectoriële kaart van Catalonië op basis van een SVG/VML en de bibliotheek <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
-				</td>
-			</tr>
-		</tbody>
-		</table>
-
-		<div id="debugInfo"></div>
-
-	</div>
+    <div id="debugInfo"></div>
+
+    <h4 class="page-header"> :: Catalunya Medieval Project - <a href="http://www.catalunyamedieval.es/" target="_blank" title="Catalunya Medieval">www.catalunyamedieval.es</a> ::</h4>
+
+    <div class="row">
+        <div class="col-sm-6 col-md-3">
+            <div class="thumbnail">
+              <div class="caption">
+                <h3>CAT</h3>
+                <p>Mapa interactiu de Catalunya creat a partir d'un SVG/VML i fent ús de la llibreria <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
+              </div>
+            </div>
+        </div>
+        <div class="col-sm-6 col-md-3">
+            <div class="thumbnail">
+              <div class="caption">
+                <h3>EN</h3>
+                <p>Interactive vectorial map of Catalonia based on a SVG/VML and the library <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
+              </div>
+            </div>
+        </div>
+        <div class="col-sm-6 col-md-3">
+            <div class="thumbnail">
+              <div class="caption">
+                <h3>ES</h3>
+                <p>Mapa interactivo de Cataluña creado a partir de un SVG/VML y usando la libreria <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
+              </div>
+            </div>
+        </div>  
+        <div class="col-sm-6 col-md-3">
+            <div class="thumbnail">
+              <div class="caption">
+                <h3>NL</h3>
+                <p>Interactieve vectoriële kaart van Catalonië op basis van een SVG/VML en de bibliotheek <a href="http://raphaeljs.com" target="_blank">RaphaëlJs</a>.</p>
+              </div>
+            </div>
+        </div>    
+    </div>
 
 </body>
+    <footer>
+    	<script type="text/javascript" src="js/catalunya-map-path.js"></script>
+	    <script type="text/javascript" src="js/catalunya-map-init.js"></script>
+    </footer>
 </html>
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js