gui/app/views/main2.html

   1 <div>
   2     <div ng-include="'views/layout/header.html'"></div>
   3 </div>
   4 <div ng-include="'views/layout/sideNav2.html'"></div>
   5
   6
   7 <div style="margin-top:80px;margin-left:220px;">
   8     <!--<div ncy-breadcrumb></div>-->
   9     <div>
  10         <ol class="progressDefine">
  11             <li data-step="1" ng-click="gotoProject();" style="cursor:pointer" ng-class="{'is-complete':projectShow}">
  12                 Project
  13             </li>
  14             <li data-step="2" ng-class="{'is-complete':taskShow}">
  15                 Task
  16             </li>
  17
  18             <li data-step="3" ng-class="{'is-complete':reportShow}">
  19                 Reporting
  20             </li>
  21
  22         </ol>
  23     </div>
  24
  25
  26 </div>
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36 <div ui-view></div>
  37
  38
  39
  40 <style>
  41     .stepsContent {
  42         display: flex;
  43         flex-direction: row;
  44         justify-content: space-around;
  45         margin-left: 120px;
  46         margin-top: 100px;
  47     }
  48
  49     .stepItem {
  50         display: flex;
  51         flex-direction: column;
  52     }
  53
  54     .nextButton {
  55         margin-left: 500px;
  56     }
  57
  58     .progressDefine {
  59         list-style: none;
  60         margin: 0;
  61         padding: 0;
  62         display: table;
  63         table-layout: fixed;
  64         width: 100%;
  65         color: #849397;
  66     }
  67
  68     .progressDefine>li {
  69         position: relative;
  70         display: table-cell;
  71         text-align: center;
  72         font-size: 0.8em;
  73     }
  74
  75     .progressDefine>li:before {
  76         content: attr(data-step);
  77         display: block;
  78         margin: 0 auto;
  79         background: #DFE3E4;
  80         width: 3em;
  81         height: 3em;
  82         text-align: center;
  83         margin-bottom: 0.25em;
  84         line-height: 3em;
  85         border-radius: 100%;
  86         position: relative;
  87         z-index: 5;
  88     }
  89
  90     .progressDefine>li:after {
  91         content: '';
  92         position: absolute;
  93         display: block;
  94         background: #DFE3E4;
  95         width: 100%;
  96         height: 0.5em;
  97         top: 1.25em;
  98         left: 50%;
  99         margin-left: 1.5em\9;
 100         z-index: -1;
 101     }
 102
 103     .progressDefine>li:last-child:after {
 104         display: none;
 105     }
 106
 107     .progressDefine>li.is-complete {
 108         color: #e95420;
 109     }
 110
 111     .progressDefine>li.is-complete:before,
 112     .progressDefine>li.is-complete:after {
 113         color: #FFF;
 114         background: #e95420;
 115     }
 116
 117     .progressDefine>li.is-active {
 118         color: #3498DB;
 119     }
 120
 121     .progressDefine>li.is-active:before {
 122         color: #FFF;
 123         background: #3498DB;
 124     }
 125     /**
 126  * Needed for IE8
 127  */
 128
 129     .progressDefine__last:after {
 130         display: none !important;
 131     }
 132     /**
 133  * Size Extensions
 134  */
 135
 136     .progressDefine--medium {
 137         font-size: 1.5em;
 138     }
 139
 140     .progressDefine--large {
 141         font-size: 2em;
 142     }
 143     /**
 144  * Some Generic Stylings
 145  */
 146
 147     *,
 148     *:after,
 149     *:before {
 150         box-sizing: border-box;
 151     }
 152
 153     h1 {
 154         margin-bottom: 1.5em;
 155     }
 156
 157     .progressDefine {
 158         margin-bottom: 3em;
 159     }
 160
 161     a {
 162         color: #3498DB;
 163         text-decoration: none;
 164     }
 165
 166     a:hover {
 167         text-decoration: underline;
 168     }
 169     /*
 170     body {
 171         text-align: center;
 172         color: #444;
 173     }*/
 174 </style>