finished table controls

src/components/mixins.pug

@@ -4,10 +4,10 @@ mixin navbarMixin(selectedItem)
     .navbar
         each navbarUrl,navbarName in navbarItems
             if navbarName == selectedItem
-                a.navbar__link__wrapper(href=navbarUrl)
+                a.navbar__link-wrapper(href=navbarUrl)
                     .navbar__item.navbar__item_selected #{navbarName}
             else
-                a.navbar__link__wrapper(href=navbarUrl)
+                a.navbar__link-wrapper(href=navbarUrl)
                     .navbar__item #{navbarName}
 
 mixin infoCardsMinxin()
@@ -36,7 +36,7 @@ mixin filtersMixin()
                     .filter-group__items
                         each filter in locationFilters
                             input.filter-group__checkbox(type="checkbox" id=filter.id name="location" value=filter.value)
-                            | #{filter.label}
+                            span  #{filter.label}
                             br
 
                 .filter-group
@@ -46,7 +46,7 @@ mixin filtersMixin()
                     .filter-group__items
                         each filter in sensorTypeFilters
                             input.filter-group__checkbox(type="checkbox" id=filter.id name="sensor_type" value=filter.value)
-                            | #{filter.label}
+                            span #{filter.label}
                             br
 
                 .filter-group
@@ -54,14 +54,14 @@ mixin filtersMixin()
                         b Numeric Values
                     br
                     .filter-group__range
-                        | Temperature from: 
+                        span Temperature from: 
                         input.filter-group__input(type="number" name="temp_min" placeholder="20")
-                        |  to: 
+                        span  to: 
                         input.filter-group__input(type="number" name="temp_max" placeholder="30")
                         br
-                        | Humidity from: 
+                        span Humidity from: 
                         input.filter-group__input(type="number" name="humidity_min" placeholder="40")
-                        |  to: 
+                        span  to: 
                         input.filter-group__input(type="number" name="humidity_max" placeholder="60")
                         br
 
@@ -70,10 +70,10 @@ mixin filtersMixin()
                         b Device Specific Filters
                     br
                     .filter-group__items
-                        | Sensor Name: 
+                        span Sensor Name: 
                         input.filter-group__input(type="text" name="sensor_name")
                         br
-                        | Days Since Calibration (max): 
+                        span Days Since Calibration (max): 
                         input.filter-group__input(type="number" name="calibration_days" placeholder="30")
                         br
 
@@ -82,10 +82,10 @@ mixin filtersMixin()
                         b Measurement Period
                     br
                     .filter-group__dates
-                        | From: 
+                        span From: 
                         input.filter-group__input(type="date" name="date_from")
                         br
-                        | To: 
+                        span To: 
                         input.filter-group__input(type="date" name="date_to")
                         br
 
@@ -93,6 +93,24 @@ mixin filtersMixin()
                     input.filter-group__button.filter-group__button--submit(type="submit" value="Apply Filters")
                     input.filter-group__button.filter-group__button--reset(type="reset" value="Reset Filters")
 
+mixin sortLevel(level)
+    .sort-level
+        i.sort-level__label 
+            b Sort Level #{level}
+        br
+        label.sort-level__field-label(for=`sort${level}`) Field:
+        select.sort-level__select(id=`sort${level}` name=`sort${level}`)
+            each option in sortOptions
+                option(value=option.value) #{option.label}
+        label.sort-level__reverse-label(for=`sort${level}_reverse`)
+            input.sort-level__checkbox(type="checkbox" id=`sort${level}_reverse` name=`sort${level}_reverse`)
+            span  Reverse
+        br
+        if level === '3'
+            input.sort-level__submit(type="submit" value="Sort")
+        else
+            br
+
 mixin sortingMixin()
     - const sortLevels = ['1', '2', '3'];
     details.sorting
@@ -100,22 +118,23 @@ mixin sortingMixin()
         form.sorting__form
             fieldset.sorting__fieldset
                 each level in sortLevels
-                    .sort-level
+                    +sortLevel(level)
-                        i.sort-level__label 
+
-                            b Sort Level #{level}
+mixin graphXOption(option)
-                        br
+    if option.checked
-                        label.sort-level__field-label(for=`sort${level}`) Field:
+        input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value checked)
-                        select.sort-level__select(id=`sort${level}` name=`sort${level}`)
+    else
-                            each option in sortOptions
+        input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value)
-                                option(value=option.value) #{option.label}
+    label.axis-group__option-label(for=option.id) #{option.label}
-                        label.sort-level__reverse-label(for=`sort${level}_reverse`)
+    br
-                            input.sort-level__checkbox(type="checkbox" id=`sort${level}_reverse` name=`sort${level}_reverse`)
+
-                            |  Reverse
+mixin graphYOption(option)
-                        br
+    if option.checked
-                        if level === '3'
+        input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value checked)
-                            input.sort-level__submit(type="submit" value="Sort")
+    else
-                        else
+        input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value)
-                            br
+    label.values-group__option-label(for=option.id) #{option.label}
+    br
 
 mixin graphMixin()
     details.graph
@@ -128,23 +147,12 @@ mixin graphMixin()
                     br
                     .axis-group__options
                         each option in axisOptions
-                            if option.checked
+                            +graphXOption(option)
-                                input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value checked)
-                            else
-                                input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value)
-                            label.axis-group__option-label(for=option.id) #{option.label}
-                            br
-
                 .values-group
                     i.values-group__label 
                         b Values
                     br
                     .values-group__options
                         each option in valueOptions
-                            if option.checked
+                            +graphYOption(option)
-                                input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value checked)
-                            else
-                                input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value)
-                            label.values-group__option-label(for=option.id) #{option.label}
-                            br
                         button.values-group__button(type="submit" id="build_graph" name="build_graph") Build

src/index.js

@@ -1,3 +1,3 @@
-import './styles/main.styl'
+import './styles/index.styl'
 import './styles/details.styl'
 import './styles/table.styl'

src/styles/index.styl

@@ -1,4 +1,5 @@
-// Миксины для переиспользования
+item_h=3em;
+
 double-border()
     border-top double thick silver
     border-bottom double thick silver
@@ -18,26 +19,25 @@ grid-responsive(columns)
     grid-template-columns columns
     grid-template-rows 1fr
 
-// Основные стили
 .navbar
     double-border()
     font-size 0
     grid-responsive(repeat(7, min-content))
     justify-items start
     
-    &__link__wrapper
+    &__link-wrapper
         color black
         text-decoration none
         
     &__item
         display inline-block
         width max-content
-        height 3em
+        height item_h
-        line-height 3em
+        line-height item_h
         text-align center
         vertical-align middle
         padding 0 10px
-        margin 0 10px
+        margin @padding
         overflow hidden
         text-overflow ellipsis
         font-size medium

src/styles/main.styl

@@ -1,2 +0,0 @@
-// Импорт стилей для главной страницы
-@import 'index.styl'