UI: Make dashboard navbar and footer full-width (#6013)

silverwind · zeripath · commit 681345dc994f · 2019-02-09T15:07:38.000Z
* UI: Make dashboard navbar full-width

* more tweaks: full-width footer and consistent padding

* fix page layout causing unneccesary scrollbars on small pages
diff --git a/public/css/index.css b/public/css/index.css
diff --git a/public/less/_base.less b/public/less/_base.less
@@ -49,7 +49,7 @@ pre > code {
 }
 .full.height {
     padding: 0;
-    margin: 0 0 -@footer-margin 0;
+    margin: 0 0 calc(-@footer-margin - 2px) 0;
     min-height: 100%;
 }
 .following.bar {
@@ -100,9 +100,10 @@ pre > code {
     }
     #navbar {
         width: 100vw;
+        padding: 0 .5rem;
     }
     #navbar .brand {
-        margin: 0 0 0 .5rem;
+        margin: 0;
     }
     @media only screen and (max-width: 767px) {
         #navbar:not(.shown) > *:not(:first-child) {
@@ -444,6 +445,8 @@ footer {
     width: 100%;
     color: #888888;
     .container {
+        width: 100vw !important;
+        padding: 0 .5rem;
         .fa {
             width: 16px;
             text-align: center;
diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
@@ -61,6 +61,11 @@
     .dashboard-repos {
         margin: 0 1px;
     }
+
+    .dashboard-navbar {
+        width: 100vw;
+        padding: 0 .5rem;
+    }
 }
 
 &.feeds {
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui container">
+<div class="dashboard-navbar">
 	<div class="ui secondary stackable menu">
 		<div class="item">
 			<div class="ui floating dropdown link jump">

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ pre > code {`
`49`	`49`	`}`
`50`	`50`	`.full.height {`
`51`	`51`	`padding: 0;`
`52`		`- margin: 0 0 -@footer-margin 0;`
	`52`	`+ margin: 0 0 calc(-@footer-margin - 2px) 0;`
`53`	`53`	`min-height: 100%;`
`54`	`54`	`}`
`55`	`55`	`.following.bar {`
`@@ -100,9 +100,10 @@ pre > code {`
`100`	`100`	`}`
`101`	`101`	`#navbar {`
`102`	`102`	`width: 100vw;`
	`103`	`+ padding: 0 .5rem;`
`103`	`104`	`}`
`104`	`105`	`#navbar .brand {`
`105`		`- margin: 0 0 0 .5rem;`
	`106`	`+ margin: 0;`
`106`	`107`	`}`
`107`	`108`	`@media only screen and (max-width: 767px) {`
`108`	`109`	`#navbar:not(.shown) > *:not(:first-child) {`
`@@ -444,6 +445,8 @@ footer {`
`444`	`445`	`width: 100%;`
`445`	`446`	`color: #888888;`
`446`	`447`	`.container {`
	`448`	`+ width: 100vw !important;`
	`449`	`+ padding: 0 .5rem;`
`447`	`450`	`.fa {`
`448`	`451`	`width: 16px;`
`449`	`452`	`text-align: center;`
Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,11 @@`
`61`	`61`	`.dashboard-repos {`
`62`	`62`	`margin: 0 1px;`
`63`	`63`	`}`
	`64`	`+`
	`65`	`+ .dashboard-navbar {`
	`66`	`+ width: 100vw;`
	`67`	`+ padding: 0 .5rem;`
	`68`	`+ }`
`64`	`69`	`}`
`65`	`70`
`66`	`71`	`&.feeds {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="ui container">`
	`1`	`+<div class="dashboard-navbar">`
`2`	`2`	`<div class="ui secondary stackable menu">`
`3`	`3`	`<div class="item">`
`4`	`4`	`<div class="ui floating dropdown link jump">`