add course buttons

diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css
index 09be859678f85172af79eea895f53204b77e04ed..ff22c025204e3d8ed7a013a2606404eea7d45e4a 100644 (file)
--- a/teleforma/static/teleforma/css/teleforma.css
+++ b/teleforma/static/teleforma/css/teleforma.css
@@ -1,6 +1,9 @@
 body {margin: 0; padding: 0;}
 a {text-decoration: none; color: #969696;}
 a img {border: none;}
+html {
+    scroll-behavior: smooth;
+}
 html, input, select, textarea, h1, h2, h3, h4, h5, h6 {
     font-size: 100%;
 }
@@ -1709,7 +1712,7 @@ form.add_actus #id_text_parent{
     }
 
 .course {
-    margin: 0em 0em 2em 0em;
+    margin: 1em 0em 1em 0em;
     background-color: #FFF;
     -moz-border-radius: 8px 0px 8px 8px;
     -webkit-border-radius: 8px 0px 8px 8px;
@@ -1719,19 +1722,45 @@ form.add_actus #id_text_parent{
     background-repeat:repeat;
    }
 
+.course_main_title {
+    color: #355ea2;
+    -moz-border-radius: 8px 0px 0px 0px;
+    -webkit-border-radius: 8px 0px 0px 0px;
+    border-radius: 8px 0px 0px 0px;
+    padding: 0.25em 0em 1em 0em;
+    font-weight: bold;
+    font-size: 1.75em;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.course_button {
+    padding: 10px;
+    line-height: 3em;
+}
+
+.course_button:hover {
+    padding: 10px;
+    line-height: 3em;
+}
+
 
 .course_title {
     color: #355ea2;
     -moz-border-radius: 8px 0px 0px 0px;
     -webkit-border-radius: 8px 0px 0px 0px;
     border-radius: 8px 0px 0px 0px;
-    padding: 0em;
+    padding: 1em 0em 0.5em 0em;
     font-weight: bold;
     font-size: 1.2em;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    scroll-margin-block-start: 1em;
+    scroll-margin-block-end: 1em;
 }
+
 .create-bbb-conference {
     font-size: 0.8em;
 }

diff --git a/teleforma/templates/teleforma/course_detail.html b/teleforma/templates/teleforma/course_detail.html
index 3f7ca1fda247cc46b11ac77fd4d1f18eef3902c5..989dd767f12e979fb2f6778aa380b33eb66a2898 100644 (file)
--- a/teleforma/templates/teleforma/course_detail.html
+++ b/teleforma/templates/teleforma/course_detail.html
@@ -24,13 +24,27 @@
   </div>
   {% endif %}
 
-
-  <br /><br />
   {% for c in courses %}
   {% with c.course as course %}
+  <div class="course_main_title">
+    {{ course.title }}
+  </div>
+  <div class="course_buttons">
+    {% for type in c.types %}
+      <a class="component button course_button" href="#{{ type }}">
+        {{ type }}
+      </a>
+    {% endfor %}
+      <a class="component button course_button" href="#webclasses">
+        Webclasses
+      </a>
+      <a class="component button course_button" href="#corrections_de_copies">
+        Corrections de copies
+      </a>
+  </div>
   {% for type in c.types %}
   <div class="course">
-    <div class="course_title">{{ course.title }} - {{ type }}{% if course.description %} -
+    <div class="course_title" id="{{ type }}">{{ type }}{% if course.description %} -
       {{ course.description }}{% endif %}
     </div>
 
@@ -70,7 +84,7 @@
   {% endfor %}
 
   <div class="course">
-    <div class="course_title">{{ course.title }} - Webclass{% if course.description %} -
+    <div class="course_title" id="webclasses">Webclasses{% if course.description %} -
       {{ course.description }}{% endif %}
     </div>
     {% block webclass %}
@@ -80,7 +94,7 @@
   </div>
 
   <div class="course">
-    <div class="course_title">{{ course.title }} - Corrections de copies{% if course.description %} -
+    <div class="course_title" id="corrections_de_copies">Corrections de copies{% if course.description %} -
       {{ course.description }}{% endif %}
       {% if user.is_staff or user.professor.count %}<a href="{% url 'teleforma-create-cc-bbb-conference' period.id course.id %}" class="component_icon button icon_add create-bbb-conference">Créer une correction de copie</a>{% endif %}