[MOBILE] Improve mobile experience (#812)

- Add `stackable` to `very relaxed` pages, such they don't take extra
margins from the space.
- Add margin bottom to the user item in the navbar, so it doesn't look
like crammed.
- Make the migrate page usable, by reducing three to two cards in a row
and making the icon smaller.

Co-authored-by: Gusted <postmaster@gusted.xyz>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/812

templates/base/head_navbar.tmpl

@@ -148,7 +148,7 @@
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
-			<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
+			<div class="ui dropdown jump item gt-mx-0 gt-mb-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{avatar $.Context .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>

templates/install.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content install">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="sixteen wide center aligned centered column">
 			<h3 class="ui top attached header">
 				{{.locale.Tr "install.title"}}

templates/org/create.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content organization new org">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/create.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new repo">
-	<div class="ui middle very relaxed page one column grid">
+	<div class="ui stackable middle very relaxed page one column grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/migrate/codebase.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{template "base/disable_form_autofill"}}

templates/repo/migrate/git.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{template "base/disable_form_autofill"}}

templates/repo/migrate/gitbucket.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{template "base/disable_form_autofill"}}

templates/repo/migrate/gitea.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/migrate/github.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/migrate/gitlab.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/migrate/gogs.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/repo/migrate/migrate.tmpl

@@ -1,9 +1,9 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			{{template "repo/migrate/helper" .}}
-			<div class="ui three stackable cards">
+			<div class="ui two-mobile three stackable cards">
 				{{range .Services}}
 					<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
 						{{if eq .Name "github"}}

templates/repo/migrate/onedev.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{template "base/disable_form_autofill"}}

templates/repo/pulls/fork.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository new fork">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/activate.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user activate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/activate" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/forgot_passwd.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user forgot password">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form ignore-dirty" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/link_account.tmpl

@@ -15,7 +15,7 @@
 			</a>
 		</div>
 	</div>
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<div class="ui tab {{if not .user_exists}}active{{end}}"
 				data-tab="auth-link-signup-tab">

templates/user/auth/prohibit_login.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user activate">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form">
 				<h2 class="ui top attached header">

templates/user/auth/reset_passwd.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user reset password">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form ignore-dirty" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/signin.tmpl

@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}">
 	{{template "user/auth/signin_navbar" .}}
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="ui container column fluid">
 			{{template "user/auth/signin_inner" .}}
 		</div>

templates/user/auth/signup.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		{{template "user/auth/signup_inner" .}}
 	</div>
 </div>

templates/user/auth/twofa.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user signin">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/twofa_scratch.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user signin">
-	<div class="ui middle very relaxed page grid">
+	<div class="ui stackable middle very relaxed page grid">
 		<div class="column">
 			<form class="ui form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}

templates/user/auth/webauthn.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div class="user signin webauthn-prompt">
-	<div class="ui middle centered very relaxed page grid">
+	<div class="ui stackable middle centered very relaxed page grid">
 		<div class="column center aligned">
 				<h3 class="ui top attached header">
 				{{.locale.Tr "twofa"}}

web_src/css/base.css

@@ -2030,6 +2030,13 @@ a.ui.basic.label:hover {
   color: var(--color-git);
 }
 
+@media (max-width: 767px) {
+  .migrate .svg {
+    height: 150px;
+    width: 150px;
+  }
+}
+
 .color-icon {
   display: inline-block;
   border-radius: 100%;

web_src/css/modules/card.css

@@ -132,3 +132,9 @@ a.ui.card:hover {
   margin-left: 1em;
   margin-right: 1em;
 }
+
+@media (max-width: 767px) {
+  .ui.two-mobile.cards > .card {
+      width: calc(50% - 2em);
+  }
+}