From fbb21b3ffa51a3c633d3b7fa1f0aa92f36e81a61 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sat, 3 Mar 2018 19:37:38 +0100
Subject: [PATCH] [page.teacher] card layout (html semantic + generic css)

---
 public_html/asset/svg/course.svg        |  44 +++++
 public_html/asset/svg/td.svg            |  45 +++++
 public_html/asset/svg/tp.svg            |  45 +++++
 public_html/asset/svg/warning_radio.svg |  42 +++++
 webpack/component/teacher/view.vue      |  60 +++++--
 webpack/scss/constants.scss             |   4 +-
 webpack/scss/container.scss             | 230 ++++++++++++++++++++++++
 7 files changed, 452 insertions(+), 18 deletions(-)
 create mode 100644 public_html/asset/svg/course.svg
 create mode 100644 public_html/asset/svg/td.svg
 create mode 100644 public_html/asset/svg/tp.svg
 create mode 100644 public_html/asset/svg/warning_radio.svg

diff --git a/public_html/asset/svg/course.svg b/public_html/asset/svg/course.svg
new file mode 100644
index 0000000..05112e1
--- /dev/null
+++ b/public_html/asset/svg/course.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="16px"
+   id="Layer_1"
+   style="enable-background:new 0 0 16 16;"
+   version="1.1"
+   viewBox="0 0 16 16"
+   width="16px"
+   xml:space="preserve"
+   sodipodi:docname="course.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata9"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview5"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="M 13,5 H 12 V 9 L 10,7 8,9 V 5 H 5 C 4.448,5 4,4.552 4,4 4,3.448 4.448,3 5,3 h 8 C 13.55,3 14,2.55 14,2 14,1.45 13.55,1 13,1 H 5 C 3.343,1 2,2.343 2,4 v 8 c 0,1.656 1.343,3 3,3 h 8 c 0.55,0 1,-0.45 1,-1 V 6 C 14,5.45 13.55,5 13,5 Z"
+     id="fill-edit"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/public_html/asset/svg/td.svg b/public_html/asset/svg/td.svg
new file mode 100644
index 0000000..9a35e77
--- /dev/null
+++ b/public_html/asset/svg/td.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 500 500"
+   height="500px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 500 500"
+   width="500px"
+   xml:space="preserve"
+   sodipodi:docname="td.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata9"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview5"
+     showgrid="false"
+     inkscape:zoom="0.472"
+     inkscape:cx="250"
+     inkscape:cy="250"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 82.474,215.547 c -8.903,8.9 -13.177,21.622 -15.354,34.523 L 32.503,413.794 c -4.906,29.077 24.257,58.33 53.698,53.787 l 163.897,-34.167 c 11.996,-2.174 24.987,-5.902 33.894,-14.802 L 457.609,244.8 c 13.904,-13.982 13.904,-36.608 0,-50.6 L 305.977,42.382 c -13.992,-13.902 -36.615,-13.902 -50.516,0 z m 166.625,174.71 -84.856,16.273 -70.319,-70.415 16.169,-84.954 126.376,-126.557 c 6.996,-7 18.267,-7 25.263,0 6.999,6.992 6.999,18.348 0,25.35 L 144.888,266.973 c -8.717,8.723 -8.717,22.898 0,31.613 8.725,8.731 22.807,8.731 31.528,0 l 116.925,-117.02 c 7.005,-6.993 18.26,-6.993 25.26,0 7.005,7 7.005,18.268 0,25.259 L 201.766,323.846 c -8.723,8.721 -8.723,22.899 0,31.622 8.722,8.719 22.805,8.719 31.524,0 L 350.215,238.447 c 6.912,-6.912 18.269,-6.912 25.268,0 6.993,6.992 6.993,18.351 0,25.338 z"
+     id="fill-edit"
+     inkscape:connector-curvature="0"
+     style="clip-rule:evenodd;fill:#010101;fill-rule:evenodd" /></svg>
\ No newline at end of file
diff --git a/public_html/asset/svg/tp.svg b/public_html/asset/svg/tp.svg
new file mode 100644
index 0000000..76080d3
--- /dev/null
+++ b/public_html/asset/svg/tp.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 64 64"
+   height="64px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 64 64"
+   width="64px"
+   xml:space="preserve"
+   sodipodi:docname="tp.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview9"
+     showgrid="false"
+     inkscape:zoom="3.6875"
+     inkscape:cx="33.355932"
+     inkscape:cy="32"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     style="fill:#241f20"
+     d="m 9.6328125,7.9785156 c -1.758,0 -3.1816406,1.4256406 -3.1816406,3.1816404 v 36.519532 c 0,0 0.00895,0.197187 0.00195,0.492187 -0.001,0.01 0,0.01544 0,0.02344 0,0.319001 -0.030172,0.592844 -0.076172,0.839844 -0.003,0.019 -0.00677,0.03564 -0.00977,0.05664 -0.363,1.783 -1.7910156,1.769531 -1.7910156,1.769531 h -1.953125 c -1.425,0 -2.57812503,1.155078 -2.57812503,2.580078 0,1.424 1.15312503,2.578125 2.57812503,2.578125 H 61.376953 c 1.422,0 2.578125,-1.154125 2.578125,-2.578125 0,-1.424 -1.156125,-2.580078 -2.578125,-2.580078 h -2.005859 c -0.463,-0.012 -1.976891,-0.259734 -1.962891,-3.052734 0,-0.045 0.01172,-0.08691 0.01172,-0.128906 V 11.160156 c 0,-1.7559998 -1.425641,-3.1816404 -3.181641,-3.1816404 z m 3.4960935,2.9667964 h 37.779297 c 1.748,0 3.166016,1.407579 3.166016,3.142579 v 30.345703 c 0,1.735 -1.418016,3.142578 -3.166016,3.142578 H 13.128906 c -1.747,0 -3.1640622,-1.406578 -3.1640622,-3.142578 V 14.087891 c 0,-1.735 1.4160622,-3.142579 3.1640622,-3.142579 z m 3.464844,3.06836 c -1.657,0 -2.998047,1.373406 -2.998047,3.066406 v 24.16211 c 0,1.692999 1.342047,3.066406 2.998047,3.066406 h 31.089844 c 1.656,0 2.996094,-1.373407 2.996094,-3.066406 v -24.16211 c -10e-7,-1.693 -1.340094,-3.066406 -2.996094,-3.066406 z"
+     id="fill-edit"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/public_html/asset/svg/warning_radio.svg b/public_html/asset/svg/warning_radio.svg
new file mode 100644
index 0000000..e11fd42
--- /dev/null
+++ b/public_html/asset/svg/warning_radio.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 24 24"
+   id="Layer_1"
+   version="1.0"
+   viewBox="0 0 24 24"
+   xml:space="preserve"
+   sodipodi:docname="warning_radio.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview9"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="M 12,2 C 6.5,2 2,6.5 2,12 2,17.5 6.5,22 12,22 17.5,22 22,17.5 22,12 22,6.5 17.5,2 12,2 Z m 0,2 c 4.4,0 8,3.6 8,8 0,4.4 -3.6,8 -8,8 C 7.6,20 4,16.4 4,12 4,7.6 7.6,4 12,4 Z m -1,3 v 6 h 2 V 7 Z m 0,8 v 2 h 2 v -2 z"
+     id="fill-edit"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index 83f7d2f..76ab1be 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -1,22 +1,50 @@
 <template>
 
