From c4c1fcb08069b20f51c1e4340b1f4eba136cbe05 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 5 Nov 2018 17:23:01 +0100
Subject: [PATCH] Fix table rendering in polls description

---
 www/poll/app-poll.less   | 516 ++++++++++++++++++++-------------------
 www/slide/app-slide.less |   2 +
 2 files changed, 262 insertions(+), 256 deletions(-)

diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less
index c1920ca5a..2aa1a8e75 100644
--- a/www/poll/app-poll.less
+++ b/www/poll/app-poll.less
@@ -1,8 +1,9 @@
 @import (reference) '../../customize/src/less2/include/tools.less';
 @import (reference) '../../customize/src/less2/include/avatar.less';
 @import (reference) "../../customize/src/less2/include/framework.less";
+@import (reference) "../../customize/src/less2/include/markdown.less";
 
-&.cp-app-poll { 
+&.cp-app-poll {
 
     .framework_main(
         @bg-color: @colortheme_poll-bg,
@@ -212,27 +213,28 @@
 
     // from cryptpad.less
 
-    table {
-        border-collapse: collapse;
-        border-spacing: 0;
-        margin: 20px;
-    }
-    tbody {
-        * {
-            box-sizing: border-box;
-        }
-        tr {
-            text-align: center;
+    #cp-app-poll-table-container {
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
         }
+        tbody {
+            * {
+                box-sizing: border-box;
+            }
+            tr {
+                text-align: center;
+            }
 
-        td {
-            .tools_unselectable();
-            border-right: 1px solid @poll-border-color;
-            padding: 12px;
-            padding-top: 0px;
-            padding-bottom: 0px;
-            &:last-child {
-                border-right: none;
+            td {
+                .tools_unselectable();
+                border-right: 1px solid @poll-border-color;
+                padding: 12px;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                &:last-child {
+                    border-right: none;
+                }
             }
         }
     }
@@ -256,303 +258,305 @@
         padding: 0px;
         margin: 0px;
 
-        .cp-app-poll-table-scrolled {
-            tr td:last-child {
-                right: 0;
-            }
-            tr td:nth-last-child(2) {
-                right: 100px;
+        #cp-app-poll-table-container {
+            .cp-app-poll-table-scrolled {
+                tr td:last-child {
+                    right: 0;
+                }
+                tr td:nth-last-child(2) {
+                    right: 100px;
+                }
             }
-        }
 
-        table {
-            border-collapse: collapse;
-            width: ~"calc(100% - 1px)";
-            .cp-app-poll-table-editing {
-                background-color: @poll-editing;
-            }
-            .cp-app-poll-table-uncommitted {
-                .cp-app-poll-table-cover {
-                    background-color: @poll-uncommitted-cell !important;
+            table {
+                border-collapse: collapse;
+                width: ~"calc(100% - 1px)";
+                .cp-app-poll-table-editing {
+                    background-color: @poll-editing;
                 }
-                div.cp-app-poll-table-text-cell {
+                .cp-app-poll-table-uncommitted {
+                    .cp-app-poll-table-cover {
+                        background-color: @poll-uncommitted-cell !important;
+                    }
+                    div.cp-app-poll-table-text-cell {
+                        background-color: @poll-uncommitted-bg !important;
+                        color: @poll-uncommitted-text !important;
+                    }
+                    text-align: center;
                     background-color: @poll-uncommitted-bg !important;
                     color: @poll-uncommitted-text !important;
                 }
-                text-align: center;
-                background-color: @poll-uncommitted-bg !important;
-                color: @poll-uncommitted-text !important;
-            }
-            tr {
-                height: 28px;
-                /* Options */
-                td:first-child {
-                    position:absolute;
-                    left: 0;
-                    top: auto;
-                    width: 25%;
-                }
-                /* Uncommitted column */
-                td:nth-last-child(2) {
-                    position: absolute;
-                    top: auto;
-                    width: 100px;
-                    min-width: unset !important;
-                    height: auto !important;
-                }
-                /* Results */
-                td:last-child {
-                    color: @poll-th-fg;
-                    position:absolute;
-                    top: auto;
-                    margin-left: 100px;
-                    width: 100px;
-                    min-width: unset !important;
-                    background-color: @poll-th-bg;
-                }
-                td {
-                    padding: 0px;
-                    margin: 0px;
-
-                    div.cp-app-poll-table-text-cell {
-                        height: 28px;
+                tr {
+                    height: 28px;
+                    /* Options */
+                    td:first-child {
+                        position:absolute;
+                        left: 0;
+                        top: auto;
+                        width: 25%;
+                    }
+                    /* Uncommitted column */
+                    td:nth-last-child(2) {
+                        position: absolute;
+                        top: auto;
+                        width: 100px;
+                        min-width: unset !important;
+                        height: auto !important;
+                    }
+                    /* Results */
+                    td:last-child {
+                        color: @poll-th-fg;
+                        position:absolute;
+                        top: auto;
+                        margin-left: 100px;
+                        width: 100px;
+                        min-width: unset !important;
+                        background-color: @poll-th-bg;
+                    }
+                    td {
                         padding: 0px;
                         margin: 0px;
-                        display: flex;
-                        align-items: center;
-                        .cp-app-poll-table-remove {
-                            order: 1;
-                        }
-                        .cp-app-poll-table-edit {
-                            order: 3;
-                        }
-                        input {
-                            min-width: 0;
-                            order: 2;
-                            flex: 1;
-                            height: 24px;
-                            border: 0px;
-                            margin: 2px;
-                            &[disabled] {
-                                background-color: transparent;
-                                color: @poll-td-fg;
-                                //font-weight: bold;
+
+                        div.cp-app-poll-table-text-cell {
+                            height: 28px;
+                            padding: 0px;
+                            margin: 0px;
+                            display: flex;
+                            align-items: center;
+                            .cp-app-poll-table-remove {
+                                order: 1;
+                            }
+                            .cp-app-poll-table-edit {
+                                order: 3;
+                            }
+                            input {
+                                min-width: 0;
+                                order: 2;
+                                flex: 1;
+                                height: 24px;
+                                border: 0px;
+                                margin: 2px;
+                                &[disabled] {
+                                    background-color: transparent;
+                                    color: @poll-td-fg;
+                                    //font-weight: bold;
+                                }
                             }
                         }
-                    }
 
-                    &.cp-app-poll-table-checkbox-cell {
-                        margin: 0px;
-                        padding: 0px;
-                        height: 100%;
-                        min-width: 100px;
-
-                        div.cp-app-poll-table-checkbox-contain {
-                            display: inline-block;
+                        &.cp-app-poll-table-checkbox-cell {
+                            margin: 0px;
+                            padding: 0px;
                             height: 100%;
-                            width: 100%;
-                            position: relative;
+                            min-width: 100px;
 
-                            label {
-                                background-color: transparent;
-                                display: block;
-                                position: absolute;
-                                top: 0px;
-                                left: 0px;
+                            div.cp-app-poll-table-checkbox-contain {
+                                display: inline-block;
                                 height: 100%;
                                 width: 100%;
-                            }
-
-                            input {
-                                &[type="number"] {
-                                    &:not(.editable) {
-                                        display: none;
+                                position: relative;
 
-                                        ~ .cp-app-poll-table-cover {
-                                            line-height: 28px;
-                                            display: block;
-                                            font-weight: bold;
-                                            height: 100%;
-                                            display: block;
+                                label {
+                                    background-color: transparent;
+                                    display: block;
+                                    position: absolute;
+                                    top: 0px;
+                                    left: 0px;
+                                    height: 100%;
+                                    width: 100%;
+                                }
 
-                                            color: @poll-cover-color;
+                                input {
+                                    &[type="number"] {
+                                        &:not(.editable) {
+                                            display: none;
 
-                                            &:after {
+                                            ~ .cp-app-poll-table-cover {
+                                                line-height: 28px;
+                                                display: block;
+                                                font-weight: bold;
                                                 height: 100%;
-                                            }
+                                                display: block;
+
+                                                color: @poll-cover-color;
 
+                                                &:after {
+                                                    height: 100%;
+                                                }
+
+                                            }
                                         }
                                     }
                                 }
-                            }
 
-                            input[type="number"][value="0"] {
-                                ~ .cp-app-poll-table-cover {
-                                    background-color: @colortheme_cp-red;
-                                    &:after { content: "✖"; }
+                                input[type="number"][value="0"] {
+                                    ~ .cp-app-poll-table-cover {
+                                        background-color: @colortheme_cp-red;
+                                        &:after { content: "✖"; }
+                                    }
                                 }
-                            }
-                            input[type="number"][value="1"] {
-                                ~ .cp-app-poll-table-cover {
-                                    background-color: @colortheme_cp-green;
-                                    &:after { content: "✔"; }
+                                input[type="number"][value="1"] {
+                                    ~ .cp-app-poll-table-cover {
+                                        background-color: @colortheme_cp-green;
+                                        &:after { content: "✔"; }
+                                    }
                                 }
-                            }
-                            input[type="number"][value="2"] {
-                                ~ .cp-app-poll-table-cover {
-                                    background-color: @poll-option-yellow;
-                                    &:after { content: "~"; }
+                                input[type="number"][value="2"] {
+                                    ~ .cp-app-poll-table-cover {
+                                        background-color: @poll-option-yellow;
+                                        &:after { content: "~"; }
+                                    }
                                 }
-                            }
-                            input[type="number"][value="3"] {
-                                ~ .cp-app-poll-table-cover {
-                                    background-color: @poll-option-gray;
-                                    &:after { content: "?"; }
+                                input[type="number"][value="3"] {
+                                    ~ .cp-app-poll-table-cover {
+                                        background-color: @poll-option-gray;
+                                        &:after { content: "?"; }
+                                    }
                                 }
                             }
                         }
                     }
                 }
-            }
 
-            input {
-                &[type="text"] {
-                    height: auto;
-                    width: 80%;
+                input {
+                    &[type="text"] {
+                        height: auto;
+                        width: 80%;
+                    }
                 }
-            }
-            span {
-                .tools_unselectable();
-            }
-            thead {
-                height: 52px;
-                tr {
-                    height: 52px;
+                span {
+                    .tools_unselectable();
                 }
-                td {
-                    padding: 0px 5px;
-                    background: @poll-th-bg;
-                    color: @poll-th-fg;
-                    &:not(:last-child) {
-                        border-right: 1px solid rgba(255,255,255,0.2);
-                    }
-                    &:last-child {
+                thead {
+                    height: 52px;
+                    tr {
                         height: 52px;
-                        line-height: 52px;
-                        text-align: center;
                     }
-                    &:nth-last-child(2) {
-                        border-right: 1px solid @poll-border-color;
-                    }
-                    &.cp-app-poll-table-own {
-                        background: @poll-th-user-bg;
-                        .cp-app-poll-table-lock {
-                            cursor: default;
+                    td {
+                        padding: 0px 5px;
+                        background: @poll-th-bg;
+                        color: @poll-th-fg;
+                        &:not(:last-child) {
+                            border-right: 1px solid rgba(255,255,255,0.2);
                         }
-                    }
-                    .cp-app-poll-table-buttons {
-                        display: flex;
-                        justify-content: space-between;
-                        flex-wrap: wrap;
-                        align-items: center;
-                        span {
-                            cursor: pointer;
-                            width: 1em;
+                        &:last-child {
+                            height: 52px;
+                            line-height: 52px;
                             text-align: center;
                         }
-                        .cp-app-poll-table-bookmark {
-                            color: darken(@poll-th-fg, 30%);
-                            &.cp-app-poll-table-bookmark-full {
-                                color: @poll-th-fg;
+                        &:nth-last-child(2) {
+                            border-right: 1px solid @poll-border-color;
+                        }
+                        &.cp-app-poll-table-own {
+                            background: @poll-th-user-bg;
+                            .cp-app-poll-table-lock {
+                                cursor: default;
                             }
                         }
-                    }
-                    input {
-                        &[type="text"] {
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            break-after: always;
-                            width: ~"calc(100% - 2px)"; // borders...
-                            box-sizing: border-box;
-                            padding: 1px 5px;
-                            margin: 1px;
-                            &[disabled] {
-                                color: @poll-th-fg;
+                        .cp-app-poll-table-buttons {
+                            display: flex;
+                            justify-content: space-between;
+                            flex-wrap: wrap;
+                            align-items: center;
+                            span {
+                                cursor: pointer;
+                                width: 1em;
+                                text-align: center;
+                            }
+                            .cp-app-poll-table-bookmark {
+                                color: darken(@poll-th-fg, 30%);
+                                &.cp-app-poll-table-bookmark-full {
+                                    color: @poll-th-fg;
+                                }
+                            }
+                        }
+                        input {
+                            &[type="text"] {
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                break-after: always;
+                                width: ~"calc(100% - 2px)"; // borders...
+                                box-sizing: border-box;
+                                padding: 1px 5px;
+                                margin: 1px;
+                                &[disabled] {
+                                    color: @poll-th-fg;
+                                }
                             }
                         }
                     }
                 }
-            }
 
-            tbody {
-                td:first-child {
-                    background: @poll-td-bg;
-                    color: @poll-td-fg;
-                }
-                td.cp-app-poll-table-winner {
-                    background-color: @poll-winner;
-                    &:last-child { font-weight: bold; }
-                }
-                .cp-app-poll-table-text-cell {
-                    input[type="text"] {
-                        width: ~"calc(100% - 50px)";
-                        padding: 0 0.5em;
+                tbody {
+                    td:first-child {
+                        background: @poll-td-bg;
+                        color: @poll-td-fg;
                     }
-                    .cp-app-poll-table-edit {
-                        float:right;
-                        margin: 2px 10px 0 0;
+                    td.cp-app-poll-table-winner {
+                        background-color: @poll-winner;
+                        &:last-child { font-weight: bold; }
                     }
-                    .cp-app-poll-table-remove {
-                        float: left;
-                        margin: 2px 0 0 10px;
+                    .cp-app-poll-table-text-cell {
+                        input[type="text"] {
+                            width: ~"calc(100% - 50px)";
+                            padding: 0 0.5em;
+                        }
+                        .cp-app-poll-table-edit {
+                            float:right;
+                            margin: 2px 10px 0 0;
+                        }
+                        .cp-app-poll-table-remove {
+                            float: left;
+                            margin: 2px 0 0 10px;
+                        }
                     }
-                }
-                tr:not(:first-child) {
-                    td:not(:first-child) {
-                        label {
-                            border-top: 1px solid @poll-border-color;
+                    tr:not(:first-child) {
+                        td:not(:first-child) {
+                            label {
+                                border-top: 1px solid @poll-border-color;
+                            }
                         }
                     }
-                }
-                tr:not(:last-child) {
-                    &:hover {
-                        td:first-child {
-                            background-color: @poll-highlighted;
+                    tr:not(:last-child) {
+                        &:hover {
+                            td:first-child {
+                                background-color: @poll-highlighted;
+                            }
                         }
                     }
                 }
-            }
-            .cp-app-poll-table-edit {
-                //color: @poll-cover-color;
-                cursor: pointer;
-                float: left;
-                margin-left: 10px;
-            }
+                .cp-app-poll-table-edit {
+                    //color: @poll-cover-color;
+                    cursor: pointer;
+                    float: left;
+                    margin-left: 10px;
+                }
 
-            thead {
-                tr {
-                    th {
-                        input[type="text"][disabled] {
-                            background-color: transparent;
-                            color: @poll-fore;
-                            font-weight: bold;
-                        }
-                        .cp-app-poll-table-remove {
-                            cursor: pointer;
-                            font-size: 20px;
+                thead {
+                    tr {
+                        th {
+                            input[type="text"][disabled] {
+                                background-color: transparent;
+                                color: @poll-fore;
+                                font-weight: bold;
+                            }
+                            .cp-app-poll-table-remove {
+                                cursor: pointer;
+                                font-size: 20px;
+                            }
                         }
                     }
                 }
-            }
-            tbody {
-                tr {
-                    td {
+                tbody {
+                    tr {
+                        td {
 
+                        }
                     }
                 }
-            }
-            tfoot {
-                display: none;
+                tfoot {
+                    display: none;
+                }
             }
         }
         #cp-app-poll-nocomments {
@@ -669,4 +673,4 @@
         justify-content: center;
     }
 
-}
\ No newline at end of file
+}
diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less
index ac3e6b4ea..9fe6f7ebb 100644
--- a/www/slide/app-slide.less
+++ b/www/slide/app-slide.less
@@ -351,7 +351,9 @@
                 margin-bottom: 0.5em;
             }
 
+            .markdown_main();
             .markdown_preformatted-code;
+            .markdown_gfm-table(#ddd);
 
             ul, ol {
                 min-width: 50%;