sail 3.4.0 → 3.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16b44189cf3b110f2f889319509c1592644f6dde05b0d598c58a1ca38141a2c4
-  data.tar.gz: 9f908bbfa06fc4a92a173e9e0d5487301ee59159638ba44992f4b6fb0f3f35e0
+  metadata.gz: 05c8c9fc861985a4fa65f4f777d4e9739a333bf8d27baf73c15e233421b85f30
+  data.tar.gz: b4fa1e809ddbe24599276a7af84fde31cbf6775f4f06e55d549019884359531e
 SHA512:
-  metadata.gz: d3db0a5ea82f5f2feb06e53e155e32d9f3dd5bf94e64cd681b1f57a4aa50c20c71dd3c7e6dd7031fe47547b0e5d10688897d304806afe1433868d9a27faf7863
-  data.tar.gz: 958d60d9fd6a5f3ac52a4d1a40d9688e6fcb5ea499121c17b96d998e55936f29079e7689c967ab70f3073cc186c5fb775b5b69a39cd905578c11f6fad7fa6726
+  metadata.gz: 97636b73c70c7d761bfc4519b33717578d9d97ec96a5e43b227bdb0949cc4baa1ba71c638a9c1107bec0feedbe4732a83a120e7b8db5adb4a47ccbe17a33d215
+  data.tar.gz: 75dd8458863ffdb53b0967b437f472c3ccc85b3909f3cef8463334dc4b34deba208d5dbfe52a3db182fe43e0788ad05020f47732180eaad860fbc8594cb3b614

data/README.md

