Permettre la réduction des colonnes d'un tableau
This commit is contained in:
parent
832cca1c66
commit
0e93e7c52f
|
@ -185,6 +185,12 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
|||
<h3 className="level-item is-size-5">
|
||||
{lane.title}
|
||||
</h3>
|
||||
<button className="button is-light level-item is-small expand"
|
||||
onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
|
||||
<span className="icon">
|
||||
<i className="fas fa-chevron-right" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="level-right">
|
||||
<button className="button is-light level-item is-small"
|
||||
|
@ -194,7 +200,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
|||
</span>
|
||||
</button>
|
||||
<button className="button is-light level-item is-small"
|
||||
onClick={this.onNewCardClick.bind(this, lane.id)}>
|
||||
onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
|
||||
<span className="icon">
|
||||
<i className="fas fa-chevron-left" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
|
|
@ -39,14 +39,14 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
|
|||
}
|
||||
</div>
|
||||
</nav>
|
||||
<span>{card.issue.title}</span>
|
||||
<span>{card.issue.title ? card.issue.title : ''}</span>
|
||||
</div>
|
||||
{
|
||||
<nav className="level">
|
||||
<div className="level-left"></div>
|
||||
<div className="level-right">
|
||||
<div className="level-item is-size-7">
|
||||
{card.issue.milestone.title}
|
||||
{card.issue.milestone ? card.issue.milestone.title : ''}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -45,9 +45,11 @@
|
|||
.kanboard-lane {
|
||||
margin-bottom: $size-small;
|
||||
background: $white;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
|
||||
.expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -87,6 +89,7 @@
|
|||
}
|
||||
|
||||
.react-kanban-column {
|
||||
transition: width ease .2s;
|
||||
max-width: 305px;
|
||||
min-width: 305px;
|
||||
position: relative;
|
||||
|
@ -99,8 +102,30 @@
|
|||
scrollbar-width: 5px;
|
||||
|
||||
&.minimized {
|
||||
max-width: 30px;
|
||||
min-width: 30px;
|
||||
max-width: 40px;
|
||||
min-width: 40px;
|
||||
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways-right;
|
||||
|
||||
.kanboard-lane {
|
||||
margin-right: -1em;
|
||||
|
||||
h3 {
|
||||
margin-top: .5em;
|
||||
margin-right: -.5em;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-right: -1em;
|
||||
}
|
||||
|
||||
.expand {
|
||||
display: block !important;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
Loading…
Reference in New Issue