Navbar and media query cleanups

silverwind · silverwind · commit 33f31d0f43d8 · 2023-06-08T18:48:13.000+02:00
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
@@ -1,4 +1,4 @@
-<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
+<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
 	{{$notificationUnreadCount := 0}}
 	{{if .IsSigned}}
 		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
@@ -28,33 +28,21 @@
 		{{/* No links */}}
 	{{else if .IsSigned}}
 		{{if not .UnitIssuesGlobalDisabled}}
-		<a class="item {{if .PageIsIssues}}active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
+		<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
 		{{end}}
 		{{if not .UnitPullsGlobalDisabled}}
-		<a class="item {{if .PageIsPulls}}active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
+		<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
 		{{end}}
 		{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-		{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
+		{{if .ShowMilestonesDashboardPage}}<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
 		{{end}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
 	{{else if .IsLandingPageOrganizations}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
 	{{else}}
-		<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
+		<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
 	{{end}}
-
 	{{template "custom/extra_links" .}}
-
-	{{/* TODO
-		<div class="item">
-		<div class="ui icon input">
-		<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
-		<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
-		</div>
-		</div>
-	*/}}
-
-
 	{{if and .IsSigned .MustChangePassword}}
 		<div class="right stackable menu">
 			<div class="ui dropdown jump item" tabindex="-1" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
@@ -15,7 +15,7 @@
 </head>
 <body>
 	<div class="full height">
-		<nav class="ui container secondary stackable main menu" id="navbar">
+		<nav id="navbar" class="ui secondary stackable menu">
 			<div class="ui container gt-df">
 				<div class="item brand gt-f1">
 					<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
@@ -20,7 +20,7 @@
   width: calc(100% - 245px);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dd {
     width: calc(100% - 185px);
   }
@@ -40,7 +40,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .admin dl.admin-dl-horizontal dt {
     width: 160px;
   }
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -941,7 +941,7 @@ img.ui.avatar,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .page-content .ui.ui.ui.container:not(.fluid) {
     width: calc(100vw - 16px);
     max-width: calc(100vw - 16px);
@@ -961,19 +961,11 @@ img.ui.avatar,
   margin: 0 !important;
 }
 
-#navbar .column .menu {
-  margin-top: 0;
-}
-
 #navbar .fitted .svg {
   margin-right: 0;
   vertical-align: middle;
 }
 
-#navbar .searchbox {
-  background-color: var(--color-input-background) !important;
-}
-
 #navbar .text .svg {
   width: 16px;
   text-align: center;
@@ -987,8 +979,17 @@ img.ui.avatar,
   margin-right: 0 !important;
 }
 
-@media (max-width: 767px) {
-  #navbar:not(.shown) > *:not(:first-child) {
+@media (max-width: 767.98px) {
+  #navbar {
+    align-items: stretch;
+  }
+  #navbar.shown {
+    padding-bottom: 8px;
+  }
+  #navbar.shown .item.brand {
+    padding-bottom: 2px;
+  }
+  #navbar:not(.shown) > *:not(.item.brand) {
     display: none;
   }
 }
@@ -1455,7 +1456,7 @@ img.ui.avatar,
   line-height: 20px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.pagination.menu .item:not(.active,.navigation),
   .ui.pagination.menu .item.navigation span.navigation_label {
     display: none;
@@ -1550,7 +1551,7 @@ img.ui.avatar,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   /* double selector so it wins over .gt-df etc */
   .not-mobile.not-mobile {
     display: none !important;
@@ -1613,7 +1614,7 @@ img.ui.avatar,
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .ui.menu.new-menu .item {
     width: auto !important;
   }
diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
@@ -35,7 +35,7 @@
   width: 15%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu .item .floating.label,
   .dashboard.issues .filter.menu .item .floating.label {
     top: 10px;
@@ -60,7 +60,7 @@
   left: auto !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard.feeds .filter.menu,
   .dashboard.issues .filter.menu {
     width: 100%;
@@ -90,7 +90,7 @@
   max-width: 100%;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .dashboard .dashboard-navbar .ui.dropdown > .menu {
     position: static;
   }
diff --git a/web_src/css/form.css b/web_src/css/form.css
@@ -197,7 +197,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -315,7 +315,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .optional .title,
   .user.forgot.password form .optional .title,
   .user.reset.password form .optional .title,
@@ -353,7 +353,7 @@ textarea:focus,
   width: 200px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .user.activate form .inline.field > label,
   .user.forgot.password form .inline.field > label,
   .user.reset.password form .inline.field > label,
@@ -449,7 +449,7 @@ textarea:focus,
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form .optional .title,
   .repository.new.migrate form .optional .title,
   .repository.new.fork form .optional .title {
@@ -483,7 +483,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo form label,
   .repository.new.migrate form label,
   .repository.new.fork form label,
@@ -516,7 +516,7 @@ textarea:focus,
   width: 50% !important;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
     width: 100% !important;
   }
@@ -534,7 +534,7 @@ textarea:focus,
   font-family: var(--fonts-monospace);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .new.org .ui.form .field button,
   .new.org .ui.form .field a {
     margin-bottom: 1em;
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
@@ -260,7 +260,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-17 { font-size: 17px !important }
 .gt-font-18 { font-size: 18px !important }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }
   .gt-js-small { justify-content: flex-start !important; }
diff --git a/web_src/css/home.css b/web_src/css/home.css
@@ -2,7 +2,7 @@
   max-width: 220px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .home .hero h1 {
     font-size: 3.5em;
   }
diff --git a/web_src/css/org.css b/web_src/css/org.css
@@ -31,7 +31,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   #create-page-form form .optional .title {
     margin-left: 15px;
   }
@@ -77,7 +77,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.new.org form .optional .title {
     margin-left: 15px;
   }
@@ -222,7 +222,7 @@
   height: 60px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 767.98px) {
   .organization.teams #repo-top-segment {
     height: 100px;
   }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
diff --git a/web_src/css/review.css b/web_src/css/review.css
diff --git a/web_src/css/user.css b/web_src/css/user.css

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`width: calc(100% - 245px);`
`21`	`21`	`}`
`22`	`22`
`23`		`-@media (max-width: 767px) {`
	`23`	`+@media (max-width: 767.98px) {`
`24`	`24`	`.admin dl.admin-dl-horizontal dd {`
`25`	`25`	`width: calc(100% - 185px);`
`26`	`26`	`}`
`@@ -40,7 +40,7 @@`
`40`	`40`	`white-space: nowrap;`
`41`	`41`	`}`
`42`	`42`
`43`		`-@media (max-width: 767px) {`
	`43`	`+@media (max-width: 767.98px) {`
`44`	`44`	`.admin dl.admin-dl-horizontal dt {`
`45`	`45`	`width: 160px;`
`46`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -941,7 +941,7 @@ img.ui.avatar,`
`941`	`941`	`}`
`942`	`942`	`}`
`943`	`943`
`944`		`-@media (max-width: 767px) {`
	`944`	`+@media (max-width: 767.98px) {`
`945`	`945`	`.page-content .ui.ui.ui.container:not(.fluid) {`
`946`	`946`	`width: calc(100vw - 16px);`
`947`	`947`	`max-width: calc(100vw - 16px);`
`@@ -961,19 +961,11 @@ img.ui.avatar,`
`961`	`961`	`margin: 0 !important;`
`962`	`962`	`}`
`963`	`963`
`964`		`-#navbar .column .menu {`
`965`		`- margin-top: 0;`
`966`		`-}`
`967`		`-`
`968`	`964`	`#navbar .fitted .svg {`
`969`	`965`	`margin-right: 0;`
`970`	`966`	`vertical-align: middle;`
`971`	`967`	`}`
`972`	`968`
`973`		`-#navbar .searchbox {`
`974`		`- background-color: var(--color-input-background) !important;`
`975`		`-}`
`976`		`-`
`977`	`969`	`#navbar .text .svg {`
`978`	`970`	`width: 16px;`
`979`	`971`	`text-align: center;`
`@@ -987,8 +979,17 @@ img.ui.avatar,`
`987`	`979`	`margin-right: 0 !important;`
`988`	`980`	`}`
`989`	`981`
`990`		`-@media (max-width: 767px) {`
`991`		`- #navbar:not(.shown) > *:not(:first-child) {`
	`982`	`+@media (max-width: 767.98px) {`
	`983`	`+ #navbar {`
	`984`	`+ align-items: stretch;`
	`985`	`+ }`
	`986`	`+ #navbar.shown {`
	`987`	`+ padding-bottom: 8px;`
	`988`	`+ }`
	`989`	`+ #navbar.shown .item.brand {`
	`990`	`+ padding-bottom: 2px;`
	`991`	`+ }`
	`992`	`+ #navbar:not(.shown) > *:not(.item.brand) {`
`992`	`993`	`display: none;`
`993`	`994`	`}`
`994`	`995`	`}`
`@@ -1455,7 +1456,7 @@ img.ui.avatar,`
`1455`	`1456`	`line-height: 20px;`
`1456`	`1457`	`}`
`1457`	`1458`
`1458`		`-@media (max-width: 767px) {`
	`1459`	`+@media (max-width: 767.98px) {`
`1459`	`1460`	`.ui.pagination.menu .item:not(.active,.navigation),`
`1460`	`1461`	`.ui.pagination.menu .item.navigation span.navigation_label {`
`1461`	`1462`	`display: none;`
`@@ -1550,7 +1551,7 @@ img.ui.avatar,`
`1550`	`1551`	`}`
`1551`	`1552`	`}`
`1552`	`1553`
`1553`		`-@media (max-width: 767px) {`
	`1554`	`+@media (max-width: 767.98px) {`
`1554`	`1555`	`/* double selector so it wins over .gt-df etc */`
`1555`	`1556`	`.not-mobile.not-mobile {`
`1556`	`1557`	`display: none !important;`
`@@ -1613,7 +1614,7 @@ img.ui.avatar,`
`1613`	`1614`	`margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */`
`1614`	`1615`	`}`
`1615`	`1616`
`1616`		`-@media (max-width: 767px) {`
	`1617`	`+@media (max-width: 767.98px) {`
`1617`	`1618`	`.ui.menu.new-menu .item {`
`1618`	`1619`	`width: auto !important;`
`1619`	`1620`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`width: 15%;`
`36`	`36`	`}`
`37`	`37`
`38`		`-@media (max-width: 767px) {`
	`38`	`+@media (max-width: 767.98px) {`
`39`	`39`	`.dashboard.feeds .filter.menu .item .floating.label,`
`40`	`40`	`.dashboard.issues .filter.menu .item .floating.label {`
`41`	`41`	`top: 10px;`
`@@ -60,7 +60,7 @@`
`60`	`60`	`left: auto !important;`
`61`	`61`	`}`
`62`	`62`
`63`		`-@media (max-width: 767px) {`
	`63`	`+@media (max-width: 767.98px) {`
`64`	`64`	`.dashboard.feeds .filter.menu,`
`65`	`65`	`.dashboard.issues .filter.menu {`
`66`	`66`	`width: 100%;`
`@@ -90,7 +90,7 @@`
`90`	`90`	`max-width: 100%;`
`91`	`91`	`}`
`92`	`92`
`93`		`-@media (max-width: 767px) {`
	`93`	`+@media (max-width: 767.98px) {`
`94`	`94`	`.dashboard .dashboard-navbar .ui.dropdown > .menu {`
`95`	`95`	`position: static;`
`96`	`96`	`}`
Original file line number	Diff line number	Diff line change
`@@ -197,7 +197,7 @@ textarea:focus,`
`197`	`197`	`}`
`198`	`198`	`}`
`199`	`199`
`200`		`-@media (max-width: 767px) {`
	`200`	`+@media (max-width: 767.98px) {`
`201`	`201`	`#create-page-form form .optional .title {`
`202`	`202`	`margin-left: 15px;`
`203`	`203`	`}`
`@@ -315,7 +315,7 @@ textarea:focus,`
`315`	`315`	`}`
`316`	`316`	`}`
`317`	`317`
`318`		`-@media (max-width: 767px) {`
	`318`	`+@media (max-width: 767.98px) {`
`319`	`319`	`.user.activate form .optional .title,`
`320`	`320`	`.user.forgot.password form .optional .title,`
`321`	`321`	`.user.reset.password form .optional .title,`
`@@ -353,7 +353,7 @@ textarea:focus,`
`353`	`353`	`width: 200px;`
`354`	`354`	`}`
`355`	`355`
`356`		`-@media (max-width: 767px) {`
	`356`	`+@media (max-width: 767.98px) {`
`357`	`357`	`.user.activate form .inline.field > label,`
`358`	`358`	`.user.forgot.password form .inline.field > label,`
`359`	`359`	`.user.reset.password form .inline.field > label,`
`@@ -449,7 +449,7 @@ textarea:focus,`
`449`	`449`	`}`
`450`	`450`	`}`
`451`	`451`
`452`		`-@media (max-width: 767px) {`
	`452`	`+@media (max-width: 767.98px) {`
`453`	`453`	`.repository.new.repo form .optional .title,`
`454`	`454`	`.repository.new.migrate form .optional .title,`
`455`	`455`	`.repository.new.fork form .optional .title {`
`@@ -483,7 +483,7 @@ textarea:focus,`
`483`	`483`	`width: 50% !important;`
`484`	`484`	`}`
`485`	`485`
`486`		`-@media (max-width: 767px) {`
	`486`	`+@media (max-width: 767.98px) {`
`487`	`487`	`.repository.new.repo form label,`
`488`	`488`	`.repository.new.migrate form label,`
`489`	`489`	`.repository.new.fork form label,`
`@@ -516,7 +516,7 @@ textarea:focus,`
`516`	`516`	`width: 50% !important;`
`517`	`517`	`}`
`518`	`518`
`519`		`-@media (max-width: 767px) {`
	`519`	`+@media (max-width: 767.98px) {`
`520`	`520`	`.repository.new.repo .ui.form .selection.dropdown:not(.owner) {`
`521`	`521`	`width: 100% !important;`
`522`	`522`	`}`
`@@ -534,7 +534,7 @@ textarea:focus,`
`534`	`534`	`font-family: var(--fonts-monospace);`
`535`	`535`	`}`
`536`	`536`
`537`		`-@media (max-width: 767px) {`
	`537`	`+@media (max-width: 767.98px) {`
`538`	`538`	`.new.org .ui.form .field button,`
`539`	`539`	`.new.org .ui.form .field a {`
`540`	`540`	`margin-bottom: 1em;`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`max-width: 220px;`
`3`	`3`	`}`
`4`	`4`
`5`		`-@media (max-width: 767px) {`
	`5`	`+@media (max-width: 767.98px) {`
`6`	`6`	`.home .hero h1 {`
`7`	`7`	`font-size: 3.5em;`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
`34`		`-@media (max-width: 767px) {`
	`34`	`+@media (max-width: 767.98px) {`
`35`	`35`	`#create-page-form form .optional .title {`
`36`	`36`	`margin-left: 15px;`
`37`	`37`	`}`
`@@ -77,7 +77,7 @@`
`77`	`77`	`}`
`78`	`78`	`}`
`79`	`79`
`80`		`-@media (max-width: 767px) {`
	`80`	`+@media (max-width: 767.98px) {`
`81`	`81`	`.organization.new.org form .optional .title {`
`82`	`82`	`margin-left: 15px;`
`83`	`83`	`}`
`@@ -222,7 +222,7 @@`
`222`	`222`	`height: 60px;`
`223`	`223`	`}`
`224`	`224`
`225`		`-@media (max-width: 767px) {`
	`225`	`+@media (max-width: 767.98px) {`
`226`	`226`	`.organization.teams #repo-top-segment {`
`227`	`227`	`height: 100px;`
`228`	`228`	`}`