CSS refactor (#312)

Co-authored-by: Philip Meier <github.pmeier@posteo.de>

Author: pierrotsmnrd

pyproject.toml

@@ -27,7 +27,7 @@ dependencies = [
     "httpx",
     "importlib_metadata>=4.6; python_version<'3.10'",
     "packaging",
-    "panel==1.3.8",
+    "panel==1.4.2",
     "pydantic>=2",
     "pydantic-core",
     "pydantic-settings>=2",

ragna/deploy/_ui/app.py

@@ -23,34 +23,47 @@
 pn.config.browser_info = True
 
 
-HERE = Path(__file__).parent
-# CSS = HERE / "css"
-IMGS = HERE / "imgs"
-RES = HERE / "resources"
-
-
 class App(param.Parameterized):
     def __init__(self, *, hostname, port, api_url, origins, open_browser):
         super().__init__()
-        ui.apply_design_modifiers()
+
+        # Apply the design modifiers to the panel components
+        # It returns all the CSS files of the modifiers
+        self.css_filepaths = ui.apply_design_modifiers()
         self.hostname = hostname
         self.port = port
         self.api_url = api_url
         self.origins = origins
         self.open_browser = open_browser
 
     def get_template(self):
+        # A bit hacky, but works.
+        # we need to preload the css files to avoid a flash of unstyled content, especially when switching between chats.
+        # This is achieved by adding <link ref="preload" ...> tags in the head of the document.
+        # But none of the panel templates allow to add custom link tags in the head.
+        # the only way I found is to take advantage of the raw_css parameter, which allows to add custom css in the head.
+        preload_css = "\n".join(
+            [
+                f"""<link rel="preload" href="{css_fp}" as="style" />"""
+                for css_fp in self.css_filepaths
+            ]
+        )
+        preload_css = f"""
+                     </style>
+                     {preload_css}
+                     <style type="text/css">
+                     """
+
         template = pn.template.FastListTemplate(
             # We need to set a title to have it appearing on the browser's tab
             # but it means we need to hide it from the header bar
             title="Ragna",
             accent_base_color=ui.MAIN_COLOR,
             theme_toggle=False,
             collapsed_sidebar=True,
-            # main_layout=None
-            raw_css=[ui.APP_RAW],
+            raw_css=[ui.CSS_VARS, preload_css],
             favicon="imgs/ragna_logo.svg",
-            css_files=["https://rsms.me/inter/inter.css"],
+            css_files=["https://rsms.me/inter/inter.css", "css/main.css"],
         )
 
         template.modal.objects = [
@@ -129,7 +142,10 @@ def serve(self):
             autoreload=True,
             profiler="pyinstrument",
             allow_websocket_origin=[urlsplit(origin).netloc for origin in self.origins],
-            static_dirs={"imgs": str(IMGS), "resources": str(RES)},  # "css": str(CSS),
+            static_dirs={
+                dir: str(Path(__file__).parent / dir)
+                for dir in ["css", "imgs", "resources"]
+            },
         )
 
 

ragna/deploy/_ui/auth_page.py

@@ -1,28 +1,6 @@
 import panel as pn
 import param
 
-from . import styles as ui
-
-# TODO Move this into a CSS file
-login_inputs_stylesheets = """
-
-:host {
-    width:100%;
-    margin-left:0px;
-    margin-right:0px;
-}
-
-label {
-    font-weight: 600;
-    font-size: 16px;
-}
-
-input {
-    background-color: white !important;
-}
-
-"""
-
 
 class AuthPage(pn.viewable.Viewer, param.Parameterized):
     feedback_message = param.String(default=None)
@@ -37,11 +15,11 @@ def __init__(self, api_wrapper, **params):
 
         self.login_input = pn.widgets.TextInput(
             name="Email",
-            stylesheets=[login_inputs_stylesheets, ui.BK_INPUT_GRAY_BORDER],
+            css_classes=["auth_login_input"],
         )
         self.password_input = pn.widgets.PasswordInput(
             name="Password",
-            stylesheets=[login_inputs_stylesheets, ui.BK_INPUT_GRAY_BORDER],
+            css_classes=["auth_password_input"],
         )
 
     async def perform_login(self, event=None):
@@ -74,23 +52,8 @@ def display_error_message(self):
             return None
         else:
             return pn.pane.HTML(
-                f"""<div class="error">{self.feedback_message}</div>""",
-                stylesheets=[
-                    """
-                                             :host { 
-                                                width:100%;
-                                                margin-left:0px;
-                                                margin-right:0px;
-                                             }  
-                                             
-                                             div.error { 
-                                                width:100%; 
-                                                color:red; 
-                                                text-align:center;
-                                                font-weight: 600;
-                                                font-size: 16px;
-                                             } """
-                ],
+                f"""<div class="auth_error">{self.feedback_message}</div>""",
+                css_classes=["auth_error"],
             )
 
     @pn.depends("custom_js")
@@ -107,67 +70,22 @@ def __panel__(self):
         login_button = pn.widgets.Button(
             name="Sign In",
             button_type="primary",
-            stylesheets=[
-                """ :host { 
-                                                                width:100%;
-                                                                margin-left:0px;
-                                                                margin-right:0px;
-                                                       } """
-            ],
+            css_classes=["auth_login_button"],
         )
         login_button.on_click(self.perform_login)
 
         self.main_layout = pn.Column(
             self.wrapped_custom_js,
             pn.pane.HTML(
                 "<h1>Log In</h1>",
-                stylesheets=[
-                    """ :host { 
-                                                width:100%;
-                                                margin-left:0px;
-                                                margin-right:0px;
-                                                text-align:center;
-                                            } 
-                                         h1 { 
-                                            font-weight: 600;
-                                            font-size: 24px;
-                                         }
-                                         """
-                ],
+                css_classes=["auth_title"],
             ),
             self.display_error_message,
             self.login_input,
             self.password_input,
             pn.pane.HTML("<br />"),
             login_button,
-            stylesheets=[
-                """ :host { 
-                                    background-color:white;
-                                    /*background-color:gold;*/
-                                    border-radius: 5px;
-                                    box-shadow: lightgray 0px 0px 10px;
-                                    padding: 0 25px 0 25px;
-                             
-                                    width:30%;
-                                    min-width:360px;
-                                    max-width:430px;
-                                    
-                                    margin-left: auto;
-                                    margin-right: auto;
-                                    margin-top: 10%;
-
-                              }
-                             :host > div {
-                                margin-bottom: 10px;
-                                margin-top: 10px;
-                             }
-
-                             .bk-panel-models-layout-Column {
-                                width:100%;
-                             }
-                             
-                             """
-            ],
+            css_classes=["auth_page_main_layout"],
         )
 
         return self.main_layout