[webpack.page.teachers] load professors through API + flex layout

This commit is contained in:
xdrm-brackets 2018-03-03 22:18:36 +01:00
parent fbb21b3ffa
commit b59d1cbeff
5 changed files with 43 additions and 40 deletions

View File

@ -2,46 +2,26 @@
<div id='CONTAINER' class='card'>
<section>
<span class='category'>in deSiGn</span>
<h1>Adrien Marquès</h1>
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
<section v-for='prof in gstore.professors'>
<span class='category'>{{ prof.abreviation }}</span>
<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
<div class='table'>
<div>
<span>13</span>
<span>days left in design</span>
<span>{{prof.hoursToDo}}</span>
<span>heures à faire</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>
<span>?</span>
<span>heures prévues</span>
</div>
</div>
<div class='footer'>
<span class='course active'>13</span><hr>
<span class='td'>9</span><hr>
<span class='td active'>9</span><hr>
<span class='tp active'>32</span>
</div>
</section>

View File

@ -1 +1,18 @@
gstore.add('blo', 12);
/* (1) Load professors
---------------------------------------------------------*/
/* (1) Initialize list */
gstore.add('professors', []);
/* (2) Get professors */
api.call('GET professor', {}, function(rs){
// {1} If error -> abort //
if( rs.error !== 0 )
return console.log('No professor found, error: '+rs.error);
// {2} Store professors //
console.log(rs);
gstore.get.professors = rs.professors;
});

View File

@ -15,7 +15,6 @@
background-color: $bg-color;
overflow: hidden;
overflow-y: auto;
z-index: 100;
@ -32,7 +31,6 @@
flex-direction: column;
justify-content: flex-start;
& > *:first-child{ margin-top: 1em; }
& > *:last-child{ margin-bottom: 3em; }
@ -86,14 +84,19 @@
display: flex;
// flex properties
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
/* (1) Card container */
& > section{
// flex-grow: 1;
flex-basis: 15em;
flex-shrink: 1;
display: block;
position: relative;

View File

@ -29,6 +29,9 @@ body{
background: $bg-color;
color: $primary-color;
overflow: hidden;
overflow-y: auto;
}

View File

@ -13,11 +13,11 @@
/* (1) Container
---------------------------------------------------------*/
display: flex;
position: absolute;
top: $header-height;
position: fixed;
top: 0;
left: 0;
width: calc( #{$menu-width} - 1px );
height: calc( 100% - #{$header-height} );
height: 100%;
background-color: $menu-bg;
border-right: 1px solid #e3e7eb;
@ -27,7 +27,7 @@
justify-content: space-around;
align-items: center;
z-index: 200;
z-index: 100;
/* (2) Items
---------------------------------------------------------*/