1
0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-01-31 19:39:09 +00:00

Make the toolbar more responsive

This commit is contained in:
bouncepaw 2021-04-12 21:40:25 +05:00
parent 9eff38fdc4
commit a33b9625aa
2 changed files with 35 additions and 11 deletions

View File

@ -113,7 +113,8 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
qw422016.N().S(` qw422016.N().S(`
`) `)
//line assets/assets.qtpl:10 //line assets/assets.qtpl:10
qw422016.N().S(`.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; } qw422016.N().S(`
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
.upload-binary__input { display: block; margin: .25rem 0; } .upload-binary__input { display: block; margin: .25rem 0; }
.modal__title { font-size: 2rem; } .modal__title { font-size: 2rem; }
@ -174,29 +175,38 @@ header { width: 100%; margin-bottom: 1rem; }
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; } .header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
} }
/* Wide enough to fit two columns ok */ /* Wide enough to fit two columns ok */
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; } .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
.main-width { margin: 0; } .main-width { margin: 0; }
main { grid-column: 1 / span 1; grid-row: 1 / span 2; } main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
.relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; } .relative-hyphae, .edit-toolbar { grid-column: 2 / span 1; grid-row: 1 / span 1; }
.layout-card { width: 100%; } .layout-card { width: 100%; }
.edit-toolbar { margin: 0 0 0 auto; } .edit-toolbar__buttons {display: grid; }
.edit-toolbar__buttons { display: grid; grid-template-columns: 1fr 1fr; } }
@media screen and (min-width: 1150px) {
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
} }
@media screen and (min-width: 1250px) { @media screen and (min-width: 1250px) {
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.layout-card { max-width: 18rem; } .layout-card {max-width: 18rem;}
.main-width { margin: 0 auto; } .main-width { margin: 0 auto; }
.backlinks { grid-column: 1 / span 1; margin-right: 0; } .backlinks { grid-column: 1 / span 1; margin-right: 0; }
main { grid-column: 2 / span 1; } main { grid-column: 2 / span 1; }
.relative-hyphae { grid-column: 3 / span 1; margin-left: 0; } .relative-hyphae, .edit-toolbar { grid-column: 3 / span 1; margin-left: 0; }
.edit-toolbar__buttons { grid-template-columns: 1fr; }
.backlinks__title { text-align: right; } .backlinks__title { text-align: right; }
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; } .backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
} }
@media screen and (min-width: 1400px) {
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
}
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
html { height:100%; padding:0; } html { height:100%; padding:0; }
body {height:100%; margin:0; } body {height:100%; margin:0; }
@ -384,6 +394,8 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
.hypha-tabs { background-color: #232323; } .hypha-tabs { background-color: #232323; }
} }
} }
`) `)
//line assets/assets.qtpl:10 //line assets/assets.qtpl:10
qw422016.N().S(` qw422016.N().S(`

View File

@ -1,3 +1,4 @@
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; } .amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
.upload-binary__input { display: block; margin: .25rem 0; } .upload-binary__input { display: block; margin: .25rem 0; }
@ -59,29 +60,38 @@ header { width: 100%; margin-bottom: 1rem; }
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; } .header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
} }
/* Wide enough to fit two columns ok */ /* Wide enough to fit two columns ok */
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; } .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
.main-width { margin: 0; } .main-width { margin: 0; }
main { grid-column: 1 / span 1; grid-row: 1 / span 2; } main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
.relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; } .relative-hyphae, .edit-toolbar { grid-column: 2 / span 1; grid-row: 1 / span 1; }
.layout-card { width: 100%; } .layout-card { width: 100%; }
.edit-toolbar { margin: 0 0 0 auto; } .edit-toolbar__buttons {display: grid; }
.edit-toolbar__buttons { display: grid; grid-template-columns: 1fr 1fr; } }
@media screen and (min-width: 1150px) {
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
} }
@media screen and (min-width: 1250px) { @media screen and (min-width: 1250px) {
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.layout-card { max-width: 18rem; } .layout-card {max-width: 18rem;}
.main-width { margin: 0 auto; } .main-width { margin: 0 auto; }
.backlinks { grid-column: 1 / span 1; margin-right: 0; } .backlinks { grid-column: 1 / span 1; margin-right: 0; }
main { grid-column: 2 / span 1; } main { grid-column: 2 / span 1; }
.relative-hyphae { grid-column: 3 / span 1; margin-left: 0; } .relative-hyphae, .edit-toolbar { grid-column: 3 / span 1; margin-left: 0; }
.edit-toolbar__buttons { grid-template-columns: 1fr; }
.backlinks__title { text-align: right; } .backlinks__title { text-align: right; }
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; } .backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
} }
@media screen and (min-width: 1400px) {
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
}
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
html { height:100%; padding:0; } html { height:100%; padding:0; }
body {height:100%; margin:0; } body {height:100%; margin:0; }
@ -269,3 +279,5 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
.hypha-tabs { background-color: #232323; } .hypha-tabs { background-color: #232323; }
} }
} }