#1811 edp comment box styling

impliments the vartious styling changes in #1811
Iridescent-CM · Apr 30, 2018 · f63c983 · f63c983
1 parent d8e80d1
commit f63c983
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 83 deletions.
diff --git a/challenges/templates/challenges/edp/build.html b/challenges/templates/challenges/edp/build.html
@@ -2,27 +2,12 @@
 
 {% load widget_tweaks %}
 
-{% block under_nav_header_content %}
-  <h1>Document your design process</h1>
-  <p>{{ challenge.build_subheader }}</p>
-{% endblock %}
-
 {% block left_panel %}
-  <div class="panel blue">
-    <div class="panel-body">
-      {{challenge.build_call_to_action}}
-    </div>
-  </div>
-{% endblock %}
-
-{% block right_panel %}
-  {% block right_panel_head %}
-  {% endblock %}
-
   {% block commenting_bubble %}
-  <div class="panel panel-bubble right edp-comments">
+  <div class="panel panel-bubble plan-build edp-comments">
     <div class="panel-body">
-      <h3 data-submit-replacement-text="Please wait...">What step are you on?</h3>
+      <h1 data-submit-replacement-text="Please wait...">What step are you on?</h1>
+      <p>{{challenge.build_call_to_action}} Did it work like you thought it would?</p>
       {% block step_form %}
       <form>
         <div class="form-group">
@@ -45,6 +30,10 @@ <h3 data-submit-replacement-text="Please wait...">What step are you on?</h3>
     </div>
   </div>
   {% endblock %}
+{% endblock %}
+
+{% block right_panel %}
+  {% block right_panel_head %}{% endblock %}
 
   {% block comments %}{% endblock %}
 {% endblock %}
diff --git a/challenges/templates/challenges/edp/layout.html b/challenges/templates/challenges/edp/layout.html
@@ -9,10 +9,12 @@
 {% endblock %}
 
 {% block content %}
+
   {% block top_header %}
   <h1>{{ challenge.name }}</h1>
   {% endblock %}
 
+
   {% block alerts %}{% endblock %}
 
   {% if challenge.draft %}

diff --git a/challenges/templates/challenges/edp/plan.html b/challenges/templates/challenges/edp/plan.html
@@ -3,16 +3,12 @@
 {% load widget_tweaks %}
 {% load resized %}
 
-{% block under_nav_header_content %}
-  <h1>Plan your project</h1>
-  <p>{{ challenge.plan_subheader }}</p>
-{% endblock %}
-
 {% block left_panel %}
   {% block commenting_bubble %}
-  <div class="panel panel-bubble edp-comments">
+  <div class="panel panel-bubble plan-build edp-comments">
     <div class="panel-body">
-      <h3 data-submit-replacement-text="Please wait...">Post your plan!</h3>
+      <h1 data-submit-replacement-text="Please wait...">Post your plan!</h1>
+      <p>{{ challenge.plan_subheader }}</p>
       {% block post_your_plan %}
       <form>
         {{ comment_form.text|attr:"disabled:disabled" }}
@@ -23,14 +19,6 @@ <h3 data-submit-replacement-text="Please wait...">Post your plan!</h3>
     </div>
   </div>
   {% endblock %}
-
-  {% if challenge.plan_call_to_action %}
-    <div class="panel blue">
-      <div class="panel-body">
-        {{challenge.plan_call_to_action}}
-      </div>
-    </div>
-  {% endif %}
 {% endblock %}
 
 {% block right_panel %}

diff --git a/challenges/templates/challenges/edp/reflect.html b/challenges/templates/challenges/edp/reflect.html
@@ -2,23 +2,7 @@
 
 {% load widget_tweaks %}
 
-{% block under_nav_header_content %}
-  <h1>Document your design process</h1>
-  <p>{{ challenge.reflect_subheader }}</p>
-{% endblock %}
-
 {% block left_panel %}
-  <div class="panel blue">
-    <div class="panel-body">
-      <p>You've made great progress on this challenge. I think you are ready to move on to the next step.</p>
-      <p><strong>Reflect on your design.</strong></p>
-    </div>
-  </div>
-{% endblock %}
-
-{% block right_panel %}
-  {% block right_panel_head %}
-  {% endblock %}
 
   {% block commenting_bubble %}
   {% if quiz_form %}
@@ -40,7 +24,7 @@ <h1>Reflect Quiz</h1>
     </div>
   </div>
   {% else %}
-  <div class="panel panel-bubble teal right reflect-box edp-comments">
+  <div class="panel panel-bubble teal reflect-box edp-comments">
     <div class="panel-body">
       <h1 data-submit-replacement-text="Please wait...">Reflect</h1>
       <p class="hide_upon_submit">Are you finished with your project? Reflect on your work by answering a question below! Then you'll be able to share your design in the <a href="{% url "challenges:examples" challenge_id=challenge.id %}"><strong>Inspiration Gallery</strong></a>.</p>
@@ -70,6 +54,10 @@ <h3 class="question"></h3>
   </div>
   {% endif %}
   {% endblock %}
+{% endblock %}
+
+{% block right_panel %}
+  {% block right_panel_head %}{% endblock %}
 
   {% block congrats_panel %}{% endblock %}
 

diff --git a/curiositymachine/static/css/base.css b/curiositymachine/static/css/base.css
diff --git a/curiositymachine/static/less/panels.less b/curiositymachine/static/less/panels.less
@@ -253,38 +253,6 @@
       margin-bottom: 25px;
     }
   }
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    right: -20px;
-    margin-top: 30px;
-    width: 0px;
-    height: 0px;
-    border-style: solid;
-    border-width: 20px 20px 0 0;
-    border-color: lighten(@green, 10%) transparent transparent transparent;
-  }
-}
-
-.panel-bubble.right {
-  &:before {
-    border-width: 20px 20px 0;
-    right: auto;
-    left: -20px;
-    border-color: lighten(@green, 10%) transparent transparent transparent;
-  }
-}
-
-.panel-bubble.bottom {
-  &:before {
-    border-width: 20px 0 0 20px;
-    margin-top: 0;
-    right: auto;
-    top: -20px;
-    left: 60px;
-    border-color: transparent transparent transparent lighten(@green, 10%);
-  }
 }
 
 .panel.blue {
@@ -341,6 +309,19 @@
   &:before {border-color: lighten(@teal, 5%) transparent transparent transparent;}
 }
 
+.panel-bubble.plan-build {
+  background: lighten(@green, 5%);
+  color: #fff;
+  h1 {
+    color: #fff;
+    font-size: @font-size-h1;
+  }
+  p {
+    margin: 20px 0;
+  }
+  &:before {border-color: lighten(@green, 5%) transparent transparent transparent;}
+}
+
 .panel-bubble.outline {
   background: transparent;
   box-shadow: none;