ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: design review issues

Browse Source 
Signed-off-by: Luka Trovic <luka@nextcloud.com>
This commit is contained in:
Luka Trovic
2024-07-15 19:00:15 +02:00
committed by grnd-alt
parent 88c5f5fe15
commit aed4baa8fc
20 changed files with 67 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/deck.css
View File

@@ -7,3 +7,13 @@
background-image: url(../img/deck.svg);
filter: var(--background-invert-if-dark);
}
input[type=submit].icon-confirm {
border-color: var(--color-border-maxcontrast) !important;
border-left: none;
}
input[type=text]:focus+input[type=submit].icon-confirm,
input[type=text]:hover+input[type=submit].icon-confirm {
border-color: var(--color-main-text) !important;
}

2
src/components/ActivityEntry.vue
View File

@@ -137,7 +137,7 @@ export default {
margin-left: 10px;
}
.activity--message {
margin-left: 44px;
margin-left: var(--default-clickable-area);
color: var(--color-text-light);
margin-bottom: 10px;
}

12
src/components/Controls.vue
View File

@@ -493,8 +493,8 @@ export default {
.controls {
display: flex;
margin: 5px;
height: 44px;
padding-left: 44px;
height: var(--default-clickable-area);
padding-left: var(--default-clickable-area);
.board-title {
display: flex;
@@ -524,8 +524,8 @@ export default {
#app-navigation-toggle-custom {
position: static;
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
cursor: pointer;
opacity: 1;
display: inline-block !important;
@@ -584,8 +584,8 @@ export default {
.filter-button {
padding: 0;
border-radius: 50%;
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
&[data-popper-shown] {
background-color: var(--color-background-hover);

2
src/components/SessionList.vue
View File

@@ -72,7 +72,7 @@ export default {
<style scoped lang="scss">
.avatar-list {
min-height: 44px;
min-height: var(--default-clickable-area);
align-items: center;
padding-right: 0.5em;
border: none;

2
src/components/board/Board.vue
View File

@@ -277,7 +277,7 @@ export default {
.board {
padding-left: $board-spacing;
position: relative;
max-height: calc(100% - 44px);
max-height: calc(100% - var(--default-clickable-area));
overflow: hidden;
overflow-x: auto;
flex-grow: 1;

9
src/components/board/BoardSidebar.vue
View File

@@ -117,3 +117,12 @@ export default {
},
}
</script>
<style scoped lang="scss">
:deep {
.app-sidebar-tabs__tab-caption,
.app-sidebar-tabs__nav .checkbox-content__text {
white-space: normal !important;
}
}
</style>

6
src/components/board/DeletedTabSidebar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h3>{{ t('deck', 'Deleted lists') }}</h3>
<h5>{{ t('deck', 'Deleted lists') }}</h5>
<ul>
<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
<span class="icon icon-deck" />
@@ -14,7 +14,7 @@
</li>
</ul>
<h3>{{ t('deck', 'Deleted cards') }}</h3>
<h5>{{ t('deck', 'Deleted cards') }}</h5>
<ul>
<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
<div class="icon icon-deck" />
@@ -98,7 +98,7 @@ export default {
}
* {
flex-basis: 44px;
flex-basis: var(--default-clickable-area);
}
.title {

14
src/components/board/Stack.vue
View File

@@ -287,7 +287,7 @@ export default {
},
startEditing(stack) {
if (this.dragging) {
return
return
}
this.copiedStack = Object.assign({}, stack)
@@ -351,7 +351,7 @@ export default {
padding-left: $card-spacing;
padding-right: $card-spacing;
cursor: grab;
min-height: 44px;
min-height: var(--default-clickable-area);
// Smooth fade out of the cards at the top
&:before {
@@ -403,6 +403,7 @@ export default {
border-radius: 3px;
margin: 6px;
padding: 4px 4px;
font-size: 120%;
&:focus-visible {
outline: 2px solid var(--color-border-dark);
@@ -413,10 +414,17 @@ export default {
form {
margin: 2px 0;
}
:deep {
.action-item,
.v-popper--theme-dropdown {
display: flex;
}
}
}
.stack__card-add {
height: 44px;
height: var(--default-clickable-area);
flex-shrink: 0;
z-index: 100;
display: flex;

2
src/components/board/TagsTabSidebar.vue
View File

@@ -169,7 +169,7 @@ export default {
}
</script>
<style scoped lang="scss">
$clickable-area: 44px;
$clickable-area: var(--default-clickable-area);
.labels li {
display: flex;

4
src/components/boards/Boards.vue
View File

@@ -79,7 +79,7 @@ export default {
<style lang="scss">
.board-list {
margin-top: -44px;
margin-top: - var(--default-clickable-area); //@TODO
.board-list-row {
align-items: center;
@@ -94,7 +94,7 @@ export default {
.board-list-header-row {
color: var(--color-text-lighter);
height: 44px;
height: var(--default-clickable-area);
}
.board-list-bullet-cell,

8
src/components/card/AttachmentList.vue
View File

@@ -280,10 +280,10 @@ export default {
gap: calc(var(--default-grid-baseline) * 3);
.icon-upload, .icon-folder {
padding-left: 44px;
padding-left: var(--default-clickable-area);
background-position: 16px center;
flex-grow: 1;
height: 44px;
height: var(--default-clickable-area);
margin-bottom: 12px;
text-align: left;
}
@@ -318,7 +318,7 @@ export default {
li.attachment {
display: flex;
padding: 3px;
min-height: 44px;
min-height: var(--default-clickable-area);
&.deleted {
opacity: .5;
@@ -366,7 +366,7 @@ export default {
}
}
button.icon-history {
width: 44px;
width: var(--default-clickable-area);
}
progress {
margin-top: 3px;

2
src/components/card/CardSidebar.vue
View File

@@ -229,7 +229,7 @@ section.app-sidebar__tab--active {
right: 0;
max-width: calc(100% - #{$modal-padding * 2});
padding: 0 14px;
height: 100%;
height: 97%;
overflow: initial;
user-select: text;
-webkit-user-select: text;

2
src/components/card/CommentItem.vue
View File

@@ -209,7 +209,7 @@ export default {
@import '../../css/comments';
.reply {
margin: 0 0 0 44px;
margin: 0 0 0 var(--default-clickable-area);
&.reply--preview {
margin: 4px 0;

2
src/components/card/Description.vue
View File

@@ -387,7 +387,7 @@ h5 {
}
.description__text :deep(.ProseMirror) {
padding-bottom: 44px;
padding-bottom: var(--default-clickable-area);
}
</style>

4
src/components/cards/CardItem.vue
View File

@@ -363,7 +363,7 @@ export default {
}
}
.card-menu {
height: 44px;
height: var(--default-clickable-area);
align-self: end;
}
}
@@ -416,7 +416,7 @@ export default {
}
.compact {
min-height: 44px;
min-height: var(--default-clickable-area);
.duedate {
margin-right: 0;

6
src/components/navigation/AppNavigationAddBoard.vue
View File

@@ -90,7 +90,7 @@ export default {
.board-create {
order: 1;
display: flex;
height: 44px;
height: var(--default-clickable-area);
form {
display: flex;
@@ -103,8 +103,8 @@ export default {
}
.app-navigation-entry-bullet-wrapper {
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
.color0 {
width: 30px !important;
margin: 5px;

8
src/components/navigation/AppNavigationBoard.vue
View File

@@ -336,10 +336,10 @@ export default {
<style lang="scss" scoped>
.board-edit {
margin-left: 44px;
margin-left: var(--default-clickable-area);
order: 1;
display: flex;
height: 44px;
height: var(--default-clickable-area);
form {
display: flex;
@@ -352,8 +352,8 @@ export default {
}
.app-navigation-entry-bullet-wrapper {
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
.color0 {
width: 30px !important;
margin: 5px;

2
src/components/overview/Overview.vue
View File

@@ -175,7 +175,7 @@ export default {
.overview {
position: relative;
height: calc(100% - 44px);
height: calc(100% - var(--default-clickable-area));
overflow-x: scroll;
display: flex;
align-items: stretch;

2
src/components/search/Placeholder.vue
View File

@@ -55,7 +55,7 @@ export default {
<style lang="scss" scoped>
@import '../../css/variables';
$clickable-area: 44px;
$clickable-area: var(--default-clickable-area);
.card--placeholder {
width: $stack-width;

8
src/css/comments.scss
View File

@@ -5,7 +5,7 @@
.editor__content:deep {
flex-grow: 1;
margin-left: 44px;
margin-left: var(--default-clickable-area);
.ProseMirror {
width: 100%;
@@ -13,8 +13,8 @@
}
input[type='submit'] {
width: 44px;
height: 44px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
margin: 0;
padding: 13px;
background-color: transparent;
@@ -47,6 +47,6 @@
}
.comment--content {
margin-left: 44px;
margin-left: var(--default-clickable-area);
word-break: break-word;
}