Optimize preview image size and template

hasgeek · Nov 16, 2023 · 70a0b55 · 70a0b55
1 parent 81dd78c
commit 70a0b55
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/funnel/templates/preview/project.html.jinja2 b/funnel/templates/preview/project.html.jinja2
@@ -7,15 +7,15 @@
             * {
               box-sizing: border-box;
               color: #1f2d3d;
-              font-weight: 700;
+              font-weight: 600;
               font-family: 'SegoeUI', 'Montserrat', 'Helvetica', sans-serif;
               padding: 0;
               margin: 0;
             }
 
             body {
-                width: 640px;
-                height: 360px
+                width: 320px;
+                height: 180px
             }
 
             .main-wrapper {
@@ -32,35 +32,37 @@
             }
 
             .project-title {
-                font-size: 2.5em;
+                font-size: 1.2em;
                 text-align: left;
-                padding-bottom: 1rem;
-                font-weight: 500;
-                border-bottom: 1px solid #1f2d3d;
+                padding-bottom: 0.5rem;
+                font-weight: 600;
+                border-bottom: 0.5px solid #1f2d3d;
             }
 
             .project-tagline {
-                padding-top: 1rem;
-                font-size: 1.5rem;
+                padding-top: 0.3rem;
+                font-size: 0.7rem;
                 font-weight: 300;
             }
             .title-wrapper{
                 line-height: 1.2;
                 text-align: left;
-                padding: 1.5em;
+                padding: 0.75em;
             }
 
             .organization-label{
+              font-size: 0.4rem;
               text-transform: uppercase;
-              padding-bottom: 0.5rem;
+              padding-bottom: 0.1rem;
             }
 
 
             .datetime-wrapper {
               position: absolute;
-              left: 1.5em;
-              bottom: 2em;
-              gap: 8em;
+              font-size: 0.5rem;
+              left: 1.35em;
+              bottom: 1.2em;
+              gap: 4rem;
               text-align: left;
               display: flex;
               justify-content: space-between;

diff --git a/funnel/views/thumbnails.py b/funnel/views/thumbnails.py
@@ -12,7 +12,6 @@
 from ..signals import project_data_change
 from .jobs import rqjob
 
-
 @project_data_change.connect
 def redo_project_preview_image(project: Project) -> None:
     render_project_preview_image.queue(project_id=project.id)
@@ -28,7 +27,7 @@ def render_project_preview_image(project_id: int) -> None:
     fd, temp_filepath = tempfile.mkstemp('.png')
     os.close(fd)
     temp_dir, temp_filename = os.path.split(temp_filepath)
-    hti = Html2Image(size=(640, 360), output_path=temp_dir)
+    hti = Html2Image(size=(320, 180), output_path=temp_dir)
     html_src = render_template('preview/project.html.jinja2', project=project)
     screenshot_files = hti.screenshot(html_str=html_src, save_as=temp_filename)