瀏覽代碼

fix shadow arrow on the slider

makstravm 2 年之前
父節點
當前提交
4655fad465
共有 3 個文件被更改,包括 22 次插入12 次删除
  1. 11 11
      src/App.scss
  2. 1 1
      src/pages/PostPage.jsx
  3. 10 0
      src/redux/reducers/postFeed-reducer.js

+ 11 - 11
src/App.scss

@@ -266,30 +266,30 @@ video {
         border: none;
         position: absolute;
         padding: 0;
-        background-color: rgba(0, 0, 0, 0.165);
-        bottom: 1px;
-        top: 1px;
-        width: 50px;
+        background-color: rgba($color: #FFF, $alpha: 0.7);
+        height: 39px;
+        width: 39px;
+        border-radius: 50%;
         transition: 0.4s;
         z-index: 5;
+        top: 50%;
+        transform: translateY(-50%);
         cursor: pointer;
         svg {
-            fill: $defaultColorW;
-            opacity: 0.5;
-            width: 50px;
-            height: 30px;
-            transition: 0.4s;
+            opacity: 0.8;
+            width: 40px;
+            height: 40px;
         }
     }
     &__prev {
-        left: 0px;
+        left: 5px;
         opacity: 0;
         &.--active {
             opacity: 1;
         }
     }
     &__next {
-        right: 0px;
+        right: 5px;
         opacity: 0;
         &.--active {
             opacity: 1;

+ 1 - 1
src/pages/PostPage.jsx

@@ -9,7 +9,7 @@ import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
 import { Comment, Tooltip } from 'antd';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
-import { DeleteOutlined, EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
+import {  EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
 import { actionLikeComment, actionDelLikeComment, actionSubComment } from '../actions';
 import { CPostTitle } from '../components/main/post/PostTitle';
 import { UserAvatar } from '../components/header/UserAvatar';

+ 10 - 0
src/redux/reducers/postFeed-reducer.js

@@ -1,6 +1,7 @@
 export const postsFeedReducer = (state = {}, { type, findId, newResult, userData = {}, count = null }) => {
     const { posts } = state
     const types = {
+
         'ADD-POSTS-FEED': () => ({
             ...state,
             posts: Array.isArray(newResult)
@@ -8,13 +9,16 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 : { ...posts, ...newResult },
             count
         }),
+
         'GET-POST': () => ({ ...state, posts: { ...newResult } }),
+
         'ADD-PROFILE-DATA': () => ({
             ...state,
             posts: !!posts ? [...posts, ...newResult] : [...newResult],
             userData,
             count
         }),
+
         'REMOVE-POSTS-FEED': () => ({
             ...state,
             posts: [],
@@ -22,21 +26,25 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
             count: 0,
             subComments: {},
         }),
+
         'ADD-POST-LIKE': () => ({
             ...state,
             posts: Array.isArray(posts)
                 ? posts.map(p => p._id === findId ? p = { ...p, likes: [...newResult] } : p)
                 : { ...state.posts, likes: [...newResult] },
         }),
+
         'REMOVE-POST-LIKE': () => ({
             ...state,
             posts: Array.isArray(posts)
                 ? posts.map(p => p._id === findId ? p = { ...p, likes: [...newResult] } : p)
                 : { ...state.posts, likes: [...newResult] },
         }),
+
         'ADD-COMMENT': () => ({
             ...state, posts: { ...state.posts, comments: [...newResult] }
         }),
+
         'UPDATE-SUBCOMMENT': () => {
             const upsertSubComments = (commentList, id, nR) => {
                 return commentList.map(c => {
@@ -56,6 +64,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 ...state, posts: { ...state.posts, comments: upsertSubComments(posts.comments, findId, newResult) }
             })
         },
+
         'EDIT-COMMENT': () => {
             const { _id, text } = newResult
             const editComments = (commentList, id, nR) => {
@@ -99,6 +108,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 }
             })
         },
+        
         'UPDATE-FOLLOWERS': () => ({
             ...state,
             userData: { ...state.userData, followers: [...newResult] }