forked from MapComplete/MapComplete
Add some support for foldable devices
This commit is contained in:
parent
00ab3a1b77
commit
06e978ff49
GPG key ID:
53956B3252478F0D
4 changed files with 444 additions and 404 deletions
|
|
@ -781,10 +781,6 @@ video {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
|
@ -797,6 +793,10 @@ video {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
|
@ -900,10 +900,6 @@ video {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -936,6 +932,10 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -2351,7 +2351,7 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -2374,12 +2374,12 @@ input[type=text] {
|
|||
|
||||
.low-interaction {
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground)
|
||||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
.interactive {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground)
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
.border-interactive {
|
||||
|
|
@ -2398,7 +2398,8 @@ input[type=text] {
|
|||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||
*/
|
||||
|
||||
button.small, .button.small {
|
||||
button.small,
|
||||
.button.small {
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
|
|
@ -2419,7 +2420,8 @@ button.small, .button.small {
|
|||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
button, .button {
|
||||
button,
|
||||
.button {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
line-height: 1.25rem;
|
||||
|
|
@ -2442,56 +2444,67 @@ button, .button {
|
|||
box-shadow: 0 5px 10px #88888888;
|
||||
}
|
||||
|
||||
button.selected, .button.selected {
|
||||
button.selected,
|
||||
.button.selected {
|
||||
background-color: var(--catch-detail-color);
|
||||
border-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
}
|
||||
|
||||
button.selected svg path, .button.selected svg path {
|
||||
button.selected svg path,
|
||||
.button.selected svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
|
||||
button:not(.no-image-background):not(.soft) svg path,
|
||||
.button:not(.no-image-background):not(.soft) svg path {
|
||||
fill: var(--interactive-foreground) !important;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.interactive button, .interactive .button {
|
||||
.interactive button,
|
||||
.interactive .button {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
button:hover, .button:hover {
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
|
||||
button:hover:not(.no-image-background) img,
|
||||
.button:hover:not(.no-image-background) img {
|
||||
background: var(--low-interaction-background);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
|
||||
button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
|
||||
button:hover:not(.no-image-background) svg path,
|
||||
.button:hover:not(.no-image-background) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
|
||||
button.disabled:hover:not(.no-image-background) svg path,
|
||||
.button.disabled:hover:not(.no-image-background) svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
button.primary,
|
||||
.button.primary {
|
||||
color: var(--button-foreground);
|
||||
background: var(--button-background);
|
||||
}
|
||||
|
||||
button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
|
||||
button.primary:not(.no-image-background) svg path,
|
||||
.button.primary:not(.no-image-background) svg path {
|
||||
fill: var(--button-foreground) !important;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
button.disabled, .button.disabled {
|
||||
button.disabled,
|
||||
.button.disabled {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
|
|
@ -2499,7 +2512,8 @@ button.disabled, .button.disabled {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.disabled:hover, .button.disabled:hover {
|
||||
button.disabled:hover,
|
||||
.button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
|
|
@ -2513,18 +2527,21 @@ button.link {
|
|||
}
|
||||
|
||||
button.link:hover {
|
||||
color:unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.interactive button.disabled svg path, .interactive .button.disabled svg path {
|
||||
.interactive button.disabled svg path,
|
||||
.interactive .button.disabled svg path {
|
||||
fill: var(--interactive-foreground) !important;
|
||||
}
|
||||
|
||||
.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
|
||||
.low-interaction button.disabled svg path,
|
||||
.low-interaction .button.disabled svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
}
|
||||
|
||||
.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
|
||||
.normal-background button.disabled svg path,
|
||||
.normal-background .button.disabled svg path {
|
||||
fill: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
|
|
@ -2537,12 +2554,14 @@ button.link:hover {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
button.soft, .button.soft {
|
||||
button.soft,
|
||||
.button.soft {
|
||||
border: 2px solid var(--interactive-background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.soft:hover, .button.soft:hover {
|
||||
button.soft:hover,
|
||||
.button.soft:hover {
|
||||
background-color: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
|
|
@ -2580,7 +2599,7 @@ select:hover {
|
|||
border-color: var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
.neutral-label{
|
||||
.neutral-label {
|
||||
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
|
||||
* Placed here for autocompletion
|
||||
*/
|
||||
|
|
@ -2608,7 +2627,7 @@ label.button {
|
|||
label:hover:not(.neutral-label) {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--interactive-contrast)
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
label:not(.no-image-background):not(.neutral-label) img {
|
||||
|
|
@ -2839,18 +2858,18 @@ a.link-underline {
|
|||
}
|
||||
|
||||
svg.apply-fill path {
|
||||
fill: var(--svg-color)
|
||||
fill: var(--svg-color);
|
||||
}
|
||||
|
||||
.compass_arrow {
|
||||
width: calc( 2.5rem - 1px ) ;
|
||||
height: calc( 2.5rem - 1px )
|
||||
width: calc(2.5rem - 1px);
|
||||
height: calc(2.5rem - 1px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.compass_arrow {
|
||||
width: calc( 2.75rem - 1px ) ;
|
||||
height: calc( 2.75rem - 1px )
|
||||
width: calc(2.75rem - 1px);
|
||||
height: calc(2.75rem - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2931,6 +2950,16 @@ svg.apply-fill path {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/************************* Experimental support for foldable devices ********************************/
|
||||
|
||||
@media (horizontal-viewport-segments: 2) {
|
||||
.theme-list {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.hover\:bg-indigo-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
role="dialog"
|
||||
style="max-width: 100vw; max-height: 100vh"
|
||||
tabindex="-1"
|
||||
id="modal-right"
|
||||
use:trapFocus
|
||||
>
|
||||
<slot name="close-button">
|
||||
|
|
@ -30,3 +31,12 @@
|
|||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experimental support for foldable devices -->
|
||||
<style lang="scss">
|
||||
@media (horizontal-viewport-segments: 2) {
|
||||
#modal-right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<section class="w-full">
|
||||
<slot name="title" />
|
||||
<div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each filteredThemes as theme (theme.id)}
|
||||
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
|
||||
<!-- TODO: doesn't work if first theme is hidden -->
|
||||
|
|
|
|||
731
src/index.css
731
src/index.css
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue