add LibraryOptions styling

src/assets/scss/abstracts/_variables.scss

@@ -116,6 +116,16 @@ $card-spacer-x: .75rem;
 $card-border-width: 0;
 // $card-border-color: $black;
 
+// INPUT RANGE 
+$custom-range-track-height:         .1875rem;
+$custom-range-track-bg:             $black;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1);
+
+$custom-range-thumb-width:                   1.25rem;
+$custom-range-thumb-bg:                      $white;
+$custom-range-thumb-border:                  3px solid $black;
+$custom-range-thumb-border-radius:           1rem;
+$custom-range-thumb-active-bg:               $black;
 
 // SPINNER
 $spinner-width: 50px;

src/components/formItems/MultipleTagsSelect.vue

@@ -54,7 +54,16 @@ export default {
 .b-form-tags {
   border: 0;
   padding: 0;
-  display: flex;
+
+  @include media-breakpoint-up(md) {
+    ul li {
+      display: block;
+    }
+  }
+
+  .btn-group {
+    vertical-align: baseline;
+  }
 
   .tags-dropdown {
     margin-right: .5rem;

src/pages/_partials/MainHeader.vue

@@ -39,7 +39,7 @@
 
       <b-button
         v-if="['library', 'kit'].includes($route.name)"
-        class="d-tb-none"
+        class=""
         :class="optionsVisible ? null : 'collapsed'"
         :aria-expanded="optionsVisible ? 'true' : 'false'"
         aria-controls="collapse-options"
@@ -206,7 +206,7 @@ export default {
   .btn {
     font-size: inherit;
 
-    @include media-breakpoint-up(tb) {
+    @include media-breakpoint-up(md) {
       font-size: 1rem;
     }
   }

src/pages/library/LibraryOptions.vue

@@ -1,6 +1,7 @@
 <template>
-  <div v-if="show" class="d-flex justify-content-between">
+  <div v-if="show" class="library-options">
     <b-form-group
+      class="mode-select-group"
       :label="$t('options.display.title')"
       v-slot="{ ariaDescribedby }"
     >
@@ -14,6 +15,7 @@
 
     <!-- LIST + MAP ONLY -->
     <b-form-group
+      class="filters-group"
       v-if="mode !== 'tree'"
       :label="$t('options.filters.title')"
     >
@@ -22,7 +24,7 @@
         label-for="tags-select"
       >
         <multiple-tags-select
-          id="tags-select" :button-text="$t('options.filters.choices.tags')"
+          id="tags-select" :button-text="$t('options.filters.add')"
           v-model="activeTags" :options="tagsOptions"
         />
       </b-form-group>
@@ -31,32 +33,33 @@
         :label="$t('options.filters.choices.strangeness')"
         label-for="strangeness-input"
       >
-        <b-form-input
+        <div class="strangeness-input-wrapper">
+          <b-form-input
           id="strangeness-input"
           type="range" min="0" max="5"
           v-model="strangeness"
-          :disabled="true"
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('options.search.title')"
-        label-for="search-input"
-      >
-        <b-input-group append="search-icon">
-          <b-form-input
-            v-model="activeSearch" id="search-input" trim
           />
-        </b-input-group>
+        </div>
       </b-form-group>
     </b-form-group>
 
+    <!-- LIST + MAP ONLY -->
+    <b-form-group
+      v-if="mode !== 'tree'"
+      :label="$t('options.search.title')"
+    >
+      <b-input-group append="search-icon">
+        <b-form-input
+          v-model="activeSearch" id="search-input" trim
+        />
+      </b-input-group>
+    </b-form-group>
+
     <!-- TREE ONLY -->
     <b-form-group
       v-else
       label="Texte de départ :"
       label-for="text-depart-select"
-      class="w-25"
     >
       <b-form-select
         id="text-depart-select"
@@ -139,7 +142,122 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep fieldset > div {
+.library-options {
-  display: flex;
+  padding: 0 $header-spacer-sm $header-spacer-sm;
+  background-color: $body-bg;
+  width: 100%;
+
+
+  @include media-breakpoint-down(tb) {
+    font-size: 0.9rem;
+
+    ::v-deep {
+      .btn, .form-control, .input-group-text {
+        font-size: inherit;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    padding: 0 $header-spacer $header-spacer;
+    display: flex;
+    justify-content: space-between;
+  }
+
+
+  ::v-deep {
+    @include media-breakpoint-up(md) {
+      flex-wrap: wrap;
+
+      fieldset {
+        margin-bottom: 0;*
+        &:last-child {
+          flex-shrink: 2;
+        }
+      }
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    .mode-select-group {
+      label {
+        border-color: transparent;
+
+        &:not(:disabled):not(.disabled):active,
+        &:not(:disabled):not(.disabled).active {
+          background-color: transparent;
+          color: $black;
+        }
+      }
+    }
+
+    .filters-group {
+      margin: 0;
+      label {
+        margin-right: .5rem;
+      }
+
+      .form-group {
+        display: flex;
+      }
+
+      > div {
+        :last-child {
+          position: relative;
+
+          label {
+            white-space: nowrap;
+          }
+
+          .strangeness-input-wrapper {
+            min-width: 150px;
+            &::before,
+            &::after {
+              content: '';
+              display: inline-block;
+              width: 3px;
+              height: 20px;
+              background-color: $black;
+              position: absolute;
+            }
+
+            &::after {
+              margin-left: -2px;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up(md) {
+        min-width: 450px;
+
+        .form-group {
+          margin-bottom: 0;
+        }
+
+        > div {
+          display: flex;
+          justify-content: space-between;
+
+          > :first-child {
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+
+    .form-control[type='text'] {
+      border-color: $black;
+      border-right: 0;
+      height: calc(1.75em + #{2 * $border-width});
+    }
+
+    .input-group-text {
+      border-color: $black;
+      background-color: transparent;
+    }
+  }
 }
 </style>