浏览代码

Add spacing between image and button

Vishnu 4 年之前
父节点
当前提交
7d916d17c6
共有 1 个文件被更改,包括 8 次插入8 次删除
  1. 8 8
      src/components/PhotoFrame.tsx

+ 8 - 8
src/components/PhotoFrame.tsx

@@ -62,7 +62,7 @@ const ListItem = styled.div`
     justify-content: center;
     justify-content: center;
 `;
 `;
 
 
-const getTemplateColumns = (columns: number, groups?: number[]):string => {
+const getTemplateColumns = (columns: number, groups?: number[]): string => {
     if (groups) {
     if (groups) {
         const sum = groups.reduce((acc, item) => acc + item, 0);
         const sum = groups.reduce((acc, item) => acc + item, 0);
         if (sum < columns) {
         if (sum < columns) {
@@ -82,12 +82,12 @@ const ListContainer = styled.div<{ columns: number, groups?: number[] }>`
     width: 100%;
     width: 100%;
     color: #fff;
     color: #fff;
 
 
-    @media(max-width: ${IMAGE_CONTAINER_MAX_WIDTH*4}px) {
+    @media(max-width: ${IMAGE_CONTAINER_MAX_WIDTH * 4}px) {
         padding: 0 4px;
         padding: 0 4px;
     }
     }
 `;
 `;
 
 
-const DateContainer = styled.div<{span: number}>`
+const DateContainer = styled.div<{ span: number }>`
     white-space: nowrap;
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
@@ -97,7 +97,7 @@ const DateContainer = styled.div<{span: number}>`
     height: ${DATE_CONTAINER_HEIGHT}px;
     height: ${DATE_CONTAINER_HEIGHT}px;
 `;
 `;
 
 
-const BannerContainer = styled.div<{span: number}>`
+const BannerContainer = styled.div<{ span: number }>`
     color: #979797;
     color: #979797;
     text-align: center;
     text-align: center;
     grid-column: span ${(props) => props.span};
     grid-column: span ${(props) => props.span};
@@ -293,7 +293,7 @@ const PhotoFrame = ({
                 try {
                 try {
                     await new Promise((resolve, reject) => {
                     await new Promise((resolve, reject) => {
                         const video = document.createElement('video');
                         const video = document.createElement('video');
-                        video.addEventListener('timeupdate', function() {
+                        video.addEventListener('timeupdate', function () {
                             clearTimeout(t);
                             clearTimeout(t);
                             resolve(null);
                             resolve(null);
                         });
                         });
@@ -396,8 +396,8 @@ const PhotoFrame = ({
 
 
     const isSameDay = (first, second) => (
     const isSameDay = (first, second) => (
         first.getFullYear() === second.getFullYear() &&
         first.getFullYear() === second.getFullYear() &&
-            first.getMonth() === second.getMonth() &&
-            first.getDate() === second.getDate()
+        first.getMonth() === second.getMonth() &&
+        first.getDate() === second.getDate()
     );
     );
 
 
     /**
     /**
@@ -472,11 +472,11 @@ const PhotoFrame = ({
             {!isFirstLoad && files.length === 0 && !searchMode ? (
             {!isFirstLoad && files.length === 0 && !searchMode ? (
                 <EmptyScreen>
                 <EmptyScreen>
                     <img height={150} src='/images/gallery.png' />
                     <img height={150} src='/images/gallery.png' />
-                    <br/>
                     <Button
                     <Button
                         variant="outline-success"
                         variant="outline-success"
                         onClick={openFileUploader}
                         onClick={openFileUploader}
                         style={{
                         style={{
+                            marginTop: '32px',
                             paddingLeft: '32px',
                             paddingLeft: '32px',
                             paddingRight: '32px',
                             paddingRight: '32px',
                             paddingTop: '12px',
                             paddingTop: '12px',