More styling

web/dashboard/components/select_picker.py

@@ -372,7 +372,7 @@ def filtered_options_did_change(self):
 
             setTimeout(function() {
                 self.update_select_all_checkbox()
-            }, 100);
+            }, 250);
 
         """,
         "update_select_all_checkbox": """

web/dashboard/css/filters/button.css

@@ -0,0 +1,29 @@
+:host(.bk-panel-models-widgets-Button.year-button) .bk-btn-group button {
+
+    background-color: transparent;
+
+    /* button/small */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 22px;
+    /* identical to box height, or 169% */
+    letter-spacing: 0.46px;
+    text-transform: uppercase;
+
+    color: #2196F3;
+    padding:0px;
+}
+
+:host(.bk-panel-models-widgets-Button.year-button) .bk-btn-group {
+    width:fit-content;
+}
+
+:host(.bk-panel-models-widgets-Button.year-button){
+    margin-left:0px;
+    margin-right:0px;    
+    width:fit-content;
+    min-width: unset;
+    max-width: unset;
+}

web/dashboard/css/filters/intrangeslider.css

@@ -0,0 +1,51 @@
+:host(.bk-RangeSlider) {
+    margin-left:20px;
+    margin-top:12px;
+}
+
+:host {
+    --md-sys-color-primary: #2196F3;
+    --md-sys-color-primary-alpha50: rgba(30, 129, 240, 0.5);
+    --handle-width: 20px;
+    --handle-height: 20px;
+    --slider-size: 4px !important;
+}
+
+.noUi-connect {
+    background: var(--md-sys-color-primary) !important;
+    border-color: var(--md-sys-color-primary) !important;
+}
+
+.noUi-connects {
+    background-color: var(--md-sys-color-primary-alpha50);
+}
+
+.noUi-handle {
+    border-radius: calc( var(--handle-height) / 2 );
+    background: var(--md-sys-color-primary);
+    /* box-shadow: none; */
+    box-shadow: 0px 1px 2px rgba(var(--md-sys-color-shadow-rgb), 0.3), 0px 1px 3px rgba(var(--md-sys-color-shadow-rgb), 0.15);
+    border:none;
+}
+
+.noUi-handle:hover {
+    box-shadow: 0px 0px 0px calc(var(--handle-width) / 2) rgba(var(--md-sys-color-primary-rgb), var(--md-sys-state-hover-state-layer-opacity)); 
+    border:none;
+}
+
+.noUi-tooltip {
+    height: 28px;
+    background: var(--md-sys-color-primary) !important;
+    color: var(--md-sys-color-on-primary) !important;
+    border:none;
+
+}
+.noUi-target {
+    background: var(--md-sys-color-surface-container-highest);
+    border: none;
+    box-shadow: none;
+}
+
+.bk-slider-title, .bk-slider-title * {
+   display:none;
+}

web/dashboard/css/filters/row.css

@@ -0,0 +1,11 @@
+:host(.years-buttons) {
+    margin-top: 20px;
+
+    display: flex;
+    justify-content: center; 
+    align-items: center;     
+    gap: 10px;               
+    width:100%;   
+}
+
+

web/dashboard/css/filters/textinput.css

@@ -1,6 +1,6 @@
 
 :host(.filters-text-input) {
-    /* background-color: red; */
+    --border-color: rgba(0,0,0, 0.23);
 }
 
 :host(.filters-text-input.pubdate-input) {
@@ -26,7 +26,10 @@
 
 }
 
-
 .bk-input-group input {
-    border-color: var(--secondary-bg-color) !important;
+    border-color: var(--border-color) !important;
 } 
+
+.bk-input-container .bk-input {
+    height: 40px;
+}

web/dashboard/ui.py

@@ -49,6 +49,9 @@ def css(selector: Union[str, Iterable[str]], declarations: dict[str, str]) -> st
     "filters": [
         pn.widgets.TextInput,
         pn.pane.Markdown,
+        pn.widgets.IntRangeSlider,
+        pn.Row,
+        pn.widgets.Button,
     ],
 }