working on CSS

app.py

@@ -10,7 +10,8 @@ from callbacks import register_callbacks
 from pages.application.application import Application, Model, View
 from utils import extract_data
 
-app = dash.Dash(external_stylesheets=[dbc.themes.LUX], suppress_callback_exceptions=True)
+app = dash.Dash(external_stylesheets=[dbc.themes.LUX], suppress_callback_exceptions=True,
+                meta_tags=[{'name': 'viewport', 'content': 'width=device-width, initial-scale=1'}])
 
 #################################################################################
 ############################# Layouts ###########################################
@@ -19,7 +20,7 @@ models_data = open('data_retriever.json')
 data = json.load(models_data)["data"]
 
 #For home directory
-page_home = dbc.Row([])
+page_home = dbc.Row([html.H3("Welcome")])
 #For course directory
 page_course = dbc.Row([])
 #For the application

assets/header.css

@@ -10,18 +10,26 @@
 
 /* SIDEBAR */
 
+div.sidebar.col-3 {
+    height:fit-content;
+}
+
 .sidebar {
     padding: 2rem;
-    padding-top:0.5rem;
+    padding-top:0%;
+    margin-top:1rem;
+    border-width: 4px;
+    border-style:double;
+    border-radius: 20px;
     color: rgb(255, 255, 255);
     font-weight: 300;
-    background-color: black;
+    background-color:rgb(26,26,26);
 }
 
 .sidebar .tab.jsx-3468109796 {
     color:rgb(255, 255, 255);
     font-weight: 500;
-    background-color: #1a1c1d;
+    background-color: rgb(26,26,26);
 }
 
 .sidebar .tab--selected.jsx-3468109796:hover {
@@ -49,7 +57,7 @@
     margin: 10px;
     color:rgb(255, 255, 255);
     font-weight: 400;
-    background-color: black;
+    background-color: rgb(26,26,26);
 }
 
 .sidebar .sidebar-dropdown{
@@ -62,7 +70,7 @@
     margin: 10px;
     color:rgb(255, 255, 255);
     font-weight: 400;
-    background-color: black;
+    background-color: rgb(26,26,26);
 }
 
 .sidebar .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .sidebar .Select-control .Select-value .Select-value-label {
@@ -77,7 +85,7 @@
     margin: 10px;
     color:rgb(255, 255, 255);
     font-weight: 400;
-    background-color: black;
+    background-color: rgb(26,26,26);
 }
 
 /* EXPLANATION */
@@ -85,7 +93,7 @@
 main#explanation { 
     width: 95%;
     margin-bottom: 5rem;
-    margin-top: 5rem;
+    margin-top: 2rem;
     border-width: 4px;
     border-style:double;
     border-radius: 5px;
@@ -96,7 +104,7 @@ main#explanation {
 /* GRAPH */
 
 .column_graph {
-    margin-top: 5rem;
+    margin-top: 2rem;
 }
 
 

assets/typography.css

@@ -12,10 +12,13 @@ H4 {
 
 H5 {
     font-size: 16px;
+    text-transform: capitalize;
+    font-family:Georgia, 'Times New Roman', Times, serif;
     color: hsl(228, 58%, 12%);
 }
 
 p {
-    font-size: 15px;
+    font-size: 17px;
+    font-family:Georgia, 'Times New Roman', Times, serif;
     color: hsl(0, 0%, 0%)
 }
\ No newline at end of file

callbacks.py

@@ -106,8 +106,10 @@ def register_callbacks(page_home, page_course, page_application, app):
         prevent_initial_call=True
     )
     def layout_buttons_navigate_expls(explanation, explanation_type):
-        if explanation is None or "AXp" not in explanation_type:
+        if explanation is None or len(explanation_type)==0:
             return True, True, True, {}
+        elif "AXp" not in explanation_type and "CXp" in explanation_type:
+            return False, True, True, {}
         else : 
             options = {}
             model_application = page_application.model