Improve responsive view of some forms

This commit is contained in:
Alex Cabal 2024-12-23 14:07:22 -06:00
parent d94c057e20
commit ca8a11f663
2 changed files with 44 additions and 6 deletions

View file

@ -29,6 +29,7 @@
display: grid;
grid-template-columns: 1fr 200px 200px;
gap: 2rem;
align-items: end;
}
.create-update-ebook-placeholder fieldset label:has(input[type="checkbox"]){
@ -99,3 +100,30 @@ article.ebook.ebook-placeholder .placeholder-details{
article.ebook.ebook-placeholder .placeholder-details ul{
list-style: disc;
}
@media(max-width: 750px){
.create-update-ebook-placeholder{
grid-template-columns: 1fr;
}
.extra-line > span:first-child::before{
display: none;
}
.create-update-ebook-placeholder > fieldset:nth-of-type(2),
.create-update-ebook-placeholder details:nth-of-type(2) fieldset,
.create-update-ebook-placeholder > fieldset:nth-of-type(1),
.create-update-ebook-placeholder details:nth-of-type(1) fieldset,
.create-update-ebook-placeholder fieldset:has(input[name="sequence-number-collection-name-1"]),
.create-update-ebook-placeholder fieldset:has(input[name="sequence-number-collection-name-2"]),
.create-update-ebook-placeholder fieldset:has(input[name="sequence-number-collection-name-3"]){
grid-template-columns: 1fr;
}
.create-update-ebook-placeholder fieldset label:has(input[name="ebook-placeholder-transcription-url"]),
.create-update-ebook-placeholder fieldset label:has(textarea[name="ebook-placeholder-notes"]),
.create-update-ebook-placeholder fieldset label:has(input[type="checkbox"]),
.create-update-ebook-placeholder label.controls-following-fieldset + fieldset{
grid-column: 1;
}
}

View file

@ -1,6 +1,8 @@
.project-form{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 2rem;
}
.project-form label:has(input[type="url"]){
@ -11,11 +13,6 @@
grid-column-start: 1;
}
.project-form{
display: grid;
gap: 2rem;
}
.project-form label:has(input[type="checkbox"]){
grid-column: 1 / span 2;
}
@ -42,3 +39,16 @@ table.data-table td.status.stalled{
background: #861d1d !important; /* Override hover backgound color */
color: #ffffff;
}
@media(max-width: 750px){
.project-form{
grid-template-columns: 1fr;
}
.project-form label:has(input[type="url"]),
.project-form label:has(input[type="checkbox"]),
.project-form div.footer,
.project-form .placeholder-form{
grid-column: 1;
}
}