thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

[MOBILE] Improve mobile experience (#812)

Browse source 
- 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
This commit is contained in:
Gusted 2023-06-06 19:14:26 +00:00
parent 7adaafa760
commit f43e9fc4fd
26 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/base/head_navbar.tmpl
View file

@ -148,7 +148,7 @@
</div><!-- end content create new menu --> </div><!-- end content create new menu -->
</div><!-- end dropdown menu create new --> </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"> <span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}} {{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> <span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>

2
templates/install.tmpl
View file

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

2
templates/org/create.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content organization new org"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/repo/create.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new repo"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/repo/migrate/codebase.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{template "base/disable_form_autofill"}} {{template "base/disable_form_autofill"}}

2
templates/repo/migrate/git.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{template "base/disable_form_autofill"}} {{template "base/disable_form_autofill"}}

2
templates/repo/migrate/gitbucket.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{template "base/disable_form_autofill"}} {{template "base/disable_form_autofill"}}

2
templates/repo/migrate/gitea.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/repo/migrate/github.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/repo/migrate/gitlab.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/repo/migrate/gogs.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

4
templates/repo/migrate/migrate.tmpl
View file

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

2
templates/repo/migrate/onedev.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{template "base/disable_form_autofill"}} {{template "base/disable_form_autofill"}}

2
templates/repo/pulls/fork.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new fork"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/activate.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user activate"> <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"> <div class="column">
<form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/activate" method="post"> <form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/activate" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/forgot_passwd.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user forgot password"> <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"> <div class="column">
<form class="ui form ignore-dirty" action="{{.Link}}" method="post"> <form class="ui form ignore-dirty" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/link_account.tmpl
View file

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

2
templates/user/auth/prohibit_login.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user activate"> <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"> <div class="column">
<form class="ui form"> <form class="ui form">
<h2 class="ui top attached header"> <h2 class="ui top attached header">

2
templates/user/auth/reset_passwd.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user reset password"> <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"> <div class="column">
<form class="ui form ignore-dirty" action="{{.Link}}" method="post"> <form class="ui form ignore-dirty" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/signin.tmpl
View file

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

2
templates/user/auth/signup.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}"> <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" .}} {{template "user/auth/signup_inner" .}}
</div> </div>
</div> </div>

2
templates/user/auth/twofa.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/twofa_scratch.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user signin"> <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"> <div class="column">
<form class="ui form" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}

2
templates/user/auth/webauthn.tmpl
View file

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div class="user signin webauthn-prompt"> <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"> <div class="column center aligned">
<h3 class="ui top attached header"> <h3 class="ui top attached header">
{{.locale.Tr "twofa"}} {{.locale.Tr "twofa"}}

7
web_src/css/base.css
View file

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

6
web_src/css/modules/card.css
View file

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