fix dirty hacks

Author: wxiaoguang

templates/base/footer_content.tmpl

@@ -1,5 +1,5 @@
-<footer role="group" aria-label="{{.locale.Tr "aria.footer"}}">
-	<div class="gt-float-left left-links" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
+<footer class="page-footer" role="group" aria-label="{{.locale.Tr "aria.footer"}}">
+	<div class="left-links" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
 		<a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.locale.Tr "powered_by" "Gitea"}}</a>
 		{{if (or .ShowFooterVersion .PageIsAdmin)}}
 			{{.locale.Tr "version"}}:
@@ -14,7 +14,7 @@
 			{{.locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
 		{{end}}
 	</div>
-	<div class="gt-float-right right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
+	<div class="right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
 		<div class="ui dropdown upward language">
 			<span>{{svg "octicon-globe"}} {{.locale.LangName}}</span>
 			<div class="menu language-menu">

templates/base/head.tmpl

@@ -83,7 +83,7 @@
 		{{template "custom/body_inner_pre" .}}
 
 		{{if not .PageIsInstall}}
-			<div class="ui top secondary stackable main menu following bar light no-vertical-tabs">
+			<div class="ui top secondary stackable main menu following bar light">
 				{{template "base/head_navbar" .}}
 			</div><!-- end bar -->
 		{{end}}

templates/repo/cite/cite_modal.tmpl

@@ -3,7 +3,7 @@
 		{{.locale.Tr "repo.cite_this_repo"}}
 	</div>
 	<div class="content">
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
+		<div class="ui stackable secondary menu">
 			<div class="fitted item">
 				<div class="ui action input" id="citation-panel">
 					{{template "repo/cite/cite_buttons" .}}

templates/repo/header.tmpl

@@ -151,7 +151,7 @@
 {{end}}
 	<div class="ui tabs container">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="ui tabular stackable menu navbar">
+			<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if (ne .BranchName .Repository.DefaultBranch)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{.locale.Tr "repo.code"}}
@@ -236,16 +236,14 @@
 				{{template "custom/extra_tabs" .}}
 
 				{{if .Permission.IsAdmin}}
-					<div class="right menu">
-						<a class="{{if .PageIsRepoSettings}}active {{end}}item" href="{{.RepoLink}}/settings">
-							{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
-						</a>
-					</div>
+					<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
+						{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
+					</a>
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="ui tabular stackable menu navbar">
-				<div class="right menu">
+			<div class="ui tabular menu navbar">
+				<div class="right item">
 					<a class="{{if .PageIsRepoSettings}}active {{end}}item" href="{{.RepoLink}}/settings">
 						{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
 					</a>

templates/repo/issue/list.tmpl

@@ -34,7 +34,7 @@
 				{{template "repo/issue/openclose" .}}
 			</div>
 			<div class="ten wide right aligned column">
-				<div class="ui secondary filter stackable menu labels">
+				<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">

templates/repo/issue/milestone_issues.tmpl

@@ -50,7 +50,7 @@
 				{{template "repo/issue/openclose" .}}
 			</div>
 			<div class="ten wide right aligned column">
-				<div class="ui secondary filter stackable menu labels">
+				<div class="ui secondary filter menu labels">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">

templates/user/dashboard/navbar.tmpl

@@ -1,5 +1,5 @@
 <div class="dashboard-navbar">
-	<div class="ui secondary stackable menu">
+	<div class="ui secondary stackable menu g-menu-stackable-scrollable">
 		<div class="item">
 			<div class="ui floating dropdown jump">
 				<span class="text truncated-item-container">

web_src/css/base.css

@@ -2766,21 +2766,16 @@ table th[data-sortt-desc] .svg {
   height: 15px;
 }
 
-@media (max-width: 767px) {
-  .ui.stackable.menu:not(.no-vertical-tabs) {
-    overflow-y: hidden;
-    overflow-x: auto;
-    flex-direction: row;
-    flex-wrap: nowrap !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .item {
-    width: initial !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) > .dropdown.item {
-    position: initial;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .menu {
-    flex-direction: row;
+.g-menu-stackable-scrollable {
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+@media only screen and (max-width: 767.98px) {
+  /* also respect Fomantic's "stackable" definition */
+  .g-menu-stackable-scrollable {
+    overflow-x: unset;
+    overflow-y: unset;
   }
 }
 

web_src/css/helpers.css

@@ -66,13 +66,16 @@ Gitea's private styles use `g-` prefix.
 .gt-cursor-default { cursor: default !important; }
 .gt-invisible { visibility: hidden !important; }
 .gt-items-start { align-items: flex-start !important; }
-.gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
 .gt-whitespace-nowrap { white-space: nowrap !important; }
 .gt-whitespace-pre { white-space: pre !important; }
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
 
+.gt-overflow-x-auto { overflow-x: auto !important; }
+.gt-overflow-x-scroll { overflow-x: scroll !important; }
+.gt-overflow-y-hidden { overflow-y: hidden !important; }
+
 .gt-w-screen { width: 100vw !important; }
 .gt-h-screen { height: 100vh !important; }
 

web_src/css/home.css

@@ -43,39 +43,39 @@
   color: var(--color-green);
 }
 
-footer {
+.page-footer {
+  width: 100vw;
+  display: flex;
   background-color: var(--color-footer);
   border-top: 1px solid var(--color-secondary);
   line-height: 39px;
-  flex-basis: 40px;
-  color: var(--color-text-light);
   padding: 0 20px;
 }
 
-footer .right-links {
+.page-footer .left-links {
+  flex: 1;
+}
+
+.page-footer .right-links {
   min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
 }
 
-footer .right-links > a {
+.page-footer .right-links > a {
   border-left: 1px solid var(--color-secondary-dark-1);
   padding-left: 8px;
   margin-left: 5px;
 }
 
-footer .ui.dropdown.language .menu {
+.page-footer .ui.dropdown.language .menu {
   height: 500px;
   max-height: calc(100vh - 60px);
   overflow-y: auto;
   margin-bottom: 10px;
 }
 
-
 @media (max-width: 880px) {
-  footer .left-links,
-  footer .right-right {
-    width: 100%;
+  .page-footer {
     display: block;
     text-align: center;
-    float: none;
   }
 }