From 16f9f6ef4f0293aab1e5ff41e8d4d25eb3b24f92 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Mar 2013 13:15:01 -0400 Subject: [PATCH 01/14] studio - tender widget: added initial reference and behavior --- cms/static/sass/_tender-widget.scss | 20 ++++++++++++++++++++ cms/static/sass/base-style.scss | 1 + cms/templates/base.html | 1 + cms/templates/widgets/footer.html | 7 +++---- cms/templates/widgets/tender.html | 13 +++++++++++++ 5 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 cms/static/sass/_tender-widget.scss create mode 100644 cms/templates/widgets/tender.html diff --git a/cms/static/sass/_tender-widget.scss b/cms/static/sass/_tender-widget.scss new file mode 100644 index 0000000000..fa406009ee --- /dev/null +++ b/cms/static/sass/_tender-widget.scss @@ -0,0 +1,20 @@ +// tender help/support widget +// ==================== + +// tender help link + + +// ==================== + +// tender modal UI +#tender_window { + +} + +#tender_frame { + +} + +.widget-layout { + font-family: 'Open Sans', sans-serif; +} \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index dceac4233d..bdfdab2cb3 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -32,6 +32,7 @@ @import "account"; @import "index"; @import 'jquery-ui-calendar'; +@import 'tender-widget'; @import 'content-types'; diff --git a/cms/templates/base.html b/cms/templates/base.html index f7b2c46f61..5e6f4348b0 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -56,6 +56,7 @@ <%include file="widgets/footer.html" /> <%block name="jsextra"> + <%include file="widgets/tender.html" /> diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index 0f265dfc2c..c38d5dec7f 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -17,13 +17,12 @@
  • edX Studio Help
    • +
  • + Provide Feedback +
  • Contact edX
    • - - % if user.is_authenticated(): - - % endif diff --git a/cms/templates/widgets/tender.html b/cms/templates/widgets/tender.html new file mode 100644 index 0000000000..e2bba3d2ef --- /dev/null +++ b/cms/templates/widgets/tender.html @@ -0,0 +1,13 @@ +% if user.is_authenticated(): + + +% endif \ No newline at end of file From c901cecdea15249a63e41e4468fe5467b4b83999 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Mar 2013 16:23:30 -0400 Subject: [PATCH 02/14] studio - tender widget: added compromise of style given iframe and clunky DOM elements that tender is using. meh. --- cms/static/sass/_tender-widget.scss | 87 ++++++++++++++++++++++++++--- cms/static/sass/_variables.scss | 1 + cms/templates/base.html | 2 +- cms/templates/widgets/footer.html | 2 +- 4 files changed, 82 insertions(+), 10 deletions(-) diff --git a/cms/static/sass/_tender-widget.scss b/cms/static/sass/_tender-widget.scss index fa406009ee..422be36908 100644 --- a/cms/static/sass/_tender-widget.scss +++ b/cms/static/sass/_tender-widget.scss @@ -1,20 +1,91 @@ // tender help/support widget // ==================== -// tender help link - - -// ==================== - -// tender modal UI -#tender_window { - +#tender_frame, #tender_window { + background-image: none !important; } #tender_frame { + @include border-radius(3px); + @include box-shadow(0 2px 3px $shadow); + border: 1px solid $gray; + background: $white; +} +#tender_closer { + color: $blue-l2 !important; + margin-top: 15px; + margin-right: 5px; +} + +// ==================== + +// tender style overrides - not rendered through here, but an archive is needed +#tender_frame iframe html { + font-size: 62.5%; } .widget-layout { font-family: 'Open Sans', sans-serif; +} + +.widget-layout .search, +.widget-layout .tabs, +.widget-layout .header h1 a { + display: none; +} + +.widget-layout .header { + background: rgb(85, 151, 221); + padding: 20px; +} + +.widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label { + font-weight: 600; +} + +.widget-layout .header h1 { + font-weight: 700; + font-size: 24px; + font-size: 2.4rem; +} + +.widget-layout .content { + padding: 20px; +} + +.widget-layout label { + font-size: 14px; + font-size: 1.4rem; + margin-bottom: 5px; + color: rgb(127,127,127) !important; +} + +.widget-layout input[type="text"], .widget-layout textarea { + padding: 10px; + font-size: 16px; + font-size: 1.6rem; + color: rgb(0,0,0) !important; +} + +.widget-layout textarea { + width: 97%; +} + +.widget-layout .form-actions { + border-top: 1px solid #ccc; + margin-top: 10px; + padding-top: 10px; +} + +.widget-layout dl.form { + margin-bottom: 15px; +} + +.widget-layout #brain_buster_captcha { + display: block; + width: 100%; + border-bottom: 1px solid #ccc; + margin-bottom: 10px; + padding-bottom: 10px; } \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 4d8e26b2f9..8e588b6234 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -16,6 +16,7 @@ $error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); +$black-t0: rgba(0,0,0,0.125); $white: rgb(255,255,255); $gray: rgb(127,127,127); diff --git a/cms/templates/base.html b/cms/templates/base.html index 5e6f4348b0..77323be4d1 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -54,9 +54,9 @@ <%block name="content"> <%include file="widgets/footer.html" /> + <%include file="widgets/tender.html" /> <%block name="jsextra"> - <%include file="widgets/tender.html" /> diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index c38d5dec7f..e3063dafa7 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -18,7 +18,7 @@ edX Studio Help
  • - Provide Feedback + Provide Feedback
  • Contact edX From 175e1b46e99e73b7e1dd75008b88fd7a1bb87947 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 26 Mar 2013 08:32:49 -0400 Subject: [PATCH 03/14] studio - in progress styling of tender help widget --- cms/static/sass/_tender-widget.scss | 91 ----------------------------- cms/static/sass/base-style.scss | 1 + cms/templates/base.html | 1 - cms/templates/widgets/footer.html | 3 - cms/templates/widgets/tender.html | 4 +- 5 files changed, 3 insertions(+), 97 deletions(-) delete mode 100644 cms/static/sass/_tender-widget.scss diff --git a/cms/static/sass/_tender-widget.scss b/cms/static/sass/_tender-widget.scss deleted file mode 100644 index 422be36908..0000000000 --- a/cms/static/sass/_tender-widget.scss +++ /dev/null @@ -1,91 +0,0 @@ -// tender help/support widget -// ==================== - -#tender_frame, #tender_window { - background-image: none !important; -} - -#tender_frame { - @include border-radius(3px); - @include box-shadow(0 2px 3px $shadow); - border: 1px solid $gray; - background: $white; -} - -#tender_closer { - color: $blue-l2 !important; - margin-top: 15px; - margin-right: 5px; -} - -// ==================== - -// tender style overrides - not rendered through here, but an archive is needed -#tender_frame iframe html { - font-size: 62.5%; -} - -.widget-layout { - font-family: 'Open Sans', sans-serif; -} - -.widget-layout .search, -.widget-layout .tabs, -.widget-layout .header h1 a { - display: none; -} - -.widget-layout .header { - background: rgb(85, 151, 221); - padding: 20px; -} - -.widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label { - font-weight: 600; -} - -.widget-layout .header h1 { - font-weight: 700; - font-size: 24px; - font-size: 2.4rem; -} - -.widget-layout .content { - padding: 20px; -} - -.widget-layout label { - font-size: 14px; - font-size: 1.4rem; - margin-bottom: 5px; - color: rgb(127,127,127) !important; -} - -.widget-layout input[type="text"], .widget-layout textarea { - padding: 10px; - font-size: 16px; - font-size: 1.6rem; - color: rgb(0,0,0) !important; -} - -.widget-layout textarea { - width: 97%; -} - -.widget-layout .form-actions { - border-top: 1px solid #ccc; - margin-top: 10px; - padding-top: 10px; -} - -.widget-layout dl.form { - margin-bottom: 15px; -} - -.widget-layout #brain_buster_captcha { - display: block; - width: 100%; - border-bottom: 1px solid #ccc; - margin-bottom: 10px; - padding-bottom: 10px; -} \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 6a1f1bb252..5c67789f72 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -28,6 +28,7 @@ @import 'elements/modal'; @import 'elements/alerts'; @import 'elements/jquery-ui-calendar'; +@import 'elements/tender-widget'; // specific views @import 'views/account'; diff --git a/cms/templates/base.html b/cms/templates/base.html index 45147e5783..fd2b96f03a 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -56,7 +56,6 @@ <%block name="content"> <%include file="widgets/footer.html" /> <%include file="widgets/tender.html" /> - <%block name="jsextra"> diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index e3063dafa7..8f0265cd86 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -17,9 +17,6 @@
  • edX Studio Help
    • -
  • - Provide Feedback -
  • Contact edX
    • diff --git a/cms/templates/widgets/tender.html b/cms/templates/widgets/tender.html index e2bba3d2ef..300b71701c 100644 --- a/cms/templates/widgets/tender.html +++ b/cms/templates/widgets/tender.html @@ -1,12 +1,12 @@ % if user.is_authenticated(): +Provide Feedback From 87f545329a6f9f75fed6cdc16502a23e124a9ebe Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 26 Mar 2013 11:05:33 -0400 Subject: [PATCH 04/14] studio - adding in tender-widget sass file --- cms/static/sass/elements/_tender-widget.scss | 142 +++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 cms/static/sass/elements/_tender-widget.scss diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss new file mode 100644 index 0000000000..fce62b8675 --- /dev/null +++ b/cms/static/sass/elements/_tender-widget.scss @@ -0,0 +1,142 @@ +// tender help/support widget +// ==================== + +#tender_frame, #tender_window { + background-image: none !important; + background: none; +} + +#tender_window { + @include border-radius(3px); + @include box-shadow(0 2px 3px $shadow); + background: $white !important; + border: 1px solid $gray; +} + +#tender_window { + padding: 0 !important; +} + +#tender_frame { + background: $white; +} + +#tender_closer { + color: $blue-l2 !important; + margin-top: 15px; + margin-right: 5px; + text-transform: uppercase; + + &:hover { + color: $blue-l4 !important; + } +} + +// ==================== + +// tender style overrides - not rendered through here, but an archive is needed +#tender_frame iframe html { + font-size: 62.5%; +} + +.widget-layout { + font-family: 'Open Sans', sans-serif; +} + +.widget-layout .search, +.widget-layout .tabs, +.widget-layout .footer, +.widget-layout .header h1 a { + display: none; +} + +.widget-layout .header { + background: rgb(85, 151, 221); + padding: 20px; +} + +.widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label { + font-weight: 600; +} + +.widget-layout .header h1 { + font-weight: 500; + font-size: 24px; +} + +.widget-layout .content { + overflow: auto; + padding: 20px; +} + +.widget-layout label { + font-size: 14px; + margin-bottom: 5px; + color: #4c4c4c; + font-weight: 500; +} + +.widget-layout input[type="text"], .widget-layout textarea { + padding: 10px; + font-size: 16px; + color: rgb(0,0,0) !important; + border: 1px solid #b0b6c2; + border-radius: 2px; + background-color: #edf1f5; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #edf1f5),color-stop(100%, #fdfdfe)); + background-image: -webkit-linear-gradient(top, #edf1f5,#fdfdfe); + background-image: -moz-linear-gradient(top, #edf1f5,#fdfdfe); + background-image: -ms-linear-gradient(top, #edf1f5,#fdfdfe); + background-image: -o-linear-gradient(top, #edf1f5,#fdfdfe); + background-image: linear-gradient(top, #edf1f5,#fdfdfe); + background-color: #edf1f5; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset; + -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset; + box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset; +} + +.widget-layout input[type="text"]:focus, .widget-layout textarea:focus { + background-color: #fffcf1; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fffcf1),color-stop(100%, #fffefd)); + background-image: -webkit-linear-gradient(top, #fffcf1,#fffefd); + background-image: -moz-linear-gradient(top, #fffcf1,#fffefd); + background-image: -ms-linear-gradient(top, #fffcf1,#fffefd); + background-image: -o-linear-gradient(top, #fffcf1,#fffefd); + background-image: linear-gradient(top, #fffcf1,#fffefd); + outline: 0; +} + +.widget-layout textarea { + width: 97%; +} + +.widget-layout .form-actions { + border-top: 1px solid #ccc; + margin-top: 10px; + padding-top: 10px; +} + +.widget-layout dl.form { + float: none; + width: 100%; + border-bottom: 1px solid #f2f2f2; + margin-bottom: 10px; + padding-bottom: 10px; +} + +.widget-layout #brain_buster_captcha { + +} + +// specific elements +.widget-layout #discussion_body { + margin: 0 0 15px 0; +} + +.widget-layout .category dt, .widget-layout .category dd { + display: inline-block !important; +} + +.widget-layout .category dt { + margin-right: 15px !important; +} \ No newline at end of file From 7c68508b85c0a31b0c4745172558d3075cde0a23 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 26 Mar 2013 12:42:30 -0400 Subject: [PATCH 05/14] studio - finalized tender widget styling --- cms/static/sass/elements/_tender-widget.scss | 133 +++++++++++++++++-- cms/templates/widgets/tender.html | 1 + 2 files changed, 123 insertions(+), 11 deletions(-) diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss index fce62b8675..4d2cdea373 100644 --- a/cms/static/sass/elements/_tender-widget.scss +++ b/cms/static/sass/elements/_tender-widget.scss @@ -23,7 +23,7 @@ #tender_closer { color: $blue-l2 !important; - margin-top: 15px; + margin-top: 10px; margin-right: 5px; text-transform: uppercase; @@ -66,6 +66,7 @@ .widget-layout .content { overflow: auto; + height: auto !important; padding: 20px; } @@ -110,10 +111,20 @@ width: 97%; } +.widget-layout p.note { + text-align: right !important; + display: inline-block !important; + position: absolute !important; + right: -130px !important; + top: -5px !important; + font-size: 13px !important; + opacity: 0.80; +} + .widget-layout .form-actions { - border-top: 1px solid #ccc; - margin-top: 10px; - padding-top: 10px; + margin: 15px 0; + border: none; + padding: 0; } .widget-layout dl.form { @@ -124,19 +135,119 @@ padding-bottom: 10px; } -.widget-layout #brain_buster_captcha { +.widget-layout dl.form:last-child { + border: none; + padding-bottom: 0; + margin-bottom: 20px; +} +.widget-layout dl.form dt, .widget-layout dl.form dd { + display: inline-block; + vertical-align: middle; +} + +.widget-layout dl.form dt { + margin-right: 15px; + width: 70px; +} + +.widget-layout dl.form dd { + width: 65%; + position: relative; } // specific elements .widget-layout #discussion_body { + +} + +.widget-layout #discussion_body:before { + content: "What Question or Feedback Would You Like to Share?"; + display: block; + font-size: 14px; + margin-bottom: 5px; + color: #4c4c4c; + font-weight: 500; +} + + +.widget-layout dl#brain_buster_captcha { + float: none; + width: 100%; + border-top: 1px solid #f2f2f2; + margin-top: 10px; + padding-top: 10px; +} + +.widget-layout dl#brain_buster_captcha dd { + display: block !important; +} + +.widget-layout dl#brain_buster_captcha dd label { + display: block; + margin: 0 15px 0 0 !important; +} + +.widget-layout dl#brain_buster_captcha dd #captcha_answer { + display: block; + width: 97%%; +} + +.widget-layout .form-actions .btn-post_topic { + display: block; + width: 100%; + height: auto !important; + font-size: 16px; + font-weight: 700; + -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); + -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); + box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); + -webkit-transition-property: background-color,0.15s; + -moz-transition-property: background-color,0.15s; + -ms-transition-property: background-color,0.15s; + -o-transition-property: background-color,0.15s; + transition-property: background-color,0.15s; + -webkit-transition-duration: box-shadow,0.15s; + -moz-transition-duration: box-shadow,0.15s; + -ms-transition-duration: box-shadow,0.15s; + -o-transition-duration: box-shadow,0.15s; + transition-duration: box-shadow,0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + border: 1px solid #34854c; + border-radius: 3px; + background-color: rgba(255,255,255,0.3); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.3)),color-stop(100%, rgba(255,255,255,0))); + background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0)); + background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0)); + background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0)); + background-image: -o-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0)); + background-image: linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0)); + background-color: #25b85a; + -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; + -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; + box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; + color: #fff; + text-align: center; + margin-top: 20px; + padding: 10px 20px; +} + +.widget-layout .form-actions #private-discussion-opt { + float: none; + text-align: left; margin: 0 0 15px 0; } -.widget-layout .category dt, .widget-layout .category dd { - display: inline-block !important; -} - -.widget-layout .category dt { - margin-right: 15px !important; +.widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active { + background-color: #16ca57; + color: #fff; } \ No newline at end of file diff --git a/cms/templates/widgets/tender.html b/cms/templates/widgets/tender.html index 300b71701c..27cc574490 100644 --- a/cms/templates/widgets/tender.html +++ b/cms/templates/widgets/tender.html @@ -1,5 +1,6 @@ % if user.is_authenticated(): Provide Feedback +