Merge pull request #1627 from florianorben/ux-formatting-task-list

fix misaligned checkbox; remove list-style from list-elements with checkboxes

web/react/utils/markdown.jsx

@@ -228,7 +228,7 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         const isTaskList = taskListReg.exec(text);
 
         if (isTaskList) {
-            return `<li>${'<input type="checkbox" disabled="disabled" ' + (isTaskList[1] === ' ' ? '' : 'checked="checked" ') + '/> '}${text.replace(taskListReg, '')}</li>`;
+            return `<li class="list-item--task-list">${'<input type="checkbox" disabled="disabled" ' + (isTaskList[1] === ' ' ? '' : 'checked="checked" ') + '/> '}${text.replace(taskListReg, '')}</li>`;
         }
         return `<li>${text}</li>`;
     }

web/sass-files/sass/partials/_access-history.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .access-history__table {
     display: table;
     width: 100%;

web/sass-files/sass/partials/_activity-log.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @keyframes highlight {
   from { background: rgba(yellow, 0.5);}
   to { background: none;}

web/sass-files/sass/partials/_admin-console.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #admin_controller {
     > div {
         height: 100%;

web/sass-files/sass/partials/_base.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 html, body {
   height: 100%;
 }

web/sass-files/sass/partials/_colorpicker.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /*!
  * Bootstrap Colorpicker
  * http://mjolnic.github.io/bootstrap-colorpicker/

web/sass-files/sass/partials/_content.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .inner__wrap {
 	@include single-transition(all, 0.5s, ease);
 	&.move--left {

web/sass-files/sass/partials/_error-bar.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .error-bar {
     background-color: #0099FF;
     text-align:center;

web/sass-files/sass/partials/_error.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 body {
 	&.error {
 		.container-fluid {

web/sass-files/sass/partials/_files.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .preview-container {
   position: relative;
   margin-top: 25px;

web/sass-files/sass/partials/_font-awesome.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /*!
  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

web/sass-files/sass/partials/_footer.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .footer-pane {
 	background: #eee;
     padding-bottom: 1em;

web/sass-files/sass/partials/_forms.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .form-horizontal {
 	.modal-intro {
 		margin: -10px 0 30px;

web/sass-files/sass/partials/_get-link.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .copy-link-confirm {
 	display: inline-block;
 	float: left;

web/sass-files/sass/partials/_headers.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #channel-header {
 	@include flex(0 0 56px);
 }

web/sass-files/sass/partials/_loading.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .loading-screen {
 	display: table;
 	width: 100%;

web/sass-files/sass/partials/_markdown.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .markdown__heading {
 	font-weight: 700;
 	line-height: 1.5;

web/sass-files/sass/partials/_mentions.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .mention {
 	color: #fff;
 	background: $primary-color;

web/sass-files/sass/partials/_modal.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #channel_members_modal .modal-body {
 	min-height: 110px;
 }

web/sass-files/sass/partials/_navbar.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #navbar{
 	input {
 		margin: 0px 5px 0px 2px;

web/sass-files/sass/partials/_oauth.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .oauth-prompt {
 	background: #fff;
 	border: 1px solid #ddd;

web/sass-files/sass/partials/_perfect-scrollbar.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .ps-container {
   overflow: hidden !important; }
   .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {

web/sass-files/sass/partials/_popover.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .channel-header__info .popover-content {
 	max-height: 250px;
 	overflow: auto;

web/sass-files/sass/partials/_post.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .custom-textarea {
 	white-space:pre-wrap;
 	word-wrap:break-word;
@@ -615,11 +617,36 @@ body.ios {
 				padding: 0 0 0 20px
 			}
 
+			li.list-item--task-list ul, li.list-item--task-list ol {
+				margin-left: 20px;
+			}
+
+			li.list-item--task-list ul {
+				padding-left: 0;
+			}
+
+			li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li {
+				margin-left: -20px;
+			}
+
 			li input[type="checkbox"]:disabled {
-				vertical-align: sub;
+				vertical-align: top;
 				cursor: default;
 			}
 		}
+
+		ul li.list-item--task-list, ul li.list-item--task-list ~ li {
+			list-style-type: none;
+		}
+
+		ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+			text-indent: 3px;
+
+			&:before {
+				content: "⦁";
+				margin-right: 8px;
+			}
+		}
 	}
 
 	.post__link {

web/sass-files/sass/partials/_post_right.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .post-right__container {
 	@include display-flex;
 	@include flex-direction(column);

web/sass-files/sass/partials/_responsive.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @media screen and (max-width: 1800px) {
     .inner__wrap {
         &.move--left {

web/sass-files/sass/partials/_search.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #channel-header .search-bar__container {
 	padding: 0 8px 0 3px;
 }

web/sass-files/sass/partials/_settings.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import "access-history";
 @import "activity-log";
 @import "webhooks";

web/sass-files/sass/partials/_sidebar--left.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .sidebar--left {
     position: absolute;
     width: 220px;

web/sass-files/sass/partials/_sidebar--menu.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .sidebar--menu {
     position: absolute;
     width: 220px;

web/sass-files/sass/partials/_sidebar--right.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .sidebar--right {
     position: absolute;
     width: 400px;

web/sass-files/sass/partials/_signup.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .signup-header {
     width:100%;
     line-height: 33px;

web/sass-files/sass/partials/_statistics.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .team_statistics {
 	.total-count {
 		margin: 1em 0;

web/sass-files/sass/partials/_suggestion_list.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .suggestion-list {
 	width: 100%;
 	z-index: 100;

web/sass-files/sass/partials/_tooltips.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 #recentMentionsTooltip {
 	.tooltip-arrow {
 		margin-left: 10px;

web/sass-files/sass/partials/_tutorial.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .tip-backdrop {
     background: rgba(black, 0.5);
     position: absolute;

web/sass-files/sass/partials/_variables.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @function em($pixels, $context: 14px) {
 	@return #{$pixels/$context}em
 }

web/sass-files/sass/partials/_videos.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .video-div {
 	position:relative;
 	max-width: 480px;

web/sass-files/sass/partials/_webhooks.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .webhooks__container {
     background: rgba(black, 0.1);
     border: 1px solid;

web/sass-files/sass/partials/_welcome.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .welcome-info {
   max-width: 550px;
   margin-top: 50px;

web/sass-files/sass/styles.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* Welcome to Compass.
  * In this file you should write your main styles. (or centralize your imports)
  * Import this file using the following HTML or equivalent: