mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-04-14 19:47:03 +00:00
Squashed commit of the following:
commit ea8512bc2eeda30c4d983fb43bfcb33ea39093e9 Merge: 2bb7683cfda36114e904Author: Kalista Payne <sabrecat@gmail.com> Date: Thu Nov 21 12:47:11 2024 -0600 Merge branch 'develop' into ui-drawer-fix commit 2bb7683cfda99ad4caf0971291a7f963b4cda942 Author: CuriousMagpie <eilatan@gmail.com> Date: Tue Nov 12 15:46:55 2024 -0500 fix food centering and error centering at very small widths commit fcabf03978b4c55c40f2c60fb1249e3ef799f02d Author: CuriousMagpie <eilatan@gmail.com> Date: Fri Nov 1 14:44:16 2024 -0400 grid size update commit 47a531c1aa44cd1eeeabd1073ac9d7a5ac0880f7 Author: CuriousMagpie <eilatan@gmail.com> Date: Thu Oct 31 16:17:22 2024 -0400 centered error messages on pet drawer commit 14d2872392518fdd5b2577be4b0f2d8c6f2cf53d Author: CuriousMagpie <eilatan@gmail.com> Date: Thu Oct 24 15:47:46 2024 -0400 center no food/no saddle messages in drawer commit 49d1d10a4f72c33c3847ce9e98dc5b7dffc46822 Merge: 6a805bdc45f1993db0faAuthor: CuriousMagpie <eilatan@gmail.com> Date: Thu Oct 24 14:04:16 2024 -0400 Merge branch 'develop' into ui-drawer-fix commit 6a805bdc4561b842e0f879085d25c496e621fd84 Author: Alex <alex.kliger@gmail.com> Date: Sat Nov 19 09:41:21 2022 -0500 fix(ui): correct crowding in title of drawer component that causes drawer toggle icon to become obstructed
This commit is contained in:
parent
a36114e904
commit
f6466b161b
3 changed files with 24 additions and 22 deletions
|
|
@ -61,6 +61,18 @@
|
|||
left: calc((100% + 236px - 978px) / 2);
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
max-width: none;
|
||||
left: 3%;
|
||||
right: 3%;
|
||||
}
|
||||
|
||||
.message {
|
||||
@media screen and (max-width: 450px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-toggle-icon {
|
||||
|
|
@ -136,7 +148,7 @@
|
|||
color: $white !important;
|
||||
text-decoration: none !important;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 0.5rem;
|
||||
padding: 8px;
|
||||
|
||||
&-active, &:hover {
|
||||
color: $white !important;
|
||||
|
|
@ -157,17 +169,19 @@
|
|||
}
|
||||
|
||||
.drawer-slider {
|
||||
padding: 12px 0 0 8px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
& .message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
|
||||
top: calc(50% - 30px);
|
||||
left: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
.header-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-columns: max-content;
|
||||
}
|
||||
|
||||
// MS Edge
|
||||
|
|
|
|||
|
|
@ -34,12 +34,6 @@
|
|||
<template
|
||||
v-for="item in showItems"
|
||||
>
|
||||
<div
|
||||
v-if="shouldAddVerticalLine(item)"
|
||||
:key="item.key"
|
||||
class="vertical-divider"
|
||||
:style="dividerMargins"
|
||||
></div>
|
||||
<slot
|
||||
name="item"
|
||||
:item="item"
|
||||
|
|
@ -56,6 +50,10 @@
|
|||
|
||||
$buttonAreaWidth: 60;
|
||||
|
||||
.items > div {
|
||||
margin: 0 12px
|
||||
}
|
||||
|
||||
.slider-root {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -95,9 +93,11 @@
|
|||
|
||||
&.left-button {
|
||||
left: 0;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
&.right-button {
|
||||
padding-left:20px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -108,15 +108,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
margin-left: $buttonAreaWidth+ px;
|
||||
margin-right: $buttonAreaWidth+ px;
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
height: 92px;
|
||||
width: 1px;
|
||||
background: #34313a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -199,9 +190,6 @@ export default {
|
|||
itemsPerPage () {
|
||||
return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
|
||||
},
|
||||
shouldAddVerticalLine (item) {
|
||||
return this.items[this.itemsPerPage() - 1] === item && this.pointer !== 5;
|
||||
},
|
||||
scrollButtonsVisible () {
|
||||
return this.items.length > this.itemsPerPage();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue