bugfix

src/app/_modules/pages/sections/types/basic/images/images-section.component.html

@@ -4,7 +4,8 @@
     <img class="" [src]="items[0].links.full"  (click)="show(items[0].id)"/>
   </div>
 
-  <div *ngIf="imageType!=='carousel'" class="items" [ngClass]="imageClass">  
+  <div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)" 
+  class="items" [ngClass]="imageClass">  
     <div class="item" *ngFor="let item of items">
       <img [src]="item.links?.full" (click)="show(item.id)"/>
     </div>
@@ -33,11 +34,12 @@
 
 
   <div *ngIf="showFullscreen" class="fullscreen">
+    <div class="close"  (click)="showFullscreen = false"></div>
     <div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
       <img *ngIf="backId!==''" src="/assets/images/icons/chevron_left_white_48dp.svg"/>
     </div>
     <div class="center">
-      <div class="photo" (click)="showFullscreen = false"><img [src]="photo"/></div>
+      <div class="photo"><img [src]="photo"/></div>
     </div>
     <div *ngIf="items.length > 1" class="right" (click)="go('increment')">
       <img *ngIf="nextId!==''" src="/assets/images/icons/chevron_right_white_48dp.svg"/>

src/app/_modules/pages/sections/types/basic/images/images-section.component.scss

@@ -4,6 +4,8 @@
     display: block;
     width: 663px;
     height: 468px;
+    max-width: 80dvw;
+    max-height: 49dvw;
     margin-bottom: 8px;
     border-radius: 12px;
     border: 1px solid rgba(45, 45, 45, 0.27);
@@ -136,6 +138,17 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(37, 46, 52, 60%);
+  .close{
+    position: absolute;
+    top:24px;
+    right: 24px;
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    background: url('~src/assets/images/icons/close_blue_24dp.svg') center no-repeat;
+    background-color: #fff;
+    border: 2px solid var(--blue-1);
+  }
   .left {
     width: 72px;
     flex-grow: 0;

src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.html

@@ -1,10 +1,12 @@
 <div class="member">
   <!-- <pre>{{item | json}}</pre> -->
   <h1 *ngIf="name" [innerHTML]="name"></h1>
-  <img *ngIf="photo" [src]="photo" />
+  <img *ngIf="photo" [src]="photo" (click)="fullScreen=true"/>
   <h4 *ngIf="position" [innerHTML]="position"></h4>
   <p *ngIf="document" class="doc"><a [href]="document">Документ</a> </p>
   <p *ngIf="email"><a href="mailto:{{email}}">{{email}}</a></p>
   <p *ngIf="phone"><a href="tel:{{phone}}">{{phone}}</a></p>
   <p *ngIf="description" [innerHTML]="description"></p>
 </div>
+<img [src]="photo" class="full-screen" *ngIf="fullScreen"  (click)="fullScreen=false"/>
+

src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss

@@ -29,4 +29,17 @@
         border: 1px solid rgba(45, 45, 45, 0.27);
     }
 
+
+
 }
+.full-screen{
+    position: fixed;
+    top:0;
+    z-index: 200;
+    left: 0;
+    background-color: rgba(45, 45, 45, 0.63);
+    width: 100dvw;
+    height: 100vh;
+    object-fit: contain;
+    cursor: pointer;
+}

src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.ts

@@ -18,6 +18,7 @@ export class MemberSectionItemComponent {
   }
 
   public item: any;
