mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: various ui issues
This commit is contained in:
swve
parent
953207cf8b
commit
2683501f82
6 changed files with 38 additions and 168 deletions
|
|
@ -24,7 +24,6 @@ import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
|
|||
import Link from "next/link";
|
||||
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
|
||||
import { OrderedList } from "@tiptap/extension-ordered-list";
|
||||
import {ListItem} from '@tiptap/extension-list-item'
|
||||
|
||||
|
||||
interface Editor {
|
||||
|
|
@ -116,14 +115,14 @@ function Editor(props: Editor) {
|
|||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<EditorTop>
|
||||
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
|
||||
<EditorDocSection>
|
||||
<EditorInfoWrapper>
|
||||
<Link href="/">
|
||||
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
|
||||
</Link>
|
||||
<Link target="_blank" href={`/course/${course_id}/edit`}>
|
||||
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.course.course.org_id,props.course.course.course_id,props.course.course.thumbnail)}`} alt=""></EditorInfoThumbnail>
|
||||
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.course.course.org_id, props.course.course.course_id, props.course.course.thumbnail)}`} alt=""></EditorInfoThumbnail>
|
||||
</Link>
|
||||
<EditorInfoDocName>
|
||||
{" "}
|
||||
|
|
@ -140,10 +139,16 @@ function Editor(props: Editor) {
|
|||
{!auth.isAuthenticated && <span>Loading</span>}
|
||||
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />}
|
||||
</EditorUserProfileWrapper>
|
||||
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey" }} />
|
||||
<EditorLeftOptionsSection>
|
||||
<EditorLeftOptionsSaveButton onClick={() => props.setContent(editor.getJSON())}> Save </EditorLeftOptionsSaveButton>
|
||||
<ToolTip content="Preview"><Link target="_blank" href={`/course/${course_id}/activity/${activity_id}`}><EditorLeftOptionsPreviewButton> <Eye size={15} /> </EditorLeftOptionsPreviewButton></Link></ToolTip>
|
||||
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey", opacity:'0.5' }} />
|
||||
<EditorLeftOptionsSection className="space-x-2 pl-2 pr-3">
|
||||
<div className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer" onClick={() => props.setContent(editor.getJSON())}> Save </div>
|
||||
<ToolTip content="Preview">
|
||||
<Link target="_blank" href={`/course/${course_id}/activity/${activity_id}`}>
|
||||
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
|
||||
<Eye className="mx-auto items-center" size={15} />
|
||||
</div>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</EditorLeftOptionsSection>
|
||||
</EditorUsersSection>
|
||||
</EditorTop>
|
||||
|
|
@ -170,8 +175,6 @@ function Editor(props: Editor) {
|
|||
const Page = styled.div`
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
padding-top: 30px;
|
||||
|
||||
// dots background
|
||||
|
|
@ -183,9 +186,7 @@ const Page = styled.div`
|
|||
`;
|
||||
|
||||
const EditorTop = styled.div`
|
||||
background-color: #ffffffeb;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: saturate(180%) blur(14px);
|
||||
margin: 40px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -194,7 +195,7 @@ const EditorTop = styled.div`
|
|||
justify-content: space-between;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
z-index: 303;
|
||||
width: -webkit-fill-available;
|
||||
`;
|
||||
|
||||
|
|
@ -217,50 +218,6 @@ const EditorLeftOptionsSection = styled.div`
|
|||
align-items: center;
|
||||
`;
|
||||
|
||||
const EditorLeftOptionsSaveButton = styled.button`
|
||||
background-color: #8783f7;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #4a44f9;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`;
|
||||
|
||||
const EditorLeftOptionsPreviewButton = styled.button`
|
||||
background-color: #a4a4a449;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: #000000;
|
||||
padding: 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
// center icon
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #c0bfbf;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
|
||||
// Inside EditorDocSection
|
||||
const EditorInfoWrapper = styled.div`
|
||||
|
|
@ -300,33 +257,6 @@ const EditorInfoDocName = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const EditorSaveButton = styled.div`
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
margin-left: 7px;
|
||||
background: #ffffff8d;
|
||||
color: #5252528d;
|
||||
border: solid 1px #52525257;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 53px;
|
||||
|
||||
&.is-active {
|
||||
background: rgba(176, 176, 176, 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 31, 31, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const EditorInfoThumbnail = styled.img`
|
||||
height: 25px;
|
||||
|
|
@ -346,6 +276,7 @@ export const EditorContentWrapper = styled.div`
|
|||
margin-top: 90px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
z-index: 300;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
|
||||
|
||||
// disable chrome outline
|
||||
|
|
@ -412,11 +343,13 @@ export const EditorContentWrapper = styled.div`
|
|||
|
||||
ul, ol {
|
||||
padding: 0 1rem;
|
||||
padding-left: 10px;
|
||||
padding-left: 20px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export default Editor;
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ const ToolBtn = styled.div`
|
|||
|
||||
const ToolSelect = styled.select`
|
||||
display: flex;
|
||||
background: rgba(217, 217, 217, 0.24);
|
||||
background: rgba(217, 217, 217, 0.185);
|
||||
border-radius: 6px;
|
||||
width: 100px;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { getUriWithOrg } from "@services/config/config";
|
||||
import { getUriWithOrg } from "@services/config/config";
|
||||
import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
||||
import ClientComponentSkeleton from "@components/Utils/ClientComp";
|
||||
import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
|
||||
|
|
@ -10,23 +10,22 @@ import { getOrgLogoMediaDirectory } from "@services/media/media";
|
|||
|
||||
export const Menu = async (props: any) => {
|
||||
const orgslug = props.orgslug;
|
||||
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||
|
||||
const org = await getOrganizationContextInfo(orgslug, { revalidate: 0, tags: ['organizations'] });
|
||||
return (
|
||||
<>
|
||||
<div className="h-[60px] blur-3xl z-10" style={{
|
||||
<div className="backdrop-blur-lg h-[60px] blur-3xl z-10" style={{
|
||||
}}>
|
||||
<div className="h-[150px] blur-3xl z-0" style={{
|
||||
background: "radial-gradient(1397.20% 56.18% at 75.99% 53.73%, rgba(253, 182, 207, 0.08) 0%, rgba(3, 110, 146, 0.08) 100%)"
|
||||
}}></div>
|
||||
|
||||
</div>
|
||||
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
|
||||
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
|
||||
<div className="flex items-center space-x-5 w-full max-w-screen-2xl mx-auto px-16">
|
||||
<div className="logo flex ">
|
||||
<Link href={getUriWithOrg(orgslug, "/")}>
|
||||
<div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center" >
|
||||
{org?.logo ? (
|
||||
{org.logo ? (
|
||||
<img
|
||||
src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`}
|
||||
alt="Learnhouse"
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ h5 {
|
|||
|
||||
ul, ol {
|
||||
padding: 0 1rem;
|
||||
padding-left: 10px;
|
||||
padding-left: 20px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
|
|
|
|||
88
front/package-lock.json
generated
88
front/package-lock.json
generated
|
|
@ -24,7 +24,7 @@
|
|||
"@tiptap/starter-kit": "^2.0.0-beta.199",
|
||||
"avvvatars-react": "^0.4.2",
|
||||
"formik": "^2.2.9",
|
||||
"framer-motion": "^7.3.6",
|
||||
"framer-motion": "^10.16.1",
|
||||
"lucide-react": "^0.268.0",
|
||||
"next": "^13.4.19",
|
||||
"re-resizable": "^6.9.9",
|
||||
|
|
@ -2259,64 +2259,6 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/animation": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
|
||||
"integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
|
||||
"dependencies": {
|
||||
"@motionone/easing": "^10.15.1",
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/dom": {
|
||||
"version": "10.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.16.2.tgz",
|
||||
"integrity": "sha512-bnuHdNbge1FutZXv+k7xub9oPWcF0hsu8y1HTH/qg6av58YI0VufZ3ngfC7p2xhMJMnoh0LXFma2EGTgPeCkeg==",
|
||||
"dependencies": {
|
||||
"@motionone/animation": "^10.15.1",
|
||||
"@motionone/generators": "^10.15.1",
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/easing": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
|
||||
"integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
|
||||
"dependencies": {
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/generators": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
|
||||
"integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
|
||||
"dependencies": {
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/types": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
|
||||
"integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA=="
|
||||
},
|
||||
"node_modules/@motionone/utils": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
|
||||
"integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
|
||||
"dependencies": {
|
||||
"@motionone/types": "^10.15.1",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "13.4.19",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.19.tgz",
|
||||
|
|
@ -5781,13 +5723,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "7.10.3",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz",
|
||||
"integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==",
|
||||
"version": "10.16.1",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.1.tgz",
|
||||
"integrity": "sha512-K6TXr5mZtitC/dxQCBdg7xzdN0d5IAIrlaqCPKtIQVdzVPGC0qBuJKXggHX1vjnP5gPOFwB1KbCCTWcnFc3kWg==",
|
||||
"dependencies": {
|
||||
"@motionone/dom": "^10.15.3",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "2.4.0"
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@emotion/is-prop-valid": "^0.8.2"
|
||||
|
|
@ -5795,13 +5735,16 @@
|
|||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion/node_modules/tslib": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
||||
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
||||
},
|
||||
"node_modules/fs-readdir-recursive": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
|
||||
|
|
@ -6135,11 +6078,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hey-listen": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
|
||||
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"@tiptap/starter-kit": "^2.0.0-beta.199",
|
||||
"avvvatars-react": "^0.4.2",
|
||||
"formik": "^2.2.9",
|
||||
"framer-motion": "^7.3.6",
|
||||
"framer-motion": "^10.16.1",
|
||||
"lucide-react": "^0.268.0",
|
||||
"next": "^13.4.19",
|
||||
"re-resizable": "^6.9.9",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue