package.json

@@ -47,7 +47,6 @@
     "ngx-hijri-lib": "^1.0.6",
     "ngx-moment": "^3.3.0",
     "ngx-pagination": "^3.2.1",
-    "ngx-quill": "^3.0.0",
     "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^9.1.1",
     "rxjs": "~6.3.3",

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -30,7 +30,7 @@ input,button {
 }
 
 .internalPage-w .internalHeader-w .notificationList-w li {
-    display: inline-block; 
+    display: inline-block;
     margin: 0 10px;
 }
 
@@ -89,7 +89,7 @@ input,button {
 .dateW {
     color: #fff;
     text-shadow: 0px 0px 2px #000;
-    font-weight: bold;  
+    font-weight: bold;
 }
 
 .internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
@@ -322,7 +322,7 @@ input,button {
 
 .eventPart-w .event {
     width: 100%;
-    height: 50px;
+    height: 55px;
     background-color: #f3f0f0;
     border-radius: 10px;
 }
@@ -343,7 +343,7 @@ input,button {
 }
 
 .eventPart-w .event .next{
-    color: green;
+    color: #007A71;
     padding: 10px 0;
 }
 
@@ -380,7 +380,7 @@ input,button {
 .contentsData-w .joinUsEn-w .joinHeading-w {
     width: 100%;
     height: 50px;
-    color: #00a99d;
+    color: #007A71;
     text-shadow: 0px 0px 1px;
     background-color: #f7f7f7;
     box-shadow: 1px 1px 6px #2525;
@@ -469,7 +469,7 @@ input,button {
     text-align: center;
     background-color: #f7f7f7;
     font-size: 18px;
-    color: #03b0b3;
+    color: #007A71;
     text-shadow: 0 0 1px;
 }
 .sharingEvent-w .content,
@@ -495,7 +495,7 @@ input,button {
 }
 
 .sharingEvent-w .content .event {
-    color: #00a99d;
+    color: #007A71;
 }
 
 .secondServices-w {
@@ -583,7 +583,7 @@ input,button {
 .tabs .lastTab-w .menuTab-w ul li {
     display: inline-block;
     margin: 0 10px;
-    padding: 0 10px;
+    padding: 0 50px;
     border-left: 1px solid #bda380;
     cursor: pointer;
     color: #03b0b3;
@@ -636,7 +636,7 @@ input,button {
     width: 100%;
     display: inline-block;
     box-shadow: 0 0 6px #ccc;
-} 
+}
 
 .tabs .recods .recordsContent-w ol {
     width: 100%;
@@ -692,8 +692,3 @@ input,button {
     background-color: #03b0b3 !important;
     color: #fff !important;
 }
-
-
-
-
-

src/app/Internal-Page/internal-page-content/internal-page-content.component.html

@@ -1,380 +1,382 @@
 
 
-    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
-                <div class="servicesContent-w">
-                    <div class="container">
-                        <div class="row">
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+  <div class="servicesContent-w">
+    <div class="container">
+      <div class="row">
 
-                            <div class="col-12 col-md-4">
-                                <div class="row">
-                                    <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                        <div class="serviceItem-w">
-                                            <a href="{{service.link}}" target="_blank">
-                                                <img src="{{authSer.pathImg + service.photo}}" />
-                                                <p>{{service.name}}</p>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="col-12 col-md-8">
-                                <div class="slider">
-                                    <ngb-carousel>
-                                        <ng-template *ngFor="let report of reportsData" ngbSlide>
-                                            <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
-                                            <div class="carousel-caption">
-                                            <p>{{report.description}}</p>
-                                            </div>
-                                        </ng-template>
-                                    </ngb-carousel>
-                                </div>
-                            </div>
+        <div class="col-12 col-md-4">
+          <div class="row">
+            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+              <div class="serviceItem-w">
+                <a href="{{service.link}}" target="_blank">
+                  <img src="{{authSer.pathImg + service.photo}}" />
+                  <p>{{service.name}}</p>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
 
-                        </div>
-                    </div>
+        <div class="col-12 col-md-8">
+          <div class="slider">
+            <ngb-carousel>
+              <ng-template *ngFor="let report of reportsData" ngbSlide>
+                <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
+                <div class="carousel-caption">
+                  <p>{{report.description}}</p>
                 </div>
+              </ng-template>
+            </ngb-carousel>
+          </div>
+        </div>
 
-                <div class="eventPart-w hide">
-                    <div class="container">
-                        <div class="event">
-                            <div class="row">
-                                <div class="col-12 col-sm-12 ol-md-4">
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-4">
-                                    <p class="now"> <img src="../../../assets/image/live.png" />  يعرض الأن :<span>{{live_event.name ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-4">
-                                    <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture.name ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+      </div>
+    </div>
+  </div>
 
-                <div class="contentsData-w">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-12 col-sm-12 col-md-4">
-                                <div class="joinUs-w">
-                                    <div class="joinHeader-w">
-                                        إنضم إلينا
-                                    </div>
-                                    <div class="joinHeading-w">
-                                        <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
-                                    </div>
-                                    <div class="dataContent">
-                                        <div class="row">
-                                            <div class="col-12 col-md-4">
-                                                <div class="joinUs-photo">
-                                                    <img src="{{authSer.pathImg + joinUs.photo}}" />
-                                                </div>
-                                            </div>
-                                            <div class="col-12 col-md-8">
-                                                <div class="profileData-w">
-                                                    <p>    الموظف :<span>{{joinUs.name}}</span></p>
-                                                    <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
-                                                    <p>   التاريخ :<span>{{joinUs.date}}</span></p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                             </div>
-                             <div class="col-12 col-md-8">
-                                <div class="sharingEvent-w">
-                                    <div class="sharingHeader-w">
-                                        <h2>مشاركه اللحظات</h2>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-12 col-md-6">
-                                            <div class="congeratolation">
-                                                <h2>التهاني</h2>
-                                            </div>
-                                            <div class="content">
-                                                <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
-                                                <p class="event">{{congratulations.name}}</p>
-                                                <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
-                                            </div>
-                                        </div>
-                                        <div class="col-12 col-md-6">
-                                            <div class="sadDead-w">
-                                                <h2>التعازي</h2>
-                                            </div>
-                                            <div class="content">
-                                                <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
-                                                <p class="event">{{condolences.name}}</p>
-                                                <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                             </div>
-                        </div>
+  <div class="eventPart-w hide">
+    <div class="container">
+      <div class="event">
+        <div class="row">
+          <div class="col-12 col-sm-12 ol-md-4">
+          </div>
+          <div class="col-12 col-sm-12 col-md-4">
+            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left: 35px;"/>  يعرض الأن :<span>{{live_event.name ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4">
+            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture.name ? next_lecture.name : 'لايوجد حدث لاحقا'}}</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-                    </div>
+  <div class="contentsData-w">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-4">
+          <div class="joinUs-w">
+            <div class="joinHeader-w">
+              إنضم إلينا
+            </div>
+            <div class="joinHeading-w">
+              <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
+            </div>
+            <div class="dataContent">
+              <div class="row">
+                <div class="col-12 col-md-4">
+                  <div class="joinUs-photo">
+                    <img src="{{authSer.pathImg + joinUs.photo}}" />
+                  </div>
                 </div>
-
-                <div class="secondServices-w">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
-                                <div class="contentSecondSer-w">
-                                    <div class="headerSer-w">
-                                        {{ser.name}}
-                                    </div>
-                                    <div class="contentSer">
-                                        <div class="row">
-                                            <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
-                                                <div class="fieldData-w text-center">
-                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
-                                                    <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="col-12 col-md-8">
+                  <div class="profileData-w">
+                    <p>    الموظف :<span>{{joinUs.name}}</span></p>
+                    <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
+                    <p>   التاريخ :<span>{{joinUs.date_of_employment_hij}}</span></p>
+                  </div>
                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-8">
+          <div class="sharingEvent-w">
+            <div class="sharingHeader-w">
+              <h2>مشاركة اللحظات</h2>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-6">
+                <div class="congeratolation">
+                  <h2>التهاني</h2>
+                </div>
+                <div class="content">
+                  <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
+                  <p class="event">{{congratulations.name}}</p>
+                  <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
+                </div>
+              </div>
+              <div class="col-12 col-md-6">
+                <div class="sadDead-w">
+                  <h2>التعازي</h2>
+                </div>
+                <div class="content">
+                  <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
+                  <p class="event">{{condolences.name}}</p>
+                  <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-                <div class="tabs">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-12 col-md-8">
-                                <div class="lastTab-w">
-                                    <div class="headerTab-w">
-                                        أخر التعاميم
-                                    </div>
-                                    <div class="menuTab-w">
-                                        <ul class="list-unstyled">
-                                            <li (click)="onGetData(0)">التعاميم الداخليه</li>
-                                            <li (click)="onGetData(1)">التعاميم الخارجيه</li>
-                                            <li (click)="onGetData(2)">السياسات</li>
-                                        </ul>
-                                    </div>
-                                    <div class="menuTabContent-w">
-                                        <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
-                                        <ol>
-                                            <li *ngFor="let data of tabsData">{{data.name}}</li>
-                                        </ol>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-12 col-md-4">
-                                <div class="recods">
-                                    <div class="headerRecords-w">
-                                        إحصائيات عامه - إنجازات
-                                    </div>
-                                    <div class="recordsContent-w">
-                                        <ol>
-                                            <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
-                                                <p>{{achiev.title}}</p>
-                                                <div *ngIf="i == expandedIndex">
-                                                    <div class="collapse">
-                                                        <div>
-                                                            <p>{{achiev.title}}</p>
-                                                            <p>{{achiev.descripton}}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                        </ol>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+    </div>
+  </div>
+
+  <div class="secondServices-w">
+    <div class="container" style="height: 560px;overflow: scroll;">
+      <div class="row">
+        <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+          <div class="contentSecondSer-w">
+            <div class="headerSer-w">
+              {{ser.name}}
+            </div>
+            <div class="contentSer" style="overflow: scroll;overflow-x: hidden;">
+              <div class="row" style="padding: 0px 10px;margin-left: 0px;margin-right: 0px;">
+                <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
+                  <a href="">
+                    <div class="fieldData-w text-center">
+                      <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                      <p style="color:#767676;font-size: 13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
                     </div>
+                  </a>
                 </div>
-    </ng-template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
+  <div class="tabs">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-md-8">
+          <div class="lastTab-w">
+            <div class="headerTab-w">
+              أخر التعاميم
+            </div>
+            <div class="menuTab-w">
+              <ul class="list-unstyled">
+                <li (click)="onGetData(0)">التعاميم الداخليه</li>
+                <li (click)="onGetData(1)">التعاميم الخارجيه</li>
+                <li (click)="onGetData(2)">السياسات</li>
+              </ul>
+            </div>
+            <div class="menuTabContent-w">
+              <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
+              <ol>
+                <li *ngFor="let data of tabsData">{{data.name}}</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-4">
+          <div class="recods">
+            <div class="headerRecords-w">
+              إحصائيات عامه - إنجازات
+            </div>
+            <div class="recordsContent-w">
+              <ol>
+                <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
+                  <p>{{achiev.title}}</p>
+                  <div *ngIf="i == expandedIndex">
+                    <div class="collapse">
+                      <div>
+                        <p>{{achiev.title}}</p>
+                        <p>{{achiev.descripton}}</p>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
 
-    <ng-template #englishTemplate>
-        <div class="servicesContent-w">
-            <div class="container">
-                <div class="row">
 
-                    <div class="col-12 col-md-4">
-                        <div class="row">
-                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                <div class="serviceItem-w">
-                                    <a href="{{service.link}}" target="_blank">
-                                        <img src="{{authSer.pathImg + service.photo}}" />
-                                        <p>{{service.name_en}}</p>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+<ng-template #englishTemplate>
+  <div class="servicesContent-w">
+    <div class="container">
+      <div class="row">
 
-                    <div class="col-12 col-md-8">
-                        <div class="slider">
-                            <ngb-carousel>
-                                <ng-template *ngFor="let report of reportsData" ngbSlide>
-                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
-                                    <div class="carousel-caption">
-                                    <p>{{report.description_en}}</p>
-                                    </div>
-                                </ng-template>
-                            </ngb-carousel>
-                        </div>
-                    </div>
+        <div class="col-12 col-md-4">
+          <div class="row">
+            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+              <div class="serviceItem-w">
+                <a href="{{service.link}}" target="_blank">
+                  <img src="{{authSer.pathImg + service.photo}}" />
+                  <p>{{service.name_en}}</p>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div class="col-12 col-md-8">
+          <div class="slider">
+            <ngb-carousel>
+              <ng-template *ngFor="let report of reportsData" ngbSlide>
+                <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
+                <div class="carousel-caption">
+                  <p>{{report.description_en}}</p>
                 </div>
-            </div>
+              </ng-template>
+            </ngb-carousel>
+          </div>
         </div>
 
-        <div class="eventPart-w hide">
-            <div class="container">
-                <div class="event">
-                    <div class="row">
-                        <div class="col-12 col-sm-12 ol-md-4">
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event.name ? live_event.name : ' now event now '}}</span></p>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture.name ? next_lecture.name : 'now event now'}}</span></p>
-                        </div>
-                    </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="eventPart-w hide">
+    <div class="container">
+      <div class="event">
+        <div class="row">
+          <div class="col-12 col-sm-12 ol-md-4">
+          </div>
+          <div class="col-12 col-sm-12 col-md-4">
+            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event.name ? live_event.name : ' now event now '}}</span></p>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4">
+            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture.name ? next_lecture.name : 'now event now'}}</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="contentsData-w">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-4">
+          <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
+            <div class="joinHeader-w">
+              Join Us
+            </div>
+            <div class="joinHeading-w">
+              <h2>Welcome to join the medical center</h2>
+            </div>
+            <div class="dataContent">
+              <div class="row">
+                <div class="col-12 col-md-4">
+                  <div class="joinUs-photo">
+                    <img src="{{authSer.pathImg + joinUs.photo}}" />
+                  </div>
                 </div>
