start section css

OPEN-ENT-NG · Oct 2, 2023 · 5afc4ac · 5afc4ac
1 parent 73395f0
commit 5afc4ac
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 20 deletions.
diff --git a/src/main/resources/public/sass/global/components/directives/_card-list-item.scss b/src/main/resources/public/sass/global/components/directives/_card-list-item.scss
@@ -53,13 +53,13 @@
     }
 
     &-creation {
-      width: 80%;
       margin-left: 8px;
       display: flex;
       flex-direction: column;
 
-      .dezoom{
+      &.dezoom{
         width: 49%;
+        margin-left: 0;
       }
       &-user {
         @include noTextOverflow(1);
@@ -195,18 +195,19 @@
       font-weight: bold;
       margin-bottom: 5px;
       height: 3vh;
-
       &-ellipsis {
         @include noTextOverflow(1);
         height: 1.5em;
         &.dezoom-0{
           @include noTextOverflow(3);
+          width: 100%;
           line-height: 18px;
           height: auto;
         }
         &.dezoom-1{
           @include noTextOverflow(4);
           line-height: 130%;
+          width: 100%;
           height: auto;
         }
       }

diff --git a/src/main/resources/public/sass/global/components/directives/_card-list.scss b/src/main/resources/public/sass/global/components/directives/_card-list.scss
@@ -22,15 +22,15 @@
     justify-content: center;
   }
 
-  &-vertical {
-    justify-items: center;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: grid;
-    grid-gap: 10px;
-    //grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
-    grid-auto-rows: 0;
-  }
+  //&-vertical {
+  //  justify-items: center;
+  //  overflow-y: auto;
+  //  overflow-x: hidden;
+  //  display: grid;
+  //  grid-gap: 10px;
+  //  //grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
+  //  grid-auto-rows: 0;
+  //}
 
   &-horizontal {
     min-height: 20vh;

diff --git a/src/main/resources/public/sass/global/components/directives/_section-list.scss b/src/main/resources/public/sass/global/components/directives/_section-list.scss
@@ -5,6 +5,14 @@
   overflow-y: hidden;
   min-width: min-content;
 
+  $start: 3;
+  $end: 5;
+  @for $i from $start through $end {
+    &-zoom-#{$i} {
+      $width-value: 100 + ($i - 3) * 20%;
+      width: $width-value
+    }
+  }
 
   i.magneto-card-settings {
     font-size: 25px;

diff --git a/src/main/resources/public/template/board.html b/src/main/resources/public/template/board.html
@@ -129,7 +129,9 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                     on-transfer="vm.openTransferResourceLightbox"
                     on-submit="vm.onFormSubmit"
                     on-lock="vm.openLockResource"
-                    card-update-eventer="vm.cardUpdateSubject">
+                    card-update-eventer="vm.cardUpdateSubject"
+                    zoom="vm.zoomLevel"
+                    zoom-eventer="vm.zoomEventer">
             </section-list>
             <div ng-show="vm.isLoading" class="centered-text">
                 <loader min-height="'250px'"></loader>

diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts
@@ -54,6 +54,9 @@ interface ISectionListItemProps {
     onMove?;
     onLock?;
     cardUpdateEventer: Subject<void>;
+    zoom: number;
+    zoomEventer: Subject<void>;
+
 }
 
 interface ISectionListItemScope extends IScope, ISectionListItemProps {
@@ -72,7 +75,8 @@ class Controller implements IViewModel {
     isDisplayedOptions: boolean;
     isDomLoaded: boolean;
     cardUpdateEventer: Subject<void>;
-
+    zoom: number;
+    zoomEventer: Subject<void>;
 
     constructor(private $scope: ISectionListItemScope) {
         this.isDisplayedOptions = false;
@@ -82,6 +86,7 @@ class Controller implements IViewModel {
     }
 
     $onInit = (): void => {
+        console.log(this.zoom)
         this.newSection = new SectionForm().buildNew(this.board.id);
     }
 
@@ -168,7 +173,9 @@ function directive($parse: IParseService) {
             onTransfer: '&',
             onMove: '&',
             onLock: '&',
-            cardUpdateEventer: '='
+            cardUpdateEventer: '=',
+            zoom:"=?",
+            zoomEventer:"=?"
         },
         controllerAs: 'vm',
         bindToController: true,

diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.html b/src/main/resources/public/ts/directives/section-list/section-list-item.html
@@ -43,6 +43,8 @@
             board-owner="vm.board.owner"
             has-favorite="true"
             display-favorite="vm.board.displayNbFavorites"
+            zoom="vm.zoom"
+            zoom-eventer="vm.zoomEventer"
     >
     </card-list>
 

diff --git a/src/main/resources/public/ts/directives/section-list/section-list.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list.directive.ts
@@ -29,7 +29,7 @@ interface IViewModel extends ng.IController, ISectionListProps {
     openDeleteSectionLightbox(section: Section): void;
 
     refresh?(): void;
-
+    getZoomLevel(): number;
 }
 
 interface ISectionListProps {
@@ -43,6 +43,8 @@ interface ISectionListProps {
     onSubmit?;
     onLock?;
     cardUpdateEventer: Subject<void>;
+    zoom: number;
+    zoomEventer: Subject<void>;
 }
 
 interface ISectionListScope extends IScope, ISectionListProps {
@@ -57,7 +59,8 @@ class Controller implements IViewModel {
     selectedSection: Section;
     displayDeleteSectionLightbox: boolean;
     cardUpdateEventer: Subject<void>;
-
+    zoom: number;
+    zoomEventer: Subject<void>;
     constructor(private $scope: ISectionListScope,
                 private $location: ILocationService,
                 private $window: IWindowService) {
@@ -112,6 +115,15 @@ class Controller implements IViewModel {
         this.selectedSection = section;
         this.displayDeleteSectionLightbox = true;
     }
+
+    getZoomLevel(): number {
+        if(this.zoom >= 100){
+            return (this.zoom - 100 )/15 + 3;
+        }
+        else {
+            return (this.zoom - 55 ) / 15
+        }
+    }
 }
 
 function directive($parse: IParseService) {
@@ -129,7 +141,9 @@ function directive($parse: IParseService) {
             onMove: '&',
             onSubmit: '&',
             onLock: '&',
-            cardUpdateEventer: '='
+            cardUpdateEventer: '=',
+            zoom:"=?",
+            zoomEventer:"=?"
         },
         controllerAs: 'vm',
         bindToController: true,

diff --git a/src/main/resources/public/ts/directives/section-list/section-list.html b/src/main/resources/public/ts/directives/section-list/section-list.html
@@ -1,4 +1,4 @@
-<div class="sections-listDirective sections-listDirective-[[vm.board.layoutType]] scrollbar">
+<div class="sections-listDirective sections-listDirective-[[vm.board.layoutType]] sections-listDirective-zoom-[[vm.getZoomLevel()]] scrollbar">
     <div id="section-list" class="sections-listDirective-container-[[vm.board.layoutType]]">
         <section-list-item
                 ng-repeat="section in vm.board.sections"
@@ -14,7 +14,9 @@
                 on-transfer="vm.openTransfer"
                 on-lock="vm.openLock"
                 class="scrollbar sections-listDirective-content sections-listDirective-content-[[vm.board.layoutType]]"
-                card-update-eventer="vm.cardUpdateEventer">
+                card-update-eventer="vm.cardUpdateEventer"
+                zoom-eventer="vm.zoomEventer"
+                zoom="vm.zoom">
         </section-list-item>
     </div>
     <div ng-if="vm.board.myRights.publish !== undefined"