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):

6
frontend/index.html
View File

@ -2,12 +2,12 @@
<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>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

6
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 =>{

65
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"],
@ -46,17 +46,18 @@ function BlogList(props) {
"blogMetadata": responseData["blog_metadata"] "blogMetadata": responseData["blog_metadata"]
} }
for (let eachBlog of responseData["blog_metadata"]){ for (let eachBlog of responseData["blog_metadata"]){
blogMetadata.push({ blogMetadata.push({
"id": eachBlog["blog_id"], "id": eachBlog["blog_id"],
"name": eachBlog["name"], "name": eachBlog["name"],
"description": eachBlog["description"], "description": eachBlog["description"],
"tagLine": eachBlog["tagline"], "tagLine": eachBlog["tagline"],
"coverImage": eachBlog["cover_image"], "coverImage": eachBlog["cover_image"],
"parentCategory": eachBlog["parent_category"] "parentCategory": eachBlog["parent_category"]
}) })
} }
localCategoryData.blogMetadata = blogMetadata localCategoryData.blogMetadata = blogMetadata
setCategoryData(localCategoryData) setCategoryData(localCategoryData)
setFeaturedBlogData(blogMetadata.find(blog => blog.id === localCategoryData.featuredBlog))
} }
); );
} }
@ -107,25 +108,41 @@ 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) => (
<CardListViewer <div className="col-3" key={item.blog_id}>
key={item.blog_id} // Ensuring keys are unique and correct <div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
totalItems={categoryData.blogMetadata.length} <CardListViewer
featuredBlog={categoryData.featuredBlog} totalItems={categoryData.blogMetadata.length}
updateFeaturedBlog={updateFeaturedBlog} featuredBlog={categoryData.featuredBlog}
cardType={"smallCard"} updateFeaturedBlog={updateFeaturedBlog}
resourceType={"blog"} cardType={"smallCard"}
textColor={ThemeConfig[GlobalTheme].textColor} resourceType={"blog"}
bgColor={ThemeConfig[GlobalTheme].background} textColor={ThemeConfig[GlobalTheme].textColor}
borderColor={ThemeConfig[GlobalTheme].borderColor} bgColor={ThemeConfig[GlobalTheme].background}
itemObject={item} borderColor={ThemeConfig[GlobalTheme].borderColor}
/> 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>

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

@ -34,16 +34,9 @@ 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,38 +56,39 @@ 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`} featuredBlogData ?
</h3>
{
featuredBlogData === 'loading' ? <Spinner /> :
<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}
/>
}
{
categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => (
<CardListViewer <CardListViewer
key={item.id} key={featuredBlogData.id}
totalItems={categoryData.blogMetadata.length} totalItems={featuredBlogData === 'nodata' ? 0 : 1}
cardType={"smallCard"} cardType={"longCard"}
resourceType={"blog"} resourceType={"blog"}
textColor={ThemeConfig[GlobalTheme].textColor} textColor={ThemeConfig[GlobalTheme].textColor}
bgColor={ThemeConfig[GlobalTheme].background} bgColor={ThemeConfig[GlobalTheme].background}
borderColor={ThemeConfig[GlobalTheme].borderColor} borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={item} itemObject={featuredBlogData}
/> /> : ''
)) }
} <div className="row">
{categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => (
<div className="col-3" key={item.id}>
<div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<CardListViewer
totalItems={categoryData.blogMetadata.length}
cardType={"smallCard"}
resourceType={"blog"}
textColor={ThemeConfig[GlobalTheme].textColor}
bgColor={ThemeConfig[GlobalTheme].background}
borderColor={ThemeConfig[GlobalTheme].borderColor}
itemObject={item}
/>
</div>
</div>
))
}
</div>
</div> </div>
</Col> </Col>
</Row> </Row>

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

@ -23,7 +23,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 />
{ 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 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>