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: editor page css changes

Browse source
This commit is contained in:
swve 2022-12-05 12:12:19 +01:00
parent b3b001a9fd
commit e6ebd195d7
2 changed files with 31 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

39
front/components/Editor/Editor.tsx
View file

@ -10,7 +10,7 @@ import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image"; import Image from "next/image";
import styled from "styled-components"; import styled from "styled-components";
import { getBackendUrl } from "../../services/config"; import { getBackendUrl } from "../../services/config";
import { GlobeIcon, SlashIcon } from "@radix-ui/react-icons"; import { GlobeIcon, PaperPlaneIcon, SlashIcon } from "@radix-ui/react-icons";
import Avvvatars from "avvvatars-react"; import Avvvatars from "avvvatars-react";
interface Editor { interface Editor {
@ -49,7 +49,7 @@ function Editor(props: Editor) {
}); });
return ( return (
<div> <Page>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.98 }} initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
@ -72,7 +72,7 @@ function Editor(props: Editor) {
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "} <b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
</EditorInfoDocName> </EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}> <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
<GlobeIcon></GlobeIcon> Save
</EditorSaveButton> </EditorSaveButton>
</EditorInfoWrapper> </EditorInfoWrapper>
<EditorButtonsWrapper> <EditorButtonsWrapper>
@ -103,20 +103,36 @@ function Editor(props: Editor) {
<EditorContent editor={editor} /> <EditorContent editor={editor} />
</EditorContentWrapper> </EditorContentWrapper>
</motion.div> </motion.div>
</div> </Page>
); );
} }
const Page = styled.div`
height: 100vh;
width: 100%;
min-height: 100vh;
min-width: 100vw;
padding-top: 30px;
// dots background
background-image: radial-gradient(#4744446b 1px, transparent 1px), radial-gradient(#4744446b 1px, transparent 1px);
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
background-attachment: fixed;
background-repeat: repeat;
`
const EditorTop = styled.div` const EditorTop = styled.div`
background-color: white; background-color: #ffffffb8;
border-radius: 15px; border-radius: 15px;
backdrop-filter: saturate(180%) blur(14px);
margin: 40px; margin: 40px;
margin-top: 0px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
//position: fixed; position: fixed;
z-index: 3; z-index: 3;
width: -webkit-fill-available; width: -webkit-fill-available;
`; `;
@ -174,12 +190,11 @@ const EditorInfoDocName = styled.div`
const EditorSaveButton = styled.div` const EditorSaveButton = styled.div`
display: flex; display: flex;
border-radius: 6px; border-radius: 6px;
width: 25px;
height: 25px;
padding: 5px; padding: 5px;
font-size: 5px; font-size: 12px;
margin-right: 5px; margin-right: 5px;
margin-left: 7px; margin-left: 7px;
background: rgba(176, 176, 176, 0.145);
&.is-active { &.is-active {
background: rgba(176, 176, 176, 0.5); background: rgba(176, 176, 176, 0.5);
@ -203,11 +218,15 @@ const EditorInfoThumbnail = styled.img`
object-position: top; object-position: top;
border-radius: 7px; border-radius: 7px;
margin-left: 5px; margin-left: 5px;
&:hover {
cursor: pointer;
}
`; `;
const EditorContentWrapper = styled.div` const EditorContentWrapper = styled.div`
margin: 40px; margin: 40px;
margin-top: 20px; margin-top: 90px;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);

4
front/components/UI/Layout.tsx
View file

@ -20,7 +20,7 @@ const Layout = (props: any) => {
<meta name="description" content={props.description} /> <meta name="description" content={props.description} />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel> <ProjectPhaseLabel>🚧 Dev Phase</ProjectPhaseLabel>
<Menu></Menu> <Menu></Menu>
<motion.main <motion.main
variants={variants} // Pass the variant object into Framer Motion variants={variants} // Pass the variant object into Framer Motion
@ -57,7 +57,7 @@ const Footer = styled.footer`
} }
`; `;
export const PreAlphaLabel = styled.div` export const ProjectPhaseLabel = styled.div`
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;