Squashed commit of the following:

commit 03e8dbf Author: Alex <[email protected]> Date: Wed Oct 19 22:04:00 2016 -0700 Run comparison on images for orientation Switch classes based on width and height commit e460515 Author: Alex <[email protected]> Date: Wed Oct 19 21:23:24 2016 -0700 Add minds-img-landscape and minds-img-portrait Add scss stylings for archive view commit 9bb99f5 Author: Alex <[email protected]> Date: Wed Oct 19 19:44:25 2016 -0700 Resize images in archive view Pure css scaling in browsers w/ polyfill support.
Minds · Feb 14, 2017 · 4028fc9 · 4028fc9
1 parent 59e096a
commit 4028fc9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/plugins/archive/app/archive.scss b/plugins/archive/app/archive.scss
@@ -64,10 +64,20 @@ minds-archive-theatre{
     left: 0;
     bottom: 0;
     right: 0;
-
+    .minds-img-landscape{
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+    .minds-img-portrait{
+      img{
+        height: 100%;
+        width: auto;
+      }
+    }
     img{
-      max-width:100%;
-      height:100%;
+      object-fit: contain;
     }
     minds-video{
       background:#000;

diff --git a/plugins/archive/app/view/views/theatre.ts b/plugins/archive/app/view/views/theatre.ts
@@ -18,7 +18,7 @@ import { Material } from '../../../../directives/material';
       [hidden]="object.container_guid == object.owner_guid || !object.album_children_guids || object.album_children_guids.length <= 1">
         keyboard_arrow_left
     </i>
-    <div class="minds-archive-stage" *ngIf="object.subtype == 'image'">
+    <div class="minds-archive-stage" [ngClass]="{minds-image-landscape: orientation == 'landscape', minds-image-portrait: orientation == 'portrait'}" *ngIf="object.subtype == 'image'">
       <img src="/archive/thumbnail/{{object.guid}}/xlarge"/>
     </div>
     <div class="minds-archive-stage" *ngIf="object.subtype == 'video'">
@@ -44,6 +44,7 @@ import { Material } from '../../../../directives/material';
 export class ArchiveTheatre {
 
   object: any = {};
+  orientation: string;
   session = SessionFactory.build();
 
   constructor(public client: Client, public router: Router){
@@ -53,6 +54,14 @@ export class ArchiveTheatre {
     if(!value.guid)
       return;
     this.object = value;
+    if(this.object.subtype == 'image'){
+      /*Check image's aspect ratio for landscape or l*/
+      if(this.object.naturalWidth >= this.object.naturalHeight){
+        this.orientation = 'landscape';
+      } else {
+        this.orientation = 'portrait';
+      }
+    }
   }
 
   prev(){