+                <div class="col-12 col-md-8">
+                  <div class="profileData-w">
+                    <p> Employee : <span>{{joinUs.name_en}}</span></p>
+                    <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
+                    <p> Date : <span>{{joinUs.date ? joinUs.date : 'not found'}}</span></p>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
-
-        <div class="contentsData-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-12 col-md-4">
-                        <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
-                            <div class="joinHeader-w">
-                                 Join Us
-                            </div>
-                            <div class="joinHeading-w">
-                                <h2>Welcome to join the medical center</h2>
-                            </div>
-                            <div class="dataContent">
-                                <div class="row">
-                                    <div class="col-12 col-md-4">
-                                        <div class="joinUs-photo">
-                                            <img src="{{authSer.pathImg + joinUs.photo}}" />
-                                        </div>
-                                    </div>
-                                    <div class="col-12 col-md-8">
-                                        <div class="profileData-w">
-                                            <p> Employee : <span>{{joinUs.name_en}}</span></p>
-                                            <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
-                                            <p> Date : <span>{{joinUs.date ? joinUs.date : 'not found'}}</span></p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                     </div>
-                     <div class="col-12 col-md-8">
-                        <div class="sharingEvent-w">
-                            <div class="sharingHeader-w">
-                                <h2>Share moments</h2>
-                            </div>
-                            <div class="row">
-                                <div class="col-12 col-md-6">
-                                    <div class="congeratolation">
-                                        <h2>Congratulations</h2>
-                                    </div>
-                                    <div class="content">
-                                        <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
-                                        <p class="event">{{congratulations.name_en}}</p>
-                                        <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
-                                    </div>
-                                </div>
-                                <div class="col-12 col-md-6">
-                                    <div class="sadDead-w">
-                                        <h2>Condolences</h2>
-                                    </div>
-                                    <div class="content">
-                                        <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
-                                        <p class="event">{{condolences.name_en}}</p>
-                                        <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                     </div>
+        <div class="col-12 col-md-8">
+          <div class="sharingEvent-w">
+            <div class="sharingHeader-w">
+              <h2>Share moments</h2>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-6">
+                <div class="congeratolation">
+                  <h2>Congratulations</h2>
                 </div>
