|
@@ -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',
|