Advertisement
Guest User

Untitled

a guest
Mar 20th, 2019
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.89 KB | None | 0 0
  1. .flex, .cards, .card {
  2. display: flex;
  3. }
  4.  
  5. .flex {
  6. flex-wrap:wrap;
  7. margin-bottom: 20px;
  8. }
  9.  
  10. .cards, .card {
  11. align-items:center;
  12. }
  13.  
  14. .cards {
  15. padding: 1em;
  16. background-color: $color-lightest;
  17. box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
  18. }
  19.  
  20. .card {
  21. justify-content: space-around;
  22. width:100%;
  23.  
  24. .card-img {
  25. margin: 10px;
  26. width: 25%;
  27. text-align:center;
  28. }
  29.  
  30. .card-content {
  31. padding: 10px;
  32. width: 65%;
  33. }
  34.  
  35. .card-status {
  36. width:10%;
  37. }
  38. }
  39.  
  40. .finished {
  41. color: $success;
  42. }
  43.  
  44. .overdue {
  45. color: $overdue;
  46. }
  47.  
  48. .pending {
  49. color: $due-today;
  50. }
  51.  
  52. //************************************MEDIA QUERIES************************************//
  53.  
  54. @media screen and (max-width: 768px) {
  55. .flex {
  56. align-items:center;
  57. flex-direction:column;
  58. }
  59.  
  60. .cards {
  61. width: 75%;
  62. margin:1%;
  63. }
  64.  
  65. .cards:first-of-type {
  66. margin-top: 0;
  67. }
  68.  
  69. .cards:last-of-type {
  70. margin-bottom: 0;
  71. }
  72. }
  73.  
  74. @media screen and (min-width: 769px) {
  75. .cards {
  76. width: 49%;
  77. margin: 1%;
  78. }
  79.  
  80. .cards:nth-of-type(even) {
  81. margin-right: 0;
  82. }
  83.  
  84. .cards:nth-of-type(odd) {
  85. margin-left: 0;
  86. }
  87. }
  88.  
  89. <div class="flex" ng-init="init(user.sys_id)">
  90. <!--<div class="cards" ng-repeat="task in data.tasks | orderBy: ['order']">-->
  91. <div class="cards" ng-repeat="task in data.tasks | orderBy: ['due_date']" ng-if="!task.finished">
  92. <div class="card" ng-click="c.onWidget(task);">
  93. <!--<i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>-->
  94. <div class="card-img">
  95. <i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x overdue" aria-hidden="true"></i>
  96. <i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x pending" aria-hidden="true"></i>
  97. </div>
  98. <div class="card-content">
  99. <h4>
  100. <!--<a href="?id=hri_task_details&table=sn_hr_core_task&sys_id={{task.sys_id}}" id="task_{{$index}}">{{::task.short_description}}</a>-->
  101. <a ng-click="">{{::task.short_description}}</a>
  102. </h4>
  103. <p class="text-normal">${For:} {{::task.taskInfo.subject_person}}</p>
  104. <span ng-if="!task.finished">
  105. <span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
  106. <span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
  107. </span>
  108. </span>
  109. <!--<span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>-->
  110. </div>
  111. <div class="card-status">
  112. <i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm far fa-square fa-2x overdue"></i>
  113. <i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm far fa-square fa-2x pending"></i>
  114. <!--<i alt="${Completed}" ng-if="task.finished" class="m-l-sm far fa-check-square fa-2x finished"></i>-->
  115. </div>
  116. </div>
  117. </div>
  118. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement