From 90e837730cebcda465367ac3a1a0c1a5bc4992cb Mon Sep 17 00:00:00 2001 From: Reda Lemeden Date: Tue, 7 Feb 2012 16:09:45 -0500 Subject: [PATCH] Fixed the layout of the answer form --- sass/_askbot-original.scss | 74 ++++++++++---------- sass/_discussion-answers.scss | 6 +- sass/_discussion-forms.scss | 28 ++++++++ sass/_discussion-questions.scss | 4 +- sass/_discussion.scss | 21 ++++++ sass/_form-wmd-toolbar.scss | 119 ++++++++++++++++++++++++++++++++ sass/_question-view.scss | 25 +++---- sass/application.scss | 2 +- 8 files changed, 224 insertions(+), 55 deletions(-) create mode 100644 sass/_discussion-forms.scss create mode 100644 sass/_form-wmd-toolbar.scss diff --git a/sass/_askbot-original.scss b/sass/_askbot-original.scss index 02d50862b3..d78fb01178 100644 --- a/sass/_askbot-original.scss +++ b/sass/_askbot-original.scss @@ -1086,45 +1086,45 @@ ul { color: #707070; font-size: 13px; } -#fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit { - float: left; - background: url(../images/medium-button.png) top repeat-x; - height: 34px; - border: 0; - font-family: 'Yanone Kaffeesatz',sans-serif; - color: #4a757f; - font-weight: normal; - font-size: 21px; - margin-top: 3px; - border-radius: 4px; - -ms-border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - -webkit-box-shadow: 1px 1px 2px #636363; - -moz-box-shadow: 1px 1px 2px #636363; - box-shadow: 1px 1px 2px #636363; - margin-right: 7px; } +// #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit { +// float: left; +// background: url(../images/medium-button.png) top repeat-x; +// height: 34px; +// border: 0; +// font-family: 'Yanone Kaffeesatz',sans-serif; +// color: #4a757f; +// font-weight: normal; +// font-size: 21px; +// margin-top: 3px; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// -webkit-box-shadow: 1px 1px 2px #636363; +// -moz-box-shadow: 1px 1px 2px #636363; +// box-shadow: 1px 1px 2px #636363; +// margin-right: 7px; } -#fmanswer input.submit:hover, .ask-page input.submit:hover, .edit-question-page input.submit:hover { - text-decoration: none; - background: url(../images/medium-button.png) bottom repeat-x; - text-shadow: 0px 1px 0px #c6d9dd; - -moz-text-shadow: 0px 1px 0px #c6d9dd; - -webkit-text-shadow: 0px 1px 0px #c6d9dd; } +// #fmanswer input.submit:hover, .ask-page input.submit:hover, .edit-question-page input.submit:hover { +// text-decoration: none; +// background: url(../images/medium-button.png) bottom repeat-x; +// text-shadow: 0px 1px 0px #c6d9dd; +// -moz-text-shadow: 0px 1px 0px #c6d9dd; +// -webkit-text-shadow: 0px 1px 0px #c6d9dd; } -#editor { - font-size: 100%; - min-height: 200px; - line-height: 18px; - margin: 0; - border-left: #cce6ec 3px solid; - border-bottom: #cce6ec 3px solid; - border-right: #cce6ec 3px solid; - border-top: 0; - padding: 10px; - margin-bottom: 10px; - width: 710px; } +// #editor { +// font-size: 100%; +// min-height: 200px; +// line-height: 18px; +// margin: 0; +// border-left: #cce6ec 3px solid; +// border-bottom: #cce6ec 3px solid; +// border-right: #cce6ec 3px solid; +// border-top: 0; +// padding: 10px; +// margin-bottom: 10px; +// width: 710px; } #id_title { width: 100%; } diff --git a/sass/_discussion-answers.scss b/sass/_discussion-answers.scss index a86600c915..f0a90d37dc 100644 --- a/sass/_discussion-answers.scss +++ b/sass/_discussion-answers.scss @@ -1,8 +1,9 @@ div.answer-controls { + @include box-sizing(border-box); @extend div.question-controls; display: inline-block; - margin-top: 20px; - margin-bottom: 0; + margin: 20px 0; + padding-left: flex-grid(1.1); div.answer-sort { @extend div.question-sort; @@ -18,7 +19,6 @@ div.answer-block { border-top: #ddd 1px solid; display: inline-block; float: left; - margin: 20px 0; padding-top: 20px; width: 100%; diff --git a/sass/_discussion-forms.scss b/sass/_discussion-forms.scss new file mode 100644 index 0000000000..0f9d86ffcb --- /dev/null +++ b/sass/_discussion-forms.scss @@ -0,0 +1,28 @@ +form.answer-form { + @include box-sizing(border-box); + border-top: 1px solid #ddd; + overflow: hidden; + padding-left: flex-grid(1.1); + // padding-top: 20px; + + textarea { + @include box-sizing(border-box); + margin-top: 15px; + resize: vertical; + width: 99%; + } + + span.form-error { + display: block; + font-weight: bold; + padding: 10px 0; + } + + div.preview-toggle{ + padding: 15px 0; + width: auto; + a { + @extend .light-button; + } + } +} diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss index 38eebd2a39..a776c316d4 100644 --- a/sass/_discussion-questions.scss +++ b/sass/_discussion-questions.scss @@ -10,7 +10,7 @@ div.question-controls { div.question-count { margin-right: flex-gutter(); - width: flex-grid(5,9); + width: flex-grid(4,9); h1 { margin-top: 0; @@ -19,7 +19,7 @@ div.question-controls { div.question-sort { vertical-align: bottom; - width: flex-grid(4,9); + width: flex-grid(5,9); nav { @include border-radius(35px); diff --git a/sass/_discussion.scss b/sass/_discussion.scss index 4a240bdebe..844b1b307f 100644 --- a/sass/_discussion.scss +++ b/sass/_discussion.scss @@ -1,3 +1,24 @@ +// Base extends (Merge with main stylesheet later) +.light-button { + @include box-shadow(inset 0 1px 0 #fff); + @include linear-gradient(#fff, lighten(#888, 40%)); + @include border-radius(3px); + border: 1px solid #ccc; + padding: 4px 8px; + color: #666; + font: normal $body-font-size $body-font-family; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; + + &:hover, &:focus { + @include linear-gradient(#fff, lighten(#888, 30%)); + border: 1px solid #ccc; + text-decoration: none; + } +} + +// Layout body.askbot { .secondary-nav { margin: 0; diff --git a/sass/_form-wmd-toolbar.scss b/sass/_form-wmd-toolbar.scss new file mode 100644 index 0000000000..5adf41fbfb --- /dev/null +++ b/sass/_form-wmd-toolbar.scss @@ -0,0 +1,119 @@ +.wmd-panel +{ +} + +#wmd-button-bar { + background: url(static/images/askbot/editor-toolbar-background.png) repeat-x bottom; + border: 1px solid #ddd; + height:36px; + float:left; + width:99%; +} + +#wmd-input { + height: 500px; + background-color: Gainsboro; + border: 1px solid DarkGray; + margin-top: -20px; +} + +#wmd-preview { + background-color: LightSkyBlue; +} + +#wmd-output { + background-color: Pink; +} + +#wmd-button-row { + position: relative; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 0px; + margin-top: 10px; + padding: 0px; + height: 20px; +} + +.wmd-spacer { + width: 1px; + height: 20px; + margin-left: 14px; + position: absolute; + background-color: Silver; + display: inline-block; + list-style: none; +} + +.wmd-button { + width: 20px; + height: 20px; + margin-left: 5px; + margin-right: 5px; + position: absolute; + background-image: url(/static/images/askbot/wmd-buttons.png); + background-repeat: no-repeat; + background-position: 0px 0px; + display: inline-block; + list-style: none; +} + +.wmd-button > a { + width: 20px; + height: 20px; + margin-left: 5px; + margin-right: 5px; + position: absolute; + display: inline-block; +} + + +/* sprite button slicing style information */ +#wmd-bold-button {left: 0px; background-position: 0px 0;} +#wmd-italic-button {left: 25px; background-position: -20px 0;} +#wmd-spacer1 {left: 50px;} +#wmd-link-button {left: 75px; background-position: -40px 0;} +#wmd-quote-button {left: 100px; background-position: -60px 0;} +#wmd-code-button {left: 125px; background-position: -80px 0;} +#wmd-image-button {left: 150px; background-position: -100px 0;} +#wmd-attachment-button {left: 175px; background-position: -120px 0;} +#wmd-spacer2 {left: 200px;} +#wmd-olist-button {left: 225px; background-position: -140px 0;} +#wmd-ulist-button {left: 250px; background-position: -160px 0;} +#wmd-heading-button {left: 275px; background-position: -180px 0;} +#wmd-hr-button {left: 300px; background-position: -200px 0;} +#wmd-spacer3 {left: 325px;} +#wmd-undo-button {left: 350px; background-position: -220px 0;} +#wmd-redo-button {left: 375px; background-position: -240px 0;} +#wmd-help-button {right: 0px; background-position: -260px 0;} + + +.wmd-prompt-background +{ + background-color: Black; +} + +.wmd-prompt-dialog +{ + border: 1px solid #999999; + background-color: #F5F5F5; +} + +.wmd-prompt-dialog > div { + font-size: 1em; + font-family: arial, helvetica, sans-serif; +} + + +.wmd-prompt-dialog > form > input[type="text"] { + border: 1px solid #999999; + color: black; +} + +.wmd-prompt-dialog > form > input[type="button"]{ + border: 1px solid #888888; + font-family: trebuchet MS, helvetica, sans-serif; + font-size: 1em; + font-weight: bold; +} + diff --git a/sass/_question-view.scss b/sass/_question-view.scss index 286a66cd98..f5e0db8c69 100644 --- a/sass/_question-view.scss +++ b/sass/_question-view.scss @@ -157,7 +157,7 @@ div.question-header { div.comments-container { @include box-sizing(border-box); - background: lighten(#efefef, 3%); + // background: lighten(#efefef, 3%); padding: 3%; display: inline-block; margin: 15px 0 0; @@ -166,21 +166,23 @@ div.question-header { div.comments-content { font-size: 13px; + background: lighten(#efefef, 4%); - .block { + div.block { border-top: 1px solid #ddd; - padding: 15px 0; + padding: 15px; display: block; &:first-child { border-top: 0; } - &:last-child { - border-bottom: 1px solid #ddd; - } + // &:last-child { + // border-bottom: 1px solid #ddd; + // } } form.post-comments { + padding: 15px; } div.comment { @@ -259,12 +261,6 @@ div.question-header { @extend .button; font-size: 12px; padding: 2px 10px; - // @include border-radius(2px); - // background: #eee; - // color: #555; - // cursor: pointer; - // padding: 1px 10px; - // text-decoration: none; } } } @@ -284,6 +280,11 @@ div.question-header { margin-top: 5px; text-align: right; } + + div.controls { + border-top: 1px dashed #ddd; + padding: 15px 0; + } } } } diff --git a/sass/application.scss b/sass/application.scss index 7e1bbf3ce5..a32d8b3172 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -15,7 +15,7 @@ @import "wiki-basic-html", "wiki-create", "wiki"; @import "activation"; @import "help"; -@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers"; +@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar"; // left over // @import "theme";