-
+                <div class="content">
+                  <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
+                  <p class="event">{{congratulations.name_en}}</p>
+                  <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
+                </div>
+              </div>
+              <div class="col-12 col-md-6">
+                <div class="sadDead-w">
+                  <h2>Condolences</h2>
+                </div>
+                <div class="content">
+                  <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
+                  <p class="event">{{condolences.name_en}}</p>
+                  <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
 
-        <div class="secondServices-w">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
-                        <div class="contentSecondSer-w">
-                            <div class="headerSer-w">
-                                {{ser.name_en}}
-                            </div>
-                            <div class="contentSer">
-                                <div class="row">
-                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
-                                        <div class="fieldData-w text-center">
-                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
-                                            <p>{{field.name_en ? field.name_en : 'Add Service'}}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+    </div>
+  </div>
+
+  <div class="secondServices-w">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+          <div class="contentSecondSer-w">
+            <div class="headerSer-w">
+              {{ser.name_en}}
+            </div>
+            <div class="contentSer">
+              <div class="row">
+                <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
+                  <div class="fieldData-w text-center">
+                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                    <p>{{field.name_en ? field.name_en : 'Add Service'}}</p>
+                  </div>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
+    </div>
+  </div>
 
-        <div class="tabs">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-8">
-                        <div class="lastTab-w">
-                            <div class="headerTab-w">
-                                Latest Circulars
-                            </div>
-                            <div class="menuTab-w">
-                                <ul class="list-unstyled">
-                                    <li (click)="onGetData(0)"> Internal Circulars</li>
-                                    <li (click)="onGetData(1)">External Circulars</li>
-                                    <li (click)="onGetData(2)">Policies</li>
-                                </ul>
-                            </div>
-                            <div class="menuTabContent-w">
-                                <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
-                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                                    <li *ngFor="let data of tabsData">{{data.name_en}}</li>
-                                </ol>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <div class="recods">
-                            <div class="headerRecords-w">
-                                General Statistics - Achievements
-                            </div>
-                            <div class="recordsContent-w">
-                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
-                                        <p>{{achiev.title_en}}</p>
-                                        <div *ngIf="i == expandedIndex">
-                                            <div class="collapse">
-                                                <div>
-                                                    <p>{{achiev.title_en}}</p>
-                                                    <p>{{achiev.descripton_en}}</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </li>
-                                </ol>
-                            </div>
-                        </div>
+  <div class="tabs">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-md-8">
+          <div class="lastTab-w">
+            <div class="headerTab-w">
+              Latest Circulars
+            </div>
+            <div class="menuTab-w">
+              <ul class="list-unstyled">
+                <li (click)="onGetData(0)"> Internal Circulars</li>
+                <li (click)="onGetData(1)">External Circulars</li>
+                <li (click)="onGetData(2)">Policies</li>
+              </ul>
+            </div>
+            <div class="menuTabContent-w">
+              <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
+              <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                <li *ngFor="let data of tabsData">{{data.name_en}}</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-4">
+          <div class="recods">
+            <div class="headerRecords-w">
+              General Statistics - Achievements
+            </div>
+            <div class="recordsContent-w">
+              <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
+                  <p>{{achiev.title_en}}</p>
+                  <div *ngIf="i == expandedIndex">
+                    <div class="collapse">
+                      <div>
+                        <p>{{achiev.title_en}}</p>
+                        <p>{{achiev.descripton_en}}</p>
+                      </div>
                     </div>
-                </div>
+                  </div>
+                </li>
+              </ol>
             </div>
+          </div>
         </div>
-    </ng-template>
+      </div>
+    </div>
+  </div>
+</ng-template>

src/app/Internal-Page/internal-page/internal-page.component.css

@@ -30,7 +30,7 @@ input,button {
 }
 
 .internalPage-w .internalHeader-w .notificationList-w li {
-    display: inline-block; 
+    display: inline-block;
     margin: 0 10px;
 }
 
@@ -89,7 +89,7 @@ input,button {
 .dateW {
     color: #fff;
     text-shadow: 0px 0px 2px #000;
-    font-weight: bold;  
+    font-weight: bold;
 }
 
 .internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
@@ -512,7 +512,7 @@ input,button {
 
 .secondServices-w .contentSecondSer-w .headerSer-w {
     width: 100%;
-    padding: 13px 0;
+    padding-top: 20px;
     background-color: #bda380;
     text-align: center;
     color: #fff;
@@ -520,7 +520,7 @@ input,button {
 
 .secondServices-w .contentSecondSer-w .titleSer-w {
     width: 100%;
-    padding: 13px 0;
+    /* padding: 13px 0; */
     background-color: #f7f7f7;
     box-shadow: 0 0 6px #ccc;
     text-align: center;
@@ -636,7 +636,7 @@ input,button {
     width: 100%;
     display: inline-block;
     box-shadow: 0 0 6px #ccc;
-} 
+}
 
 .tabs .recods .recordsContent-w ol {
     width: 100%;
@@ -692,8 +692,3 @@ input,button {
     background-color: #03b0b3 !important;
     color: #fff !important;
 }
-
-
-
-
-

src/styles.css

@@ -11,11 +11,12 @@
 body {
     direction: rtl;
     font-family: 'Cairo', sans-serif;
+    color: #CAB59A;
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 input:-webkit-autofill:active  {
     -webkit-box-shadow: 0 0 0 30px #fff inset;
 }
@@ -44,7 +45,7 @@ input:-webkit-autofill:active  {
 .marginTop-w {
     margin: 10px 0;
 }
-/* 
+/*
 input.ng-invalid {
   border: 1px solid red;
 }
@@ -116,7 +117,7 @@ select.ng-invalid.ng-touched {
     bottom: 12px;
     left: 12px;
   }
-  
+
   /* toast styles */
   .toast-title {
     font-weight: bold;
@@ -317,7 +318,7 @@ select.ng-invalid.ng-touched {
   .activeLink {
     color: #252525 !important;
   }
- 
+
   .spanReqired-w {
     color: red;
   }
@@ -370,4 +371,4 @@ select.ng-invalid.ng-touched {
   } */
   .ngx-pagination .current {
     background-color: #00a99d !important;
-  }
+  }