From bac3c856dd6a5dce4c249e62aa30a6e6df2497fb Mon Sep 17 00:00:00 2001 From: YY Date: Mon, 3 Feb 2020 02:06:54 +0800 Subject: [PATCH] v1.0.6 Set RWD layout to react-grid-carousel Remove reload button Use css animation for loading spinner --- __e2e__/functional.test.js | 2 - components/Carousel.js | 26 ++++---- components/Gallery.js | 118 +++++++++++++++++++++---------------- components/ImageItem.js | 8 +-- index.user.js | 16 ++--- meta.js | 2 +- package-lock.json | 10 ++-- package.json | 4 +- 8 files changed, 96 insertions(+), 90 deletions(-) diff --git a/__e2e__/functional.test.js b/__e2e__/functional.test.js index 2b15701..0f317ee 100644 --- a/__e2e__/functional.test.js +++ b/__e2e__/functional.test.js @@ -4,7 +4,6 @@ const el = { root: { css: '#dcard-images-root' }, BrowseBtn: { css: '[class*=BrowseBtn_]' }, CloseBtn: { css: '[class*=Gallery__CloseBtn]' }, - ReloadBtn: { css: '[class*=Gallery__ReloadBtn]' }, Grid: { css: '[class*=ImageItem__Item]' }, Carousel: { css: '[class*=Carousel_]' } } @@ -20,7 +19,6 @@ Scenario('Click the BrowseBtn to open Gallery', I => { I.click(locate(el.root).find(el.BrowseBtn)) I.wait(2) I.seeElement(locate(el.root).find(el.CloseBtn)) - I.seeElement(locate(el.root).find(el.ReloadBtn)) I.seeElement(locate(el.root).find(el.Grid)) I.saveScreenshot('Gallery.png') }) diff --git a/components/Carousel.js b/components/Carousel.js index 3bcd33c..ea2cccc 100644 --- a/components/Carousel.js +++ b/components/Carousel.js @@ -1,11 +1,7 @@ import React, { useState, useEffect } from 'react' import styled from 'styled-components' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { - faAngleLeft, - faCaretLeft, - faCaretRight -} from '@fortawesome/free-solid-svg-icons' +import { faAngleLeft, faCaretLeft } from '@fortawesome/free-solid-svg-icons' const Conatienr = styled.div` width: 100%; @@ -97,6 +93,7 @@ const PrevBtn = styled(btnBase)` const NextBtn = styled(btnBase)` right: 50px; + transform: translateY(-50%) rotate(180deg); ` const Carousel = ({ images, index, onClose }) => { @@ -108,20 +105,19 @@ const Carousel = ({ images, index, onClose }) => { const handleIndex = amount => { let nextPage = currentIndex + amount - if (nextPage >= images.length) { - nextPage = 0 - } - - if (nextPage < 0) { - nextPage = images.length - 1 - } - - setCurrentIndex(nextPage) + setCurrentIndex( + nextPage >= images.length + ? 0 + : nextPage < 0 + ? images.length - 1 + : nextPage + ) } const { floor, host, school, department, createdAt, gender, img } = images[ currentIndex ] + return (