Project

General

Profile

« Previous | Next » 

Revision 57957

Added by Konstantinos Triantafyllou almost 5 years ago

[Monitor Dashboard | Trunk]: Fix a bug with hide-controls animation

View differences:

modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/app.component.html
23 23 
  <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems"
24 24 
  ></dashboard-sidebar>
25 25 
  <div *ngIf="hasSidebar" id="hide_controls">
26 
    <div class="uk-flex uk-flex-middle">
27 
      <a href="#" (click)="toggleOpen($event)"><i class="material-icons md-24">play_circle_filled</i></a>
28 
      <a *ngIf="open" href="#"  (click)="toggleOpen($event)">
29 
        <span class="uk-margin-left">Hide Controls</span>
30 
      </a>
26 
    <div id="toggle" (click)="toggleOpen($event)">
27 
        <i class="material-icons">play_circle_filled</i>
28 
        <span *ngIf="open" class="uk-margin-small-left">Hide Controls</span>
31 29 
    </div>
32 30 
  </div>
33 31 
  <router-outlet></router-outlet>
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/assets/theme-assets/dashboard-custom.css
39 39 
.dashboard #sidebar_main .menu_section {
40 40 
  overflow: auto;
41 41 
  flex: 1;
42 
  margin-bottom: 45px;
42 43 
}
43 44 

  		




  44
  45
  
    
.dashboard #hide_controls {


  		




  ......




  46
  47
  
    
  left: 0;


  		




  47
  48
  
    
  position: fixed;


  		




  48
  49
  
    
  z-index: 1205;


  		




  49
  
  
    
  width: 320px;


  		




  50
  50
  
    
  height: 45px;


  		




  51
  
  
    
  background: rgba(0,0,0,0);


  		




  
  51
  
    
  width: 0;


  		




  
  52
  
    
  background: rgba(255, 255, 255, 0);


  		




  52
  53
  
    
}


  		




  53
  54
  
    

  		




  54
  55
  
    
@media only screen and (max-width: 767px) {


  		




  55
  
  
    
  .dashboard #hide_controls {


  		




  
  56
  
    
  .dashboard .sidebar_main_active #hide_controls {


  		




  56
  57
  
    
    width: 280px;


  		




  57
  58
  
    
  }


  		




  58
  59
  
    
}


  		




  59
  60
  
    

  		




  60
  
  
    
.dashboard #hide_controls * {


  		




  
  61
  
    
.dashboard .sidebar_main_active #hide_controls {


  		




  
  62
  
    
  background: rgba(255, 255, 255, 1);


  		




  
  63
  
    
  border-top: 1px solid rgba(0,0,0,.30);


  		




  
  64
  
    
  width: 320px;


  		




  
  65
  
    
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  66
  
    
  -webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  67
  
    
  -moz-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  68
  
    
}


  		




  
  69
  
    

  		




  
  70
  
    
.dashboard #hide_controls #toggle {


  		




  61
  71
  
    
  color: #646a6f;


  		




  
  72
  
    
  margin-left: 5px;


  		




  
  73
  
    
  margin-top: 5px;


  		




  
  74
  
    
  cursor: pointer;


  		




  
  75
  
    
  width: max-content;


  		




  62
  76
  
    
}


  		




  63
  77
  
    

  		




  64
  
  
    
.dashboard #hide_controls:hover * {


  		




  
  78
  
    
.dashboard #hide_controls #toggle:hover {


  		




  65
  79
  
    
  color: #0d47a1;


  		




  66
  80
  
    
}


  		




  67
  81
  
    

  		




  68
  
  
    
.dashboard #hide_controls:hover .material-icons  {


  		




  
  82
  
    
.dashboard #hide_controls:hover #toggle:hover .material-icons  {


  		




  
  83
  
    
  color: #0d47a1;


  		




  69
  84
  
    
  border: #0d47a1 solid 1px;


  		




  70
  85
  
    
}


  		




  71
  86
  
    

  		




  72
  
  
    
.dashboard #hide_controls > * {


  		




  73
  
  
    
  margin-left: 5px;


  		




  74
  
  
    
  margin-top: 5px;


  		




  75
  
  
    
}


  		




  76
  
  
    

  		




  77
  
  
    
.dashboard .sidebar_main_active #hide_controls {


  		




  78
  
  
    
  border-top: 1px solid rgba(0,0,0,.30);


  		




  79
  
  
    
}


  		




  80
  
  
    

  		




  81
  
  
    
.dashboard #hide_controls .material-icons {


  		




  82
  
  
    
  transform: rotate(0deg);


  		




  83
  
  
    
  -webkit-transform: rotate(0deg);


  		




  
  87
  
    
.dashboard #hide_controls #toggle .material-icons {


  		




  
  88
  
    
  transform: rotateY(0deg);


  		




  
  89
  
    
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  90
  
    
  -webkit-transform: rotateY(0deg);


  		




  84
  91
  
    
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  85
  
  
    
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  92
  
    
  -moz-transform: rotateY(0deg);


  		




  
  93
  
    
  -moz-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  86
  94
  
    
  background: rgba(0, 0, 0, 0);


  		




  87
  95
  
    
  border-radius: 50%;


  		




  88
  96
  
    
  border: rgba(0, 0, 0, 0) solid 1px;


  		




  
  97
  
    
  text-align: center;


  		




  
  98
  
    
  width: 26px !important;


  		




  
  99
  
    
  height: 26px !important;


  		




  
  100
  
    
  line-height: 26px !important;


  		




  
  101
  
    
  font-size: 24px;


  		




  
  102
  
    
  vertical-align: -7px;


  		




  89
  103
  
    
}


  		




  90
  104
  
    

  		




  91
  
  
    
.dashboard .sidebar_main_active #hide_controls .material-icons {


  		




  92
  
  
    
  transform: rotate(180deg);


  		




  93
  
  
    
  -webkit-transform: rotate(180deg);


  		




  
  105
  
    
.dashboard .sidebar_main_active #hide_controls #toggle .material-icons {


  		




  
  106
  
    
  transform: rotateY(180deg);


  		




  
  107
  
    
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  108
  
    
  -webkit-transform: rotateY(180deg);


  		




  94
  109
  
    
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  95
  
  
    
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  
  110
  
    
  -moz-transform: rotateY(180deg);


  		




  
  111
  
    
  -moz-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);


  		




  96
  112
  
    
}


  		




  97
  113
  
    

  		




  98
  
  
    
.dashboard #hide_controls > * {


  		




  99
  
  
    
  margin-left: 10px;


  		




  100
  
  
    
}


  		




  101
  
  
    

  		




  102
  114
  
    
.dashboard .header_full #sidebar_main .sidebar_main_header {


  		




  103
  115
  
    
  min-height: auto;


  		




  104
  116
  
    
}


  		












Also available in:  Unified diff