improved print CSS for fish_config

This commit introduces a fishconfig_print.css that contains special CSS styles that only apply when printing the fishconfig page. This is especially useful when the user wants to print out the key bindings.
fish-shell · Jun 10, 2023 · cbf9a3b · cbf9a3b
1 parent 516b8da
commit cbf9a3b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 4 deletions.
diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
@@ -664,3 +664,7 @@ img.delete_icon {
         color: #AAA;
     }
 }
+
+.print_only {
+    display: none;
+}
diff --git a/share/tools/web_config/fishconfig_print.css b/share/tools/web_config/fishconfig_print.css
@@ -0,0 +1,30 @@
+body {
+    background: white;
+    font-size: 8pt;
+}
+
+.tab, .print_hidden {
+    display: none;
+}
+
+.tab.selected_tab {
+    background: white;
+    display: block;
+    font-size: 22pt;
+    font-weight: bold;
+    padding-left: 14pt;
+    text-align: left;
+}
+
+.print_only {
+    display: initial;
+}
+
+.data_table_cell {
+    border-bottom: #dbdbdb 1pt solid;
+}
+
+#ancestor {
+    width: 100%;
+    box-shadow: none;
+}
diff --git a/share/tools/web_config/index.html b/share/tools/web_config/index.html
@@ -6,6 +6,7 @@
     <title>fish shell configuration</title>
     <link rel="icon" type="image/png" href="favicon.png"/>
     <link rel="stylesheet" type="text/css" href="fishconfig.css"/>
+    <link rel="stylesheet" type="text/css" media="print" href="fishconfig_print.css">
     <script type="text/javascript" src="js/angular.js"></script>
     <script type="text/javascript" src="js/angular-route.js"></script>
     <script type="text/javascript" src="js/angular-sanitize.js"></script>
@@ -26,7 +27,7 @@
             <div ng-class="{'tab': true, 'selected_tab': currentTab == 'functions'}" id="tab_functions" ng-click="changeView('functions')">functions</div>
             <div ng-class="{'tab': true, 'selected_tab': currentTab == 'variables'}" id="tab_variables" ng-click="changeView('variables')">variables</div>
             <div ng-class="{'tab': true, 'selected_tab': currentTab == 'history'}" id="tab_history" ng-click="changeView('history')">history</div>
-            <div ng-class="{'tab': true, 'selected_tab': currentTab == 'bindings'}" id="tab_bindings" ng-click="changeView('bindings')">bindings</div>
+            <div ng-class="{'tab': true, 'selected_tab': currentTab == 'bindings'}" id="tab_bindings" ng-click="changeView('bindings')"><span class="print_only">fish shell </span>bindings</div>
         </div>
         <div id="tab_contents">
         <ng-view></ng-view>

diff --git a/share/tools/web_config/partials/bindings.html b/share/tools/web_config/partials/bindings.html
@@ -1,5 +1,5 @@
 <div id="table_filter_container" style="display: block;">
-    <input id="table_filter_text_box" class="filter_text_box text_box_transient" placeholder="Filter" ng-model="query">
+    <input id="table_filter_text_box" class="filter_text_box text_box_transient print_hidden" placeholder="Filter" ng-model="query">
 </div>
 
 <table class="data_table">

diff --git a/share/tools/web_config/partials/history.html b/share/tools/web_config/partials/history.html
@@ -14,7 +14,7 @@
     </table>
 
     <span ng-show="loadingText.length > 0"> {{ loadingText }} </span>
-    <input id="table_filter_text_box" class="filter_text_box text_box_transient" placeholder="Filter" ng-model="queryInput">
+    <input id="table_filter_text_box" class="filter_text_box text_box_transient print_hidden" placeholder="Filter" ng-model="queryInput">
 </div>
 <table class="data_table">
     <tbody>

diff --git a/share/tools/web_config/partials/variables.html b/share/tools/web_config/partials/variables.html
@@ -1,5 +1,5 @@
 <div id="table_filter_container">
-    <input id="table_filter_text_box" class="filter_text_box text_box_transient" placeholder="Filter" ng-model="query">
+    <input id="table_filter_text_box" class="filter_text_box text_box_transient print_hidden" placeholder="Filter" ng-model="query">
 </div>
 
 <table class="data_table">