Ho implementato una Kanboard nel backend di giardino punk per gestire il flusso delle idee ancora in fase di sviluppo. Non ho ancora trovato il modo di spegnere alcune funzioni di produttività (come la misurazione del tempo delle task, le priorità ecc.) ma per il momento le ho nascoste.

19 dicembre 2024

Ieri era il mio compleanno e ho passato quasi tutta la giornata sulla Kanboard. Una soluzione un po’ più elegante della prima è stata togliere qualche riga dal codice sorgente e aggiungere un custom stylesheet. Ho anche modificato leggermente le traduzioni in italiano perché comunque c’è un copywriter dentro di me.

Non è ancora perfetto ma è buonino. Il custom css è questo:

/* GENERAL */

* {
    font-family: Cairo, Ubuntu, sans-serif;
    font-size: 1.01em;
}

input,
textarea {
    font-family: Cairo, Ubuntu, sans-serif;
}

/* DASHBOARD VIEW */

.task-board {
    padding: 10px;
}

.task-board-expanded {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 5px;
}

.task-board-header {
    width: 100%;
}

.task-board-title {
    width: 100%;
    font-size: 1.1em;
    line-height: 1.2em;
    font-weight: bold;
}

.task-board-category {
    font-size: 14px;
    width: fit-content;
    line-height: 1.2em;
    padding: 3px 10px;
    border-radius: 10px;
}

.task-tags li.task-tag {
    font-size: 14px;
    border: none;
    display: inline;
    margin: 0px;
    line-height: .8em;
    padding: 0px 3px;
}

.task-board-reference,
.task-icon-age,
.task-priority {
    display: none;
}

/* TASK VIEW SIDEBAR */

#task-view .sidebar>ul a {
    font-weight: normal;
}

@media only screen and (min-height: 500px) {

    #task-view .sidebar-list {
        display: block;
        height: fit-content;
        position: fixed;
        margin: 15px;
    }
}

#task-view .sidebar-list ul {
    list-style-type: none;
    padding: 10px 0px;
}

#task-view .sidebar-list ul li {
    padding: 5px 0px;
}

#task-view .sidebar-list li a {
    color: #ccc;
    text-decoration: none;
}

#task-view .sidebar-list li a .fa {
    color: #999;
}

#task-view .sidebar-list li a:hover,  #task-view .sidebar-list li a:hover .fa{
    color: #666;
}

#task-view .sidebar ul:nth-of-type(1) li:nth-of-type(1) a {
    font-size: 1.3em;
    color: #333;
}

#task-view .sidebar {
    max-width: 260px;
    padding: 10px;
}

/* TASK VIEW CONTENT */

#task-view .sidebar-content {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

#task-view .sidebar-content .accordion-section summary.accordion-title {
    background-color: #f7f7f7;
    padding: 0px 10px;
}

#task-view .sidebar-content #task-summary h2,
#modal-overlay #modal-content .page-header h2 {
    font-size: 30px;
    font-weight: bold;
}

#task-view #task-summary .task-summary-container {
    padding: 15px;
    margin: 5px auto 30px auto;
}

#task-view #task-summary .task-summary-columns {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items:flex-start;
}

#task-view #task-summary .task-summary-columns .task-summary-column{
    min-width: 50%;
}

#task-view .sidebar-content .accordion-section table thead {
    display: none;
}

#task-view .sidebar-content .accordion-section table tbody tr td,
#task-view .sidebar-content .accordion-section table tbody tr th {
    background-color: transparent;
    border: none;
    padding: 3px 15px;
}

.subtasks-table .subtask-table-td {
    display: flex;
    white-space: normal;
    min-width: 400px;
    align-items: baseline;
}

.js-subtask-toggle-status {
    display: flex;
    text-decoration: none;
    align-items: baseline;
}

/* EDIT TASK OVERLAY */

#modal-overlay .task-form-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
}

#modal-overlay form .task-form-container .task-form-secondary-column:nth-of-type(3),
#modal-overlay .task-form-container .form-required,
#modal-overlay .task-form-container #form-priority,
#modal-overlay .task-form-container label[for=form-priority],
#modal-overlay .task-form-container .task-form-secondary-column .select2:nth-of-type(1),
#modal-overlay .task-form-container label[for=form-color_id] {
    display: none;
}

#modal-overlay .task-form-container .form-actions {
    width: fit-content;
    margin: auto;
}

/* MOBILE */

@media (max-width: 768px) {

    #task-view .sidebar-content,
    #task-view .sidebar {
        max-width: calc(90vw);
        padding: 10px 0px;
    }
}

Prossimi passi:

• modificare le etichette “Autore” e “Assegnatario” in “Autorǝ” e “Assegnatariǝ”
• addomesticare un po’ il form per l’inserimento della descrizione (tutto il codice sotto /* edit task overlay */)
• trovare un buon modo per linkare o embeddare i documenti di framapad (o qualsiasi altro tool per la scrittura collaborativa scegliamo – al momento non abbiamo ancora una buona soluzione)