Skip to content

Commit

Permalink
DEV: Calculate height of panels
Browse files Browse the repository at this point in the history
  • Loading branch information
@janzenisaac
janzenisaac committed Dec 18, 2023
1 parent 94492f8 commit d4eb78d
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 230 deletions.
93 changes: 8 additions & 85 deletions common/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,12 @@ html:has(body.kanban-active) {
}

.discourse-kanban {
position: relative;
display: flex;

height: 100%;
--d-sidebar-gap: 2em;
@media screen and (max-width: 1000px) {
--d-sidebar-gap: 1em;
}

&.inline {
// Normal sidebar
body.has-sidebar-page:not(.full-width-enabled) & {
--main-outlet-wrapper-width: min(
calc(var(--d-sidebar-width) + var(--d-max-width)),
100vw
);
--page-margin-width: calc((100vw - var(--main-outlet-wrapper-width)) / 2);
width: calc(
100% + var(--page-margin-width) + var(--d-sidebar-gap) + 10px
);
left: calc(0px - var(--d-sidebar-gap));

.discourse-kanban-container {
padding-left: var(--d-sidebar-gap);
}
}

// Sidebar with full width
body.has-sidebar-page.full-width-enabled & {
--space-on-left: max(
calc((100vw - 100%) / 2),
calc(var(--d-sidebar-width) + var(--d-sidebar-gap))
);

left: calc(0px - var(--space-on-left) + var(--d-sidebar-width));

width: calc(100vw - var(--d-sidebar-width));

.discourse-kanban-container {
padding-left: var(--d-sidebar-gap);
}
}

// No sidebar
body:not(.has-sidebar-page) & {
width: 100vw;
left: calc(-50vw + 50%);
justify-content: center;
}
}

&.fullscreen {
position: fixed;
top: 0;
Expand Down Expand Up @@ -81,40 +37,30 @@ html:has(body.kanban-active) {
}

.discourse-kanban-container {
box-sizing: border-box;
height: 100%;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
overscroll-behavior: contain;
padding: 10px;
overflow: hidden;
gap: 0 10px;

.discourse-kanban-list {
position: relative;
overflow: hidden;
background: var(--primary-100);
border: 1px solid var(--primary-low);

&.kanban-empty-state {
padding: 10px;
text-align: center;
justify-content: center;
gap: 20px;
gap: 1em;
height: 6em;
}

&.accept-drag {
background: var(--primary-300);
}

width: 350px;

flex-shrink: 0;

padding: 10px 0px 0px 0px;

display: flex;
flex-direction: column;
padding-top: 10px;

.list-title {
font-weight: bold;
Expand All @@ -125,7 +71,6 @@ html:has(body.kanban-active) {
.topics {
overflow-y: scroll;
padding: 0 8px;
height: 100%;
}

.topic-card {
Expand Down Expand Up @@ -218,6 +163,7 @@ html:has(body.kanban-active) {
width: 100%;
text-align: center;
margin-top: 50px;
min-height: 100px;
}
}
}
Expand All @@ -243,21 +189,9 @@ html:has(body.kanban-active) {
body.kanban-active {
overflow: hidden;

.topic-list,
.topic-list-bottom {
display: none;
}

#main-outlet {
height: calc(100dvh - var(--header-offset) - 1.5em);
display: flex;
flex-direction: column;
}

.list-container {
flex-shrink: 1;
flex-grow: 1;
min-height: 0; // Override auto min-height from flexbox
overflow: hidden;
height: calc(100dvh - var(--header-offset) - 2.5em);
}

.list-container .row:nth-child(2),
Expand All @@ -267,17 +201,6 @@ body.kanban-active {

#list-area {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
overflow: visible;
}

.discourse-kanban {
flex-shrink: 1;
flex-grow: 1;
overflow: visible;
min-height: 0;
}
}

Expand Down
80 changes: 47 additions & 33 deletions javascripts/discourse/components/kanban/card.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ export default class KanbanCard extends Component {
>
<div class="card-row card-row__topic-details">
<TopicStatus @topic={{@topic}} />
<span class="topic-title">{{@topic.title}}</span> {{#if (not this.showDetailed)}}{{this.formatDate @topic.bumpedAt format="tiny" noTitle="true"}}{{/if}}
<span class="topic-title">{{@topic.title}}</span>
{{#if (not this.showDetailed)}}{{this.formatDate

Check failure on line 36 in javascripts/discourse/components/kanban/card.gjs

View workflow job for this annotation

GitHub Actions / ci / linting 

Change `if (not condition)` to `unless condition`.
@topic.bumpedAt
format="tiny"
noTitle="true"
}}{{/if}}
</div>

<div class="card-row">
Expand Down Expand Up @@ -64,53 +69,60 @@ export default class KanbanCard extends Component {
{{/if}}

{{#if @topic.indirectly_assigned_to}}
{{#each-in @topic.indirectly_assigned_to as |target_id assignment|}}
{{! template-lint-disable no-nested-interactive }}
<div class="assigned-to">
<a href="/t/{{@topic.id}}/{{assignment.post_number}}">
{{icon "user-plus"}}{{assignment.assigned_to.username}}
</a>
</div>
{{/each-in}}
{{#each-in
@topic.indirectly_assigned_to
as |target_id assignment|
}}
{{! template-lint-disable no-nested-interactive }}
<div class="assigned-to">
<a href="/t/{{@topic.id}}/{{assignment.post_number}}">
{{icon "user-plus"}}{{assignment.assigned_to.username}}
</a>
</div>
{{/each-in}}
{{/if}}
</div>
{{/if}}
</div>

{{#if this.showDetailed}}
<div class="card-row card-row__user-details-row">
<div class="last-post-by">
{{this.formatDate @topic.bumpedAt format="tiny" noTitle="true"}} ({{this.lastPoster.user.username}})
</div>
<div class="card-row card-row__user-details-row">
<div class="last-post-by">
{{this.formatDate @topic.bumpedAt format="tiny" noTitle="true"}}
({{this.lastPoster.user.username}})
</div>

<div class="topic-assignments-with-avatars">
{{#if @topic.assigned_to_user.username}}
{{htmlSafe
(renderAvatar
@topic.assigned_to_user
avatarTemplatePath="avatar_template"
usernamePath="username"
namePath="name"
imageSize="tiny"
)
}}
{{/if}}

{{#if @topic.indirectly_assigned_to}}
{{#each-in @topic.indirectly_assigned_to as |target_id assignment|}}
<div class="topic-assignments-with-avatars">
{{#if @topic.assigned_to_user.username}}
{{htmlSafe
(renderAvatar
assignment.assigned_to
@topic.assigned_to_user
avatarTemplatePath="avatar_template"
usernamePath="username"
namePath="name"
imageSize="tiny"
)
}}
{{/each-in}}
{{/if}}
{{/if}}

{{#if @topic.indirectly_assigned_to}}
{{#each-in
@topic.indirectly_assigned_to
as |target_id assignment|
}}
{{htmlSafe
(renderAvatar
assignment.assigned_to
avatarTemplatePath="avatar_template"
usernamePath="username"
namePath="name"
imageSize="tiny"
)
}}
{{/each-in}}
{{/if}}
</div>
</div>
</div>
{{/if}}

<PluginOutlet
Expand Down Expand Up @@ -171,6 +183,8 @@ export default class KanbanCard extends Component {
}

get lastPoster() {
return this.args.topic.posters.find((poster) => poster.extras?.includes("latest"));
return this.args.topic.posters.find((poster) =>
poster.extras?.includes("latest")
);
}
}
Loading

0 comments on commit d4eb78d

Please sign in to comment.