rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09: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/
# Learnhouse
# content/*
content/*
# Distribution / packaging
.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 Element, { ElementWrapper } from "./element";
import Link from "next/link";
import { motion } from "framer-motion";
const ChapterWrapper = styled.div`
margin-bottom: 5px;
@ -21,19 +21,36 @@ function Chapter(props: any) {
return (
<Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
{(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>
<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>
<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>
<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>
);
@ -43,6 +60,4 @@ const ElementsList = styled.div`
padding: 10px;
`;
export default Chapter;

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

@ -1,11 +1,27 @@
import React from "react";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
function Modal(props: any) {
return (
<div>
<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>
</div>
);
@ -17,7 +33,6 @@ const Overlay = styled.div`
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
`;
@ -31,5 +46,6 @@ const Content = styled.div`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
`;
export default Modal;

1
front/styles/globals.css
View file

@ -5,6 +5,7 @@ html,
body {
padding: 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;
}