desktop tab external

src/app/External-Page/external-events/external-events.component.css

@@ -5,7 +5,7 @@
 
 .eventContent-w h3 {
     width: 100%;
-    background-color: #c1e6e4;
+    background-color: #EEF8F7;
     font-size: 18px;
     margin: 0;
     padding: 12px 0;

src/app/External-Page/external-page-content/external-page-content.component.css

@@ -5,7 +5,7 @@ input,button {
 .externalPageContentt-w {
     width: 100%;
     display: inline-block;
-    padding: 20px 0;
+    padding-bottom: 20px;
 }
 
 .externalPageContentt-w .sliderNews-w {
@@ -33,15 +33,13 @@ input,button {
 }
 
 .sliderNews-w .carousel-caption .more {
-    width: 90px;
-    padding: 5px;
+    width: 70px;
     background-color: #00a99d;
     border: 1px solid #00a99d;
-    border-radius: 5px;
     color: #fff;
     position: absolute;
-    left: 10px;
-    bottom: 20px;
+    left: 50px;
+    bottom: 32px;
     cursor: pointer;
     transition: all 0.5s;
 }
@@ -64,6 +62,7 @@ input,button {
     padding: 5px 0;
     background-color: #e5f7f6;
     margin: 10px 0;
+    margin-top: 15px;
 }
 
 
@@ -154,7 +153,6 @@ input,button {
 
 .externalServices-w {
     width: 100%;
-    padding: 20px 0;
 }
 
 .externalServices-w a {
@@ -165,18 +163,20 @@ input,button {
     width: 100%;
     height: 150px;
     /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
-    background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
+    background: radial-gradient(farthest-corner at 129px 53px,   #4bcec7 0%, #00a99d 100%);
     margin: 10px 0;
     transition: all 0.5s;
 }
 
 .externalServices-w .item:hover{
-    background: radial-gradient(farthest-corner at 129px 53px,     #4bcec7 0%, #00a99d 100%);
+    background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
 }
 
 .externalServices-w .item img {
     width: 50px;
+    height: 50px;
     margin: 10px 0;
+    margin-top: 30px;
 }
 
 
@@ -190,6 +190,7 @@ input,button {
 .lectureService-w {
     width: 100%;
     display: inline-block;
+    margin: 10px 0;
 }
 
 .lectureService-w .advertisimentServices-w {
@@ -232,7 +233,7 @@ input,button {
 
 .lectureService-w .visitingTime-w .monthRecord-w h1 {
     font-size: 18px;
-    background-color: #c1e6e4;
+    background-color: #EEF8F7;
     color: #bda380;
     padding: 12px 0;
     margin: 0;
@@ -240,7 +241,7 @@ input,button {
 
 .lectureService-w .visitingTime-w .achiev h1 {
     font-size: 18px;
-    background-color: #c1e6e4;
+    background-color: #EEF8F7;
     color: #bda380;
     padding: 12px 0;
     margin: 0;
@@ -269,6 +270,7 @@ input,button {
 .lectureService-w .visitingTime-w .monthRecord-w .body ul li {
     display: inline-block;
     margin: 0 40px;
+    margin-top: 25px;
     position: relative;
 }
 
@@ -291,6 +293,7 @@ input,button {
 .lectureService-w .visitingTime-w .achiev .body ul li {
     display: inline-block;
     margin: 0 40px;
+    margin-top: 25px;
     position: relative;
 }
 
@@ -315,6 +318,7 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w {
     width: 100%;
+    margin-top: -30px;
 }
 
 
@@ -341,6 +345,7 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w .records .body ul {
     padding: 0;
+    margin: 0 20px;
 }
 
 .externalPageContentt-w .recordsContent-w .records .body ul li {
@@ -348,18 +353,18 @@ input,button {
     border-bottom: 1px solid #ccc;
     color: #00a99d;
     font-size: 16px;
+    padding: 5px 0;
     margin: 10px 0;
-    padding: 5px 10px;
 }
 
 .externalPageContentt-w .recordsContent-w .records .body ul li span {
     color: #888;
-    margin: 0 10px;
+    margin: 0 7px;
 }
 
 .externalPageContentt-w .recordsContent-w .records h1{
     font-size: 18px;
-    background-color: #c1e6e4;
+    background-color: #EEF8F7;
     color: #bda380;
     padding: 12px 0;
     margin: 0;
@@ -368,7 +373,7 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w .medical h1{
     font-size: 18px;
-    background-color: #c1e6e4;
+    background-color: #EEF8F7;
     color: #bda380;
     padding: 12px 0;
     margin: 0;
@@ -410,6 +415,7 @@ input,button {
     z-index: 10;
     padding-top: 20px;
     padding-bottom: 20px;
+    padding: 20px 10px;
     color: #fff;
     text-align: center;
     right: 0;
@@ -459,7 +465,7 @@ input,button {
 .externalPageContentt-w .maps {
     width: 100%;
     display: inline-block;
-    padding: 40px 0;
+    padding: 15px 0;
     margin: 5px 0;
 }
 
@@ -553,6 +559,7 @@ input,button {
 
     .lectureService-w #carouselExample .carousel-inner {
         margin: 20px 0;
+        margin-top: 5px;
     }
     
     .lectureService-w #carouselExample .carousel-inner .carousel-item img {
@@ -566,6 +573,22 @@ input,button {
     }
   
 
+    .moreNews {
+        border: none;
+        position: absolute;
+        left: 10px;
+        bottom: 5px;
+        background: #e69198;
+        color: #fff;
+        font-size: 15px;
+        transition: all 0.5s;
+        cursor: pointer;
+    }
+
+    .moreNews:hover {
+        background: #bd7379;
+    }
+
   
 
 

src/app/External-Page/external-page-content/external-page-content.component.html

@@ -1,124 +1,126 @@
 <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
     <div class="externalPageContentt-w">
         <div class="container">
-          <div class="row">
-      
-            <div class="col-12">
-              <div class="sliderNews-w">
-                <div id="demo" class="carousel slide" data-ride="carousel">
-                  <ul class="carousel-indicators">
-                      <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
-                  </ul>
-                  <div class="carousel-inner">
-                      <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                        <img src="{{authSer.pathImg + report['photo'].photo}}" />
-                        <div class="carousel-caption d-none d-md-block">
-                            <h5>{{report.title}}</h5>
-                            <p [innerHtml] = "report.description"></p>
-                            <button class="more" (click)="goPageNew(report)">المزيد</button>
+          <div class="contentPage-w">
+            <div class="row">
+              <div class="col-12">
+                <div class="sliderNews-w">
+                  <div id="demo" class="carousel slide" data-ride="carousel">
+                    <ul class="carousel-indicators">
+                        <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                    </ul>
+                    <div class="carousel-inner">
+                        <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                          <img src="{{authSer.pathImg + report['photo'].photo}}" />
+                          <div class="carousel-caption d-none d-md-block">
+                              <h5>{{report.title}}</h5>
+                              <p [innerHtml] = "report.description"></p>
+                              <button class="more" (click)="goPageNew(report)">المزيد</button>
+                              <button class="moreNews" (click)="moreNewsPage()">المزيد من الأخبار</button>
+                          </div>
                         </div>
-                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-      
-            <div class="col-12">
-              <div class="eventPart-w">
-                  <div id="demo1" class="carousel slide" data-ride="carousel">
-                      <div class="carousel-inner">
-                          <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                              <div class="carousel-caption">
-                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p>
-                              </div>   
-                          </div>
-                          <button class="moreEvent-w" (click)="oneventTable()">المزيد</button>
-                      </div>
-                  </div> 
+        
+              <div class="col-12">
+                <div class="eventPart-w">
+                    <div id="demo1" class="carousel slide" data-ride="carousel">
+                        <div class="carousel-inner">
+                            <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                <div class="carousel-caption">
+                                    <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p>
+                                </div>   
+                            </div>
+                            <button class="moreEvent-w" (click)="oneventTable()">المزيد</button>
+                        </div>
+                    </div> 
+                </div>
               </div>
-            </div>
-      
-            <div class="col-12">
-              <div class="externalServices-w">
-                <div class="row">
-                  <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
-                    <a href="{{service.link}}">
-                      <div class="item text-center">
-                        <img src="{{authSer.pathImg + service.photo}}" />
-                        <p>{{service.name}}</p>
-                      </div>
-                    </a>
+        
+              <div class="col-12">
+                <div class="externalServices-w">
+                  <div class="row">
+                    <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+                      <a href="{{service.link}}">
+                        <div class="item text-center">
+                          <img src="{{authSer.pathImg + service.photo}}" />
+                          <p>{{service.name}}</p>
+                        </div>
+                      </a>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-
-            <div class="col-12">
-              <div class="lectureService-w">
-                <div class="row">
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-                    <div class="advertisimentServices-w text-center">
-                      <h1>خدمات إعلانيه</h1>
-                      <div class="body">
-                        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
-                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
-                              <div class="carousel-item col-md-4" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
-                                  <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
-                              </div>
+  
+              <div class="col-12">
+                <div class="lectureService-w">
+                  <div class="row">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="advertisimentServices-w text-center">
+                        <h1>خدمات إعلانيه</h1>
+                        <div class="body">
+                          <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
+                            <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                                <div class="carousel-item col-md-4" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
+                                    <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
+                                </div>
+                            </div>
+                            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+                                <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                            <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
+                                <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                                <span class="sr-only">Next</span>
+                            </a>
                           </div>
-                          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
-                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
-                              <span class="sr-only">Previous</span>
-                          </a>
-                          <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
-                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
-                              <span class="sr-only">Next</span>
-                          </a>
-                        </div>
-
-                        <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
-                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
-                            <div class="carousel-item col-md-4" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
-                                <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
+  
+                          <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
+                            <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                              <div class="carousel-item col-md-4" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
+                                  <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
+                              </div>
                             </div>
+                            <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
+                                <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                            <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
+                                <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                                <span class="sr-only">Next</span>
+                            </a>
                           </div>
-                          <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
-                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
-                              <span class="sr-only">Previous</span>
-                          </a>
-                          <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
-                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
-                              <span class="sr-only">Next</span>
-                          </a>
+  
+  
                         </div>
-
-
                       </div>
                     </div>
-                  </div>
-                  <div class="col-12 col-sm-12 col-md-8 col-lg-8">
-                    <div class="visitingTime-w">
-                      <h1>مواعيد الزياره</h1>
-                      <div class="row">
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="monthRecord-w text-center">
-                            <h1>أقسام التنويم</h1>
-                            <div class="body">
-                              <ul class="list-unstyled">
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
-                              </ul>
+                    <div class="col-12 col-sm-12 col-md-8 col-lg-8">
+                      <div class="visitingTime-w">
+                        <h1>مواعيد الزياره</h1>
+                        <div class="row">
+                          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                            <div class="monthRecord-w text-center">
+                              <h1>أقسام التنويم</h1>
+                              <div class="body">
+                                <ul class="list-unstyled">
+                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
+                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
+                                </ul>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="achiev text-center">
-                            <h1>العنايه المركزه</h1>
-                            <div class="body">
-                              <ul class="list-unstyled">
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
-                              </ul>
+                          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                            <div class="achiev text-center">
+                              <h1>العنايه المركزه</h1>
+                              <div class="body">
+                                <ul class="list-unstyled">
+                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
+                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
+                                </ul>
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -127,67 +129,67 @@
                   </div>
                 </div>
               </div>
-            </div>
-
-
-            <div class="col-12">
-              <div class="recordsContent-w">
-                <div class="row">
-                    <div class="col-12 col-sm-12 col-md-5">
-                      <div class="datePicker-w">
-                        <h1>تقويم الأحداث</h1>
-                        <div class="body">
-                          <app-external-events></app-external-events>
+  
+  
+              <div class="col-12">
+                <div class="recordsContent-w">
+                  <div class="row">
+                      <div class="col-12 col-sm-12 col-md-5">
+                        <div class="datePicker-w">
+                          <h1>تقويم الأحداث</h1>
+                          <div class="body">
+                            <app-external-events></app-external-events>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div class="col-12 col-sm-12 col-md-7 col-lg-7">
-                      <h1>إحصائيات عامه وإنجازات</h1>
-                      <div class="row">
-                        <div class="col-12 col-sm-12 col-md-6">
-                          <div class="records">
-                            <h1> إحصائيات شهر  {{recordsOfMonth.statistics_month}}</h1>
-                            <div class="body">
-                              <ul class="list-unstyled">
-                                <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> <span>{{static.value}}</span>{{static.name}}</li>
-                              </ul>
+                      <div class="col-12 col-sm-12 col-md-7 col-lg-7">
+                        <h1>إحصائيات عامه وإنجازات</h1>
+                        <div class="row">
+                          <div class="col-12 col-sm-12 col-md-6">
+                            <div class="records">
+                              <h1> إحصائيات شهر  {{recordsOfMonth.statistics_month}}</h1>
+                              <div class="body">
+                                <ul class="list-unstyled">
+                                  <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> <span>{{static.value}}</span>{{static.name}}</li>
+                                </ul>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-6">
-                          <div class="medical">
-                            <h1>إنجاز طبي</h1>
-                            <div class="body">
-                              <div id="demo2" class="carousel slide" data-ride="carousel">
-                                <ul class="carousel-indicators">
-                                    <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
-                                </ul>
-                                <div class="carousel-inner">
-                                    <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                                        <div class="carousel-caption">
-                                            <p [innerHtml]="achievement.description"></p>
-                                        </div>   
-                                    </div>
-                                </div>
-                              </div> 
+                          <div class="col-12 col-sm-12 col-md-6">
+                            <div class="medical">
+                              <h1>إنجاز طبي</h1>
+                              <div class="body">
+                                <div id="demo2" class="carousel slide" data-ride="carousel">
+                                  <ul class="carousel-indicators">
+                                      <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                  </ul>
+                                  <div class="carousel-inner">
+                                      <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                          <div class="carousel-caption">
+                                              <p [innerHtml]="achievement.description"></p>
+                                          </div>   
+                                      </div>
+                                  </div>
+                                </div> 
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
+                </div>
               </div>
-            </div>
-
-            <div class="col-12">
-              <div class="maps">
-                <h1>إتصل بنا</h1>
-                <agm-map [latitude]="lat" [longitude]="lng">
-                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-                  </agm-map>
+  
+              <div class="col-12">
+                <div class="maps">
+                  <h1>إتصل بنا</h1>
+                  <agm-map [latitude]="lat" [longitude]="lng">
+                      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+                    </agm-map>
+                </div>
               </div>
+        
             </div>
-      
           </div>
         </div>
       </div>
@@ -212,6 +214,7 @@
                             <h5>{{report.title_en}}</h5>
                             <p [innerHtml] = "report.description_en"></p>
                             <button class="more" (click)="goPageNew(report)">More</button>
+                            <button class="moreNews" (click)="moreNewsPage()">More News</button>
                         </div>
                       </div>
                   </div>

src/app/External-Page/external-page-content/external-page-content.component.ts

@@ -2,7 +2,7 @@ import { Subscription } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { ExternalPageService } from './../../shared/external-page.service';
-import { Component, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {MapsAPILoader} from '@agm/core';
 import * as $ from 'jquery';
 import { NgxSpinnerService } from 'ngx-spinner';
@@ -12,7 +12,7 @@ import { NgxSpinnerService } from 'ngx-spinner';
   templateUrl: './external-page-content.component.html',
   styleUrls: ['./external-page-content.component.css']
 })
-export class ExternalPageContentComponent implements OnInit, OnDestroy, AfterContentInit {
+export class ExternalPageContentComponent implements OnInit, OnDestroy {
 
   constructor(private externalService: ExternalPageService, 
     private spinner: NgxSpinnerService,
@@ -105,10 +105,8 @@ export class ExternalPageContentComponent implements OnInit, OnDestroy, AfterCon
     this.contentSubscription.unsubscribe();
   }
 
-  ngAfterContentInit() {
-    // $(document).ready(function(){
-    //   $('.carousel').carousel(); 
-    // })
+  moreNewsPage() {
+    this.router.navigate(['/ExternalPage/moreNews']);
   }
 
 

src/app/External-Page/external-page-header/external-page-header.component.css

@@ -162,11 +162,12 @@ input,button {
     cursor: pointer;
     color: #02635c;
     outline: none;
-        text-shadow: 0px 0px 2px #0000002e;
+    text-shadow: 0px 0px 2px #0000002e;
     font-weight: bold;
     /*margin-right: -25px;*/
     font-size: 15px;
-    margin-top: 2px;
+    margin-top: 4px;
+    margin-right: -28px;
 }
 
 .dateW {
@@ -498,45 +499,61 @@ input,button {
   }
 
   .menuHeaderEn-w li a {
-      float: left;
-      margin: 0 15px;
-      color: #049288;
-      transition: all 0.5s;
+
+      font-size: 20px;
+      border: none;
+      outline: none;
+      color: #078c82;
+      background-color: inherit;
+      font: inherit;
+      margin: 0;
+      font-weight: 600;
+      display: inline-block;
+      margin-top: 5px;
   }
 
   .menuHeader-w li a {
-      font-size: 18px;
-      color: #049288;
-      transition: all 0.5s;
+      font-size: 20px;
+      border: none;
+      outline: none;
+      color: #078c82;
+      background-color: inherit;
+      font: inherit;
+      margin: 0;
+      font-weight: 600;
+      display: inline-block;
+      margin-top: 5px;
   }
 
-  .menuHeader-w li a img,
-  .menuHeaderEn-w li a img{
-      width: 30px;
+  .menuHeader-w li img,
+  .menuHeaderEn-w li img{
+      width: 38px;
       margin: 0 5px;
+      float: right;
+      margin-top: 9px;
   }
 
   .menuHeaderEn-w li, .menuHeader-w li {
-    padding: 10px 0;
+    padding: 10px 10px;
     transition: all 0.5s;
   }
 
-  .menuHeaderEn-w li:hover {
+  /* .menuHeaderEn-w li:hover {
     background-color: #02635c;
     color: #fff !important;
-  }
+  } */
 
   .menuHeaderEn-w li:hover a {
-      color: #fff !important;
+      color: #00a99d !important;
   }
 
-  .menuHeader-w li:hover {
+  /* .menuHeader-w li:hover {
     background-color: #02635c;
     color: #fff !important;
-  }
+  } */
 
   .menuHeader-w li:hover a {
-      color: #fff !important;
+      color: #00a99d !important;
   }
 
 

src/app/External-Page/external-page-header/external-page-header.component.html

@@ -99,13 +99,14 @@
                             <ul class="navbar-nav mr-auto menuHeader-w">
                                 <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
                                     <a class="nav-link">
-                                        <i class="fa fa-home" style="font-size: 23px;margin:0 5px;"></i> الرئيسيه
+                                        <i class="fa fa-home" style="font-size: 30px;margin:-7px 5px;"></i> الرئيسيه
                                     </a>
                                 </li>
 
                                 <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
+                                    <img src="{{authSer.pathImg + menu.photo}}" />
                                     <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
-                                       <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name}}
+                                         {{menu.name}}
                                     </a>
                                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
                                         <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name}}</a>

src/app/External-Page/external-page-header/external-page-header.component.ts

@@ -50,6 +50,10 @@ export class ExternalPageHeaderComponent implements OnInit {
     );
   }
 
+  onDashBoard() {
+    this.router.navigate(['services/' + this.authSer.dataLoginUser['id']]);
+  }
+
   goToHome() {
     this.router.navigate(['/ExternalPage/home']);
   }

src/app/External-Page/external-page.module.ts

@@ -18,6 +18,8 @@ import { ExternalContactUsComponent } from './external-contact-us/external-conta
 import { NewPageComponent } from './new-page/new-page.component';
 import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
 import {NgxPaginationModule} from 'ngx-pagination';
+import { MoreNewsComponent } from './more-news/more-news.component';
+
 //import { CeiboShare } from 'ng2-social-share';
 
 
@@ -30,6 +32,7 @@ import {NgxPaginationModule} from 'ngx-pagination';
         ExternalContactUsComponent,
         NewPageComponent,
         ExternalEventsTableComponent,
+        MoreNewsComponent,
         //CeiboShare,
     ],
     imports: [

src/app/External-Page/external-page/external-page.component.ts

@@ -1,3 +1,4 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -7,9 +8,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExternalPageComponent implements OnInit {
 
-  constructor() { }
+  constructor(private authSer: AuthServiceService) { }
 
   ngOnInit() {
+    this.authSer.checkExternalFooter = true;
   }
 
 }

src/app/External-Page/external-routing-module.ts

@@ -6,6 +6,7 @@ import { ExternalPageContentComponent } from './external-page-content/external-p
 import { ExternalPageComponent } from './external-page/external-page.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { MoreNewsComponent } from './more-news/more-news.component';
 
 
 
@@ -14,6 +15,7 @@ const externalPageRoutes: Routes = [
         {path: 'home', component: ExternalPageContentComponent},
         {path: 'contactUs', component: ExternalContactUsComponent},
         {path: 'EventsTable', component: ExternalEventsTableComponent},
+        {path: 'moreNews', component: MoreNewsComponent},
         {path: 'newPage/:reportId', component: NewPageComponent},
         {path: ':type_page', component: ExternalHospitalComponent},
     ]},

src/app/External-Page/more-news/more-news.component.css

@@ -0,0 +1,120 @@
+.newsPages-w{
+    width: 100%;
+    display: inline-block;
+}
+
+.newContent {
+    width: 100%;
+    padding: 12px 0;
+    display: inline-block;
+    border-bottom: 1px solid #aba9a9;
+}
+
+.imgNew-w {
+    width: 100%;
+    max-height: 130px;
+	overflow: hidden;
+}
+
+.imgNew-w img {
+    width: 100%;
+    height: 200px;
+}
+
+.content {
+    width: 100%;
+    text-align: right;
+}
+
+.content h1{
+  font-size: 18px;
+    color: #036b63;
+	cursor: pointer;
+}
+
+.content p {
+ color: #9c8565;
+    font-size: 16px;
+    margin: 0px 0;
+    cursor: pointer;
+	    text-align: justify;
+}
+
+.content p span {
+    color: red;
+    font-weight: bold;
+}
+
+.englishContent-w {
+    direction: ltr;
+    padding: 40px 0;
+}
+
+.englishContent-w h1 {
+    font-size: 20px;
+    color: #888;
+}
+.inside_links{
+	    width: 100%;
+    overflow: hidden;
+}
+
+.inside_links ul{
+      display: block;
+    width: 100%;
+    padding: 0px;
+}
+
+.inside_links ul li{
+display: block;
+    width: 100%;
+    height: 65px;
+}
+
+.inside_links ul li span{
+    display: block;
+    float: right;
+    margin: 1px 4px 0px 0px;
+}
+
+.inside_links ul li a img{
+      display: block;
+    width: 30px;
+    float: right;
+    height: 30px;
+    margin: 15px 10px 0px 10px;
+    filter: invert(65%);
+}
+
+.inside_links ul li a{
+    display: block;
+    float: right;
+    color: #755a07;
+    line-height: 62px;
+    margin: 0px 2px 2px 0px;
+    width: 100%;
+    background-color: #e6e6e6;
+    height: 65px;
+    border-bottom: 1px solid #ceb79d96;
+    transition: all 0.5s;
+}
+.inside_links ul li a:hover{
+	    background: linear-gradient(1turn,#e6ded5cc, #e6e6e6, #e6e6e6);
+}
+
+englishContent-w p {
+    color: #bda380;
+    font-size: 18px;
+    margin: 10px 0;
+    cursor: pointer;
+}
+
+.contentPage-w {
+    width: 95%;
+    display: block;
+    border-top: 0;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    background: rgba(255, 255, 255, 0.5);
+}

src/app/External-Page/more-news/more-news.component.html

@@ -0,0 +1,70 @@
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
+    <div class="newsPages-w" [style.min-height.px]="myInnerHeight">
+        <div class="container">
+            <div class="contentPage-w">
+              <div class="row">
+                <div class="col-12 col-sm-12 col-md-9">
+                      <div class="col-12 col-sm-12 col-md-12" *ngFor="let report of dataPagesNews | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                        <div class="newContent">
+                          <div class="row">
+                            <div class="col-12 col-sm-12 col-md-3">
+                              <div class="imgNew-w">
+                                <img src="{{authSer.pathImg + report.photo.photo}}" />
+                              </div>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-8">
+                              <div class="content">
+                                <h1 (click)="onGetNew(report.id)">{{report.title}}</h1>
+                                <p [innerHTML]="report.description"  (click)="onGetNew(report.id)"></p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-3">
+                </div>
+                
+              </div>
+          
+          <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+            </div>
+            
+        </div>
+  
+      </div>
+  </ng-template>
+  
+  
+  <ng-template #englishTemplate>
+      <div class="newsPages-w" [style.min-height.px]="myInnerHeight"  [className]="authSer.arabicTemplate ? '' : 'englishContent-w' ">
+          <div class="container">
+            <div class="contentPage-w">
+                <div class="row">
+            <div class="col-12 col-sm-12 col-md-9">
+                  <div class="col-12 col-sm-12 col-md-12" *ngFor="let report of dataPagesNews | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                    <div class="newContent">
+                      <div class="row">
+                        <div class="col-12 col-sm-12 col-md-3">
+                          <div class="imgNew-w">
+                              <img src="{{authSer.pathImg + report.photo.photo}}" />
+                          </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-8">
+                          <h1 (click)="onGetNew(report.id)">{{report.title_en}}</h1>
+                          <p [innerHTML]="report.description_en" (click)="onGetNew(report.id)"></p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            <div class="col-12 col-sm-12 col-md-3">cccc</div>
+                </div>
+            </div>
+            <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
+          </div>
+        </div>
+  </ng-template>
+  
+  

src/app/External-Page/more-news/more-news.component.ts

@@ -0,0 +1,68 @@
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-more-news',
+  templateUrl: './more-news.component.html',
+  styleUrls: ['./more-news.component.css']
+})
+export class MoreNewsComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private http: HttpClient,
+    private router: Router,
+    private spinner: NgxSpinnerService) {
+      this.spinner.show();
+     }
+
+    dataPagesNews = [];
+    perPagePagenation: number = 10;
+    count: number;
+    currentPage:number = 1;
+
+  ngOnInit() {
+    
+    this.authSer.homeActivate = false;
+
+    
+    this.http.get(this.authSer.pathApi + '/reports_list_gate/'+ this.currentPage + '/' + this.perPagePagenation + '/1').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataPagesNews = responce['reports'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+   // /change page 
+   onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.http.get(this.authSer.pathApi + '/get_reports_list/1/' + this.currentPage + '/' + this.perPagePagenation + '/internal').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataPagesNews = responce['reports'];
+        this.count = responce['count'];
+        for(let i = 0 ; i < this.dataPagesNews.length ; i++) {
+          if(this.dataPagesNews[i].description.length > 60) {
+            this.dataPagesNews[i].description = this.dataPagesNews[i].description.substring(0,200) + '........' ;
+            this.dataPagesNews[i].description_en = this.dataPagesNews[i].description_en.substring(0,200) + '......';
+          }
+        }
+      },
+      (error) => {
+        console.log(error);      
+      }
+    )
+  };
+
+  onGetNew(id) {
+  this.router.navigate(['ExternalPage/newPage/' + id])
+  }
+
+}

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

@@ -62,7 +62,7 @@ export class InternalPageComponent implements OnInit {
 
     this.spinner.show();
     this.authSer.showDashboardHeader = false;
-    
+    this.authSer.checkExternalFooter = false;
    //get profile data
     this.userservice.getUserDataProfile();
     //get parent and child data

src/app/app.component.ts

@@ -14,7 +14,7 @@ export class AppComponent implements OnInit {
   myInnerHeight = window.innerHeight;
 
 constructor(private spinner: NgxSpinnerService) {
-
+  this.spinner.show();
 }
   ngOnInit() {
 

src/app/dashboard/dashboard-content.ts

@@ -1,3 +1,4 @@
+import { AuthServiceService } from './../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 
 
@@ -8,8 +9,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardContent implements OnInit {
 
-  constructor() { }
+  constructor(private authSer: AuthServiceService) { }
   myInnerHeight = window.innerHeight;
-  ngOnInit() {}
+  ngOnInit() {
+    this.authSer.checkExternalFooter = false;
+  }
 
 }

src/app/dashboard/main-footer/footer.component.css

@@ -1,7 +1,6 @@
 .footer {
     width: 100%;
     height: 160px;
-    position: absolute;
     bottom: 0;
     background: url('../../../assets/image/bg-patt.gif') center center;
    /* background-size: cover;

src/app/dashboard/main-footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="footer">
+<div class="footer" [className]=" authSer.checkExternalFooter ? 'externalFooterBackground-w' : 'footer' ">
   <div class="overlayFooter-w">
 
     <div class="container">

src/app/dashboard/main-menu/main-list/main-list.component.html

@@ -67,16 +67,7 @@
                 </div>
               </td>
               <td>{{menu.name}}</td>
-              <td> {{menu.ranking}}
-                <!-- <select class="form-control" [ngModel]="menu.ranking" (change)="changeRanking($event, menu.id)">
-                  <option value="1">1</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="4">4</option>
-                  <option value="5">5</option>
-                  <option value="6">6</option>
-                </select> -->
-              </td>
+              <td> {{menu.ranking == 10000 ? 'المزيد' : menu.ranking}}</td>
               <td>{{menu.status == 1 ? 'فعال' : menu.status == 0 ? 'غير فعال' : 'not found' }}</td>
               <td>{{menu.parent_name ? menu.parent_name : '__'}}</td>
               <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(menu.id)"><i class="fas fa-edit"></i></button></td>

src/app/dashboard/map/map.component.html

@@ -8,6 +8,7 @@
 <div class="container">
   <div class="row">
     <div class="col-12">
+
         <agm-map 
         [latitude]="lat"
         [longitude]="lng"
@@ -31,12 +32,13 @@
           
         </agm-marker>
         
-        <agm-circle [latitude]="lat + 0.3" [longitude]="lng" 
-            [radius]="5000"
-            [fillColor]="'red'"
-            [circleDraggable]="true"
-            [editable]="true">
-        </agm-circle>
+          <!-- <agm-circle [latitude]="lat + 0.3" [longitude]="lng" 
+              [radius]="5000"
+              [fillColor]="'red'"
+              [circleDraggable]="true"
+              [editable]="true">
+          </agm-circle> -->
+
       </agm-map>
     </div>
     <div class="col-12">

src/app/shared/auth-service.service.ts

@@ -61,6 +61,7 @@ export class AuthServiceService {
   homeActivate:boolean = true;
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
+  checkExternalFooter: boolean = false; 
   parentsPage = [];
 
   footerData=[];

src/styles.css

@@ -1331,6 +1331,55 @@ height: 7px !important;
     }
 
 
+    .externalFooterBackground-w{
+     width: 100%;
+    }
+
+    .externalFooterBackground-w .overlayFooter-w {
+      background: url('../src/assets/image/externalFooter.png') no-repeat center center !important;
+      background-size: cover;
+      position: initial !important;
+    }
+
+    .externalFooterBackground-w .overlayFooter-w .linksSection-w ul li {
+      border-right: 1px solid #007A71 !important;
+      border-left: 1px solid #007A71 !important;
+    }
+
+    .externalFooterBackground-w .overlayFooter-w .linksSection-w ul li:first-child {
+      border: 0 !important;
+    }
+
+    .externalFooterBackground-w .overlayFooter-w .linksSection-w ul li:last-child {
+      border: 0 !important;
+    }
+
+    .externalFooterBackground-w .overlayFooter-w .rights {
+      text-align: center;
+      color: #fff;
+      font-weight: bold;
+      text-shadow: 0 0px 2px #000 !important; 
+      color: #ddd !important;
+    }
+
+    .internalFooterBackGround-w{
+      background: url('../src/assets/image/XMLID_19_.png') no-repeat center center !important;
+      background-size: cover;
+      position: relative;
+      bottom: 0;
+    }
+
+    .internalFooterBackGround-w .overlayFooter-w {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      background: rgba(179, 151, 117, 0.55);
+    }
+