[page.teacher] card layout (html semantic + generic css)

This commit is contained in:
xdrm-brackets 2018-03-03 19:37:38 +01:00
parent d033df5ee7
commit fbb21b3ffa
7 changed files with 452 additions and 18 deletions

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,22 +1,50 @@
<template> <template>
<div id='CONTAINER' class='list'> <div id='CONTAINER' class='card'>
<section>bla</section> <section>
<section>bla</section> <span class='category'>in deSiGn</span>
<hr> <h1>Adrien Marquès</h1>
<section>bla</section>
<section>bla</section> <div class='table'>
<section>bla</section> <div>
<section>bla</section> <span>13</span>
<h1>Some Title</h1> <span>days left in design</span>
<section>bla</section> </div>
<section>bla</section> <div>
<section>bla</section> <span>74</span>
<section>bla</section> <span>days to finish</span>
<h1>Some Title</h1> </div>
<section>bla</section> </div>
<section>bla</section>
<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> </div>

View File

@ -1,7 +1,7 @@
// BACKGROUND COLOR // BACKGROUND COLOR
$bg-color: darken(#f9f9f9, 2%); $bg-color: #eef2f5;
$bg-color: #f4f8f9;
$primary-color: #545f75; $primary-color: #545f75;
$primary-color: #54627c;
$secondary-color: #b8c0c8; $secondary-color: #b8c0c8;
/* COULEUR DES ERREURS */ /* COULEUR DES ERREURS */

View File

@ -73,4 +73,234 @@
border-bottom: 2px solid darken($bg-color, 5%); 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%);
}
}
}
} }