New release :D with single-tile view (Set limit to 1 and tile view)

Author: rasmusfjord

package-lock.json

@@ -18,4 +18,4 @@
         "grunt-umbraco-package": "1.0.0",
         "grunt-contrib-clean": "^0.7.0"
     }
-}
+}

package.json

@@ -91,6 +91,12 @@
                 if (!scope.cfg.image.width) scope.cfg.image.width = 250;
                 if (!scope.cfg.image.height) scope.cfg.image.height = scope.cfg.image.width / 16 * 10;
 
+                //Single image size change
+                if (scope.cfg.limit == 1 && scope.cfg.layout.initial == 'tiles') {
+                    scope.cfg.image.width = 1000;
+                    scope.cfg.image.height = scope.cfg.image.width / 16 * 10;
+                }
+
                 if (!scope.cfg.layout) scope.cfg.layout = {};
                 if (scope.cfg.layout.initial != 'tiles') scope.cfg.layout.initial = 'list';
                 if (!scope.cfg.layout.hideSelector) scope.cfg.layout.hideSelector = false;

releases/github/Skybrud.ImagePicker.v1.1.2.zip

@@ -86,6 +86,11 @@
   border: 1px solid #d9d9d9;
   background: #F8F8F8;
 }
+.SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-item.single-tile {
+  width: 99% !important;
+  max-width: 99% !important;
+  min-height: 350px;
+}
 .SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-add {
   margin-bottom: 10px;
   width: 250px;
@@ -99,6 +104,26 @@
   min-height: 175px;
   padding: 4px;
 }
+.SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-add.single-add {
+  margin: 0 auto;
+  width: 99% !important;
+  max-width: 99% !important;
+  height: 250px;
+  border: 4px dashed #d9d9d9;
+}
+.SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-add.single-add .help-text {
+  font-size: 24px;
+  font-weight: bold;
+  color: #666;
+  position: absolute;
+  top: 70%;
+  left: 0;
+  right: 0;
+  margin-top: -10px;
+}
+.SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-add.single-add i {
+  font-size: 64px !important;
+}
 .SkybrudImagePicker .SkybrudImagePickerTiles .tile.tile-add i {
   font-size: 32px;
   position: absolute;
@@ -164,6 +189,13 @@
 .SkybrudImagePicker .image:hover .remove {
   display: block;
 }
+.SkybrudImagePicker .single-tile .image {
+  overflow: hidden;
+  height: 250px;
+}
+.SkybrudImagePicker .single-tile img {
+  width: 100%;
+}
 .SkybrudImagePicker .ui-sortable-helper {
   display: none;
 }
@@ -203,7 +235,7 @@
   font-size: 14px;
 }
 .show-validation.ng-invalid .SkybrudImagePicker .umb-table-cell > .error {
-  background-color: #9d261d!important;
+  background-color: #9d261d !important;
   padding: 5px 10px;
   color: white;
 }
@@ -319,4 +351,4 @@
 }
 .ImagePickerDebugger label + label {
   margin-top: 10px;
-}
+}

releases/nuget/Skybrud.ImagePicker.1.1.2.nupkg

@@ -81,6 +81,12 @@
             &.tile-item {
                 border: 1px solid #d9d9d9;
                 background: #F8F8F8;
+
+                &.single-tile {
+                    width: 99% !important;
+                    max-width: 99% !important;
+                    min-height: 350px;
+                }
             }
 
             &.tile-add {
@@ -96,6 +102,29 @@
                 min-height: 175px;
                 padding: 4px;
 
+                &.single-add {
+                    margin: 0 auto;
+                    width: 99% !important;
+                    max-width: 99% !important;
+                    height: 250px;
+                    border: 4px dashed #d9d9d9;
+
+                    .help-text {
+                        font-size: 24px;
+                        font-weight: bold;
+                        color: #666;
+                        position: absolute;
+                        top: 70%;
+                        left: 0;
+                        right: 0;
+                        margin-top: -10px;
+                    }
+
+                    i {
+                        font-size: 64px !important;
+                    }
+                }
+
                 i {
                     font-size: 32px;
                     position: absolute;
@@ -152,7 +181,6 @@
                 border: 1px solid #ccc;
             }
         }
-
     }
 
     .image {
@@ -180,6 +208,17 @@
             display: block;
         }
     }
+
+    .single-tile {
+        .image {
+            overflow: hidden;
+            height: 250px;
+        }
+
+        img {
+            width: 100%;
+        }
+    }
     /*.sortable-helper {
         border: inherit;
         background-color: #d0e7f1 !important;
@@ -234,9 +273,10 @@
     }
 
     .show-validation.ng-invalid & .umb-table-cell > .error {
-        background-color: #9d261d!important;
+        background-color: #9d261d !important;
         padding: 5px 10px;
         color: white;
+
         &:before {
             margin-right: 5px;
             font-family: 'icomoon';
@@ -252,6 +292,7 @@
                 border: 1px solid #9d261d;
                 box-sizing: border-box;
             }
+
             &.link .error a {
                 color: #9d261d;
             }
@@ -307,6 +348,7 @@
     position: static;
     height: auto;
     margin: 0;
+
     &:after, &:before {
         display: none;
     }
@@ -316,13 +358,16 @@
 
     .option {
         margin-left: 20px;
+
         .value {
             padding: 10px 5px;
         }
+
         &.checkbox {
             padding: 0;
             min-height: initial;
             padding-bottom: 5px;
+
             .value {
                 padding-left: 10px;
             }
@@ -351,11 +396,12 @@
     .value input[type='number'] {
         width: initial;
     }
-    
+
     .option.width,
     .option.height {
         .value {
             line-height: 30px;
+
             input[type='number'] {
                 width: 50px;
             }
@@ -376,23 +422,25 @@
             font-weight: bold;
             border-bottom: 1px solid #D9D9D9;
         }
+
         & + .optionGroup {
             margin-top: 40px;
         }
     }
-
 }
 
 .ImagePickerDebugger {
     border: 2px solid red;
     margin-bottom: 20px;
     padding: 10px;
+
     label {
         display: block;
         margin: 5px 0 0 0;
         padding: 0;
     }
+
     label + label {
         margin-top: 10px;
     }
-}
+}