chronos-front/app/views/home.html

<div layout="column" layout-fill layout-align="top center">

    <p ng-show="DataShareBusiness.CurrentGroups.length == 0" class="welcome-message">
        Welcome to Chronos !
    </p>

    <p ng-show="getSheetCount() > 5">
        Too many elements to display, please select a sub group.
    </p>

    <div lu-busy="coursesView" class="col-xs-12 seven-cols">
        <div ng-repeat="day in days" class="col-sm-1 day-column"
            ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
            <div class="day-column-header day-column-header-day">{{ day.day }}</div>
            <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
            <div class="day-column-courses">
                <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)"
                     ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
                     'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
                     'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
                     'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
                    {{ course.Name }}
                </div>
            </div>
        </div>
    </div>

</div>