Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .flex, .cards, .card {
- display: flex;
- }
- .flex {
- flex-wrap:wrap;
- margin-bottom: 20px;
- }
- .cards, .card {
- align-items:center;
- }
- .cards {
- padding: 1em;
- background-color: $color-lightest;
- box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
- }
- .card {
- justify-content: space-around;
- width:100%;
- .card-img {
- margin: 10px;
- width: 25%;
- text-align:center;
- }
- .card-content {
- padding: 10px;
- width: 65%;
- }
- .card-status {
- width:10%;
- }
- }
- .finished {
- color: $success;
- }
- .overdue {
- color: $overdue;
- }
- .pending {
- color: $due-today;
- }
- //************************************MEDIA QUERIES************************************//
- @media screen and (max-width: 768px) {
- .flex {
- align-items:center;
- flex-direction:column;
- }
- .cards {
- width: 75%;
- margin:1%;
- }
- .cards:first-of-type {
- margin-top: 0;
- }
- .cards:last-of-type {
- margin-bottom: 0;
- }
- }
- @media screen and (min-width: 769px) {
- .cards {
- width: 49%;
- margin: 1%;
- }
- .cards:nth-of-type(even) {
- margin-right: 0;
- }
- .cards:nth-of-type(odd) {
- margin-left: 0;
- }
- }
- <div class="flex" ng-init="init(user.sys_id)">
- <!--<div class="cards" ng-repeat="task in data.tasks | orderBy: ['order']">-->
- <div class="cards" ng-repeat="task in data.tasks | orderBy: ['due_date']" ng-if="!task.finished">
- <div class="card" ng-click="c.onWidget(task);">
- <!--<i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>-->
- <div class="card-img">
- <i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x overdue" aria-hidden="true"></i>
- <i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x pending" aria-hidden="true"></i>
- </div>
- <div class="card-content">
- <h4>
- <!--<a href="?id=hri_task_details&table=sn_hr_core_task&sys_id={{task.sys_id}}" id="task_{{$index}}">{{::task.short_description}}</a>-->
- <a ng-click="">{{::task.short_description}}</a>
- </h4>
- <p class="text-normal">${For:} {{::task.taskInfo.subject_person}}</p>
- <span ng-if="!task.finished">
- <span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
- <span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
- </span>
- </span>
- <!--<span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>-->
- </div>
- <div class="card-status">
- <i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm far fa-square fa-2x overdue"></i>
- <i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm far fa-square fa-2x pending"></i>
- <!--<i alt="${Completed}" ng-if="task.finished" class="m-l-sm far fa-check-square fa-2x finished"></i>-->
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement