barunespadhy/rangolio
barunespadhy/rangolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some visual enhancements

Browse Source
This commit is contained in:
Barunes Padhy 2024-06-04 07:03:10 +03:00
parent 136980b379
commit 7e1d49936d
12 changed files with 129 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend/.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$USER_HOME$/.cache/JetBrains/Fleet/backend/rangolio.17njcr71mpdhh27o09j2/projects/backend.2429c98e/external_build_system/modules/backend-fleet.iml" filepath="$USER_HOME$/.cache/JetBrains/Fleet/backend/rangolio.17njcr71mpdhh27o09j2/projects/backend.2429c98e/external_build_system/modules/backend-fleet.iml" />
</modules>
</component>
</project>

28
backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py Normal file
View File

@ -0,0 +1,28 @@
# Generated by Django 5.0.6 on 2024-06-03 11:22
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('apimanager', '0011_remove_blog_id_remove_category_id_alter_blog_blog_id_and_more'),
]
operations = [
migrations.AddField(
model_name='userdata',
name='built_with',
field=models.BooleanField(default=True),
),
migrations.AlterField(
model_name='userdata',
name='dark_theme',
field=models.CharField(default='{"theme": "Dark Mode","background": "bg-dark","textColor": "text-white","linkBackground": "bg-light","linkTextColor": "text-black","captionColor": "#8a8a8a","fontAwesomeIcon": "faSun","borderColor": "secondary","buttonColor": "light","navBar": {"navBarTheme": "navbar-dark","background": "bg-secondary","buttonColor": "light"},"footer": {"background": "bg-secondary","text": "text-black"}}', max_length=1500),
),
migrations.AlterField(
model_name='userdata',
name='light_theme',
field=models.CharField(default='{"theme": "Light Mode","background": "bg-light","textColor": "text-black","linkBackground": "bg-dark","linkTextColor": "text-white","captionColor": "#605f5f","fontAwesomeIcon": "faMoon","borderColor": "secondary","buttonColor": "dark","navBar": {"navBarTheme": "navbar-light","background": "bg-secondary","buttonColor": "light"},"footer": {"background": "bg-secondary","text": "text-white"}}', max_length=1500),
),
]

1
backend/apimanager/models.py
View File

@ -6,6 +6,7 @@ class UserData(models.Model):
name = models.CharField(default=userdata["name"], null=False, blank=False, max_length=200) name = models.CharField(default=userdata["name"], null=False, blank=False, max_length=200)
intro_content = models.CharField(default=userdata["intro_content"], null=False, blank=False, max_length=100000) intro_content = models.CharField(default=userdata["intro_content"], null=False, blank=False, max_length=100000)
profile_photo = models.CharField(null=True, blank=True, max_length=500) profile_photo = models.CharField(null=True, blank=True, max_length=500)
built_with = models.BooleanField(default=True)
default_theme = models.CharField(default=userdata["default_theme"], null=False, blank=False, max_length=200) default_theme = models.CharField(default=userdata["default_theme"], null=False, blank=False, max_length=200)
dark_theme = models.CharField(default=userdata["dark_theme"], null=False, blank=False, max_length=1500) dark_theme = models.CharField(default=userdata["dark_theme"], null=False, blank=False, max_length=1500)
light_theme = models.CharField(default=userdata["light_theme"], null=False, blank=False, max_length=1500) light_theme = models.CharField(default=userdata["light_theme"], null=False, blank=False, max_length=1500)

1
backend/apimanager/serializers.py
View File

@ -13,6 +13,7 @@ class UserDataSerializer(serializers.ModelSerializer):
'name', 'name',
'intro_content', 'intro_content',
'profile_photo', 'profile_photo',
'built_with'
] ]
class ThemeDataSerializer(serializers.ModelSerializer): class ThemeDataSerializer(serializers.ModelSerializer):

4
frontend/index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/data/homepage/media/profile.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Rangolio</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

4
frontend/src/App.jsx
View File

@ -34,8 +34,10 @@ function App() {
} }
useEffect(() => { useEffect(() => {
DataService.getData('shared/user-data').then( response => DataService.getData('shared/user-data').then( response =>{
setUserData(response.data) setUserData(response.data)
document.title = response.data.name
}
) )
DataService.getData('shared/theme-config').then( response =>{ DataService.getData('shared/theme-config').then( response =>{
setThemeConfig(response.data) setThemeConfig(response.data)

4
frontend/src/AppEditable.jsx
View File

@ -49,8 +49,10 @@ function AppEditable() {
setUserData({ setUserData({
"name": responseData["name"], "name": responseData["name"],
"introContent": responseData["intro_content"], "introContent": responseData["intro_content"],
"profilePhoto": responseData["profile_photo"] "profilePhoto": responseData["profile_photo"],
"builtWith": responseData["built_with"]
}) })
document.title = responseData.name
} }
) )
EditableDataService.getData('/data/shared/theme-config/').then( response =>{ EditableDataService.getData('/data/shared/theme-config/').then( response =>{

27
frontend/src/components/editable/blog-list.jsx
View File

@ -30,12 +30,12 @@ function BlogList(props) {
const ThemeConfig = props.ThemeConfig; const ThemeConfig = props.ThemeConfig;
const [categoryData, setCategoryData] = useState('loading'); const [categoryData, setCategoryData] = useState('loading');
const [featuredBlogData, setFeaturedBlogData] = useState(null);
const loadBlogs = () => { const loadBlogs = () => {
EditableDataService.getData(`/data/category/${categoryID}/`).then(response => { EditableDataService.getData(`/data/category/${categoryID}/`).then(response => {
let responseData = response.data let responseData = response.data
let blogMetadata = [] let blogMetadata = []
console.log(responseData)
let localCategoryData = { let localCategoryData = {
"id": responseData["category_id"], "id": responseData["category_id"],
"name": responseData["name"], "name": responseData["name"],
@ -57,6 +57,7 @@ function BlogList(props) {
} }
localCategoryData.blogMetadata = blogMetadata localCategoryData.blogMetadata = blogMetadata
setCategoryData(localCategoryData) setCategoryData(localCategoryData)
setFeaturedBlogData(blogMetadata.find(blog => blog.id === localCategoryData.featuredBlog))
} }
); );
} }
@ -107,12 +108,26 @@ return (
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}> <div className="container">
<h3 className={`${ThemeConfig[GlobalTheme].textColor}`}> {
featuredBlogData ?
<CardListViewer
key={featuredBlogData.id}
totalItems={featuredBlogData === 'nodata' ? 0 : 1}
cardType={"longCard"}
resourceType={"blog"}
textColor={ThemeConfig[GlobalTheme].textColor}
bgColor={ThemeConfig[GlobalTheme].background}
borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={featuredBlogData}
/> : ''
}
<div className="row">
{categoryData === 'loading' ? <Spinner /> : {categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => ( categoryData.blogMetadata.map((item, index) => (
<div className="col-3" key={item.blog_id}>
<div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<CardListViewer <CardListViewer
key={item.blog_id} // Ensuring keys are unique and correct
totalItems={categoryData.blogMetadata.length} totalItems={categoryData.blogMetadata.length}
featuredBlog={categoryData.featuredBlog} featuredBlog={categoryData.featuredBlog}
updateFeaturedBlog={updateFeaturedBlog} updateFeaturedBlog={updateFeaturedBlog}
@ -123,9 +138,11 @@ return (
borderColor={ThemeConfig[GlobalTheme].borderColor} borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={item} itemObject={item}
/> />
</div>
</div>
)) ))
} }
</h3> </div>
</div> </div>
</Col> </Col>
</Row> </Row>

4
frontend/src/components/editable/blog.jsx
View File

@ -127,14 +127,14 @@ function Blog(props) {
color={ThemeConfig[GlobalTheme].buttonColor} color={ThemeConfig[GlobalTheme].buttonColor}
onClick={() => toggleFileModal()} onClick={() => toggleFileModal()}
> >
Set Profile Photo Set Cover Image
</Button> </Button>
<Button <Button
outline outline
color={ThemeConfig[GlobalTheme].buttonColor} color={ThemeConfig[GlobalTheme].buttonColor}
onClick={() => setCoverImage('-')} onClick={() => setCoverImage('-')}
> >
Remove Profile Photo Remove Cover Image
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<InputGroup className="mb-3"> <InputGroup className="mb-3">

4
frontend/src/components/editable/shared/footer.jsx
View File

@ -80,7 +80,9 @@ const Footer = (props) => {
<div className="blogContent text-center text-md-left mt-3"> <div className="blogContent text-center text-md-left mt-3">
{new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a> {new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a>
<br /> <br />
Built with <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a> <div className='m-2'>
{ UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""}
</div>
</div> </div>
</Col> </Col>
</Row> </Row>

28
frontend/src/components/viewable/blog-list.jsx
View File

@ -35,14 +35,7 @@ function BlogList(props) {
useEffect(() => { useEffect(() => {
DataService.getData(`category/${categoryID}/category-data`).then(response =>{ DataService.getData(`category/${categoryID}/category-data`).then(response =>{
setCategoryData(response.data); setCategoryData(response.data);
console.log(response.data) setFeaturedBlogData(response.data.blogMetadata.find(blog => blog.id === response.data.featuredBlog))
if (response.data.featuredBlog){
DataService.getData(`blog/${response.data.featuredBlog}/blog-data`).then(response =>
setFeaturedBlogData(response.data)
);
}
else
setFeaturedBlogData("nodata")
} }
); );
}, [categoryID]); }, [categoryID]);
@ -63,12 +56,9 @@ function BlogList(props) {
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}> <div className="container">
<h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
{`Featured`}
</h3>
{ {
featuredBlogData === 'loading' ? <Spinner /> : featuredBlogData ?
<CardListViewer <CardListViewer
key={featuredBlogData.id} key={featuredBlogData.id}
totalItems={featuredBlogData === 'nodata' ? 0 : 1} totalItems={featuredBlogData === 'nodata' ? 0 : 1}
@ -78,13 +68,14 @@ function BlogList(props) {
bgColor={ThemeConfig[GlobalTheme].background} bgColor={ThemeConfig[GlobalTheme].background}
borderColor={ThemeConfig[GlobalTheme].borderColor} borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={featuredBlogData} itemObject={featuredBlogData}
/> /> : ''
} }
{ <div className="row">
categoryData === 'loading' ? <Spinner /> : {categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => ( categoryData.blogMetadata.map((item, index) => (
<div className="col-3" key={item.id}>
<div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<CardListViewer <CardListViewer
key={item.id}
totalItems={categoryData.blogMetadata.length} totalItems={categoryData.blogMetadata.length}
cardType={"smallCard"} cardType={"smallCard"}
resourceType={"blog"} resourceType={"blog"}
@ -93,9 +84,12 @@ function BlogList(props) {
borderColor={ThemeConfig[GlobalTheme].borderColor} borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={item} itemObject={item}
/> />
</div>
</div>
)) ))
} }
</div> </div>
</div>
</Col> </Col>
</Row> </Row>
</Container> </Container>

2
frontend/src/components/viewable/shared/footer.jsx
View File

@ -23,8 +23,10 @@ const Footer = (props) => {
<div className="blogContent text-center text-md-left mt-3"> <div className="blogContent text-center text-md-left mt-3">
{new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a> {new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a>
<br /> <br />
<div className='m-2'>
{ UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""} { UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""}
</div> </div>
</div>
</Col> </Col>
</Row> </Row>
</Container> </Container>