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">
|
<h3 className="level-item is-size-5">
|
||||||
{lane.title}
|
{lane.title}
|
||||||
</h3>
|
</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>
|
||||||
<div className="level-right">
|
<div className="level-right">
|
||||||
<button className="button is-light level-item is-small"
|
<button className="button is-light level-item is-small"
|
||||||
|
@ -194,7 +200,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button className="button is-light level-item is-small"
|
<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">
|
<span className="icon">
|
||||||
<i className="fas fa-chevron-left" aria-hidden="true"></i>
|
<i className="fas fa-chevron-left" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -39,14 +39,14 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<span>{card.issue.title}</span>
|
<span>{card.issue.title ? card.issue.title : ''}</span>
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
<nav className="level">
|
<nav className="level">
|
||||||
<div className="level-left"></div>
|
<div className="level-left"></div>
|
||||||
<div className="level-right">
|
<div className="level-right">
|
||||||
<div className="level-item is-size-7">
|
<div className="level-item is-size-7">
|
||||||
{card.issue.milestone.title}
|
{card.issue.milestone ? card.issue.milestone.title : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -45,9 +45,11 @@
|
||||||
.kanboard-lane {
|
.kanboard-lane {
|
||||||
margin-bottom: $size-small;
|
margin-bottom: $size-small;
|
||||||
background: $white;
|
background: $white;
|
||||||
position: sticky;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
|
.expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -87,6 +89,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-kanban-column {
|
.react-kanban-column {
|
||||||
|
transition: width ease .2s;
|
||||||
max-width: 305px;
|
max-width: 305px;
|
||||||
min-width: 305px;
|
min-width: 305px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -99,8 +102,30 @@
|
||||||
scrollbar-width: 5px;
|
scrollbar-width: 5px;
|
||||||
|
|
||||||
&.minimized {
|
&.minimized {
|
||||||
max-width: 30px;
|
max-width: 40px;
|
||||||
min-width: 30px;
|
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 {
|
&::-webkit-scrollbar {
|
||||||
|
|
Loading…
Reference in New Issue