Adding credits

languages/en.lang

@@ -102,3 +102,7 @@ elevation			= Elevation
 segment_length		= Segment length
 type				= Track Type
 legend				= Legend
+
+credits_project		= Spotty Project
+credits_git			= Git Repository
+credits_license		= under GPLv3 license

languages/fr.lang

@@ -102,3 +102,7 @@ elevation			= Dénivelé
 segment_length		= Taille du segment
 type				= Type de rando
 legend				= Légende
+
+credits_project		= Projet Spotty
+credits_git			= Dépôt Git
+credits_license		= sous licence GPLv3

masks/project.html

@@ -4,8 +4,10 @@
 	</div>
 	<div id="map"></div>
 	<div id="settings">
-		<div id="settings-sections">
+		<div id="settings-panel">
-			<div class="settings-section title"><div class="logo"><img src="images/logo_black.png" /></div></div>
+			<div class="settings-header"><div class="logo"><img src="images/logo_black.png" /></div></div>
+			<div class="settings-sections">
+				<div id="settings-sections-scrollbox">
 					<div class="settings-section">
 						<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
 						<div id="layers"></div>
@@ -22,6 +24,9 @@
 					</div>
 				</div>
 			</div>
+			<div class="settings-footer"><a href="https://git.lutran.fr/franzz/spot" title="[#]lang:credits_git[#]" target="_blank"><i class="fa fa-credits push"></i>[#]lang:credits_project[#]</a> [#]lang:credits_license[#]</div>
+		</div>
+	</div>
 	<div id="feed">
 		<div id="posts">
 			<div id="poster"></div>
@@ -255,7 +260,7 @@ function initPosts() {
 
 function initSettings(){
 	//Scrollbar
-	new SimpleBar($('#settings-sections')[0]);
+	new SimpleBar($('#settings-sections-scrollbox')[0]);
 	
 	//Feedback display function
 	var settingsFeedback = function(sType, sMsg){

style/_fa.scss

@@ -59,6 +59,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); }
 .#{$fa-css-prefix}-success:before { content: fa-content($fa-var-check-circle); }
 .#{$fa-css-prefix}-unsubscribe:before { content: fa-content($fa-var-times); }
+.#{$fa-css-prefix}-credits:before { content: fa-content($fa-var-paw); }
 
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }

style/_mask_project.scss

@@ -70,7 +70,7 @@ $legend-color: $post-color;
 		}
 	}
 	&:not(.with-settings) {
-		#settings #settings-sections {
+		#settings #settings-panel {
 			left: -100%;
 		}
 	}
@@ -448,13 +448,11 @@ $legend-color: $post-color;
 		width: calc(#{$panel-width} + 3px); //Add box-shadow
 		max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
 		
-		#settings-sections {
+		#settings-panel {
-			width: calc(100% - 3rem - 3px); //Remove box-shadow
+			width: calc(100% - #{$block-spacing} - 3px); //Remove box-shadow
 			margin: $block-spacing;
-			padding: $block-spacing;
-			background: white;
 			border-radius: 3px;
-			box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5);
+			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
 			position: absolute;
 			transition: all 0.5s;
 			top: 0;
@@ -462,11 +460,58 @@ $legend-color: $post-color;
 			left: 0;
 			color: $post-color;
 			background: rgba(255, 255, 255, 0.8);
+			display: flex;
+			flex-direction: column;
+			
+			.settings-header {
+				text-align: center;
+				flex: 0 1 auto;
+				
+				.logo {
+					background: rgba(255, 255, 255, .4);
+					padding: 1.5rem;
+					border-radius: 3px 3px 0 0;
+					
+					img {
+						width: 100%;
+						max-width: 180px;
+						transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
+					}
+				}
+			}
+				
+			.settings-footer {
+				flex: 0 1 auto;
+				background: rgba(255, 255, 255, .4);
+				border-radius: 0 0 3px 3px;
+				font-size: 0.7em;
+				padding: 0.3rem;
+				text-align: center;
+				color: #888;
+				
+				a {
+					color: #777;
+					text-decoration: none;
+				}
+			}
+			
+			.settings-sections {
+				flex: 1 1 auto;
+				overflow: hidden;
+				
+				#settings-sections-scrollbox {
+					height: 100%;
+					width: 100%;
+				}
 				
 				.settings-section {
 					display: inline-block;
-				width: 100%;
+					margin: 1.5rem 1rem 0 1rem;
-				margin-top: 1.5rem;
+					width: calc(100% - 2 * #{$block-spacing});
+					
+					&:last-child {
+						margin-bottom: 1.5rem;
+					}
 					
 					h1 {
 						margin: 0 0 $block-spacing;
@@ -478,24 +523,6 @@ $legend-color: $post-color;
 						cursor: pointer;
 					}
 					
-				&.title {
-					margin: -#{$block-spacing} -#{$block-spacing} 0 -#{$block-spacing};
-					width: calc(100% + 2rem);
-					text-align: center;
-					
-					.logo {
-						background: rgba(255, 255, 255, .4);
-						padding: 1.5rem;
-						border-radius: 3px 3px 0 0;
-						
-						img {
-							width: calc(100% - 3rem);
-							max-width: 180px;
-							transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
-						}
-					}
-				}
-				
 					&.newsletter {
 						input#email {
 							width: calc(100% - 6em);
@@ -537,6 +564,7 @@ $legend-color: $post-color;
 				}
 			}
 		}
+	}
 
 	/* Info Window */