Added periods and course timing to documentation

doc/create-studyplan.htm

@@ -67,6 +67,32 @@
     <p>To re-arrange the courses in the study plan, simply drag and drop them from the places they are now in.</p>
     <p><img src="img/Studyitem-dragdelete.png" class="border border-primary rounded-lg ml-3"></p>
     <p>To remove a course from the study plan, simply drag it to the red garbage bin that appears on dragging</p>
+
+    <h3>Layers within a study line</h3>
+    To add a course to a new layer within a studyline, drag it to the bottom of the study line. There are small slots shown there, which
+    will fully open when the course is dragged over them
+    <p><img src="img/Studyplan-draglayers.png" class="border border-primary rounded-lg ml-3"></p>
+
+    <a id="periods"><h2>Configuring periods</h2></a>
+    All periods in the study plan will have a label showing the timing and it's short name directly above their course columns in the 
+        timeline. Upon hovering over the short name, it's full name will appear.<br>
+        Also, the period matching the current date, will be highlighted in the color
+        indicated by the <pre style="display:inline;">--highlight</pre> css variable, which corresponds to the
+        value of the <pre style="display:inline;">--info</pre> color by default.
+    <p></p>
+    
+    <p><img src="img/Periods-in-plan.png" class="border border-primary rounded-lg ml-3"></p>
+    <p><img src="img/Period-hover.png" class="border border-primary rounded-lg ml-3"></p>
+    <p> At the start, the periods start and end times will be naively selected by splitting the study plan's duration among the number of periods.<br>
+        By clicking on the <i class="text-primary fa fa-pencil"></i> icon, you can open the edit screen and change the period's <i>full name</i>, 
+        <i>short name</i>, <i>start time</i> and <i>end time</i>
+    </p>
+    <p><img src="img/Period-edit.png" class="border border-primary rounded-lg ml-3"></p>
+    <p></p>
+    <div class="generalbox alert alert-success"><b>TIP:</b><br>
+        Before you start dragging courses into a studyplan page, make sure you have the periods configured correctly.
+    </div>
+
     <a id="studycourses"><h2>Configuring courses</h2></a>
     <p>Once a course is added to the studyplan, an icon shows if it needs to be configured (<i class='fa fa-exclamation-circle text-warning'></i>) or 
         is already configured (<i class='fa fa-check text-success'></i>).</p>
@@ -84,6 +110,28 @@
         such will all need to be completed for the course to be marked as completed, regardless of the minimum percentage configured</p>
     <p><img src="img/Course-config-bistate.png" class="border border-primary rounded-lg ml-3"></p>
 
+    <h3>Course start and end times</h3>
+    <p> Often, the course will have their start and end times configured differently than the period you drop them in. If this is the case,
+        a screen will appear asking if you want to update the course's start and end times. The time details of both course and period will
+        be shown for your comparison. By clicking <button class="btn btn-danger">Yes</button>, the course's start and end times will be 
+        updated to those of the period. Any activity dates set will be adjusted according to the changed start date.</p>
+    <p><img src="img/Course-timing-mismatch-screen.png" class="border border-primary rounded-lg ml-3"></p>
+    <div class="generalbox alert alert-info"><b>NOTE:</b><br>
+        <p> If you do not change the course start and end times at this moment, you always have the opportunity later on
+        by clicking the <i class="fa fa-calendar-times-o"></i> icon in the course detail screen. (As seen in the screenshot below).</p>
+        <p> This icon will be <i class="fa fa-calendar text-success"></i> (color <i>--success</i>) to indicate if the course timing matches
+            period timing. If not, it is shown as <i class="fa fa-calendar-times-o text-warning"></i> (color <i>--warning</i>)</p>
+    </div>
+
+    <h3>Courses spanning multiple periods</h3>
+    <p> If a course should span multiple periods, you can specify this in the course detail screen.<br>
+        On the top right of the course details screen you can select the desired period span of this course.
+        Do note however, that the available spans are limited by the available space to the right of the course in the studyplan</p>
+    <p><img src="img/Course-timing-indicators.png" class="border border-primary rounded-lg ml-3"></p>
+    <p> Upon selecting the span you want, the course display will immediately be updated to reflect the changes.<br>
+        immediately after this, you will see the screen asking if you want to change the course start and end times to reflect the 
+        new period span.</p>
+
     <a id="studybadges"><h2>Adding badges</h2></a>
     <p>The toolbox also shows you the site-wide badges that are available for students. These can be dragged into the slots around and between the courses.</p>
     <p>When you click on the <i class="fa fa-gear"></i> icon in the badge it shows you additional information about the badge</p>