+  public fullScreen: boolean;
 
   ngOnInit() {
     this.fetch();

src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.html

@@ -10,13 +10,38 @@
       <page-menu [editMode]="editMode" [section]="member" [modelId]="modelId" [modelType]="modelType"></page-menu>
       <ng-template ngFor let-group [ngForOf]="member.groups.data">
         <ng-template ngFor let-field [ngForOf]="group.fields.data">
+          <!-- <pre>{{field?.value?.data[0]|json}}</pre>
+          <pre>{{field?.name|json}}</pre> -->
           <ng-container [ngSwitch]="field?.name">
-            <div *ngSwitchCase="'member-image'" class="image"><img [src]="field?.value?.data[0]?.links?.full" /></div>
-            <div *ngSwitchCase="'member-name-required'" class="name" [innerHTML]="field?.value?.data[0]"></div>
-            <div *ngSwitchCase="'member-position-required'" class="position" [innerHTML]="field?.value?.data[0]"></div>
+            <div *ngSwitchCase="'member-image'" class="image">
+              <img [src]="field?.value?.data[0]?.links?.full || cover" />
+            </div>
+            <div *ngSwitchCase="'member-name-required'" class="name">
+              <div>{{field?.value?.data[0]}}</div>
+            </div>
+            <div *ngSwitchCase="'member-position-required'" class="position">
+              <div>{{field?.value?.data[0]}}</div>
+            </div>
+            <div *ngSwitchCase="'member-phone'" class="link">
+                <div><a href="tel:{{field?.value?.data[0]}}"  [innerHTML]="field?.value?.data[0]"></a></div>    
+            </div>
+            <div *ngSwitchCase="'member-email'" class="link">
+              <div><a href="mailto:{{field?.value?.data[0]}}"  [innerHTML]="field?.value?.data[0]"></a></div>
+            </div>
+            <div *ngSwitchCase="'member-doc'">
+              <div *ngIf="field?.value?.data[0]" class="doc">
+                <!-- <div class="doc-icon" [style.backgroundImage]="iconUrl(field?.value?.data[0]?.extension)">
+                </div> -->
+                <div class="doc-link">
+                    <a [textContent]="field?.value?.data[0]?.name" class="title" [href]="field?.value?.data[0]?.links.download"></a>
+                </div>     
+              </div>                       
+            </div>
           </ng-container>
         </ng-template>
-        <div class="more"><a [href]="getLink(member.id)">Подробнее</a></div>
+        <div class="more"><a [href]="getLink(member.id)">
+          Подробнее <img src="/assets/images/icons/chevron_right_24dp.svg" alt="">
+        </a></div>
       </ng-template>
     </div>
   </div>

src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss

@@ -35,8 +35,11 @@
       object-fit: cover;
       display: flex;
       flex-direction: column;
-      grid-gap: 16px;
+
       flex-basis: 30%;
+      >div{
+        >*{margin-bottom: 16px;}
+      }
       .menu {
 
       }
@@ -61,6 +64,45 @@
       }
       .more {
         font-size: 20px;
+        img{
+          vertical-align: -6px;
+        }
+      }
+      .link{
+        font-size: 20px;
+        display: block;
+      }
+
+
+      .doc{
+          width: 100%;
+          display: flex;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          .doc-icon{
+              flex-basis: 60px;
+              align-items: flex-start;
+              flex-shrink: 0;
+              height: 60px;
+              background:  center no-repeat;
+              background-image: url('~src/assets/images/icons/document/document_pdf_60dp.svg');
+              background-size: contain;
+          }
+          .doc-link{
+            flex-shrink: 0;
+            flex-grow: 0;
+            flex-basis: 100%;
+            white-space: nowrap; 
+            overflow: hidden;
+            text-overflow:ellipsis;
+          }
+          a{
+              font-size: 20px;
+              
+          }
+          .description{
+              color: #6C6C6C;
+          }
       }
     }
   }

src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.ts

@@ -38,10 +38,16 @@ export class MemberSectionListComponent {
     return this.section.id;
   }
 
+  iconUrl(name:string){
+    return `url(/assets/images/icons/document/${name.toUpperCase()}.svg)`
+  }
+
   get modelType() {
     return 'object';
   }
 
+  public cover = '/assets/images/icons/view_man_273_370dp.svg';
+
 
   add() {
     let attach = {modelType: 'object',  group: 'sections', modelId: this.section.id, ord: this.ord};

src/assets/images/icons/view_man_273_370dp.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<svg width="273" height="370" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <defs>
+  <clipPath id="clip0_290_33502">
+   <rect fill="white" height="172.49" id="svg_1" transform="translate(69 99)" width="135.85"/>
+  </clipPath>
+ </defs>
+ <g class="layer">
+  <title>Layer 1</title>
+  <g clip-path="url(#clip0_290_33502)" id="svg_4">
+   <mask height="173" id="mask0_290_33502" maskUnits="userSpaceOnUse" width="136" x="69" y="99">
+    <path d="m204.85,99l-135.85,0l0,172.49l135.85,0l0,-172.49z" fill="white" id="svg_5"/>
+   </mask>
+   <g id="svg_6" mask="url(#mask0_290_33502)">
+    <path d="m141.49,218.7l23.02,-8.39l6.46,12.89c0.1,0.2 0.16,0.42 0.16,0.64c-0.01,0.27 -0.08,0.53 -0.22,0.76c-0.13,0.21 -0.31,0.38 -0.52,0.49c-0.21,0.12 -0.45,0.19 -0.69,0.19l-0.01,0l-20.31,0.04c-0.34,0 -0.68,0.1 -0.98,0.29c-0.29,0.19 -0.52,0.45 -0.67,0.77l-9.66,20.78l-7.87,-20.66c-0.13,-0.35 -0.36,-0.64 -0.67,-0.85c-0.3,-0.21 -0.66,-0.33 -1.03,-0.33l-20.02,-0.04c-0.25,0 -0.49,-0.06 -0.7,-0.18c-0.22,-0.12 -0.39,-0.29 -0.52,-0.5c-0.14,-0.22 -0.22,-0.49 -0.22,-0.75c0,-0.23 0.05,-0.45 0.16,-0.65l6.52,-13l26.58,8.52c0.39,0.13 0.81,0.12 1.19,-0.02m-69.87,51.77c0.98,0.66 2.14,1.02 3.32,1.02l15.79,0c0.49,0 0.95,-0.19 1.3,-0.54c0.34,-0.34 0.53,-0.8 0.53,-1.29c0,-0.48 -0.19,-0.95 -0.53,-1.29c-0.35,-0.35 -0.81,-0.54 -1.3,-0.54l-15.79,0c-0.3,0 -0.6,-0.06 -0.88,-0.18c-0.41,-0.17 -0.77,-0.46 -1.02,-0.84c-0.25,-0.38 -0.38,-0.82 -0.38,-1.27l0,-17.8c-0.01,-5.06 1.01,-10.06 2.98,-14.72c2.9,-6.78 7.68,-12.58 13.78,-16.72c6.03,-4.08 13.12,-6.33 20.4,-6.48l-5.89,11.74c-0.35,0.71 -0.54,1.49 -0.54,2.28c0,0.67 0.13,1.33 0.39,1.95c0.25,0.62 0.62,1.18 1.1,1.66c0.47,0.47 1.03,0.85 1.65,1.11c0.62,0.25 1.28,0.38 1.95,0.38l-0.01,0l18.77,0.04l8.95,23.53c0.01,0.04 0.03,0.08 0.05,0.11c0.01,0.01 0.01,0.02 0.01,0.03c0.03,0.05 0.05,0.09 0.08,0.13c0,0.01 0.01,0.02 0.02,0.03c0.02,0.04 0.05,0.08 0.07,0.12l0.03,0.03c0.02,0.04 0.05,0.08 0.08,0.11l0.03,0.02c0.03,0.04 0.06,0.07 0.1,0.1c0,0.01 0.01,0.02 0.02,0.03c0.04,0.03 0.07,0.06 0.12,0.09c0.01,0 0.01,0.01 0.02,0.02l0.13,0.09l0.02,0.01c0.06,0.04 0.11,0.06 0.17,0.09c0.42,0.19 0.9,0.22 1.34,0.07c0.02,0 0.04,-0.01 0.06,-0.02c0.02,-0.01 0.01,0 0.01,0c0.02,-0.01 0.06,-0.02 0.08,-0.03c0.03,-0.02 0.05,-0.03 0.08,-0.03c0.02,-0.01 0.06,-0.04 0.09,-0.05c0.02,-0.01 0.04,-0.03 0.07,-0.04c0.02,-0.02 0.05,-0.04 0.07,-0.05c0.02,-0.02 0.05,-0.03 0.07,-0.05c0.02,-0.02 0.05,-0.04 0.07,-0.06c0.03,-0.02 0.05,-0.04 0.07,-0.06c0.02,-0.02 0.04,-0.04 0.07,-0.06c0.01,-0.02 0.03,-0.05 0.05,-0.07l0.05,-0.06c0.02,-0.02 0.05,-0.05 0.06,-0.08c0.02,-0.03 0.04,-0.04 0.05,-0.06c0.02,-0.02 0.04,-0.06 0.05,-0.09c0.02,-0.03 0.03,-0.05 0.05,-0.07c0,-0.02 0.02,-0.05 0.04,-0.08l11,-23.65l19.14,-0.04c1.34,0 2.64,-0.54 3.59,-1.5c0.95,-0.95 1.49,-2.25 1.49,-3.6c0,-0.79 -0.19,-1.57 -0.54,-2.28l-5.71,-11.38c9.04,1.3 17.31,5.82 23.31,12.71c5.99,6.9 9.31,15.72 9.34,24.85l0,17.8c0,0.38 -0.09,0.75 -0.27,1.08c-0.17,0.33 -0.43,0.62 -0.75,0.82c-0.37,0.26 -0.81,0.4 -1.26,0.4l-58.04,0l0,0l-29.24,0c-0.48,0 -0.95,0.2 -1.29,0.54c-0.34,0.34 -0.54,0.81 -0.54,1.29c0,0.49 0.2,0.95 0.54,1.3c0.34,0.34 0.81,0.53 1.29,0.53l87.27,0c0.79,0 1.58,-0.16 2.31,-0.47c1.06,-0.45 1.97,-1.2 2.62,-2.15c0.66,-0.99 1.02,-2.14 1.02,-3.33l0,-17.8c-0.03,-10.63 -4.12,-20.85 -11.43,-28.57c-7.31,-7.71 -17.29,-12.35 -27.91,-12.96c-0.07,0 -0.15,0 -0.22,0c-0.02,0 -0.04,0 -0.05,0c-0.06,0.01 -0.11,0.02 -0.17,0.03l-0.08,0.01c-0.04,0.01 -0.09,0.03 -0.14,0.04c-0.02,0.01 -0.04,0.02 -0.06,0.02l-23.97,8.73l-27.47,-8.81l-0.05,-0.02c-0.02,0 -0.06,-0.01 -0.09,-0.02l-0.13,-0.03l-0.07,-0.01c-0.07,0 -0.14,-0.01 -0.21,-0.01l-2.2,0c-5.55,0 -11.05,1.11 -16.16,3.28c-7.43,3.17 -13.79,8.41 -18.31,15.1c-4.65,6.85 -7.13,14.93 -7.13,23.21l0,17.8c0,0.8 0.16,1.59 0.47,2.32c0.45,1.06 1.2,1.96 2.15,2.61" fill="#C0C0C0" id="svg_7"/>
+    <path d="m98.18,127.82c1.35,-3.33 3.04,-6.52 5.05,-9.5c3.06,-4.59 7.15,-8.41 11.94,-11.15c5.74,-3.1 12.18,-4.66 18.7,-4.51c1.57,0 3.21,0.07 4.91,0.23l0.09,0l0.05,0l0.1,0l0.02,0c4.01,0.11 7.99,0.64 11.88,1.6c8.75,2.02 17.05,5.64 24.48,10.68c1.35,0.92 2.48,2.12 3.33,3.52l0.02,0.03c0.07,0.1 0.12,0.2 0.18,0.3l0.03,0.06c0.66,1.18 1.15,2.43 1.49,3.73c0.36,1.42 0.6,2.87 0.71,4.34l0,0.09c0.35,2.92 0.52,5.87 0.5,8.81c0.01,3.45 -0.18,6.9 -0.55,10.33c-0.16,1.41 -0.33,2.62 -0.5,3.51c-0.09,0.45 -0.17,0.81 -0.24,1.06c-0.04,0.13 -0.06,0.22 -0.09,0.28c0,0.01 -0.01,0.02 -0.01,0.03c-0.04,0.07 -0.1,0.14 -0.17,0.2c-0.14,0.1 -0.31,0.18 -0.49,0.22c-0.25,0.06 -0.52,0.09 -0.78,0.09c-0.05,0 -0.11,0 -0.16,0c-0.2,-1.19 -0.45,-2.37 -0.77,-3.54c-1.28,-4.49 -3.15,-8.8 -5.56,-12.8c-2.02,-3.44 -4.32,-6.71 -6.88,-9.76c-0.23,-0.29 -0.52,-0.51 -0.86,-0.67c-0.33,-0.15 -0.69,-0.23 -1.06,-0.23c-0.54,0 -1.07,0.17 -1.51,0.5l0,0c-0.67,0.5 -2.06,1.51 -4,2.76c-3.26,2.12 -6.66,4.01 -10.16,5.67c-4.44,2.12 -9.08,3.75 -13.86,4.88c-8.73,1.98 -17.22,4.85 -25.37,8.55c0.05,-0.37 0.1,-0.76 0.16,-1.16c0.18,-1.17 0.54,-2.31 1.06,-3.37c0.27,-0.55 0.34,-1.18 0.19,-1.77c-0.15,-0.59 -0.52,-1.11 -1.02,-1.45c-0.42,-0.3 -0.92,-0.45 -1.43,-0.45c-0.24,0 -0.49,0.04 -0.72,0.11l-0.01,0c-2.27,0.7 -4.44,1.72 -6.43,3.02c-2.97,1.94 -5.51,4.46 -7.46,7.42c0.27,-2.56 0.69,-5.48 1.32,-8.57c0.88,-4.47 2.18,-8.85 3.88,-13.08m8.4,13.11l0.01,-0.01c0,0 -0.01,0 -0.01,0.01zm62.08,36.53c-4.44,7.42 -10.64,13.63 -18.04,18.11c-3.63,2.09 -7.74,3.18 -11.93,3.18c-4.18,0 -8.29,-1.09 -11.92,-3.18c-12.63,-7.31 -21.9,-19.26 -25.84,-33.31c-0.22,-0.77 -0.4,-1.56 -0.56,-2.36l-2.17,-11.18c2.08,-2.29 4.62,-4.11 7.45,-5.34c-0.18,0.66 -0.33,1.33 -0.45,1.96c-0.2,1.17 -0.31,2.36 -0.34,3.56l0,0.08c0,0.34 0.07,0.69 0.21,1c0.19,0.45 0.51,0.84 0.92,1.1c0.42,0.27 0.9,0.42 1.39,0.42c0.38,0 0.76,-0.09 1.11,-0.26c8.41,-4 17.24,-7.05 26.32,-9.1c5.04,-1.19 9.94,-2.91 14.61,-5.15c3.66,-1.73 7.2,-3.7 10.6,-5.89c1.4,-0.9 2.52,-1.69 3.33,-2.27c2.15,2.67 4.1,5.49 5.84,8.44c2.24,3.72 3.98,7.72 5.18,11.9c0.36,1.3 0.63,2.63 0.82,3.97c0.06,0.41 0.22,0.81 0.47,1.15c0.25,0.34 0.58,0.61 0.96,0.79c0,0 0,0 0.01,0c0.26,0.12 0.53,0.19 0.82,0.22c-1.58,7.85 -4.56,15.35 -8.79,22.15m-79.53,-21.63c0.21,0.46 0.55,0.85 0.99,1.11c0.39,0.24 0.85,0.37 1.31,0.37c0.48,0 0.94,-0.14 1.35,-0.39c0.43,-0.28 0.77,-0.69 0.97,-1.17c0.44,-1.03 0.94,-2.03 1.5,-3.01l1.53,7.88c0.18,0.88 0.39,1.76 0.63,2.64c4.2,14.97 14.08,27.7 27.53,35.49c4.18,2.41 8.93,3.68 13.75,3.68c4.83,0 9.57,-1.27 13.75,-3.68c7.93,-4.77 14.56,-11.41 19.33,-19.34c4.65,-7.48 7.86,-15.76 9.46,-24.41c0.43,-0.18 0.83,-0.41 1.19,-0.71c0.42,-0.35 0.78,-0.77 1.05,-1.25l0,0c0.1,-0.18 0.19,-0.36 0.26,-0.56c0.12,-0.36 0.23,-0.73 0.31,-1.1c0.16,-0.72 0.33,-1.61 0.47,-2.67c0.55,-4.2 0.83,-8.42 0.82,-12.65c0.02,-3.09 -0.16,-6.17 -0.53,-9.23c-0.12,-1.68 -0.39,-3.33 -0.81,-4.96c-0.41,-1.58 -1.02,-3.1 -1.81,-4.53l-0.01,-0.02l-0.02,-0.04c-0.1,-0.17 -0.19,-0.34 -0.3,-0.5c0,0 -0.01,-0.01 -0.01,-0.01c0,-0.01 0,-0.01 0,-0.02c-1.12,-1.82 -2.61,-3.39 -4.37,-4.6c-7.81,-5.29 -16.53,-9.09 -25.73,-11.22c-4.16,-1.01 -8.41,-1.58 -12.69,-1.69c-1.79,-0.16 -3.52,-0.24 -5.18,-0.24c-4.43,-0.04 -8.83,0.58 -13.08,1.83c-3.25,0.98 -6.35,2.4 -9.22,4.23c-4.59,2.99 -8.52,6.89 -11.54,11.47c-4.15,6.43 -7.11,13.55 -8.75,21.02c-1.3,5.62 -2.09,11.35 -2.37,17.11c0,0.03 -0.01,0.07 -0.01,0.13c0,0.36 0.08,0.72 0.23,1.04" fill="#C0C0C0" id="svg_8"/>
+   </g>
+  </g>
+ </g>
+</svg>