-	<div id='CONTAINER' class='list'>
+	<div id='CONTAINER' class='card'>
 
-		<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>
+		<section>
+			<span class='category'>in deSiGn</span>
+			<h1>Adrien Marquès</h1>
+
+			<div class='table'>
+				<div>
+					<span>13</span>
+					<span>days left in design</span>
+				</div>
+				<div>
+					<span>74</span>
+					<span>days to finish</span>
+				</div>
+			</div>
+
+			<div class='footer'>
+				<span class='course'>13</span><hr>
+				<span class='td active'>9</span><hr>
+				<span class='tp'>32</span>
+			</div>
+		</section>
+
+		<section>
+			<span class='category'>in deSiGn</span>
+			<h1 class='warning'>Lucas Mascaro</h1>
+
+			<div class='table'>
+				<div>
+					<span>23</span>
+					<span>days left in design</span>
+				</div>
+				<div>
+					<span>104</span>
+					<span>days to finish</span>
+				</div>
+			</div>
+
+			<div class='footer'>
+				<span class='course active'>13</span><hr>
+				<span class='td'>9</span><hr>
+				<span class='tp active'>32</span>
+			</div>
+		</section>
 
 	</div>
 
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index e5f8582..7525ff5 100644
--- a/webpack/scss/constants.scss
+++ b/webpack/scss/constants.scss
@@ -1,7 +1,7 @@
 // BACKGROUND COLOR
-$bg-color: darken(#f9f9f9, 2%);
-$bg-color: #f4f8f9;
+$bg-color: #eef2f5;
 $primary-color: #545f75;
+$primary-color: #54627c;
 $secondary-color: #b8c0c8;
 
 /* COULEUR DES ERREURS */
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index ddc8948..113e37d 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -73,4 +73,234 @@
 		border-bottom: 2px solid darken($bg-color, 5%);
 	}
 