@@ -1,4 +1,4 @@
-![dashboard](https://raw.githubusercontent.com/vinistock/sail/master/app/assets/images/sail/sail.png)
+![dashboard](https://raw.githubusercontent.com/vinistock/sail/master/app/assets/images/sail/sail.gif)
 
 [![Build Status](https://github.com/vinistock/sail/workflows/Ruby%20on%20Rails/badge.svg?branch=master)](https://github.com/vinistock/sail/actions) [![codecov](https://codecov.io/gh/vinistock/sail/branch/master/graph/badge.svg)](https://codecov.io/gh/vinistock/sail) [![Gem Version](https://badge.fury.io/rb/sail.svg)](https://badge.fury.io/rb/sail) ![](http://ruby-gem-downloads-badge.herokuapp.com/sail?color=brightgreen&type=total) [![Mentioned in Awesome Ruby](https://awesome.re/mentioned-badge.svg)](https://github.com/markets/awesome-ruby)
 

data/app/assets/images/sail/angle-left.svg

@@ -1 +1 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.05 9.293L6.343 10 12 15.657l1.414-1.414L9.172 10l4.242-4.243L12 4.343z"/></svg>

data/app/assets/images/sail/angle-right.svg

@@ -1 +1 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>

data/app/assets/images/sail/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>

data/app/assets/images/sail/cog.svg

@@ -1 +1 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M3.94 6.5L2.22 3.64l1.42-1.42L6.5 3.94c.52-.3 1.1-.54 1.7-.7L9 0h2l.8 3.24c.6.16 1.18.4 1.7.7l2.86-1.72 1.42 1.42-1.72 2.86c.3.52.54 1.1.7 1.7L20 9v2l-3.24.8c-.16.6-.4 1.18-.7 1.7l1.72 2.86-1.42 1.42-2.86-1.72c-.52.3-1.1.54-1.7.7L11 20H9l-.8-3.24c-.6-.16-1.18-.4-1.7-.7l-2.86 1.72-1.42-1.42 1.72-2.86c-.3-.52-.54-1.1-.7-1.7L0 11V9l3.24-.8c.16-.6.4-1.18.7-1.7zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>

data/app/assets/images/sail/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>

data/app/assets/images/sail/refresh.svg

@@ -1 +1 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="sync" class="svg-inline--fa fa-sync fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M440.935 12.574l3.966 82.766C399.416 41.904 331.674 8 256 8 134.813 8 33.933 94.924 12.296 209.824 10.908 217.193 16.604 224 24.103 224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407 137.408 172.931 80 256 80c60.893 0 114.512 30.856 146.104 77.801l-101.53-4.865c-6.845-.328-12.574 5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 12h200.333c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853 0-12.315 5.729-11.987 12.574zM256 432c-60.895 0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327 12.573-5.134 12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627 0-12 5.373-12 12V500c0 6.627 5.373 12 12 12h47.385c6.863 0 12.328-5.745 11.985-12.599l-4.129-82.575C112.725 470.166 180.405 504 256 504c121.187 0 222.067-86.924 243.704-201.824 1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57 0-10.377 3.842-11.676 9.259C408.593 374.592 339.069 432 256 432z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z"/></svg>

data/app/assets/images/sail/sort.svg

@@ -1 +1 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="sort-amount-down" class="svg-inline--fa fa-sort-amount-down fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M187.298 395.314l-79.984 80.002c-6.248 6.247-16.383 6.245-22.627 0L4.705 395.314C-5.365 385.244 1.807 368 16.019 368H64V48c0-8.837 7.163-16 16-16h32c8.837 0 16 7.163 16 16v320h47.984c14.241 0 21.363 17.264 11.314 27.314zM240 96h256c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H240c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16zm-16 112v-32c0-8.837 7.163-16 16-16h192c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H240c-8.837 0-16-7.163-16-16zm0 256v-32c0-8.837 7.163-16 16-16h64c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16h-64c-8.837 0-16-7.163-16-16zm0-128v-32c0-8.837 7.163-16 16-16h128c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H240c-8.837 0-16-7.163-16-16z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M17 16v4h-2v-4h-2v-3h6v3h-2zM1 9h6v3H1V9zm6-4h6v3H7V5zM3 0h2v8H3V0zm12 0h2v12h-2V0zM9 0h2v4H9V0zM3 12h2v8H3v-8zm6-4h2v12H9V8z"/></svg>

data/app/assets/javascripts/sail/settings.js

@@ -16,6 +16,7 @@ let dashboardBody = document.getElementById("settings-dashboard");
 let guideButton = document.getElementById("btn-guide");
 let guide = document.getElementById("guide-modal");
 let guideSections = guide.getElementsByTagName("summary");
+let cardTitles = document.getElementsByClassName("card-title");
 let i;
 
 function submitSearch() {
@@ -122,7 +123,9 @@ function refreshClick() {
 
 for(i = 0; i < refreshButtons.length; i++) refreshButtons[i].addEventListener("click", refreshClick);
 
-// Guide related functions
+/*
+Guide related functions
+ */
 
 function sectionClick() {
     for(i = 0; i < guideSections.length; i++) {
@@ -135,3 +138,13 @@ function sectionClick() {
 }
 
 for(i = 0; i < guideSections.length; i++) guideSections[i].addEventListener("click", sectionClick);
+
+/*
+Cards related functions
+ */
+
+function flipCard() {
+    this.parentElement.parentElement.classList.toggle("flipped");
+}
+
+for(i = 0; i < cardTitles.length; i++) cardTitles[i].addEventListener("click", flipCard);

data/app/assets/stylesheets/sail/application.css.erb

@@ -60,13 +60,6 @@ html, body {
   clear: both;
 }
 
-@media (max-width: 413px) {
-  .clear-xs {
-    clear: both;
-    margin-top: 8px;
-  }
-}
-
 #nav-bar {
   background-color: var(--lead);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.1);
@@ -142,19 +135,6 @@ html, body {
   }
 }
 
-#nav-bar #btn-monitor-mode,
-#nav-bar #btn-regular-mode {
-  right: 80px;
-  padding: 1px 7px 2px 7px;
-}
-
-@media (min-width: 1200px) {
-  #nav-bar #btn-monitor-mode,
-  #nav-bar #btn-regular-mode {
-    right: 120px;
-  }
-}
-
 #pagination {
   text-align: center;
   margin-top: 2rem;
@@ -263,13 +243,7 @@ html, body {
   outline: none;
 }
 
-#profiles-modal .profile-entry .inline-form {
-  float: right;
-}
-
 #profiles-modal .profile-entry button {
-  float: right;
-  margin-left: 5px;
   padding: 10px;
 }
 
@@ -278,27 +252,11 @@ html, body {
   top: 10px;
 }
 
-@media (max-width: 1199px) {
-  #profiles-modal .profile-entry .entry-name {
-    float: left;
-  }
-}
-
-@media (min-width: 1200px) {
-  #profiles-modal .profile-entry .entry-name {
-    margin-left: 250px;
-  }
+#profiles-modal .buttons button {
+  margin: 0 5px 0 5px;
 }
 
 @media (max-width: 767px) {
-  #profiles-modal .profile-entry .inline-form {
-    margin-right: 3%;
-  }
-
-  #profiles-modal .profile-entry .inline-form:first-child {
-    clear: both;
-  }
-
   #profiles-modal .profile-entry .entry-name {
     width: 90%;
     margin-bottom: 15px;
@@ -310,7 +268,6 @@ html, body {
 }
 
 #profiles-modal .profile-entry .active-indicator {
-  float: left;
   position: relative;
   top: 7px;
 }
@@ -324,7 +281,6 @@ html, body {
 }
 
 #profiles-modal .profile-entry .errors-indicator {
-  float: left;
   position: relative;
   top: 9px;
   left: 15px;
@@ -340,7 +296,6 @@ html, body {
   position: relative;
   top: 10px;
   text-overflow: ellipsis;
-
 }
 
 #profiles-modal #new-profile-input:focus {
@@ -372,6 +327,14 @@ html, body {
   outline: none;
 }
 
+#guide-modal details > summary {
+  list-style: none;
+}
+
+#guide-modal details > summary::-webkit-details-marker {
+  display: none;
+}
+
 #guide-modal details summary:focus,
 #guide-modal details summary:hover {
   border-color: var(--tangerine);

data/app/assets/stylesheets/sail/settings.css

@@ -16,15 +16,19 @@
 #settings-dashboard #settings-container {
     margin-top: 1rem;
     text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 0 15px 0 15px;
 }
 
 #settings-dashboard .card {
-    min-height: 230px;
+    flex: 0 1 auto;
+    max-height: 220px;
     background-color: white;
     margin: 1rem .75rem;
-    display: inline-block;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    padding: 10px;
+    padding: 0 10px 0 10px;
     z-index: 2;
     width: 90%;
     -webkit-box-sizing: border-box;
@@ -33,14 +37,41 @@
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
+
+    transition-duration: 0.6s;
+    transition-timing-function: ease-in-out;
+    transform-style: preserve-3d;
+}
+
+#settings-dashboard .card .card-title {
+    transition: color 500ms ease-in;
+}
+
+#settings-dashboard .card .card-title:hover {
+    color: var(--tangerine);
+    cursor: pointer;
+}
+
+#settings-dashboard .card .front,
+#settings-dashboard .card .back {
+    backface-visibility: hidden;
+    transform: rotateX(0deg);
+    height: 61%;
+}
+
+#settings-dashboard .card .back {
+    transform: rotateY(-180deg);
+    position: relative;
+    bottom: 155px;
 }
 
-#settings-dashboard .card h3 {
-    margin-left: 25px;
+#settings-dashboard .card.flipped {
+    transform: rotateY(-180deg);
 }
 
 #settings-dashboard .card .relevancy-score {
-    float: right;
+    position: relative;
+    bottom: 5px;
     color: var(--dark-aluminium);
 }
 
@@ -52,26 +83,14 @@
 
 @media (min-width: 1200px) {
     #settings-dashboard .card {
-        width: 21%;
+        width: 18%;
     }
 }
 
-#settings-dashboard .card .card-body-container {
-    display: table;
-    width: 100%;
-}
-
-#settings-dashboard .card .card-body {
-    height: 80px;
-    width: 100%;
-    display: table-cell;
-    vertical-align: bottom;
-}
-
 #settings-dashboard .card .tag {
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
     padding: 10px;
     color: var(--main-black);
     font-size: 14px;
@@ -94,11 +113,6 @@
 }
 
 #settings-dashboard .card .setting-description {
-    clear: both;
-    padding: 25px 15px 15px 15px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
     -webkit-animation: fadeIn 0.5s;
     animation: fadeIn 0.5s;
     color: var(--darker-aluminium);
@@ -111,16 +125,10 @@
     }
 }
 
-#settings-dashboard .card .label-container {
-    float: right;
-    margin-top: 5px;
-}
-
 #settings-dashboard .card .value-input {
-    width: 98%;
-    margin-bottom: 10px;
-    font-size: 22px;
+    width: 95%;
     text-align: center;
+    font-size: 22px;
     border: none;
     border-bottom: 2px solid var(--aluminium);
     -webkit-border-radius: 0;
@@ -140,42 +148,16 @@
     outline: none;
 }
 
-#settings-dashboard .card .date-picker {
-    position: relative;
-    bottom: 10px;
-    border: none;
-    border-bottom: 2px solid var(--aluminium);
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    width: 100%;
-    text-align: center;
-    font-size: 22px;
-    padding: 0;
-    -webkit-transition : border .25s ease-in;
-    -moz-transition : border .25s ease-in;
-    -o-transition : border .25s ease-in;
-    transition : border .25s ease-in;
-    outline: none;
-}
-
-#settings-dashboard .card .date-picker:focus,
-#settings-dashboard .card .date-picker:hover {
-    border-color: var(--tangerine);
-    outline: none;
-}
-
 #settings-dashboard .card .value-slider {
     -webkit-appearance: none;
-    width: 100%;
     height: 15px;
+    width: 90%;
     border-radius: 5px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;
-    margin: 0 0 10px 0;
 }
 
 #settings-dashboard .card .value-slider::-webkit-slider-thumb {
@@ -197,17 +179,21 @@
 }
 
 #settings-dashboard .card .btn-value-submit {
-    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+#settings-dashboard .card .submit-container {
     height: 35px;
+    width: 24%;
 }
 
 #settings-dashboard .card .switch {
     position: relative;
+    top: 5px;
     display: inline-block;
     width: 60px;
     height: 34px;
-    margin-bottom: 10px;
-    float: right;
 }
 
 #settings-dashboard .card .switch input {display:none;}
@@ -261,10 +247,45 @@
 #settings-dashboard .card .refresh-button {
     border: none;
     outline: none;
-    float: left;
     background: transparent;
 }
 
