fixed css design features + working on list view

public_html/page/home.php

@@ -13,9 +13,10 @@
 	<link rel='shortcut icon' href='/favicon.ico'>
 
 	<!-- CSS dependencies -->
-	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
 	<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
 	<link rel='stylesheet' type='text/css' href='/css/global.css'>
+	<link rel='stylesheet' type='text/css' href='/css/pop-up.css'>
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>

public_html/page/login.php

@@ -13,9 +13,10 @@
 	<link rel='shortcut icon' href='/favicon.ico'>
 
 	<!-- CSS dependencies -->
-	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
 	<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
 	<link rel='stylesheet' type='text/css' href='/css/global.css'>
+	<link rel='stylesheet' type='text/css' href='/css/pop-up.css'>
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container-login.css'>
 

webpack/component/home/page1.vue

@@ -1,6 +1,22 @@
 <template>
 
-	<div id='CONTAINER' class='page1'>
+	<div id='CONTAINER' class='list'>
+
+		<section>bla</section>
+		<section>bla</section>
+		<hr>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<h1>Some Title</h1>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<h1>Some Title</h1>
+		<section>bla</section>
+		<section>bla</section>
 
 	</div>
 

webpack/page/home.js

@@ -36,4 +36,4 @@ new Vue({
 
 
 // popup test
-// popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); });
+// popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'neutral' }, function(e){ console.log("Resultat Popup: "+!!e); });

webpack/scss/constants.scss

@@ -1,15 +1,18 @@
 // BACKGROUND COLOR
-$bg-color: #eee;
+$bg-color: darken(#f9f9f9, 2%);
+$bg-color: #f4f8f9;
+$primary-color: #545f75;
+$secondary-color: #b8c0c8;
 
 /* COULEUR DES ERREURS */
 $error-color: #cc5857;
 
 /* FORMULAIRES */
-$form-valid-color:   #27a560;
+$form-valid-color:   #20d696;
-$form-neutral-color: #2193e6;
+$form-neutral-color: #b8c0c8;
-$form-search-color:  #5630ed;
+$form-search-color:  #e5c41d;
-$form-invalid-color: #d52918;
+$form-invalid-color: #ea4b35;
-$form-grey-color: #8d8d8d;
+$form-grey-color: lighten($secondary-color, 5%);
 
 
 /* GESTION DES LONGUEURS */
@@ -22,9 +25,14 @@ $rd-form-search-color:  '5630ed';
 $rd-form-invalid-color: 'd52918';
 
 // Menu
-$menu-bg: #303030;
+$menu-bg: #fff;
-$menu-width: 3em;
+$menu-item-inactive: 'b9c4ce';
-$menu-outer-width: #{$menu-width + 1em};
+$menu-item-width: 3em;
+$menu-width: #{$menu-item-width + 1em};
+
+// Header
+$header-bg: #fff;
+$header-height: 3em;
 
 
 $c404-bubble-width: 40vh;

webpack/scss/container.scss

@@ -5,11 +5,72 @@
 
 	display: block;
 	position: absolute;
-		top: 0;
+		top: $header-height;
-		left: $menu-outer-width;
+		left: $menu-width;
-		height: 100%;
+		min-height: calc( 100% - #{$header-height} );
-		width: calc( 100% - #{$menu-outer-width} );
+		width: calc( 100% - #{$menu-width} );
+		height: auto;
+
 
 	background-color: $bg-color;
 
+	overflow: hidden;
+	overflow-y: auto;
+
+	z-index: 100;
+
+}
+
+
+
+/* [1] List style
+---------------------------------*/
+#CONTAINER.list{
+	display: flex;
+
+	// flex properties
+	flex-direction: column;
+	justify-content: flex-start;
+
+
+	& > *:first-child{ margin-top: 1em; }
+	& > *:last-child{ margin-bottom: 3em; }
+
+	/* (1) List element */
+	& > section{
+
+		display: block;
+
+		margin: .3em 1em;
+		padding: .8em 1em;
+
+		border-radius: 5px / 5px;
+
+		background-color: #fff;
+
+	}
+
+	/* (2) List title */
+	& > h1{
+		display: inline-block;
+
+		margin: 0 1.2em;
+		margin-top: .8em;
+
+		font-size: inherit;
+		color: darken($secondary-color, 5%);
+
+	}
+
+	/* (3) List separator */
+	& > hr{
+		display: block;
+		position: relative;
+
+		margin: 1em 1.5em;
+
+		border: 0;
+		border-bottom: 2px solid darken($bg-color, 5%);
+	}
+
 }

webpack/scss/global.scss

@@ -1,92 +1,34 @@
 @import 'constants';
 
-/* [3] Formulaires
+/* (1) Champs de texte */
-=========================================================*/
+input[type=text],     .neutral > input[type=text],
-section > form, .form{
+input[type=mail],     .neutral > input[type=mail],
+input[type=password], .neutral > input[type=password],
+select,               .neutral > select,
+input[type=text].neutral,
+input[type=mail].neutral,
+input[type=password].neutral,
+select.neutral{
+
 	display: inline-block;
-	position: relative;
+	margin: 1em;
-		left: 50%;
+	padding: .5em 1em;
-		margin: .3em 0;
-		padding: 1em;
 
 	border-radius: 3px;
-	border-color: $form-invalid-color;
+	border: 1px dashed $form-neutral-color;
-	box-shadow: 0 0 1px #b7b7b7;
 
 	background-color: #fff;
 
-	-webkit-transform: translateX(-50%);
+	color: $form-neutral-color;
-	transform: translateX(-50%);
 
-	&#choose-cluster{
+	transition: border .2s ease-in-out,
-		left: 0;
+				color .2s ease-in-out;
-		-webkit-transform: none;
+
-		transform: none;
+	&:focus, &:hover{
+		border-color: darken($form-neutral-color, 10%);
+		color: $primary-color;
 	}
 
-	&.valid{
-		border-color: $form-valid-color;
-	}
-
-	&.neutral{
-		border-color: $form-neutral-color;
-	}
-
-	&.search{
-		border-color: $form-neutral-color;
-	}
-
-	// Textes centres
-	.edit_search_view,
-	.remove_search_view{
-		display: inline-block;
-			width: 100%;
-
-		text-align: center;
-		color: #aaaaaa;
-
-		span{
-			color: #888888;
-		}
-	}
-
-	span.error-msg{
-		display: inline-block;
-		color: #F03C3C;
-		font-size: 0.7em;
-	}
-
-}
-
-
-/* (1) Champs de texte */
-input[type=text],
-input[type=mail],
-input[type=password],
-select,
-.invalid > input[type=text],
-.invalid > input[type=mail],
-.invalid > input[type=password],
-.invalid > select,
-input.invalid[type=text],
-input.invalid[type=mail],
-input.invalid[type=password],
-select.invalid{
-	display: inline-block;
-	margin: 1em 0;
-	padding: .7em 1em;
-
-	border-radius: 3px;
-	border: 1px solid #d7dde8;
-
-	color: #2f3033;
-
-	transition: border .4s ease-in-out;
-
-	&:focus,
-	&:hover{
-		border-color: $form-invalid-color;
-	}
 }
 
 
@@ -110,25 +52,33 @@ input.valid[type=text],
 input.valid[type=mail],
 input.valid[type=password],
 select.valid{
-	&:focus,
+
-	&:hover{
+	border-color: darken($form-valid-color, 0%);
-		border-color: $form-valid-color;
+
+
+	&:focus, &:hover{
+		border-color: darken($form-valid-color, 10%);
 	}
+
 }
 
 // Champs neutres
-.neutral > input[type=text],
+.invalid > input[type=text],
-.neutral > input[type=mail],
+.invalid > input[type=mail],
-.neutral > input[type=password],
+.invalid > input[type=password],
-.neutral > select,
+.invalid > select,
-input.neutral[type=text],
+input.invalid[type=text],
-input.neutral[type=mail],
+input.invalid[type=mail],
-input.neutral[type=password],
+input.invalid[type=password],
-select.neutral{
+select.invalid{
-	&:focus,
+
-	&:hover{
+	border-color: darken($form-invalid-color, 0%);
-		border-color: $form-neutral-color;
+
+
+	&:focus, &:hover{
+		border-color: darken($form-invalid-color, 10%);
 	}
+
 }
 
 // Champs neutres
@@ -139,104 +89,88 @@ select.neutral{
 input.search[type=text],
 input.search[type=mail],
 input.search[type=password]{
-	&:focus,
+
-	&:hover{
+	border-color: darken($form-search-color, 0%);
-		border-color: $form-search-color;
+
+
+	&:focus, &:hover{
+		border-color: darken($form-search-color, 10%);
 	}
+
 }
 
 
 
 /* (2) Boutons */
-button,
+button,             .neutral > button,
-button.invalid,
+input[type=button], .neutral > input[type=button],
-.invalid > button{
+input[type=submit], .neutral > input[type=submit],
+button.neutral,
+input[type=button].neutral,
+input[type=submit].neutral{
+
 	display: inline-block;
 	position: relative;
-		left: 50%;
 
-	padding: .7em 1em;
+	padding: .5em 1em;
 
 	border-radius: 3px;
-	border: 1px solid $form-invalid-color;
+	border: 1px dashed $form-neutral-color;
 
-	background: $form-invalid-color center center no-repeat;
+	background: $bg-color center center no-repeat;
+	text-transform: uppercase;
 
-	color: #fff;
+	color: $form-neutral-color;
 
 	cursor: pointer;
 
-	transition: background .4s ease-in-out;
+	transition: color .2s ease-in-out,
+				border-color .2s ease-in-out,
+				background .2s ease-in-out;
 
-	-webkit-transform: translateX(-50%);
+	&:hover, &:focus{
-	transform: translateX(-50%);
+		color: darken($form-neutral-color, 10%);
-
+		border-color: $primary-color;
-	&:hover,
-	&:focus,
-	&:disabled{
 		background-color: #fff;
-		color: $form-invalid-color;
 	}
 }
 
 // Boutons grisés
-button.grey,
+button:disabled,
-.grey > button{
+button.grey,             .grey > button,
+input[type=button].grey, .grey > input[type=button],
+input[type=submit].grey, .grey > input[type=submit]{
+
 	border-color: $form-grey-color;
 
-	background-color: $form-grey-color;
+	cursor: default;
-
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-grey-color;
-	}
 }
 
 // Boutons valides
-button.valid,
+button.valid,             .valid > button,
-.valid > button{
+input[type=button].valid, .valid > input[type=button],
+input[type=submit].valid, .valid > input[type=submit]{
+
 	border-color: $form-valid-color;
 
-	background-color: $form-valid-color;
-
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-valid-color;
-	}
 }
 
-// Boutons neutres
+// Boutons invalides
-button.neutral,
+button.invalid,             .invalid > button,
-.neutral > button{
+input[type=button].invalid, .invalid > input[type=button],
-	border-color: $form-neutral-color;
+input[type=submit].invalid, .invalid > input[type=submit]{
 
-	background-color: $form-neutral-color;
+	border-color: $form-invalid-color;
 
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-neutral-color;
-	}
 }
 
 // Boutons recherche
-button.search,
+button.search,             .search > button,
-.search > button{
+input[type=button].search, .search > input[type=button],
+input[type=submit].search, .search > input[type=submit]{
+
 	border-color: $form-search-color;
 
-	background-color: $form-search-color;
-
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-search-color;
-	}
 }
 
 

webpack/scss/header.scss

@@ -0,0 +1,21 @@
+@import 'constants';
+
+#HEADER{
+
+	display: flex;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: calc( #{$header-height} - 1px );
+
+	background-color: $header-bg;
+	border-bottom: 1px solid #e3e7eb;
+
+	// flex properties
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+
+	z-index: 150;
+}

webpack/scss/layout.scss

@@ -13,12 +13,8 @@ body{
 		width: 100%;
 		height: 100%;
 
-	background: $bg-color;
-
 	font-size: 16px;
-	font-family: 'Open Sans';
+	font-family: 'Fira Sans';
-
-	color: #333;
 }
 
 
@@ -32,11 +28,7 @@ body{
 		height: 100%;
 
 	background: $bg-color;
-
+	color: $primary-color;
-
-	&.login{
-		background: #ddd;
-	}
 }
 
 
@@ -80,109 +72,3 @@ body{
 		}
 	}
 }
-
-
-
-/* [4] Popup background - window
-==========================================*/
-#POPUP{
-	display: none;
-	position: fixed;
-		top: 50%;
-		left: 50%;
-		min-width: 50%;
-		max-width: 50%;
-		min-height: 30%;
-		max-height: 50%;
-
-	// flex properties
-	flex-direction: column;
-	justify-content: space-between;
-
-	border-radius: 5px;
-
-	background: #fff;
-	color: #34495e;
-
-	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
-
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
-
-	z-index: 1000;
-
-	&.active{
-		display: flex;
-	}
-
-
-	& > .header{
-		display: block;
-		position: relative;
-			width: calc( 100% - 2*1em );
-
-		padding: 1em;
-
-		border-radius: 5px 5px 0 0;
-		border-bottom: 2px solid #ecf0f1;
-
-		font-size: 1.1em;
-		font-weight: bold;
-	}
-
-	& > .body{
-		display: block;
-		position: relative;
-			width: calc( 100% - 2*1em );
-
-		padding: 1em;
-
-		b, strong{
-			color: #5630ed;
-		}
-	}
-
-	& > .footer{
-		display: flex;
-		position: relative;
-			width: calc( 100% - 2*1em );
-
-		padding: 1em;
-
-		background-color: #ecf0f1;
-
-		border-radius: 0 0 5px 5px;
-
-		// flex props.
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-
-		& button{
-			left: auto;
-			margin: 0 1em;
-			-webkit-transform: none;
-			transform: none;
-		}
-
-	}
-}
-
-
-#POPUP-BG{
-	display: none;
-	position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-
-	background: #29333f;
-	background: rgba(41, 51, 63, .8);
-
-	z-index: 999;
-}
-
-#POPUP.active ~ #POPUP-BG{
-	display: block;
-}

webpack/scss/menu.scss

@@ -14,65 +14,59 @@
 	---------------------------------------------------------*/
 	display: flex;
 	position: absolute;
-		top: 0;
+		top: $header-height;
 		left: 0;
-		width: $menu-outer-width;
+		width: calc( #{$menu-width} - 1px );
-		height: 100%;
+		height: calc( 100% - #{$header-height} );
 
 	background-color: $menu-bg;
+	border-right: 1px solid #e3e7eb;
 
 	// flex properties
 	flex-direction: column;
 	justify-content: space-around;
 	align-items: center;
 
+	z-index: 200;
+
 	/* (2) Items
 	---------------------------------------------------------*/
 	.item{
 		display: block;
 		position: relative;
-			width: $menu-width;
+			width: $menu-item-width;
-			height: $menu-width;
+			height: $menu-item-width;
 
 		margin-top: .5em;
 
-		border-radius: 3px / 3px;
-
-		box-shadow: inset 0 0 0 transparent;
-
 		background: $menu-bg center center no-repeat;
 		background-size: auto 50%;
 
-		border: 1px solid lighten($menu-bg, 5%);
 
-		transition: all .2s ease-in-out;
+		transition: all .1s ease-in-out;
 
 		cursor: pointer;
 
 		z-index: 1;
 
 		/* (1) Set icons */
-		&[data-icon='home']{     background-image: url('/asset/svg/home.svg@7992a3');     }
+		&[data-icon='home']{     background-image: url('/asset/svg/home.svg@#{$menu-item-inactive}');     }
-		&[data-icon='teacher']{  background-image: url('/asset/svg/teacher.svg@7992a3');  }
+		&[data-icon='teacher']{  background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');  }
-		&[data-icon='ue']{       background-image: url('/asset/svg/ue.svg@7992a3');       }
+		&[data-icon='ue']{       background-image: url('/asset/svg/ue.svg@#{$menu-item-inactive}');       }
-		&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@7992a3'); }
+		&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@#{$menu-item-inactive}'); }
-		&[data-icon='fiche']{    background-image: url('/asset/svg/fiche.svg@7992a3');    }
+		&[data-icon='fiche']{    background-image: url('/asset/svg/fiche.svg@#{$menu-item-inactive}');    }
-		&[data-icon='login']{    background-image: url('/asset/svg/login.svg@7992a3');    }
+		&[data-icon='login']{    background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}');    }
-		&[data-icon='logout']{   background-image: url('/asset/svg/logout.svg@7992a3');   }
+		&[data-icon='logout']{   background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}');   }
 
 		/* (2) On hover */
 		&:hover, &.active{
-			border: 1px solid lighten($menu-bg, 20%);
+			background-size: auto 55%;
-			// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
-			box-shadow: 0 0 8px darken($menu-bg, 7%);
 		}
 
-		color: #4a71dd;
-
 		&[data-icon='home']:hover,     &[data-icon='home'].active{     background-image: url('/asset/svg/home.svg@10d197');     }
 		&[data-icon='teacher']:hover,  &[data-icon='teacher'].active{  background-image: url('/asset/svg/teacher.svg@edb910');  }
 		&[data-icon='ue']:hover,       &[data-icon='ue'].active{       background-image: url('/asset/svg/ue.svg@1fc9ef');       }
-		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@b7b7b7'); }
+		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@545f75'); }
 		&[data-icon='fiche']:hover,    &[data-icon='fiche'].active{    background-image: url('/asset/svg/fiche.svg@ea4C3a');    }
 		&[data-icon='login']:hover,    &[data-icon='login'].active{    background-image: url('/asset/svg/login.svg@dab245');    }
 		&[data-icon='logout']:hover,   &[data-icon='logout'].active{   background-image: url('/asset/svg/logout.svg@dab245');   }
@@ -91,8 +85,9 @@
 			padding: .3em .7em;
 
 			background-color: $menu-bg;
+			border: 1px solid darken($menu-bg, 5%);
 
-			color: #fff;
+			color: invert(#fff);
 
 			border-radius: 3px / 3px;
 

webpack/scss/pop-up.scss

@@ -0,0 +1,107 @@
+@import 'constants';
+
+/* [4] Popup background - window
+==========================================*/
+#POPUP{
+	display: none;
+	position: fixed;
+		top: 50%;
+		left: 50%;
+		min-width: 50%;
+		max-width: 50%;
+		min-height: 30%;
+		max-height: 50%;
+
+	// flex properties
+	flex-direction: column;
+	justify-content: space-between;
+
+	border-radius: 5px;
+
+	background: $bg-color;
+	color: $secondary-color;
+
+	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
+
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+
+	z-index: 1000;
+
+	&.active{
+		display: flex;
+	}
+
+
+	& > .header{
+		display: block;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		border-radius: 5px 5px 0 0;
+		border-bottom: 2px solid darken($bg-color, 5%);
+
+		font-size: 1.1em;
+		font-weight: bold;
+
+		color: $primary-color;
+	}
+
+	& > .body{
+		display: block;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		b, strong{
+			color: $primary-color;
+		}
+	}
+
+	& > .footer{
+		display: flex;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		background-color: darken($bg-color, 5%);
+
+		border-radius: 0 0 5px 5px;
+
+		// flex props.
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+
+		& button{
+			left: auto;
+			margin: 0 1em;
+			-webkit-transform: none;
+			transform: none;
+		}
+
+	}
+}
+
+
+#POPUP-BG{
+	display: none;
+	position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	background: #29333f;
+	background: rgba(41, 51, 63, .8);
+
+	z-index: 999;
+}
+
+#POPUP.active ~ #POPUP-BG{
+	display: block;
+}