+}
+
+
+
+
+
+/* [2] Card style
+---------------------------------*/
+#CONTAINER.card{
+
+	display: flex;
+
+	// flex properties
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+
+
+	/* (1) Card container */
+	& > section{
+
+		display: block;
+		position: relative;
+
+		margin: 1em;
+		padding: 1.5em;
+
+		border-radius: 3px / 3px;
+		// border: 1px solid darken(#fff, 10%);
+		box-shadow: 0 1px 1px darken(#fff, 20%);
+
+		background-color: #fff;
+
+		color: $primary-color;
+
+		/* (2) Card generic title */
+		& > span.category{
+
+			display: block;
+			position: relative;
+
+			margin-bottom: .5em;
+
+			font-size: .7em;
+			color: darken($secondary-color, 10%);
+			text-transform: uppercase;
+			letter-spacing: .05em;
+
+		}
+
+		/* (2) Card title */
+		& > h1{
+
+			display: block;
+			position: relative;
+
+			color: darken($primary-color, 5%);
+			font-size: 1em;
+
+			&.warning:before{
+				content: '';
+
+				display: inline-block;
+				position: relative;
+					width: 1em;
+					height: 1em;
+
+				margin-right: .3em;
+
+				background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
+				background-size: auto 90%;
+
+				text-anchor: center;
+			}
+
+		}
+
+		/* (3) Card 2-column array */
+		& > div.table{
+
+			display: flex;
+			position: relative;
+
+			margin-top: 1em;
+			padding: .5em;
+
+			border-radius: 3px / 3px;
+			border: 1px solid darken(#fff, 15%);
+
+			// flex properties
+			flex-direction: row;
+			justify-content: space-around;
+			align-items: center;
+			flex-wrap: nowrap;
+
+			/* (4) Column */
+			& > div{
+
+				display: flex;
+				position: relative;
+					height: 2.3em;
+
+				padding: 0 .4em;
+
+				border-left: 1px solid darken(#fff, 15%);
+
+				color: darken($secondary-color, 20%);
+
+				&:first-child{ border-left: 0; }
+
+				// flex properties
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: nowrap;
+
+				/* (4.1) Column Emphasis */
+				& > span:first-child{
+					display: block;
+					position: relative;
+
+					margin-right: .3em;
+
+					font-size: 1.5em;
+					letter-spacing: .05em;
+				}
+
+				/* (4.2) Column Emphasis */
+				& > span:last-child{
+					display: block;
+					position: relative;
+					min-width: 4em;
+					max-width: 6em;
+
+					font-size: .8em;
+					letter-spacing: .05em;
+					text-transform: uppercase;
+
+					overflow: hidden;
+				}
+
+			}
+
+		}
+
+		/* (5) Card footer */
+		& > div.footer{
+
+			display: flex;
+			position: relative;
+				margin-top: 1.3em;
+				margin-left: -1.5em;
+				height: 3.5em;
+				//           100% + parent.margin - padding
+				width: calc( 100% + 2*1.5em - 2*2em );
+
+			// remove card bottom padding
+			margin-bottom: -1.5em;
+
+			padding: 0 2em;
+
+			border-top: 1px solid darken(#fff, 10%);
+			border-radius: 0 0 3px 3px;
+			background-color: #fafbfd;
+
+			// flex properties
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: nowrap;
+
+
+			/* (5.1) Card footer element */
+			& > span{
+
+				display: flex;
+				position: relative;
+				height: 1.3em;
+
+				color: darken($secondary-color, 20%);
+
+				// center text
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				flex-wrap: nowrap;
+
+				&:before{
+					content: '';
+
+					display: inline-block;
+					position: relative;
+						width: 1.3em;
+						height: 1.3em;
+
+					margin-right: .4em;
+
+					background: transparent center center no-repeat;
+					background-size: 80% auto;
+
+				}
+
+				// specific icons
+				&.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); }
+				&.td:before{     background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); }
+				&.tp:before{     background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); }
+
+				// hover icons
+				&.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
+				&.td.active:before{     background-image: url('/asset/svg/td.svg@20b565'); }
+				&.tp.active:before{     background-image: url('/asset/svg/tp.svg@e85456'); }
+
+			}
+
+			/* (5.2) Card footer separator */
+			& > hr{
+				display: block;
+				position: relative;
+					width: 1px;
+					height: 1em;
+
+				border: 0;
+				background-color: darken(#fff, 10%);
+			}
+
+		}
+
+
+	}
+
 }
\ No newline at end of file