Improve user interface

1 files changed, 76 insertions, 92 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 51bdb878..78fc29bd 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -673,6 +673,7 @@ div.task .task-score {
 .task-show-details {
     position: relative;
     border-radius: 5px;
+    padding-bottom: 10px;
 }
 
 .task-show-details h2 {
@@ -695,11 +696,9 @@ div.task .task-score {
     bottom: 5px;
 }
 
-.task-show-description {
-    border: 1px solid #999;
-    border-radius: 5px;
-    background: #f0f0f0;
-    padding: 10px;
+.task-show-section {
+    margin-top: 30px;
+    margin-bottom: 20px;
 }
 
 .task-show-files a {
@@ -729,6 +728,12 @@ div.task .task-score {
     color: #333;
 }
 
+.description-textarea {
+    width: 80%;
+    max-width: 800px;
+    height: 300px;
+}
+
 .task-file-viewer {
     position: relative;
 }
@@ -739,98 +744,39 @@ div.task .task-score {
     margin-top: 10px;
 }
 
-/* markdown content */
-.markdown {
-    line-height: 1.4em;
-}
-
-.markdown h1 {
-    margin-top: 5px;
-    margin-bottom: 10px;
-    font-size: 2em;
-    padding-bottom: 3px;
-    border-bottom: 1px dotted #000;
-}
-
-.markdown h2 {
-    text-decoration: underline;
-}
-
-.markdown h3 {
-    font-weight: bold;
-    text-decoration: underline;
-}
-
-.markdown ol,
-.markdown ul {
-    margin-left: 25px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.markdown pre {
-    background: #fff;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px dashed #000;
-    overflow: auto;
-    color: #000;
-}
-
-.markdown blockquote {
-    font-style: italic;
-    border-left: 5px solid #ddd;
-    padding-left: 8px;
-}
-
 /* comments */
 .comment {
-    margin-bottom: 25px;
-    padding: 0;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-}
-
-.comment-edit {
-    margin-bottom: 25px;
-    padding: 0;
-    border: 2px solid #000;
-    border-radius: 5px;
+    margin-bottom: 20px;
 }
 
 .comment:hover {
-    border: 1px solid #888;
+    background: #F7F8E0;
 }
 
-.comment-title {
-    font-size: 0.9em;
-    padding: 5px;
-    margin-bottom: 2px;
-    border-bottom: 1px solid #ddd;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    background: #f0f0f0;
-}
-
-.comment:nth-child(odd) .comment-title {
-    background: #f0f0f0;
+.comment-inner {
+    border-left: 4px solid #333;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    margin-left: 20px;
+    margin-right: 10px;
 }
 
-.comment:nth-child(even) .comment-title {
-    background: #ddd;
+.comment-preview {
+    border: 2px solid #000;
+    border-radius: 3px;
+    padding: 10px;
 }
 
-.comment-actions a,
-.comment-title a {
-    color: #000;
-    text-decoration: none;
+.comment-preview .comment-inner {
+    border: none;
+    padding: 0;
+    margin: 0;
 }
 
-.comment-actions a:hover,
-.comment-actions a:focus,
-.comment-title a:hover,
-.comment-title a:focus {
-    text-decoration: underline;
+.comment-title {
+    margin-bottom: 8px;
+    padding-bottom: 3px;
+    border-bottom: 1px dotted #aaa;
 }
 
 .comment-actions {
@@ -847,6 +793,7 @@ div.task .task-score {
 }
 
 .comment-actions li:last-child {
+    padding-right: 0;
     border: 0;
 }
 
@@ -855,20 +802,57 @@ div.task .task-score {
 }
 
 .comment-textarea {
-    height: 70px;
-    width: 500px;
+    height: 200px;
+    width: 80%;
+    max-width: 800px;
 }
 
-.comment .markdown {
-    margin: 10px;
+/* markdown content */
+.markdown {
+    line-height: 1.4em;
 }
 
-.comment .markdown pre {
-    background: #fdfdfd;
+.markdown h1 {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-size: 2em;
+    padding-bottom: 3px;
+    border-bottom: 1px dotted #000;
 }
 
-.comment-edit form {
-    border: none;
+.markdown h2 {
+    text-decoration: underline;
+}
+
+.markdown h3 {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.markdown ol,
+.markdown ul {
+    margin-left: 25px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.markdown pre {
+    background: #fafafa;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    overflow: auto;
+    color: brown;
+}
+
+.markdown blockquote {
+    font-style: italic;
+    border-left: 5px solid #ddd;
+    padding-left: 8px;
+}
+
+.markdown p {
+    margin-bottom: 10px;
 }
 
 /* task colors */