6672cf0812
The row of buttons on the org view is pretty bad on mobile, as it doesn't leave enough space for the org name. My recent PR 3642 made it worse. I added a mitigation to allow buttons to go to an other row, so that the layout is usable on mobile. It is still non-ideal as it will continue going out of bounds on small screens, but is much better. ## Preview [Old preview](/attachments/1e280a77-533c-41b5-954d-b336f1b72186) ![](/attachments/4a2c45e2-7da8-4d87-afb7-7c281e14c756) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3949 Reviewed-by: Otto <otto@codeberg.org> Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
193 lines
3.8 KiB
CSS
193 lines
3.8 KiB
CSS
#create-page-form form {
|
|
margin: auto;
|
|
}
|
|
|
|
#create-page-form form .ui.message {
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#create-page-form form {
|
|
width: 800px !important;
|
|
}
|
|
#create-page-form form .header {
|
|
padding-left: 280px !important;
|
|
}
|
|
#create-page-form form .inline.field > label {
|
|
text-align: right;
|
|
width: 250px !important;
|
|
word-wrap: break-word;
|
|
}
|
|
#create-page-form form .help {
|
|
margin-left: 265px !important;
|
|
}
|
|
#create-page-form form .optional .title {
|
|
margin-left: 250px !important;
|
|
}
|
|
#create-page-form form .inline.field > input,
|
|
#create-page-form form .inline.field > textarea {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
#create-page-form form .optional .title {
|
|
margin-left: 15px;
|
|
}
|
|
#create-page-form form .inline.field > label {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.organization .head .ui.header .ui.right {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.organization.new.org form {
|
|
margin: auto;
|
|
}
|
|
|
|
.organization.new.org form .ui.message {
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.organization.new.org form {
|
|
width: 800px !important;
|
|
}
|
|
.organization.new.org form .header {
|
|
padding-left: 280px !important;
|
|
}
|
|
.organization.new.org form .inline.field > label {
|
|
text-align: right;
|
|
width: 250px !important;
|
|
word-wrap: break-word;
|
|
}
|
|
.organization.new.org form .help {
|
|
margin-left: 265px !important;
|
|
}
|
|
.organization.new.org form .optional .title {
|
|
margin-left: 250px !important;
|
|
}
|
|
.organization.new.org form .inline.field > input,
|
|
.organization.new.org form .inline.field > textarea {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.organization.new.org form .optional .title {
|
|
margin-left: 15px;
|
|
}
|
|
.organization.new.org form .inline.field > label {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.organization.new.org form .header {
|
|
padding-left: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-content.organization .org-avatar {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.page-content.organization #org-info {
|
|
overflow-wrap: anywhere;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.page-content.organization #org-info .ui.header {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 36px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.page-content.organization #org-info .ui.header {
|
|
flex-direction: column;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.page-content.organization #org-info .org-title {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.page-content.organization #org-info .desc {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-content.organization #org-info .meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-content.organization .ui.top.header .ui.right {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.page-content.organization .teams .item {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.page-content.organization .members .ui.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.organization.invite #invite-box {
|
|
margin: 50px auto auto;
|
|
width: 500px !important;
|
|
}
|
|
|
|
.organization.invite #invite-box #search-user-box input {
|
|
margin-left: 0;
|
|
width: 300px;
|
|
}
|
|
|
|
.organization.invite #invite-box .ui.button {
|
|
margin-left: 5px;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.organization.invite .ui.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.organization.teams .detail .item {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.organization.teams .detail .item:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.organization.teams .repositories .item,
|
|
.organization.teams .members .item {
|
|
padding: 10px 19px;
|
|
}
|
|
|
|
.organization.teams .repositories .item:not(:last-child),
|
|
.organization.teams .members .item:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.organization.teams .repositories .item .button,
|
|
.organization.teams .members .item .button {
|
|
padding: 9px 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.org-team-navbar .active.item {
|
|
background: var(--color-box-body) !important;
|
|
}
|