[form-builder] Select asset fixes (#1334)

* [form-builder] Nicer selectAsset on empty state * [form-builder] Opacity on devices with hover sup
sanity-io · May 24, 2019 · a752e74 · a752e74
1 parent 71dc9b6
commit a752e74
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/SelectAsset.js b/packages/@sanity/form-builder/src/inputs/ImageInput/SelectAsset.js
@@ -99,7 +99,9 @@ export default class SelectAsset extends React.Component<Props, State> {
             />
           ))}
         </div>
-        {!isLoading && assets.length === 0 && <div>No images found</div>}
+        {!isLoading && assets.length === 0 && (
+          <div className={styles.noAssets}>No images found</div>
+        )}
         <div className={styles.loadMore}>
           {!isLastPage && (
             <Button onClick={this.handleFetchNextPage} loading={isLoading}>

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/styles/Asset.css b/packages/@sanity/form-builder/src/inputs/ImageInput/styles/Asset.css
@@ -37,8 +37,12 @@
     margin: 0.2em !important;
   }
 
-  @nest &:hover {
-    opacity: 1;
+  @media (hover: hover) {
+    opacity: 0.5;
+
+    @nest &:hover {
+      opacity: 1;
+    }
   }
 }
 

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/styles/SelectAsset.css b/packages/@sanity/form-builder/src/inputs/ImageInput/styles/SelectAsset.css
@@ -3,7 +3,7 @@
 .root {
   display: block;
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh - 12em);
 }
 
 .imageList {
@@ -21,3 +21,8 @@
 .loadMore {
   margin: var(--medium-padding) 0;
 }
+
+.noAssets {
+  composes: absoluteCenter from 'part:@sanity/base/theme/layout/positioning-style';
+  font-size: var(--font-size-large);
+}