rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: modal effects

Browse source
This commit is contained in:
swve 2022-11-11 17:46:06 +01:00
parent c70f7361ce
commit 938cfcb4b3
4 changed files with 51 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -10,7 +10,7 @@ __pycache__/
.vscode/ .vscode/
# Learnhouse # Learnhouse
# content/* content/*
# Distribution / packaging # Distribution / packaging
.Python .Python

47
front/components/drags/chapter.tsx
View file

@ -3,7 +3,7 @@ import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Element, { ElementWrapper } from "./element"; import Element, { ElementWrapper } from "./element";
import Link from "next/link"; import Link from "next/link";
import { motion } from "framer-motion";
const ChapterWrapper = styled.div` const ChapterWrapper = styled.div`
margin-bottom: 5px; margin-bottom: 5px;
@ -21,19 +21,36 @@ function Chapter(props: any) {
return ( return (
<Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}> <Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<ChapterWrapper {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef} isDragging={snapshot.isDragging} key={props.info.list.chapter.id}>
<h3>{props.info.list.chapter.name} <button onClick={() => {props.deleteChapter(props.info.list.chapter.id)}}>X</button></h3> <ChapterWrapper
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="element"> {...provided.dragHandleProps}
{(provided) => ( {...provided.draggableProps}
<ElementsList {...provided.droppableProps} ref={provided.innerRef}> ref={provided.innerRef}
{props.info.list.elements.map((element: any, index: any) => ( isDragging={snapshot.isDragging}
<Element key={element.id} element={element} index={index}></Element> key={props.info.list.chapter.id}
))} >
{provided.placeholder} <h3>
</ElementsList> {props.info.list.chapter.name}{" "}
)} <button
</Droppable> onClick={() => {
</ChapterWrapper> props.deleteChapter(props.info.list.chapter.id);
}}
>
X
</button>
</h3>
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="element">
{(provided) => (
<ElementsList {...provided.droppableProps} ref={provided.innerRef}>
{props.info.list.elements.map((element: any, index: any) => (
<Element key={element.id} element={element} index={index}></Element>
))}
{provided.placeholder}
</ElementsList>
)}
</Droppable>
</ChapterWrapper>
)} )}
</Draggable> </Draggable>
); );
@ -43,6 +60,4 @@ const ElementsList = styled.div`
padding: 10px; padding: 10px;
`; `;
export default Chapter; export default Chapter;

20
front/components/modals/Modal.tsx
View file

@ -1,11 +1,27 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
function Modal(props: any) { function Modal(props: any) {
return ( return (
<div> <div>
<Overlay> <Overlay>
<Content>{props.children}</Content> <AnimatePresence>
<motion.div
initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
key="modal"
transition={{
type: "spring",
stiffness: 360,
damping: 70,
delay: 0.02,
}}
exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
>
<Content>{props.children}</Content>
</motion.div>
</AnimatePresence>
</Overlay> </Overlay>
</div> </div>
); );
@ -17,7 +33,6 @@ const Overlay = styled.div`
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100; z-index: 100;
`; `;
@ -31,5 +46,6 @@ const Content = styled.div`
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
`; `;
export default Modal; export default Modal;

1
front/styles/globals.css
View file

@ -5,6 +5,7 @@ html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
transition: all 0.2s ease;
font-family: 'DM Sans' , -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: 'DM Sans' , -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }