Some visual enhancements

2024-06-04 07:03:10 +03:00 · 2024-06-04 07:03:10 +03:00 · 7e1d49936d
commit 7e1d49936d
parent 136980b379
12 changed files with 129 additions and 72 deletions
--- a/backend/.idea/modules.xml
+++ b/backend/.idea/modules.xml
@ -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>
--- a/backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py
+++ b/backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py
@ -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),
+        ),
+    ]
--- a/backend/apimanager/models.py
+++ b/backend/apimanager/models.py
@ -6,6 +6,7 @@ class UserData(models.Model):
 	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)
 	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)
 	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)
--- a/backend/apimanager/serializers.py
+++ b/backend/apimanager/serializers.py
@ -13,6 +13,7 @@ class UserDataSerializer(serializers.ModelSerializer):
 			'name',
 			'intro_content',
 			'profile_photo',
+			'built_with'
 		]

 class ThemeDataSerializer(serializers.ModelSerializer):
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <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" />
-    <title>Vite + React</title>
+    <title>Rangolio</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -34,8 +34,10 @@ function App() {
  }

  useEffect(() => {
-    DataService.getData('shared/user-data').then( response =>
+    DataService.getData('shared/user-data').then( response =>{
        setUserData(response.data)
+        document.title = response.data.name
+      }
    )
    DataService.getData('shared/theme-config').then( response =>{
        setThemeConfig(response.data)
--- a/frontend/src/AppEditable.jsx
+++ b/frontend/src/AppEditable.jsx
@ -49,8 +49,10 @@ function AppEditable() {
        setUserData({
          "name": responseData["name"],
          "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 =>{
--- a/frontend/src/components/editable/blog-list.jsx
+++ b/frontend/src/components/editable/blog-list.jsx
@ -30,12 +30,12 @@ function BlogList(props) {
  const ThemeConfig = props.ThemeConfig;

  const [categoryData, setCategoryData] = useState('loading');
+  const [featuredBlogData, setFeaturedBlogData] = useState(null);

  const loadBlogs = () => {
    EditableDataService.getData(`/data/category/${categoryID}/`).then(response => {
        let responseData = response.data
        let blogMetadata = []
-        console.log(responseData)
        let localCategoryData = {
          "id": responseData["category_id"],
          "name": responseData["name"],
@ -57,6 +57,7 @@ function BlogList(props) {
        }
        localCategoryData.blogMetadata = blogMetadata
        setCategoryData(localCategoryData)
+        setFeaturedBlogData(blogMetadata.find(blog => blog.id === localCategoryData.featuredBlog))
      }
      );
  }
@ -107,12 +108,26 @@ return (
            </CardBody>
          </Card>
        </div>
-        <div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
-          <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
+        <div className="container">
+          {
+            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.blogMetadata.map((item, index) => (
+                <div className="col-3" key={item.blog_id}>
+                  <div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
                    <CardListViewer
-                  key={item.blog_id} // Ensuring keys are unique and correct
                      totalItems={categoryData.blogMetadata.length}
                      featuredBlog={categoryData.featuredBlog}
                      updateFeaturedBlog={updateFeaturedBlog}
@ -123,9 +138,11 @@ return (
                      borderColor={ThemeConfig[GlobalTheme].borderColor}
                      itemObject={item}
                    />
+                  </div>
+                </div>
              ))
            }
-          </h3>
+          </div>
        </div>
      </Col>
    </Row>
--- a/frontend/src/components/editable/blog.jsx
+++ b/frontend/src/components/editable/blog.jsx
@ -127,14 +127,14 @@ function Blog(props) {
              color={ThemeConfig[GlobalTheme].buttonColor}
              onClick={() => toggleFileModal()}
            >
-              Set Profile Photo
+              Set Cover Image
            </Button>
            <Button
              outline
              color={ThemeConfig[GlobalTheme].buttonColor}
              onClick={() => setCoverImage('-')}
            >
-              Remove Profile Photo
+              Remove Cover Image
            </Button>
          </ButtonGroup>
          <InputGroup className="mb-3">
--- a/frontend/src/components/editable/shared/footer.jsx
+++ b/frontend/src/components/editable/shared/footer.jsx
@ -80,7 +80,9 @@ const Footer = (props) => {
            <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>
              <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>
          </Col>
        </Row>
--- a/frontend/src/components/viewable/blog-list.jsx
+++ b/frontend/src/components/viewable/blog-list.jsx
@ -35,14 +35,7 @@ function BlogList(props) {
  useEffect(() => {
    DataService.getData(`category/${categoryID}/category-data`).then(response =>{
        setCategoryData(response.data);
-      console.log(response.data)
-      if (response.data.featuredBlog){
-        DataService.getData(`blog/${response.data.featuredBlog}/blog-data`).then(response =>
-          setFeaturedBlogData(response.data)
-        );
-      }
-      else
-        setFeaturedBlogData("nodata")
+        setFeaturedBlogData(response.data.blogMetadata.find(blog => blog.id === response.data.featuredBlog))
      }
    );
  }, [categoryID]);
@ -63,12 +56,9 @@ function BlogList(props) {
              </CardBody>
            </Card>
            </div>
-            <div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
-            <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
-            {`Featured`}
-            </h3>
+            <div className="container">
              {
-              featuredBlogData === 'loading' ? <Spinner /> :
+                featuredBlogData ?
                <CardListViewer
                  key={featuredBlogData.id}
                  totalItems={featuredBlogData === 'nodata' ? 0 : 1}
@ -78,13 +68,14 @@ function BlogList(props) {
                  bgColor={ThemeConfig[GlobalTheme].background}
                  borderColor={ThemeConfig[GlobalTheme].borderColor}
                  itemObject={featuredBlogData}
-              />
+                /> : ''
              }
-            {
-              categoryData === 'loading' ? <Spinner /> :
+              <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
-                  key={item.id}
                          totalItems={categoryData.blogMetadata.length}
                          cardType={"smallCard"}
                          resourceType={"blog"}
@ -93,9 +84,12 @@ function BlogList(props) {
                          borderColor={ThemeConfig[GlobalTheme].borderColor}
                          itemObject={item}
                        />
+                      </div>
+                    </div>
                  ))
                }
              </div>
+            </div>
          </Col>
        </Row>
      </Container>
--- a/frontend/src/components/viewable/shared/footer.jsx
+++ b/frontend/src/components/viewable/shared/footer.jsx
@ -23,8 +23,10 @@ const Footer = (props) => {
            <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>
              <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>:""}
              </div>
+            </div>
          </Col>
        </Row>
      </Container>