Make the sidebar more compact

isc-etamarch · isc-etamarch · commit d47e7d949232 · 2024-10-10T14:50:35.000-04:00
Compacted the sidebar;
Fixed alignment of icons
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed display of other users' username in workspace view on Unix (#530)
+- Fix left-sidebar spacing (#525)
 
 ## [2.6.0] - 2024-10-07
 
diff --git a/git-webui/release/share/git-webui/webui/css/git-webui.css b/git-webui/release/share/git-webui/webui/css/git-webui.css
@@ -192,12 +192,12 @@ body {
 }
 #sidebar #sidebar-content h4 {
   vertical-align: baseline;
-  margin: 0.5em 0 0 0;
+  margin: 0.25em 0 0 0;
 }
 #sidebar #sidebar-content > section h4 {
   font-size: 125%;
   cursor: pointer;
-  padding: 10px 0;
+  padding: 5px 0;
 }
 #sidebar #sidebar-content #sidebar-workspace h4:before {
   content: url(../img/computer.svg);
@@ -230,7 +230,7 @@ body {
 }
 #sidebar #sidebar-content #sidebar-vscode {
   position: absolute;
-  bottom: 90px;
+  bottom: 70px;
   width: 16.7em;
   background-color: #333333;
 }
@@ -242,7 +242,7 @@ body {
 }
 #sidebar #sidebar-content #sidebar-context {
   position: absolute;
-  bottom: 50px;
+  bottom: 40px;
   width: 16.7em;
   background-color: #333333;
 }
@@ -266,7 +266,7 @@ body {
 }
 #sidebar #sidebar-content #sidebar-home {
   position: absolute;
-  bottom: 130px;
+  bottom: 100px;
   width: 16.7em;
   background-color: #333333;
 }
diff --git a/git-webui/release/share/git-webui/webui/img/discarded.svg b/git-webui/release/share/git-webui/webui/img/discarded.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#eee"><path d="m366-589 86-144-43-72q-14-23-41.5-23T326-805l-84 141 124 75Zm380 253-87-144 125-72 65 107q10 16 10.5 34t-7.5 35q-9 19-26.5 29.5T787-336h-41ZM624-74 480-218l144-144v74h184l-52 104q-10 18-27.5 29T691-144h-67v70Zm-362-70q-17 0-32-9t-23-25q-7-14-6-29t9-29l31-52h167v144H262Zm-95-115-59-117q-8-17-7-35t10-34l20-34-62-37 198-49 49 198-62-37-87 145Zm518-319-198-50 62-37-119-199h127q19 0 35 9.5t26 25.5l54 90 62-37-49 198Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#eee"><path d="m366-589 86-144-43-72q-14-23-41.5-23T326-805l-84 141 124 75Zm380 253-87-144 125-72 65 107q10 16 10.5 34t-7.5 35q-9 19-26.5 29.5T787-336h-41ZM624-74 480-218l144-144v74h184l-52 104q-10 18-27.5 29T691-144h-67v70Zm-362-70q-17 0-32-9t-23-25q-7-14-6-29t9-29l31-52h167v144H262Zm-95-115-59-117q-8-17-7-35t10-34l20-34-62-37 198-49 49 198-62-37-87 145Zm518-319-198-50 62-37-119-199h127q19 0 35 9.5t26 25.5l54 90 62-37-49 198Z"/></svg>
diff --git a/git-webui/release/share/git-webui/webui/js/git-webui.js b/git-webui/release/share/git-webui/webui/js/git-webui.js
@@ -985,13 +985,13 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                                     '<h4>Discarded Files</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
-                                    '<h4 class="mt-3">Local Branches' +
+                                    '<h4 class="mt-1">Local Branches' +
                                     '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         webui.circlePlusIcon+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
-                                    '<h4 class="mt-3">Remote Branches' +
+                                    '<h4 class="mt-1">Remote Branches' +
                                     '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         webui.refreshIcon+
                                       '</button>' +'</h4>' +
diff --git a/git-webui/src/share/git-webui/webui/css/git-webui.less b/git-webui/src/share/git-webui/webui/css/git-webui.less
@@ -268,14 +268,14 @@ body {
 
         h4 {
             vertical-align: baseline;
-            margin: 0.5em 0 0 0;
+            margin: 0.25em 0 0 0;
         }
 
         > section {
             h4 {
                 font-size: 125%;
                 cursor: pointer;
-                padding: @padding-large-vertical 0;
+                padding: @padding-small-vertical 0;
             }
         }
 
@@ -319,7 +319,7 @@ body {
 
         #sidebar-vscode {
             position: absolute;
-            bottom: 90px;
+            bottom: 70px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
@@ -334,7 +334,7 @@ body {
 
         #sidebar-context {
             position: absolute;
-            bottom: 50px;
+            bottom: 40px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
@@ -364,7 +364,7 @@ body {
 
         #sidebar-home {
             position: absolute;
-            bottom: 130px;
+            bottom: 100px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
diff --git a/git-webui/src/share/git-webui/webui/img/discarded.svg b/git-webui/src/share/git-webui/webui/img/discarded.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#eee"><path d="m366-589 86-144-43-72q-14-23-41.5-23T326-805l-84 141 124 75Zm380 253-87-144 125-72 65 107q10 16 10.5 34t-7.5 35q-9 19-26.5 29.5T787-336h-41ZM624-74 480-218l144-144v74h184l-52 104q-10 18-27.5 29T691-144h-67v70Zm-362-70q-17 0-32-9t-23-25q-7-14-6-29t9-29l31-52h167v144H262Zm-95-115-59-117q-8-17-7-35t10-34l20-34-62-37 198-49 49 198-62-37-87 145Zm518-319-198-50 62-37-119-199h127q19 0 35 9.5t26 25.5l54 90 62-37-49 198Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#eee"><path d="m366-589 86-144-43-72q-14-23-41.5-23T326-805l-84 141 124 75Zm380 253-87-144 125-72 65 107q10 16 10.5 34t-7.5 35q-9 19-26.5 29.5T787-336h-41ZM624-74 480-218l144-144v74h184l-52 104q-10 18-27.5 29T691-144h-67v70Zm-362-70q-17 0-32-9t-23-25q-7-14-6-29t9-29l31-52h167v144H262Zm-95-115-59-117q-8-17-7-35t10-34l20-34-62-37 198-49 49 198-62-37-87 145Zm518-319-198-50 62-37-119-199h127q19 0 35 9.5t26 25.5l54 90 62-37-49 198Z"/></svg>
diff --git a/git-webui/src/share/git-webui/webui/js/git-webui.js b/git-webui/src/share/git-webui/webui/js/git-webui.js
@@ -985,13 +985,13 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                                     '<h4>Discarded Files</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
-                                    '<h4 class="mt-3">Local Branches' +
+                                    '<h4 class="mt-1">Local Branches' +
                                     '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         webui.circlePlusIcon+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
-                                    '<h4 class="mt-3">Remote Branches' +
+                                    '<h4 class="mt-1">Remote Branches' +
                                     '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         webui.refreshIcon+
                                       '</button>' +'</h4>' +

Original file line number	Diff line number	Diff line change
`@@ -192,12 +192,12 @@ body {`
`192`	`192`	`}`
`193`	`193`	`#sidebar #sidebar-content h4 {`
`194`	`194`	`vertical-align: baseline;`
`195`		`- margin: 0.5em 0 0 0;`
	`195`	`+ margin: 0.25em 0 0 0;`
`196`	`196`	`}`
`197`	`197`	`#sidebar #sidebar-content > section h4 {`
`198`	`198`	`font-size: 125%;`
`199`	`199`	`cursor: pointer;`
`200`		`- padding: 10px 0;`
	`200`	`+ padding: 5px 0;`
`201`	`201`	`}`
`202`	`202`	`#sidebar #sidebar-content #sidebar-workspace h4:before {`
`203`	`203`	`content: url(../img/computer.svg);`
`@@ -230,7 +230,7 @@ body {`
`230`	`230`	`}`
`231`	`231`	`#sidebar #sidebar-content #sidebar-vscode {`
`232`	`232`	`position: absolute;`
`233`		`- bottom: 90px;`
	`233`	`+ bottom: 70px;`
`234`	`234`	`width: 16.7em;`
`235`	`235`	`background-color: #333333;`
`236`	`236`	`}`
`@@ -242,7 +242,7 @@ body {`
`242`	`242`	`}`
`243`	`243`	`#sidebar #sidebar-content #sidebar-context {`
`244`	`244`	`position: absolute;`
`245`		`- bottom: 50px;`
	`245`	`+ bottom: 40px;`
`246`	`246`	`width: 16.7em;`
`247`	`247`	`background-color: #333333;`
`248`	`248`	`}`
`@@ -266,7 +266,7 @@ body {`
`266`	`266`	`}`
`267`	`267`	`#sidebar #sidebar-content #sidebar-home {`
`268`	`268`	`position: absolute;`
`269`		`- bottom: 130px;`
	`269`	`+ bottom: 100px;`
`270`	`270`	`width: 16.7em;`
`271`	`271`	`background-color: #333333;`
`272`	`272`	`}`