[IMP] website: improve design/UX of SEO modal

1 files changed, 135 insertions, 41 deletions

diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index 4d2fab0d217..d437233e4e7 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -223,60 +223,154 @@ body .modal {
 
     // SEO CONFIGURATION
     &.oe_seo_configuration {
+        #language-box {
+            padding-right: 25px;
+            background-color:white;
+            margin-left: -1px;
+        }
+
+        .table {
+            td {
+                vertical-align: middle;
+
+                &:first-child {
+                    padding-right: 15px;
+                    border-width: 0;
+                    width: 35%;
+                }
+
+                &:last-child {
+                    visibility: hidden;
+                }
+            }
+
+            > tfoot {
+                display: none;
+            }
+
+            &.js_seo_has_content {
+                td {
+                    &:first-child {
+                        width: 55%;
+                        padding-right: 15px;
+                        border: 1px solid @o-we-color-text-light;
+                        text-align: right;
+                        background-color: @o-we-color-paper;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            width: 38%;
+                        }
+                    }
+
+                    &:last-child {
+                        border: none;
+                        visibility: visible;
+                        padding-left: 15px;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            padding-left: 50px;
+                        }
+                    }
+                }
+
+                tbody {
+                    td {
+                        padding: 5px;
+                        .o-transition(padding, .3s);
+
+                        &:first-child {
+                            border-width: 0 1px;
+
+                            .label {
+                                position: relative;
+                                display: inline-block;
+                                padding: 7px 35px;
+                                font-size: 16px;
+                                font-weight: normal;
+
+                                .oe_remove {
+                                    .o-w-close-icon(10px, white, @o-we-color-danger, 2px);
+                                    .o-position-absolute(5px, 5px);
+                                }
+                            }
+                        }
+
+                        &:last-child {
+                            .label {
+                                display: block;
+                                font-size: 12px;
+                                font-weight: normal;
+                                opacity: 0.8;
+                                cursor: pointer;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+                    }
+
+                    tr {
+                        .o-animation(fadeInDownSmall, .3s);
+
+                        &:first-child {
+                            td:first-child {
+                                padding-top: 10px;
+                            }
+                        }
+
+                        &:last-child {
+                            td:first-child {
+                                padding-bottom: 10px;
+                                border-bottom-width: 1px;
+                            }
+                        }
+                    }
+                }
+
+                > tfoot {
+                    display: table-footer-group;
+
+                    hr {
+                        margin: 10px 0;
+                    }
+
+                    td, td:first-child {
+                        border: none;
+                        background: none;
+                    }
+                }
+            }
+        }
+
         li.oe_seo_preview_g {
-            line-height: 1.2;
-            font-size: small;
+            list-style: none;
             font-family: arial, sans-serif;
-            h3 {
-                font-size: medium;
-            }
+
             .r {
-                margin: 0;
-                font-size: 16px;
-                font-style: normal;
-                font-weight: normal;
+                cursor: pointer;
+                color:#1a0dab;
+                font-size: 18px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 -webkit-text-overflow: ellipsis;
                 white-space: nowrap;
-                a {
-                    color: #1e0fbe;
-                    text-decoration: underline;
-                    text-transform: none;
-                    em {
-                        font-style: normal !important;
-                    }
-                }
             }
+
             .s {
-                color: #444;
-                max-width: 42em;
-            }
-            li.oe_seo_preview_g {
-                &, .st {
-                    line-height: 1.24;
+                font-size: 13px;
+                line-height: 18px;
+                color: #545454;
+                .kv {
+                    color: #006621;
+                    font-size: 14px;
+                    line-height: 18px;
                 }
-                .kv, .slp {
-                    display: block;
-                    margin-bottom: 1px;
-                }
-                .f {
-                    color: #666;
-                    margin-bottom: 1px;
-                    cite {
-                        color: #006621;
-                        font-style: normal;
-                        font-size: 14px;
-                    }
+                .st {
+                    height: 50px;
                 }
             }
         }
-        @media (min-width: @screen-sm-min) {
-           .dl-horizontal dt {
-                min-width: 160px;
-                width: auto;
-           }
-       }
     }
 }