fix buttons, percents, orders for lessons, tasks

Author: Awakich

projects/social_platform/src/app/office/courses/detail/course-detail.component.html

@@ -26,7 +26,7 @@ <h1 class="info__title text-body-12">{{ course()!.title }}</h1>
           size="big"
           customTypographyClass="text-body-12"
           appearance="outline"
-          >{{ isTaskDetail() ? "назад к модулю?" : "назад" }}</app-button
+          >{{ isTaskDetail() ? "назад к модулю" : "назад" }}</app-button
         >
 
         <app-button

projects/social_platform/src/app/office/courses/detail/course-detail.component.scss

@@ -56,8 +56,10 @@ $detail-bar-mb: 12px;
     z-index: 100;
     display: block;
     cursor: pointer;
-    background-color: var(--white);
     border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     &--program {
       bottom: 15px;

projects/social_platform/src/app/office/courses/detail/info/info.component.html

@@ -14,10 +14,13 @@
       </div>
 
       <section class="course__content">
-        <div class="course__progress">
+        <div
+          class="course__progress"
+          [class.course__progress--complete]="courseStructure()!.percent === 100"
+        >
           <p class="text-body-12">прогресс по курсу</p>
           <p class="text-body-12 course__progress--percent">{{ courseStructure()!.percent }}%</p>
-          <div class="course__progress--cover" [style.width]="courseStructure()!.percent"></div>
+          <div class="course__progress--cover" [style.width.%]="courseStructure()!.percent"></div>
         </div>
 
         <div class="course__modules">

projects/social_platform/src/app/office/courses/detail/info/info.component.scss

@@ -49,6 +49,7 @@
     height: 48px;
     padding: 10px;
     margin-bottom: 18px;
+    overflow: hidden;
     text-align: center;
     background-color: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
@@ -62,18 +63,24 @@
       background-color: var(--accent);
       border-radius: var(--rounded-lg);
       opacity: 0.15;
-
-      &--complete {
-        background-color: var(--green-dark);
-      }
     }
 
     &--percent {
+      position: relative;
+      z-index: 1;
       color: var(--green-dark);
     }
 
     &--complete {
-      color: var(--black);
+      background-color: var(--green-light);
+
+      .course__progress--percent {
+        color: var(--black);
+      }
+
+      .course__progress--cover {
+        background-color: var(--green-dark);
+      }
     }
   }
 

projects/social_platform/src/app/office/courses/lesson/complete/complete.component.html

@@ -10,7 +10,7 @@
     </div>
 
     <app-button customTypographyClass="text-body-12" size="medium" (click)="routeToCourses()"
-      >отлчино</app-button
+      >отлично</app-button
     >
   </div>
 </div>

projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.html

@@ -23,7 +23,7 @@
 
   <div class="radio__content">
     @if (!data.imageUrl) {
-    <p class="radio__answer text-body-12">задание {{ data.id }}</p>
+    <p class="radio__answer text-body-12">задание {{ data.order }}</p>
     }
     <ul class="radio__list">
       <p class="radio__title text-body-12">{{ data.bodyText | truncate: 110 }}</p>

projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.html

@@ -2,7 +2,7 @@
 
 <div class="write-task" [class.write-task--hasVideo]="hasVideoUrl()">
   <div class="write-task__header">
-    <p class="text-body-12 write-task__task">задание {{ data.id }}</p>
+    <p class="text-body-12 write-task__task">задание {{ data.order }}</p>
     @if (!hasVideoUrl() && !data.imageUrl) {
     <p class="write-task__text text-body-12-bold">{{ data.title | truncate: 80 }}</p>
     }

projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.html

@@ -49,7 +49,7 @@
       <li class="expandable__item" [routerLink]="['lesson', lesson.id]">
         <div class="expandable__item--inner">
           <span class="topic__number text-body-10"
-            >Урок {{ lesson.id }}.
+            >Урок {{ lesson.order }}.
             <span class="topic__name text-body-10">{{ lesson.title }}</span></span
           >
           <p class="topic__levels text-body-10">

projects/social_platform/src/styles/_colors.scss

@@ -29,6 +29,7 @@
   // FUNCTIONAL
   --green: #88c9a1;
   --green-dark: #297373;
+  --green-light: #e3f0e8;
   --lime: #d6ff54;
   --red: #d48a9e;
   --red-dark: #{color.adjust(#d48a9e, $blackness: 10%)};