+.flex-container {
+    display: flex;
+    align-items: center;
+}
+
+.flex-container .flex-grow {
+    flex-grow: 4;
+}
+
+.flex-container-vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.flex-container.space-between {
+    justify-content: space-between;
+}
+
+.flex-container.align-bottom {
+    align-items: flex-end;
+}
+
+.flex-container.padded {
+    padding: 5px 0 10px 0;
+}
+
+.flex-container.justify-end {
+    justify-content: flex-end;
+}
+
+.flex-container > div {
+    flex: 0 1 auto;
+}
+
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@@ -283,34 +304,32 @@
     animation:spin 1s linear infinite;
 }
 
-#settings-dashboard .card.minimal {
-    min-height: 50px;
-    padding-top: 0;
-}
-
-#settings-dashboard .card.minimal label {
-    font-size: 22px;
-}
-
 .notice {
     display: none;
-    clear: both;
-    padding: 25px 15px 15px 15px;
+    position: relative;
+    top: 10px;
     text-overflow: ellipsis;
-    white-space: nowrap;
     overflow: hidden;
+    text-transform: uppercase;
     font-weight: bolder;
+    font-size: 18px;
+    width: 100%;
+    height: 100%;
     text-align: center;
     -webkit-animation: fadeIn 0.5s;
     animation: fadeIn 0.5s;
 }
 
-.notice.success {
-    color: var(--dark-green);
+.notice img {
+    width: 25px;
 }
 
-.notice.alert {
-    color: var(--bright-red);
+.notice.success img {
+    fill: var(--dark-green);
+}
+
+.notice.alert img {
+    fill: var(--bright-red);
 }
 
 #progress-container {
@@ -368,7 +387,7 @@
     position: absolute;
     right: 30%;
     top: 165px;
-    z-index: 2;
+    z-index: 3;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;

data/app/controllers/sail/settings_controller.rb

@@ -10,15 +10,12 @@ module Sail
   class SettingsController < ApplicationController
     before_action :set_locale, only: :index
     after_action :log_update, only: %i[update reset], if: -> { Sail.configuration.enable_logging && @successful_update }
-
-    # rubocop:disable Metrics/AbcSize
     def index
       @settings = Setting.by_query(s_params[:query]).ordered_by(s_params[:order_field])
-      @number_of_pages = (@settings.count.to_f / settings_per_page).ceil
-      @settings = @settings.paginated(s_params[:page], settings_per_page)
+      @number_of_pages = (@settings.count.to_f / Sail::ConstantCollection::SETTINGS_PER_PAGE).ceil
+      @settings = @settings.paginated(s_params[:page], Sail::ConstantCollection::SETTINGS_PER_PAGE)
       fresh_when(@settings)
     end
-    # rubocop:enable Metrics/AbcSize
 
     def update
       respond_to do |format|
@@ -65,14 +62,6 @@ module Sail
 
     private
 
-    def settings_per_page
-      if params[:monitor_mode] == Sail::ConstantCollection::TRUE
-        Sail::ConstantCollection::MINIMAL_SETTINGS_PER_PAGE
-      else
-        Sail::ConstantCollection::SETTINGS_PER_PAGE
-      end
-    end
-
     def s_params
       params.permit(:page, :query, :name,
                     :value, :positive, :negative,

data/app/models/sail/setting.rb

@@ -40,7 +40,7 @@ module Sail
       elsif select(:id).by_group(query).exists?
         by_group(query)
       elsif query.to_s.include?(Sail::ConstantCollection::RECENT)
-        recently_updated(query.delete("recent ").strip)
+        recently_updated(query.delete("recent ").strip.to_i)
       else
         by_name(query)
       end

data/app/views/layouts/sail/application.html.erb

@@ -21,12 +21,6 @@
     <button id="btn-guide" type="button" class="nav-button">
       <%= I18n.t("sail.guide") %>
     </button>
-
-    <% if params[:monitor_mode] == Sail::ConstantCollection::TRUE %>
-      <%= link_to(I18n.t("sail.regular_mode"), settings_path, method: :get, class: "nav-button", id: "btn-regular-mode") %>
-    <% else %>
-      <%= link_to(I18n.t("sail.monitor_mode"), settings_path(monitor_mode: "true"), method: :get, class: "nav-button", id: "btn-monitor-mode") %>
-    <% end %>
   </nav>
 
   <div class="clearfix"></div>

data/app/views/sail/profiles/_profile.html.erb

@@ -1,31 +1,43 @@
-<div id="<%= profile.name %>" class="profile-entry">
-  <% if profile.active? %>
+<div id="<%= profile.name %>" class="profile-entry flex-container space-between">
+  <div>
+    <% if profile.active? %>
     <span class="active-indicator <%= profile.dirty? ? "yellow" : "green" %>"
           title="<%= profile.dirty? ? I18n.t("sail.dirty_profile_tooltip") : I18n.t("sail.clean_profile_tooltip") %>">
       ⬤
     </span>
 
-    <% unless Sail.instrumenter.profile(profile.name).zero? %>
+      <% unless Sail.instrumenter.profile(profile.name).zero? %>
       <span class="errors-indicator" title="<%= I18n.t("sail.profile_error_tooltip") %>">
         <%= I18n.t("sail.profile_errors", count: Sail.instrumenter.profile(profile.name)) %>
       </span>
+      <% end %>
     <% end %>
-  <% end %>
+  </div>
 
-  <span class="entry-name"><%= profile.name.titleize %></span>
+  <div>
+    <span class="entry-name"><%= profile.name.titleize %></span>
+  </div>
 
-  <%= form_tag(profile_path(name: profile.name), method: :delete, remote: true, class: "inline-form") do %>
-    <button class="btn-sail"><%= I18n.t("sail.delete") %></button>
-  <% end %>
+  <div>
+    <div class="flex-container space-between buttons">
+      <div>
+        <%= form_tag(profile_path(name: profile.name), method: :delete, remote: true) do %>
+          <button class="btn-sail"><%= I18n.t("sail.delete") %></button>
+        <% end %>
+      </div>
 
-  <%= form_tag(switch_profile_path(name: profile.name), method: :put, remote: true, class: "inline-form") do %>
-    <button class="btn-sail" type="submit"><%= I18n.t("sail.activate") %></button>
-  <% end %>
+      <div>
+        <%= form_tag(switch_profile_path(name: profile.name), method: :put, remote: true) do %>
+          <button class="btn-sail" type="submit"><%= I18n.t("sail.activate") %></button>
+        <% end %>
+      </div>
 
-  <%= form_tag(profiles_path, method: :post, remote: true, class: "inline-form") do %>
-    <input type="hidden" name="name" value="<%= profile.name %>">
-    <button class="btn-sail" type="submit"><%= I18n.t("sail.save") %></button>
-  <% end %>
-
-  <div class="clearfix"></div>
+      <div>
+        <%= form_tag(profiles_path, method: :post, remote: true) do %>
+          <input type="hidden" name="name" value="<%= profile.name %>">
+          <button class="btn-sail" type="submit"><%= I18n.t("sail.save") %></button>
+        <% end %>
+      </div>
+    </div>
+  </div>
 </div>

data/app/views/sail/settings/_guide_modal.html.erb

@@ -12,7 +12,6 @@
       </div>
     </summary>
 
-    <p>
       <div class="items-container">
         <ul>
           <li><%= I18n.t("sail.by_setting_name_html").html_safe %></li>
@@ -21,8 +20,9 @@
           <li><%= I18n.t("sail.by_stale_html").html_safe %></li>
           <li><%= I18n.t("sail.by_recent_html").html_safe %></li>
         </ul>
+
+        <p><%= I18n.translate("sail.click_title") %></p>
       </div>
-    </p>
   </details>
   <div class="clearfix"></div>
 

data/app/views/sail/settings/_setting.html.erb

@@ -1,68 +1,90 @@
 <% cache setting, expires_in: Sail.configuration.cache_life_span do %>
   <div class="card">
-    <h3 class="title">
-      <%= setting.display_name %>
+    <div class="front">
+      <h3 class="title card-title"><%= setting.display_name %></h3>
+      <hr/>
 
-      <span class="relevancy-score" title="<%= I18n.t("sail.relevancy_tooltip") %>"><%= setting.relevancy %></span>
-      <div class="clearfix"></div>
-    </h3>
-    <hr/>
+      <div class="flex-container-vertical">
+        <div>
+          <div class="flex-container space-between">
+            <div>
+              <%= form_tag(reset_setting_path(name: setting.name), method: :put, remote: true) do %>
+                <button class="refresh-button" title="<%= I18n.t("sail.refresh_tooltip") %>">
+                  <%= image_tag("sail/refresh.svg", alt: I18n.t("sail.refresh_tooltip")) %>
+                </button>
+              <% end %>
+            </div>
 
-    <%= form_tag(reset_setting_path(name: setting.name), method: :put, remote: true) do %>
-      <button class="refresh-button" title="<%= I18n.t("sail.refresh_tooltip") %>">
-        <%= image_tag("sail/refresh.svg", alt: I18n.t("sail.refresh_tooltip")) %>
-      </button>
-    <% end %>
-
-    <div class="label-container">
-      <%= link_to(setting.cast_type, settings_path(query: setting.cast_type), method: :get, class: "tag type-label") %>
-    </div>
+            <div>
+              <span class="relevancy-score" title="<%= I18n.t("sail.relevancy_tooltip") %>"><%= setting.relevancy %></span>
+            </div>
+          </div>
+        </div>
 
-    <% if setting.group.present? %>
-      <div class="label-container">
-        <%= link_to(setting.group, settings_path(query: setting.group), method: :get, class: "tag group-label") %>
-      </div>
-    <% end %>
+        <div>
+          <div class="flex-container justify-end padded">
+            <div>
+              <%= link_to(setting.cast_type, settings_path(query: setting.cast_type), method: :get, class: "tag type-label") %>
+            </div>
 
-    <div class="clear-xs"></div>
+            <% if setting.group.present? %>
+              <div>
+                <%= link_to(setting.group, settings_path(query: setting.group), method: :get, class: "tag group-label") %>
+              </div>
+            <% end %>
 
-    <% if setting.stale? %>
-      <div class="label-container">
-        <%= link_to(I18n.t("sail.stale"), settings_path(query: Sail::ConstantCollection::STALE), method: :get, class: "tag stale-label", title: I18n.t("sail.stale_tooltip", days: Sail.configuration.days_until_stale)) %>
-      </div>
-    <% end %>
+            <% if setting.stale? %>
+              <div>
+                <%= link_to(I18n.t("sail.stale"), settings_path(query: Sail::ConstantCollection::STALE), method: :get, class: "tag stale-label", title: I18n.t("sail.stale_tooltip", days: Sail.configuration.days_until_stale)) %>
+              </div>
+            <% end %>
+          </div>
+        </div>
 
-    <p id="success-<%= setting.name %>" class="notice success">
-      <label><%= I18n.t("sail.updated") %></label>
-    </p>
+        <div>
+          <%= form_tag(setting_path(name: setting.name), method: :put, remote: true) do %>
+            <div class="flex-container space-between align-bottom">
+              <% if setting.boolean? || setting.ab_test? %>
+                <div>
+                  <label class="switch">
+                    <input id="<%= "input_for_#{setting.name}" %>" type="checkbox" name="value" <%= setting.value == "true" ? "checked" : "" %>>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+              <% elsif setting.range? %>
+                <div class="flex-grow">
+                  <input id="<%= "input_for_#{setting.name}" %>" type="range" min="0" max="99" value="<%= setting.value %>" name="value" class="value-slider">
+                </div>
+              <% else %>
+                <div>
+                  <input id="<%= "input_for_#{setting.name}" %>" type="text" name="value" class="value-input" value="<%= setting.value %>"/>
+                </div>
+              <% end %>
 
-    <p id="alert-<%= setting.name %>" class="notice alert">
-      <label><%= I18n.t("sail.failed") %></label>
-    </p>
+              <div class="submit-container">
+                <button id="btn-submit-<%= setting.name %>" type="submit" class="btn-value-submit"><%= I18n.t("sail.save") %></button>
 
-    <p id="description-<%= setting.name %>" class="setting-description" title="<%= setting.description %>">
-      <label for="<%= "input_for_#{setting.name}" %>"><%= setting.description %></label>
-    </p>
+                <span id="success-<%= setting.name %>" class="notice success">
+                  <%= image_tag("sail/checkmark.svg") %>
+                </span>
 
-    <%= form_tag(setting_path(name: setting.name), method: :put, remote: true) do %>
-      <div class="card-body-container">
-        <div class="card-body">
-          <% if setting.boolean? || setting.ab_test? %>
-            <label class="switch">
-              <input id="<%= "input_for_#{setting.name}" %>" type="checkbox" name="value" <%= setting.value == "true" ? "checked" : "" %>>
-              <span class="slider round"></span>
-            </label>
-          <% elsif setting.range? %>
-            <input id="<%= "input_for_#{setting.name}" %>" type="range" min="0" max="99" value="<%= setting.value %>" name="value" class="value-slider">
-          <% elsif setting.date? %>
-            <input id="<%= "input_for_#{setting.name}" %>" type="datetime-local" value="<%= formatted_date(setting) %>" name="value" class="date-picker">
-          <% else %>
-            <input id="<%= "input_for_#{setting.name}" %>" type="text" name="value" class="value-input" value="<%= setting.value %>"/>
+                <span id="alert-<%= setting.name %>" class="notice alert">
+                  <%= image_tag("sail/error.svg") %>
+                </span>
+              </div>
+            </div>
           <% end %>
-
-          <button type="submit" class="btn-value-submit"><%= I18n.t('sail.save') %></button>
         </div>
       </div>
-    <% end %>
+    </div>
+
+    <div class="back">
+      <h3 class="title card-title"><%= setting.display_name %></h3>
+      <hr/>
+
+      <p class="setting-description" title="<%= setting.description %>">
+        <label for="<%= "input_for_#{setting.name}" %>"><%= setting.description %></label>
+      </p>
+    </div>
   </div>
 <% end %>

data/app/views/sail/settings/index.html.erb

@@ -1,16 +1,10 @@
 <div id="settings-dashboard">
-  <% cache [@settings, params[:monitor_mode]] do %>
-    <% unless params[:monitor_mode] == Sail::ConstantCollection::TRUE %>
-      <%= render(partial: "search") %>
-    <% end %>
+  <% cache @settings do %>
+    <%= render(partial: "search") %>
 
     <div id="settings-container">
       <% if @number_of_pages > 0 %>
-        <% if params[:monitor_mode] == Sail::ConstantCollection::TRUE %>
-          <%= render(partial: "setting_minimal", collection: @settings) %>
-        <% else %>
-          <%= render(partial: "setting", collection: @settings) %>
-        <% end%>
+        <%= render(partial: "setting", collection: @settings) %>
       <% else %>
         <h1><%= I18n.t("sail.no_settings") %></h1>
       <% end %>
@@ -22,15 +16,15 @@
       <div class="clearfix"></div>
 
       <div class="page-links">
-        <%= link_to("", settings_path(page: [params[:page].to_i - 1, 0].max, monitor_mode: params[:monitor_mode], query: params[:query]), method: :get, id: "angle-left-link", title: I18n.t("sail.previous_page")) %>
-        <%= link_to(1, settings_path(page: 0, monitor_mode: params[:monitor_mode], query: params[:query]), method: :get, class: params[:page].to_i.zero? || params[:page].blank? ? "active" : "") %>
+        <%= link_to("", settings_path(page: [params[:page].to_i - 1, 0].max, query: params[:query]), method: :get, id: "angle-left-link", title: I18n.t("sail.previous_page")) %>
+        <%= link_to(1, settings_path(page: 0, query: params[:query]), method: :get, class: params[:page].to_i.zero? || params[:page].blank? ? "active" : "") %>
 
         <% if params[:page].to_i - Sail::ConstantCollection::MAX_PAGES > 1 %>
           ●●●
         <% end %>
 
         <% ([params[:page].to_i - Sail::ConstantCollection::MAX_PAGES, 1].max...[@number_of_pages - 1, params[:page].to_i + Sail::ConstantCollection::MAX_PAGES].min).each do |page| %>
-          <%= link_to(page + 1, settings_path(page: page, monitor_mode: params[:monitor_mode], query: params[:query]), method: :get, class: params[:page].to_i == page || params[:page].blank? && page.zero? ? "active" : "") %>
+          <%= link_to(page + 1, settings_path(page: page, query: params[:query]), method: :get, class: params[:page].to_i == page || params[:page].blank? && page.zero? ? "active" : "") %>
         <% end %>
 
         <% if params[:page].to_i + Sail::ConstantCollection::MAX_PAGES < @number_of_pages - 1 %>
@@ -38,10 +32,10 @@
         <% end %>
 
         <% if @number_of_pages > 1 %>
-          <%= link_to(@number_of_pages, settings_path(page: @number_of_pages - 1, monitor_mode: params[:monitor_mode], query: params[:query]), method: :get, class: params[:page].to_i == @number_of_pages - 1 ? "active" : "") %>
+          <%= link_to(@number_of_pages, settings_path(page: @number_of_pages - 1, query: params[:query]), method: :get, class: params[:page].to_i == @number_of_pages - 1 ? "active" : "") %>
         <% end %>
 
-        <%= link_to("", settings_path(page: [params[:page].to_i + 1, @number_of_pages - 1].min, monitor_mode: params[:monitor_mode], query: params[:query]), method: :get, id: "angle-right-link", title: I18n.t("sail.next_page")) %>
+        <%= link_to("", settings_path(page: [params[:page].to_i + 1, @number_of_pages - 1].min, query: params[:query]), method: :get, id: "angle-right-link", title: I18n.t("sail.next_page")) %>
       </div>
     </div>
   <% end %>

data/app/views/sail/settings/update.js.erb

@@ -1,12 +1,12 @@
 var notice = document.getElementById("<%= @successful_update ? "success-#{@setting.name}" : "alert-#{@setting.name}" %>");
-var description = document.getElementById("description-<%= @setting.name %>");
+var submit = document.getElementById("btn-submit-<%= @setting.name %>");
 
-notice.style.display = "block";
-description.style.display = "none";
+submit.style.display = "none";
+notice.style.display = "inline-block";
 
 setTimeout(function () {
     notice.style.display = "none";
-    description.style.display = "block";
+    submit.style.display = "inline-block";
 }, 1500);
 
 if ("<%= @successful_update %>" === "true") {

data/config/locales/en.yml

@@ -4,8 +4,6 @@ en:
     save: SAVE
     activate: ACTIVATE
     delete: DELETE
-    updated: Updated!
-    failed: Failed!
     search_placeholder: Setting name, group, cast type, stale or recent x
     search_tooltip: "When searching for recently updated settings, x is the number of hours since the update (e.g.: recent 2)"
     main_app: Main app
@@ -33,6 +31,7 @@ en:
     by_cast_type_html: "<b>By cast type:</b> will find all settings with the same type (must be exact match)"
     by_stale_html: "<b>By stale:</b> will find settings that are stale (haven't been updated recently)"
     by_recent_html: "<b>By recent:</b> will find settings updated in the last X hours (e.g.: recent 50)"
+    click_title: Click a setting's title to view its description.
     profiles_can_be_used: Profiles can be used to configure many states of settings. They save the values of all settings in a given moment.
     profile_configuring: Configure settings as desired and create a new profile. Activate profiles to change the value of all settings at once.
     relevancy_score: Relevancy Score
@@ -40,8 +39,6 @@ en:
     available_groups_and_types: Available groups and types
     groups_are: "The groups currently used are:"
     types_are: "The cast types currently used are:"
-    regular_mode: Regular mode
-    monitor_mode: Monitor mode
     how_to_find_settings: How to find settings you are looking for
     how_to_profiles: How to organize your settings in profiles
     how_to_relevancy_score: What is the relevancy score and how to use it

data/lib/generators/sail/install/install_generator.rb

@@ -33,6 +33,10 @@ module Sail
                            migration_version: migration_version
       end
 
+      def create_config_file
+        template "sail.yml", "config/sail.yml"
+      end
+
       def migration_version
         "[#{Rails::VERSION::MAJOR}.#{Rails::VERSION::MINOR}]"
       end

data/lib/generators/sail/install/templates/sail.yml.tt

@@ -0,0 +1,5 @@
+name_of_setting:
+  description: Describe what the setting does
+  value: 'true'
+  cast_type: boolean
+  group: feature_flags

data/lib/sail/constant_collection.rb

@@ -17,8 +17,7 @@ module Sail
     STALE = "stale"
     RECENT = "recent"
     FIELDS_FOR_SORT = %w[name updated_at cast_type group].freeze
-    SETTINGS_PER_PAGE = 8
-    MINIMAL_SETTINGS_PER_PAGE = 24
+    SETTINGS_PER_PAGE = 20
     INPUT_DATE_FORMAT = "%Y-%m-%dT%H:%m:%S"
     MAX_PAGES = 5
   end

data/lib/sail/engine.rb

@@ -24,8 +24,8 @@ module Sail
 
     initializer "sail.assets.precompile" do |app|
       app.config.assets.precompile += %w[sail/refresh.svg sail/sort.svg sail/angle-left.svg
-                                         sail/angle-right.svg sail/link.svg sail/cog.svg sail/application.css
-                                         sail/application.js]
+                                         sail/angle-right.svg sail/link.svg sail/cog.svg sail/checkmark.svg
+                                         sail/error.svg sail/application.css sail/application.js]
     end
 
     initializer "sail" do

data/lib/sail/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Sail
-  VERSION = "3.4.0"
+  VERSION = "3.5.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sail
 version: !ruby/object:Gem::Version
-  version: 3.4.0
+  version: 3.5.0
 platform: ruby
 authors:
 - Vinicius Stock
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-26 00:00:00.000000000 Z
+date: 2020-05-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: fugit
@@ -262,7 +262,9 @@ files:
 - app/assets/config/sail_manifest.js
 - app/assets/images/sail/angle-left.svg
 - app/assets/images/sail/angle-right.svg
+- app/assets/images/sail/checkmark.svg
 - app/assets/images/sail/cog.svg
+- app/assets/images/sail/error.svg
 - app/assets/images/sail/link.svg
 - app/assets/images/sail/refresh.svg
 - app/assets/images/sail/sort.svg
@@ -287,7 +289,6 @@ files:
 - app/views/sail/settings/_profiles_modal.html.erb
 - app/views/sail/settings/_search.html.erb
 - app/views/sail/settings/_setting.html.erb
-- app/views/sail/settings/_setting_minimal.html.erb
 - app/views/sail/settings/_sort_menu.html.erb
 - app/views/sail/settings/index.html.erb
 - app/views/sail/settings/update.js.erb
@@ -297,6 +298,7 @@ files:
 - lib/generators/sail/install/install_generator.rb
 - lib/generators/sail/install/templates/create_sail_profiles.rb
 - lib/generators/sail/install/templates/create_sail_settings.rb
+- lib/generators/sail/install/templates/sail.yml.tt
 - lib/generators/sail/update/templates/add_group_to_sail_settings.rb
 - lib/generators/sail/update/update_generator.rb
 - lib/sail.rb
@@ -345,7 +347,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.3
 signing_key: 
 specification_version: 4
 summary: Sail is a lightweight Rails engine that brings an admin panel for managing

data/app/views/sail/settings/_setting_minimal.html.erb

@@ -1,6 +0,0 @@
-<% cache setting_minimal, expires_in: Sail.configuration.cache_life_span do %>
-  <div class="card minimal">
-    <h2><%= setting_minimal.display_name %></h2>
-    <label><%= setting_minimal.value %></label>
-  </div>
-<% end %>