Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasks): icons and select lists

Browse Source
This commit is contained in:
SabreCat
2022-08-08 12:13:15 -05:00
parent 9b9503b141
commit fdbeda19e2
6 changed files with 18 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/assets/svg/icon-users.svg
-14
View File
@@ -1,14 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zm3.452.415a2.4 2.4 0 1 1 0 3.97c.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829A3.986 3.986 0 0 0 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82A3.959 3.959 0 0 0 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844A4.795 4.795 0 0 0 0 13.2a1.6 1.6 0 0 0 1.6 1.6h12.8a1.6 1.6 0 0 0 1.6-1.6 4.795 4.795 0 0 0-2.794-4.356z" id="2aa2jluu5a"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="hhgg3a2mqb" fill="#fff">
<use xlink:href="#2aa2jluu5a"/>
</mask>
<use fill="#878190" xlink:href="#2aa2jluu5a"/>
<g mask="url(#hhgg3a2mqb)" fill="#878190">
<path d="M0 0h16v16H0z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

website/client/src/assets/svg/users.svg
+1 -20
View File
@@ -1,20 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
<path id="rt3mruthma" d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6C6.926 3.6 8 4.674 8 6c0 1.326-1.074 2.4-2.4 2.4-1.326 0-2.4-1.074-2.4-2.4 0-1.326 1.074-2.4 2.4-2.4zm3.452.415C9.436 3.754 9.9 3.6 10.4 3.6c1.326 0 2.4 1.074 2.4 2.4 0 1.326-1.074 2.4-2.4 2.4-.5 0-.964-.154-1.348-.415.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829C13.942 8.118 14.4 7.112 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82C7.33 2.314 6.504 2 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844C1.146 9.604 0 11.266 0 13.2c0 .884.716 1.6 1.6 1.6h12.8c.884 0 1.6-.716 1.6-1.6 0-1.934-1.146-3.596-2.794-4.356z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(-1228 -1456) translate(1216 1416) translate(12 40)">
<mask id="6szqyv7o1b" fill="#fff">
<use xlink:href="#rt3mruthma"/>
</mask>
<use fill="#878190" xlink:href="#rt3mruthma"/>
<g fill="#878190" mask="url(#6szqyv7o1b)">
<path d="M0 0H16V16H0z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12.8"><path d="M11.2,12.8A4.79,4.79,0,0,0,10,9.6H11.2a3.21,3.21,0,0,1,3.2,3.2Zm-9.6,0A3.21,3.21,0,0,1,4.8,9.6H6.4a3.21,3.21,0,0,1,3.2,3.2Zm4-9.6A2.4,2.4,0,1,1,3.2,5.6,2.39,2.39,0,0,1,5.6,3.2Zm3.45.42A2.35,2.35,0,0,1,10.4,3.2a2.4,2.4,0,1,1,0,4.8,2.35,2.35,0,0,1-1.35-.42,3.84,3.84,0,0,0,0-4Zm4.16,4.82A4,4,0,0,0,8,2.42,4,4,0,0,0,5.6,1.6,4,4,0,0,0,2.79,8.44,4.82,4.82,0,0,0,0,12.8a1.6,1.6,0,0,0,1.6,1.6H14.4A1.6,1.6,0,0,0,16,12.8a4.82,4.82,0,0,0-2.79-4.36Z" transform="translate(0 -1.6)" fill-rule="evenodd"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 569 B

website/client/src/components/header/banners/teamsTesting.vue
+3 -17
View File
@@ -9,14 +9,12 @@
slot="content"
class="content m-auto d-flex justify-content-center align-items-center"
>
<img src="~@/assets/images/bug.png" class="mr-11px">
<span class="mr-1">
<strong>You're using the Habitica Groups Beta.</strong>
<strong>You're previewing new Habitica Groups!</strong>
</span>
<a href="mailto:testing@habitica.com" class="send-feedback">
Please submit bugs and feedback here.
<a href="mailto:admin@habitica.com" class="send-feedback">
Have a question?
</a>
<img src="~@/assets/images/bug.png" class="ml-11px flip">
</div>
</base-banner>
</template>
@@ -40,18 +38,6 @@
}
}
.flip {
transform: scaleX(-1);
}
.ml-11px {
margin-left: 11px;
}
.mr-11px {
margin-right: 11px;
}
.send-feedback {
color: $white;
text-decoration: underline;
website/client/src/components/tasks/approvalFooter.vue
+3 -3
View File
@@ -44,7 +44,7 @@
>
<div
v-if="assignedUsersCount > 0"
class="svg-icon icon-16 ml-2 users-icon color"
class="svg-icon ml-2 users-icon color"
:class="{'green-10': completionsCount === assignedUsersCount}"
v-html="icons.users"
></div>
@@ -210,7 +210,7 @@
}
.users-icon {
margin-top: -1px;
width: 16px;
}
</style>
@@ -220,7 +220,7 @@ import reduce from 'lodash/reduce';
import { mapState } from '@/libs/store';
import checkIcon from '@/assets/svg/check.svg';
import lockIcon from '@/assets/svg/lock.svg';
import usersIcon from '@/assets/svg/icon-users.svg';
import usersIcon from '@/assets/svg/users.svg';
import lastComplete from '@/assets/svg/last-complete.svg';
export default {
website/client/src/components/tasks/modal-controls/multiList.vue
+3 -9
View File
@@ -4,16 +4,16 @@
:class="{ 'break': maxItems === 0 }"
>
<template v-if="items.length === 0">
<div class="items-none">
<div class="items-none mb-1">
{{ emptyMessage }}
</div>
</template>
<template v-else>
<div
v-for="item in truncatedSelectedItems"
v-for="item in items"
:key="item.id"
:title="item.name"
class="multi-item mr-1 d-inline-flex align-items-center"
class="multi-item mr-1 mb-1 d-inline-flex align-items-center"
:class="{'margin-adjust': maxItems !== 0, 'pill-invert': pillInvert}"
@click.stop="removeItem($event, item)"
@@ -27,12 +27,6 @@
v-html="icons.remove"
></div>
</div>
<div
v-if="remainingSelectedItems.length > 0"
class="items-more ml-75"
>
+{{ remainingSelectedItems.length }}
</div>
</template>
</div>
</template>
website/client/src/components/tasks/modal-controls/selectMulti.vue
+8
View File
@@ -29,6 +29,7 @@
</b-dropdown-header>
<template v-slot:button-content>
<multi-list
class="d-flex flex-wrap"
:items="selectedItemsAsObjects"
:add-new="addNew"
:pill-invert="pillInvert"
@@ -85,6 +86,13 @@
$itemHeight: 2rem;
.inline-dropdown {
&.select-multi .dropdown-toggle {
height: auto;
padding-bottom: 0px;
}
}
.select-multi {
.dropdown-toggle {
padding-left: 0.75rem;