Fix bottom navigation

isc-etamarch · isc-etamarch · commit 2d985507c593 · 2024-10-18T10:52:13.000-04:00
Added margins to the bottom navigation so that the remote branches would not be visible underneath. Also added padding below remote branches to that they can all be visible with scrolling
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
@@ -219,6 +219,9 @@ body {
 #sidebar #sidebar-content #sidebar-switch-branches h4:before {
   content: url(../img/branch.svg);
 }
+#sidebar #sidebar-content #space-filler {
+  padding-bottom: 50px;
+}
 #sidebar #sidebar-content #sidebar-tags h4:before {
   content: url(../img/tag.svg);
 }
@@ -227,49 +230,53 @@ body {
 }
 #sidebar #sidebar-content #sidebar-vscode h4 {
   padding: 0px;
+  margin-bottom: 10px;
 }
 #sidebar #sidebar-content #sidebar-vscode h4:before {
   content: url(../img/file.svg);
 }
 #sidebar #sidebar-content #sidebar-vscode {
   position: absolute;
-  bottom: 70px;
+  bottom: 60px;
   width: 16.7em;
   background-color: #333333;
 }
 #sidebar #sidebar-content #sidebar-context h4 {
   padding: 0px;
+  margin-bottom: 10px;
 }
 #sidebar #sidebar-content #sidebar-context h4:before {
   content: url(../img/context.svg);
 }
 #sidebar #sidebar-content #sidebar-context {
   position: absolute;
-  bottom: 40px;
+  bottom: 30px;
   width: 16.7em;
   background-color: #333333;
 }
 #sidebar #sidebar-content #sidebar-settings h4 {
   padding: 0px;
+  margin-bottom: 10px;
 }
 #sidebar #sidebar-content #sidebar-settings h4:before {
   content: url(../img/gear-fill.svg);
 }
 #sidebar #sidebar-content #sidebar-settings {
   position: absolute;
-  bottom: 10px;
+  bottom: 0;
   width: 16.7em;
   background-color: #333333;
 }
 #sidebar #sidebar-content #sidebar-home h4 {
   padding: 0px;
+  margin-bottom: 10px;
 }
 #sidebar #sidebar-content #sidebar-home h4:before {
   content: url(../img/home.svg);
 }
 #sidebar #sidebar-content #sidebar-home {
   position: absolute;
-  bottom: 100px;
+  bottom: 90px;
   width: 16.7em;
   background-color: #333333;
 }
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
@@ -1008,6 +1008,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                                 '<section id="sidebar-tags">' +
                                     '<h4>Tags</h4>' +
                                 '</section>' +
+                                '<section id="space-filler"></section>'+
                                 '<section id="sidebar-settings">' +
                                     '<h4>Settings</h4>' +
                                 '</section>' +
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
@@ -305,6 +305,10 @@ body {
             }
         }
 
+        #space-filler {
+            padding-bottom: 50px;
+        }
+
         #sidebar-tags h4:before {
             content: url(../img/tag.svg);
         }
@@ -315,6 +319,7 @@ body {
 
         #sidebar-vscode h4 {
             padding: 0px;
+            margin-bottom: 10px;
         }
 
         #sidebar-vscode h4:before {
@@ -323,13 +328,14 @@ body {
 
         #sidebar-vscode {
             position: absolute;
-            bottom: 70px;
+            bottom: 60px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
 
         #sidebar-context h4 {
             padding: 0px;
+            margin-bottom: 10px;
         }
 
         #sidebar-context h4:before {
@@ -338,13 +344,14 @@ body {
 
         #sidebar-context {
             position: absolute;
-            bottom: 40px;
+            bottom: 30px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
 
         #sidebar-settings h4 {
             padding: 0px;
+            margin-bottom: 10px;
         }
 
         #sidebar-settings h4:before {
@@ -353,13 +360,14 @@ body {
 
         #sidebar-settings {
             position: absolute;
-            bottom: 10px;
+            bottom: 0;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
 
         #sidebar-home h4 {
             padding: 0px;
+            margin-bottom: 10px;
         }
 
         #sidebar-home h4:before {
@@ -368,7 +376,7 @@ body {
 
         #sidebar-home {
             position: absolute;
-            bottom: 100px;
+            bottom: 90px;
             width: 16.7em;
             background-color: rgba(51, 51, 51, 1);
         }
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
@@ -1008,6 +1008,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                                 '<section id="sidebar-tags">' +
                                     '<h4>Tags</h4>' +
                                 '</section>' +
+                                '<section id="space-filler"></section>'+
                                 '<section id="sidebar-settings">' +
                                     '<h4>Settings</h4>' +
                                 '</section>' +

Original file line number	Diff line number	Diff line change
`@@ -219,6 +219,9 @@ body {`
`219`	`219`	`#sidebar #sidebar-content #sidebar-switch-branches h4:before {`
`220`	`220`	`content: url(../img/branch.svg);`
`221`	`221`	`}`
	`222`	`+#sidebar #sidebar-content #space-filler {`
	`223`	`+ padding-bottom: 50px;`
	`224`	`+}`
`222`	`225`	`#sidebar #sidebar-content #sidebar-tags h4:before {`
`223`	`226`	`content: url(../img/tag.svg);`
`224`	`227`	`}`
`@@ -227,49 +230,53 @@ body {`
`227`	`230`	`}`
`228`	`231`	`#sidebar #sidebar-content #sidebar-vscode h4 {`
`229`	`232`	`padding: 0px;`
	`233`	`+ margin-bottom: 10px;`
`230`	`234`	`}`
`231`	`235`	`#sidebar #sidebar-content #sidebar-vscode h4:before {`
`232`	`236`	`content: url(../img/file.svg);`
`233`	`237`	`}`
`234`	`238`	`#sidebar #sidebar-content #sidebar-vscode {`
`235`	`239`	`position: absolute;`
`236`		`- bottom: 70px;`
	`240`	`+ bottom: 60px;`
`237`	`241`	`width: 16.7em;`
`238`	`242`	`background-color: #333333;`
`239`	`243`	`}`
`240`	`244`	`#sidebar #sidebar-content #sidebar-context h4 {`
`241`	`245`	`padding: 0px;`
	`246`	`+ margin-bottom: 10px;`
`242`	`247`	`}`
`243`	`248`	`#sidebar #sidebar-content #sidebar-context h4:before {`
`244`	`249`	`content: url(../img/context.svg);`
`245`	`250`	`}`
`246`	`251`	`#sidebar #sidebar-content #sidebar-context {`
`247`	`252`	`position: absolute;`
`248`		`- bottom: 40px;`
	`253`	`+ bottom: 30px;`
`249`	`254`	`width: 16.7em;`
`250`	`255`	`background-color: #333333;`
`251`	`256`	`}`
`252`	`257`	`#sidebar #sidebar-content #sidebar-settings h4 {`
`253`	`258`	`padding: 0px;`
	`259`	`+ margin-bottom: 10px;`
`254`	`260`	`}`
`255`	`261`	`#sidebar #sidebar-content #sidebar-settings h4:before {`
`256`	`262`	`content: url(../img/gear-fill.svg);`
`257`	`263`	`}`
`258`	`264`	`#sidebar #sidebar-content #sidebar-settings {`
`259`	`265`	`position: absolute;`
`260`		`- bottom: 10px;`
	`266`	`+ bottom: 0;`
`261`	`267`	`width: 16.7em;`
`262`	`268`	`background-color: #333333;`
`263`	`269`	`}`
`264`	`270`	`#sidebar #sidebar-content #sidebar-home h4 {`
`265`	`271`	`padding: 0px;`
	`272`	`+ margin-bottom: 10px;`
`266`	`273`	`}`
`267`	`274`	`#sidebar #sidebar-content #sidebar-home h4:before {`
`268`	`275`	`content: url(../img/home.svg);`
`269`	`276`	`}`
`270`	`277`	`#sidebar #sidebar-content #sidebar-home {`
`271`	`278`	`position: absolute;`
`272`		`- bottom: 100px;`
	`279`	`+ bottom: 90px;`
`273`	`280`	`width: 16.7em;`
`274`	`281`	`background-color: #333333;`
`275`	`282`	`}`
Original file line number	Diff line number	Diff line change
`@@ -305,6 +305,10 @@ body {`
`305`	`305`	`}`
`306`	`306`	`}`
`307`	`307`
	`308`	`+ #space-filler {`
	`309`	`+ padding-bottom: 50px;`
	`310`	`+ }`
	`311`	`+`
`308`	`312`	`#sidebar-tags h4:before {`
`309`	`313`	`content: url(../img/tag.svg);`
`310`	`314`	`}`
`@@ -315,6 +319,7 @@ body {`
`315`	`319`
`316`	`320`	`#sidebar-vscode h4 {`
`317`	`321`	`padding: 0px;`
	`322`	`+ margin-bottom: 10px;`
`318`	`323`	`}`
`319`	`324`
`320`	`325`	`#sidebar-vscode h4:before {`
`@@ -323,13 +328,14 @@ body {`
`323`	`328`
`324`	`329`	`#sidebar-vscode {`
`325`	`330`	`position: absolute;`
`326`		`- bottom: 70px;`
	`331`	`+ bottom: 60px;`
`327`	`332`	`width: 16.7em;`
`328`	`333`	`background-color: rgba(51, 51, 51, 1);`
`329`	`334`	`}`
`330`	`335`
`331`	`336`	`#sidebar-context h4 {`
`332`	`337`	`padding: 0px;`
	`338`	`+ margin-bottom: 10px;`
`333`	`339`	`}`
`334`	`340`
`335`	`341`	`#sidebar-context h4:before {`
`@@ -338,13 +344,14 @@ body {`
`338`	`344`
`339`	`345`	`#sidebar-context {`
`340`	`346`	`position: absolute;`
`341`		`- bottom: 40px;`
	`347`	`+ bottom: 30px;`
`342`	`348`	`width: 16.7em;`
`343`	`349`	`background-color: rgba(51, 51, 51, 1);`
`344`	`350`	`}`
`345`	`351`
`346`	`352`	`#sidebar-settings h4 {`
`347`	`353`	`padding: 0px;`
	`354`	`+ margin-bottom: 10px;`
`348`	`355`	`}`
`349`	`356`
`350`	`357`	`#sidebar-settings h4:before {`
`@@ -353,13 +360,14 @@ body {`
`353`	`360`
`354`	`361`	`#sidebar-settings {`
`355`	`362`	`position: absolute;`
`356`		`- bottom: 10px;`
	`363`	`+ bottom: 0;`
`357`	`364`	`width: 16.7em;`
`358`	`365`	`background-color: rgba(51, 51, 51, 1);`
`359`	`366`	`}`
`360`	`367`
`361`	`368`	`#sidebar-home h4 {`
`362`	`369`	`padding: 0px;`
	`370`	`+ margin-bottom: 10px;`
`363`	`371`	`}`
`364`	`372`
`365`	`373`	`#sidebar-home h4:before {`
`@@ -368,7 +376,7 @@ body {`
`368`	`376`
`369`	`377`	`#sidebar-home {`
`370`	`378`	`position: absolute;`
`371`		`- bottom: 100px;`
	`379`	`+ bottom: 90px;`
`372`	`380`	`width: 16.7em;`
`373`	`381`	`background-color: rgba(51, 51, 51, 1);`
`374`	`382`	`}`