[page.teacher] card layout (html semantic + generic css)
This commit is contained in:
xdrm-brackets
parent
d033df5ee7
commit
fbb21b3ffa
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -74,3 +74,233 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [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%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue