+
+
+
+
+
+
{{ gname }}
+
+
+ {{ data.name }}
+
+
+
+
+
@@ -107,19 +120,6 @@
-
-
-
-
-
-
{{ gname }}
-
-
{{ data.name }}
-
-
-
-
-
diff --git a/webpack/data/teacher.js b/webpack/data/teacher.js
index f4a8b4c..5a5a38a 100644
--- a/webpack/data/teacher.js
+++ b/webpack/data/teacher.js
@@ -106,13 +106,57 @@ gstore.add('filter_handler', function(){
/* (3) Get Filters
---------------------------------------------------------*/
-/* (1) Define global filter */
-gstore.add('filters', {
- formations: [{ visible: false }],
- ues: [{ visible: false }]
+/* (1) Define filter group show/hide */
+gstore.add('show_fgroup', function(gname){
+
+ var opened = gstore.get.filters[gname] != null && gstore.get.filters[gname][0].visible;
+
+ // {1} hide all by default//
+ for( var f in gstore.get.filters )
+ gstore.get.filters[f][0].visible = false;
+
+ // {2} If wrong @gname -> abort //
+ if( gstore.get.filters[gname] == null )
+ return;
+
+ // {3} Show selected filter //
+ gstore.get.filters[gname][0].visible = !opened;
+
});
-/* (2) Get Formations */
+/* (2) Define filter item toggle */
+gstore.add('toggle_filter', function(gname, i){
+
+ // {1} If wrong @gname -> abort //
+ if( gstore.get.filters[gname] == null )
+ return;
+
+ // {2} If wrong @i -> abort //
+ if( gstore.get.filters[gname][i] == null )
+ return;
+
+ // {3} Toggle filter activation //
+ gstore.get.filters[gname][i].active = !gstore.get.filters[gname][i].active;
+
+ // {4} Update active table //
+ gstore.get.filters[gname][0].active.splice(0);
+ console.log(gstore.get.filters[gname][0].active);
+
+ for( var f = 1 ; f < gstore.get.filters[gname].length ; f++ )
+ if( gstore.get.filters[gname][f].active )
+ gstore.get.filters[gname][0].active.push(f);
+
+ console.log(gstore.get.filters[gname][0].active);
+
+});
+
+/* (2) Define global filter */
+gstore.add('filters', {
+ formations: [{ visible: false, active: [] }],
+ ues: [{ visible: false, active: [] }]
+});
+
+/* (3) Get Formations */
api.call('GET formation', {}, function(rs){
// {1} If error -> abort //
@@ -129,7 +173,7 @@ api.call('GET formation', {}, function(rs){
});
-/* (3) Get UEs */
+/* (4) Get UEs */
api.call('GET ue', {}, function(rs){
// {1} If error -> abort //
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 920233e..a956019 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -18,6 +18,16 @@
z-index: 100;
+
+ // card container
+ &.card{
+ display: flex;
+
+ flex-direction: row;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ }
+
}
@@ -81,14 +91,13 @@
/* [3] Card style -> container
---------------------------------*/
-#CONTAINER > div.card.container{
+#CONTAINER.card > div.card.container{
+
+ order: 2;
+ flex: 1 0 calc( 100% - 20em );
display: flex;
- position: absolute;
- top: 0;
- left: 0;
- width: calc( 100% - 20em );
- min-height: 100%;
+ min-height: 100%;
// flex properties
flex-direction: row;
@@ -97,6 +106,8 @@
align-content: flex-start;
flex-wrap: wrap;
+ // background-color: #f00;
+
z-index: 101;
overflow: hidden;
@@ -631,49 +642,53 @@
/* [4] Card style -> filter
---------------------------------*/
-#CONTAINER > div.card.filter{
+#CONTAINER.card > div.card.filter{
+
+ order: 1;
+ flex: 1 0 calc( 90% );
display: flex;
- position: fixed;
- top: #{$header-height + .5em };
- left: calc( 100% - 20em );
- // deflt - marg - scrollBarOffset
- width: calc( 20em - 2*.5em - .5em );
- height: calc( 100% - 2*.5em - #{$header-height} );
+ min-height: calc( 4em - 2*.5em - 2*.5em );
+
+ margin: .5em;
+ padding: .5em;
border-radius: 3px / 3px;
background-color: #fff;
+ // background-color: #0f0;
+
box-shadow: 0 2px 2px darken(#fff, 10%);
// flex
- flex-direction: column;
+ flex-direction: row;
justify-content: flex-start;
- align-items: flex-start;
- flex-wrap: nowrap;
+ align-items: center;
+ flex-wrap: wrap;
- overflow: hidden;
- overflow-y: auto;
+ z-index: 110;
+
+ overflow: visible;
+ // overflow-y: visible;
/* (1) Filter Group */
& > div[title]{
+ flex: 0 1 5em;
+
display: block;
position: relative;
margin: .5em 1em;
/* (1.1) Title content */
- & > div.fold{
+ & > div.fold-toggle{
content: attr(title);
display: inline-block;
position: relative;
- padding-right: 1.4em;
-
- background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
- background-size: 1em 1em;
+ padding-right: 1em;
font-size: .8em;
color: darken($secondary-color, 10%);
@@ -682,68 +697,122 @@
cursor: pointer;
+ transition: color .2s ease-in-out;
- &[data-show='1']{
- background-image: url('/asset/svg/up_arrow.svg@bbbbbb');
+ &:hover{
+ color: $primary-color;
}
+ &[data-count]:after{
+ content: attr(data-count);
+
+ display: inline-block;
+ position: absolute;
+ margin-top: -.1em;
+ margin-left: .5em;
+ width: 1em;
+ height: clac( 1.5em - 2*.2em );
+
+ padding: .2em .5em;
+
+ border-radius: 3px;
+
+ background: $form-valid-color;
+
+ color: #fff;
+ font-size: .8em;
+ text-align: center;
+
+ }
+
+ // greyed when 0
+ &[data-count='0']:after{ background-color: #ddd; }
+
}
- /* (1.2) Filter element */
- & > span{
+ /* (1.2) Filter box */
+ & > div.fold{
display: none;
- position: relative;
+ position: absolute;
+ width: 15em;
+ height: 15em;
+ margin-top: 2em;
- text-indent: 2em;
- margin-bottom: 1em;
+ border: 1px solid #ddd;
+ border-radius: 3px;
- cursor: default;
+ background-color: #fff;
- &:hover{ text-decoration: underline; }
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ flex-wrap: nowrap;
- &:nth-child(2){
- margin-top: .5em;
- }
+ overflow: hidden;
+ overflow-y: auto;
- /* (1.3) Pseudo-checkbox */
- &:before{
- content: '';
+ /* (1.3) Filter item */
+ & > span{
display: block;
- position: absolute;
- margin-left: .5em;
- width: calc( 1em - 2*2px );
- height: calc( 1em - 2*2px );
+ position: relative;
- border-radius: 3px / 3px;
- border: 2px solid $secondary-color;
+ padding: .5em 0;
+ padding-left: 2em;
- background: #fff center center no-repeat;
- background-size: auto 80%;
+ background-color: #fff;
+ &:hover{ background-color: darken(#fff,5%); }
- transition: background .2s ease-in-out,
- border-color .2s ease-in-out;
+ &:nth-child(2n){
+ background-color: #f9f9f9;
+ &:hover{ background-color: darken(#f9f9f9,5%); }
+ }
+
+
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
cursor: pointer;
- }
- /* (1.4) Active pseudo-checkbox */
- &.active:before{
+ transition: background-color .2s ease-in-out;
- background-image: url('/asset/svg/checkbox.svg@ffffff');
- background-color: $form-valid-color;
- border-color: $form-valid-color;
+ /* (1.3.1) Pseudo-checkbox */
+ &:before{
+ content: '';
+
+ display: block;
+ position: absolute;
+ margin-top: .2em;
+ margin-left: calc( .5em - 2em );
+ width: calc( 1em - .2em );
+ height: calc( 1em - .2em );
+
+ border-radius: 50%;
+ background: $form-valid-color;
+
+ transform: scale(0);
+ transition: transform .1s ease-in-out;
+
+ cursor: pointer;
+ }
+
+ /* (1.3.2) Active pseudo-checkbox */
+ &.active:before{
+ transform: scale(1);
+ }
}
}
- // only show items if filter_group has 'data-show'
- & > div.fold[data-show='1'] ~ span{
- display: block;
+ // only show item box if filter_group has 'data-show'
+ & > div.fold-toggle[data-show='1'] + div.fold{
+ display: flex;
}
}