Merge pull request #1463 from ae-utbm/taiste

Pre school year release

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -64,23 +64,100 @@ $pedagogy-white-text: #f0f0f0;
   }
 
   #search_form {
+    .search-form-container {
+      display: grid;
+      grid-template-columns: auto auto;
+      grid-template-rows: auto auto auto;
+      grid-template-areas:
+      "action-bar action-bar"
+      "search-bar search-bar"
+      "radio-department radio-department"
+      "radio-credit-type radio-semester";
+    }
 
-    .radio-guide fieldset {
+    .action-bar {
-      input[type="checkbox"] {
+      grid-area: action-bar;
-        display: none;
+      margin-bottom: 10px;
+    }
+
+    .search-bar {
+      grid-area: search-bar;
+      display: grid;
+      grid-template-columns: auto 200px;
+      grid-template-rows: auto;
+      grid-template-areas: "search-bar-input search-bar-button";
+
+      @media screen and (max-width: $medium-devices) {
+        grid-template-columns: auto auto;
+        grid-template-rows: auto;
+        grid-template-areas: "search-bar-input search-bar-button";
       }
+
+      @media screen and (max-width: $small-devices) {
+        grid-template-columns: auto;
+        grid-template-rows: auto;
+        grid-template-areas: "search-bar-input";
+
+        .search-bar-button {
+          display: none;
+        }
+      }
+
+      .search-bar-input {
+        grid-area: search-bar-input;
+        background: $pedagogy-light-blue;
+      }
+
+      .search-bar-button {
+        grid-area: search-bar-button;
+        background: $pedagogy-orange;
+        color: white;
+        font-weight: bold;
+        margin-left: 20px;
+      }
+    }
+
+    .radio-department {
+      grid-area: radio-department;
+    }
+
+    .radio-credit-type {
+      grid-area: radio-credit-type;
+    }
+
+    .radio-semester {
+      grid-area: radio-semester;
+    }
+
+    .radio-guide input[type="radio"],
+    input[type="checkbox"] {
+      display: none;
+    }
+
+    .radio-guide {
       margin-top: 10px;
-      margin-bottom: 0;
       color: white;
+    }
 
-      label {
+    .radio-guide label {
-        padding: 10px 20px;
+      display: inline-block;
-      }
+      background-color: $pedagogy-blue;
+      padding: 10px 20px;
+      font-family: Arial, sans-serif;
+      font-size: 16px;
+      border-radius: 4px;
+    }
 
-      input[type="checkbox"]:checked+label {
+    .radio-guide input[type="radio"]:checked+label {
-        background-color: $pedagogy-orange;
+      background-color: $pedagogy-orange;
-        @include shadow;
+    }
-      }
+
+    .radio-guide input[type="checkbox"]:checked+label {
+      background-color: $pedagogy-orange;
+    }
+
+    .radio-guide label:hover {
+      background-color: $pedagogy-hover-blue;
     }
   }
 

pedagogy/templates/pedagogy/guide.jinja

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block additional_js %}
-  <script type="module" src="{{ static('bundled/pedagogy/guide-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/pedagogy/guide-index.js') }}"></script>
 {% endblock %}
 
 {% block head %}
@@ -24,32 +24,30 @@
 
 {% block content %}
   {% if user.has_perm("pedagogy.add_ue") %}
-    <div class="row gap">
+    <div class="action-bar">
-      <a href="{{ url('pedagogy:ue_create') }}" class="btn btn-blue"><i class="fa fa-plus"></i>{% trans %}Create UE{% endtrans %}</a>
+      <p>
-      <a href="{{ url('pedagogy:moderation') }}" class="btn btn-grey">{% trans %}Moderate comments{% endtrans %}</a>
+        <a href="{{ url('pedagogy:ue_create') }}">{% trans %}Create UE{% endtrans %}</a>
+      </p>
+      <p>
+        <a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
+      </p>
     </div>
     <br/>
   {% endif %}
   <div class="pedagogy" x-data="ue_search" x-cloak>
-    <form id="search_form" class="">
+    <form id="search_form">
       <div class="search-form-container">
-        <fieldset>
+        <div class="search-bar">
-          <label for="search_input">{% trans %}Search UE{% endtrans %}</label>
           <input
             id="search_input"
             class="search-bar-input"
-            type="search"
+            type="text"
             name="search"
-            placeholder=""
             x-model.debounce.500ms="search"
           />
-        </fieldset>
+        </div>
-        <fieldset>
+        <div class="radio-department">
-          <input type="checkbox" class="switch" name="hide_closed_ues" id="hide-closed-ues">
+          <div class="radio-guide">
-          <label for="hide-closed-ues">{% trans %}Show closed UEs{% endtrans %}</label>
-        </fieldset>
-        <div class="row gap-3x margin-bottom radio-guide">
-          <fieldset>
             {% set departments = [
             ("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"),
             ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")
@@ -58,16 +56,16 @@
               <input
                 type="checkbox"
                 name="department"
-                id="radio_{{ real_name }}"
+                id="radio{{ real_name }}"
                 value="{{ real_name }}"
                 x-model="department"
               />
-              <label for="radio_{{ real_name }}" class="btn btn-blue">
+              <label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
-                {% trans %}{{ display_name }}{% endtrans %}
-              </label>
             {% endfor %}
-          </fieldset>
+          </div>
-          <fieldset>
+        </div>
+        <div class="radio-credit-type">
+          <div class="radio-guide">
             {% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
               <input
                 type="checkbox"
@@ -76,21 +74,18 @@
                 value="{{ credit_type }}"
                 x-model="credit_type"
               />
-              <label for="radio{{ credit_type }}" class="btn btn-blue">
+              <label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
-                {% trans %}{{ credit_type }}{% endtrans %}
-              </label>
             {% endfor %}
-          </fieldset>
+          </div>
-          <fieldset>
+        </div>
+
+        <div class="radio-semester">
+          <div class="radio-guide">
             <input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN" x-model="semester"/>
-            <label for="radioAUTUMN" class="btn btn-no-text btn-blue">
+            <label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
-              <i class="fa fa-leaf"></i>
-            </label>
             <input type="checkbox" name="semester" id="radioSPRING" value="SPRING" x-model="semester"/>
-            <label for="radioSPRING" class="btn btn-no-text btn-blue">
+            <label for="radioSPRING"><i class="fa-regular fa-sun"></i></label>
-              <i class="fa-regular fa-sun"></i>
+          </div>
-            </label>
-          </fieldset>
         </div>
       </div>
     </form>