Project

General

Profile

« Previous | Next » 

Revision 57602

Added by Konstantinos Triantafyllou over 4 years ago

[Monitor Dashboard]: customize breadcrumbs.

View differences:

modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/home/home.component.html
41 41 
                        <div class="uk-width-1-1">
42 42 
                          <label class="uk-text-bold">Topic Settings</label>
43 43 
                          <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
44 
                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text">
44 
                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
45 
                                 type="text">
45 46 
                        </div>
46 47 
                        <div class="uk-width-1-1">
47 48 
                          <label>Description</label>
......
79 80 
            </li>
80 81 
          </ng-template>
81 82 
          <li>
82 
            <a  (click)="saveTopicOpen(newTopic)">
83 
            <a (click)="saveTopicOpen(newTopic)">
83 84 
              <span class="menu_icon"><i class="material-icons">add</i></span>
84 85 
              <span class="menu_title">Create new Topic</span>
85 86 
            </a>
......
95 96 
                      <div class="uk-width-1-1">
96 97 
                        <label class="uk-text-bold">New Topic</label>
97 98 
                        <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
98 
                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text">
99 
                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
100 
                               type="text">
99 101 
                      </div>
100 102 
                      <div class="uk-width-1-1">
101 103 
                        <label>Description</label>
......
164 166 
        Select one of the <span class="md-color-blue-900">topics below</span>!
165 167 
      </div>
166 168 
    </div>
167 
    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium uk-grid uk-grid-match" uk-grid
168 
         uk-height-match="target: .md-card; row: true">
169 
    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>
169 170 
      <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
170 171 
        <div>
171 
          <a [routerLink]="topic.alias">
172 
            <div class="md-card">
173 
              <div class="md-card-content">
174 
                <h6 class="uk-text-bold">{{topic.name}}</h6>
175 
                <div class="uk-text-secondary">
176 
                  {{topic.description}}
177 
                </div>
172 
          <a [routerLink]="topic.alias" class="md-card">
173 
            <div class="md-card-content">
174 
              <h6 class="uk-text-bold">{{topic.name}}</h6>
175 
              <div class="uk-text-secondary">
176 
                {{topic.description}}
178 177 
              </div>
179 178 
            </div>
180 179 
          </a>
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.html
69 69 
        <button class="md-btn md-btn-primary">Preview</button>
70 70 
      </div>
71 71 
    </div>
72 
    <h5 class="uk-text-bold">Number Indicators</h5>
72 
    <h4 class="uk-text-bold">Number Indicators</h4>
73 73 
    <div [class.uk-child-width-1-3@m]="grid"
74 74 
         [class.uk-child-width-1-2@s]="grid"
75 75 
         [class.uk-child-width-1-1]="!grid"
76 
         uk-height-match="target: .md-card"
76 
         class="uk-grid-match"
77 77 
         uk-grid>
78 78 
      <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
79 79 
        <div>
......
114 114 
        </div>
115 115 
      </ng-template>
116 116 
    </div>
117 
    <h5 class="uk-text-bold">Chart Indicators</h5>
117 
    <h4 class="uk-text-bold">Chart Indicators</h4>
118 118 
    <div [class.uk-child-width-1-3@m]="grid"
119 119 
         [class.uk-child-width-1-2@s]="grid"
120 120 
         [class.uk-child-width-1-1]="!grid"
......
128 128 
                <ng-template [ngIf]="!grid">
129 129 
                  <span *ngFor="let indicatorPath of indicator.indicatorPaths"
130 130 
                        class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
131 
                    <i
132 
                      class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
131 
                    <i class="material-icons md-24 uk-margin-small-right">
132 
                      {{indicatorUtils.chartTypes.get(indicatorPath.type)}}
133 
                    </i>
133 134 
                    {{indicatorPath.type + ' Chart'}}
134 135 
                  </span>
135 136 
                </ng-template>
136 137 
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
137 
                  <i
138 
                    class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
138 
                  <i class="material-icons md-24 uk-margin-small-right">
139 
                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
140 
                  </i>
139 141 
                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
140 142 
                </span>
141 143 
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
142 144 
                  <i class="material-icons md-24 uk-margin-small-right"
143 
                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
145 
                     [class.md-color-green-300]="indicator.isActive">
146 
                    {{indicatorUtils.isActiveIcon}}
147 
                  </i>
144 148 
                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
145 149 
                </span>
146 150 
                <i class="md-icon material-icons">more_vert</i>
......
155 159 
                <div class="uk-width-1-3 uk-text-center"
156 160 
                     [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
157 161 
                  <div *ngFor="let indicatorPath of indicator.indicatorPaths">
158 
                    <i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
162 
                    <i class="material-icons md-24">
163 
                      {{indicatorUtils.chartTypes.get(indicatorPath.type)}}
164 
                    </i>
159 165 
                    <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
160 166 
                  </div>
161 167 
                </div>
162 168 
                <div class="uk-width-1-3 uk-text-center">
163 
                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
169 
                  <i class="material-icons md-24">
170 
                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
171 
                  </i>
164 172 
                  <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
165 173 
                </div>
166 174 
                <div class="uk-width-1-3 uk-text-center">
167 
                  <i class="material-icons md-24"
168 
                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
175 
                  <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
176 
                    {{indicatorUtils.isActiveIcon}}
177 
                  </i>
169 178 
                  <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
170 179 
                </div>
171 180 
              </div>
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/assets/theme-assets/dashboard-custom.css
7 7 
  --header-height: 70px;
8 8 
*/
9 9 

  		




  
  10
  
    
/* Global css*/


  		




  10
  11
  
    

  		




  
  12
  
    
html .dashboard {


  		




  
  13
  
    
  color: black;


  		




  
  14
  
    
}


  		




  
  15
  
    

  		




  11
  16
  
    
/* On link hover, his items with this class will be displayed*/


  		




  12
  17
  
    
.dashboard li>a .onHover {


  		




  13
  18
  
    
  display: none;


  		




  ......




  16
  21
  
    
.dashboard li>a:hover .onHover {


  		




  17
  22
  
    
  display: block;


  		




  18
  23
  
    
}


  		




  19
  
  
    
/*---*/


  		




  20
  24
  
    

  		




  21
  
  
    

  		




  22
  25
  
    
/* Custom width of sidebar, change var: sidebar-width*/


  		




  23
  26
  
    
.dashboard #sidebar_main {


  		




  24
  27
  
    
  width: var(--sidebar-width);


  		




  ......




  31
  34
  
    
  transform: translate3d(0,0,0);


  		




  32
  35
  
    
}


  		




  33
  36
  
    

  		




  
  37
  
    
.dashboard #sidebar_main .sidebar_main_header {


  		




  
  38
  
    
  color: #000000;


  		




  
  39
  
    
}


  		




  
  40
  
    

  		




  34
  41
  
    
.dashboard #sidebar_main .menu_section > ul > li > a {


  		




  35
  42
  
    
  font-weight: 700;


  		




  36
  43
  
    
  font-size: var(--sidebar-font-size);


  		




  37
  
  
    
  color: rgba(0, 0, 0, 0.70);


  		




  
  44
  
    
  color: rgba(0, 0, 0, 0.7);


  		




  38
  45
  
    
}


  		




  39
  46
  
    

  		




  40
  47
  
    
.dashboard #sidebar_main .menu_section > ul > li ul a {


  		




  41
  48
  
    
  font-size: var(--sidebar-font-size);


  		




  42
  
  
    
  color: rgba(0, 0, 0, 0.70);


  		




  
  49
  
    
  color: rgba(0, 0, 0, 0.7);


  		




  43
  50
  
    
}


  		




  44
  51
  
    

  		




  45
  52
  
    
@media only screen and (min-width: 1220px) {


  		




  ......




  49
  56
  
    
    margin-left: var(--sidebar-width);


  		




  50
  57
  
    
  }


  		




  51
  58
  
    
}


  		




  
  59
  
    

  		




  52
  60
  
    
/* Custom height of header, change var: header-height*/


  		




  53
  61
  
    
body.dashboard {


  		




  54
  62
  
    
  padding-top: var(--header-height);


  		




  ......




  57
  65
  
    
.dashboard #header_main {


  		




  58
  66
  
    
  padding: calc((var(--header-height) - 48px)/2) 25px;


  		




  59
  67
  
    
}


  		




  60
  
  
    
/*---*/


  		




  61
  68
  
    

  		




  62
  69
  
    
/* Custom card*/


  		




  63
  
  
    
.dashboard .md-card .md-card-toolbar-heading-text {


  		




  
  70
  
    
.dashboard .md-card .md-card-content {


  		




  
  71
  
    
  color: rgba(0, 0, 0, 0.8);


  		




  
  72
  
    
}


  		




  
  73
  
    

  		




  
  74
  
    
.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions {


  		




  
  75
  
    
  color: rgba(0, 0, 0, 0.8);


  		




  
  76
  
    
}


  		




  
  77
  
    

  		




  
  78
  
    
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {


  		




  64
  79
  
    
  font-weight: 700;


  		




  65
  80
  
    
}


  		




  66
  
  
    
/*---*/


  		




  67
  81
  
    

  		




  68
  82
  
    
/* Breadcrumb*/


  		




  69
  83
  
    
.dashboard #breadcrumbs {


  		




  70
  84
  
    
  background: inherit;


  		




  71
  85
  
    
}


  		




  72
  86
  
    

  		




  
  87
  
    
.dashboard #breadcrumbs > li a,


  		




  
  88
  
    
.dashboard #breadcrumbs > li span {


  		




  
  89
  
    
  color: rgba(0, 0, 0, 0.4);


  		




  
  90
  
    
  font-size: 12px;


  		




  
  91
  
    
  line-height: 20px;


  		




  
  92
  
    
}


  		




  
  93
  
    

  		




  
  94
  
    
.dashboard #breadcrumbs > li + li a:before,


  		




  
  95
  
    
.dashboard #breadcrumbs > li + li span:before {


  		




  
  96
  
    
  font-weight: 400 !important;


  		




  
  97
  
    
  margin-top: -9px;


  		




  
  98
  
    
  font-size: 16px;


  		




  
  99
  
    
}


  		




  
  100
  
    

  		




  73
  101
  
    
/* Notification */


  		




  74
  
  
    

  		




  75
  
  
    
/*Remove the second close added by theme because it was used uikit 2*/


  		




  
  102
  
    
/* Remove the second close added by theme because it was used uikit 2*/


  		




  76
  103
  
    
.dashboard .uk-close::after {content: '';}


  		




  77
  104
  
    

  		




  78
  
  
    
/* Change z-index, because of sidebar and header z-index is larger that default */


  		




  
  105
  
    
/* Change z-index, because of sidebar and header z-index is bigger that default */


  		




  79
  106
  
    
.dashboard .uk-notification {


  		




  80
  107
  
    
  z-index: 2000;


  		




  81
  108
  
    
}


  		




  82
  
  
    
/*---*/


  		












Also available in:  Unified diff