sail 3.2.4 → 3.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 40fb8e4bc4918c09d226baa2e97666dc61cf6734967538bb62f61d12391c5024
-  data.tar.gz: 53903455199dbf9fd1d310c50dd538856880cb2a740e11576c929609312099ae
+  metadata.gz: 7ed99e4dc6a1bed5c7a9589ab92f2c6f949a3edd4736f51d8cc9a7d9db3371b5
+  data.tar.gz: f022be75af316c34c01921332e29ebdaf458e4d3bb479bc6d64e57922b26e0a1
 SHA512:
-  metadata.gz: bb1365f1162a6b41ef8a57cc54b15f25e37dfa4dde08eb1a556dde193f0bf33600740c72f4e69e652ca4a2c6666bedc564d15af320f010cde018a73cf0d530c4
-  data.tar.gz: 6002b3b8f33133fd9b0181b9cc52b174e3533f9e28aa493a70ab52194415e44877f017a003a3488641cd673b20d06fce4ca7c8bb04db2be9288a4c5f7ececa39
+  metadata.gz: 947727892ed9b5b32b627e9a09e6c4de4d0834e49cd6103eddafe562b4746dae304cdce768655bd20584238c8121e1f0f35f27a7539ee9ad7d9d6529e2ab28d5
+  data.tar.gz: 23f380a2e8a21b36b84f468e6828bd189a3d91f12cca6f1e43985e10573d24cd419d72ebb8545689f271953938c62167382723fa458486f3c51ef8f5bd006dc7

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2019 Vinicius Stock
+Copyright (c) 2017-2021 Vinicius Stock
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -1,6 +1,6 @@
-![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)
 
-[![Maintainability](https://api.codeclimate.com/v1/badges/00ed468acd8b93f66478/maintainability)](https://codeclimate.com/github/vinistock/sail/maintainability) [![Build Status](https://travis-ci.org/vinistock/sail.svg?branch=master)](https://travis-ci.org/vinistock/sail) [![Test Coverage](https://codeclimate.com/github/vinistock/sail/badges/coverage.svg)](https://codeclimate.com/github/vinistock/sail/coverage) [![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)
+[![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)
 
 # Sail
 
@@ -139,10 +139,10 @@ All possible cast types as well as detailed examples of usage can be found in th
 # Get setting value with appropriate cast type
 #
 # Returns setting value with cast or yields it if passed a block
-Sail.get("name")
+Sail.get(:name)
 
 # This usage will return the result of the block
-Sail.get("name") do |setting_value|
+Sail.get(:name) do |setting_value|
   my_code(setting_value)
 end
 
@@ -153,15 +153,15 @@ end
 
 # For example, this will ignore ExampleError, but any other error raised will increase
 # the count until the setting "name" is reset. 
-Sail.get("name", expected_errors: [ExampleError]) do |value|
+Sail.get(:name, expected_errors: [ExampleError]) do |value|
   code_that_can_raise_example_error(value) 
 end
 
 # Set setting value
-Sail.set("name", "value")
+Sail.set(:name, "value")
 
 # Reset setting value (requires the sail.yml file!)
-Sail.reset("name")
+Sail.reset(:name)
 
 # Switcher
 # This method will take three setting names as parameters
@@ -209,6 +209,47 @@ Response
 200 OK
 ```
 
+### GraphQL
+
+For GraphQL APIs, types and mutations are defined for convenience. Include Sail's Graphql modules to get the appropriate fields.
+
+```ruby
+# app/graphql/types/query_type.rb
+
+module Types
+  class QueryType < Types::BaseObject
+    include Sail::Graphql::Types
+  end
+end
+
+# app/graphql/types/mutation_type.rb
+
+module Types
+  class MutationType < Types::BaseObject
+    include Sail::Graphql::Mutations
+  end
+end
+```
+
+To query settings via GraphQL, use the following pattern.
+
+```graphql
+query {
+    sailGet(name: "my_setting")
+    sailSwitcher(positive: "positive_case_setting", negative: "negative_case_setting", throttledBy: "throttle_setting")
+}
+
+mutation {
+    sailSet(name: "my_setting", value: "value") {
+        success
+    }
+    
+    sailProfileSwitch(name: "my_profile") {
+        success
+    }
+}
+```
+
 ## Localization
 
 Sail's few strings are all localized for English in [en.yml], making it easy to create translations for the desired languages.

data/Rakefile

@@ -20,8 +20,8 @@ require "rspec/core/rake_task"
 RSpec::Core::RakeTask.new(spec: "app:db:test:prepare")
 task default: :spec
 
-task :all do
-  system("brakeman --no-pager && rake && rubocop --auto-correct && rails_best_practices")
+task all: :environment do
+  system("brakeman --no-pager && rake && rubocop -A")
 end
 
-system("cd ./spec/dummy; RAILS_ENV=test rails db:environment:set; cd ../..") if Rails::VERSION::MAJOR >= 5
+system("cd ./spec/dummy; RAILS_ENV=test rails db:environment:set; cd ../..")

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/reset.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="undo" class="svg-inline--fa fa-undo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></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/{application.js.erb → application.js}

@@ -10,14 +10,5 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-<%
-if Rails::VERSION::MAJOR >= 5
-  require_asset("rails-ujs")
-else
-  require_asset("jquery")
-  require_asset("jquery_ujs")
-end
-
-require_asset("settings")
-%>
+//= require rails-ujs
 //= require_tree .

data/app/assets/javascripts/{settings.js.erb → sail/settings.js}

@@ -4,9 +4,11 @@
 Search related functions
 */
 
-let submitTimer, submitInterval, intervals = 1;
+let submitTimer,
+    submitInterval,
+    intervals = 1;
 let queryElement = document.getElementById("query");
-let autoSearchEnabled = "<%= Sail.configuration.enable_search_auto_submit %>";
+let autoSearchEnabled = document.getElementById("auto_search_enabled").value;
 let progress = document.getElementById("search-submit-progress");
 let sortMenu = document.getElementById("sort-menu");
 let orderButton = document.getElementById("btn-order");
@@ -16,7 +18,10 @@ let dashboardBody = document.getElementById("settings-dashboard");
 let guideButton = document.getElementById("btn-guide");
 let guide = document.getElementById("guide-modal");
 let guideSections = guide.getElementsByTagName("summary");
-var i;
+let cardTitles = document.getElementsByClassName("card-title");
+let inputs = document.getElementsByName("value");
+const initialSettingValues = {};
+let i;
 
 function submitSearch() {
     document.getElementById("search-form").submit();
@@ -63,12 +68,23 @@ function toggleModal(modal) {
 function handleGenericClick(event) {
     let target = event.target;
 
-    if (orderButton !== null && (target === sortMenu || sortMenu.contains(target) || target === orderButton || orderButton.contains(target))) {
+    if (
+        orderButton !== null &&
+        (target === sortMenu ||
+            sortMenu.contains(target) ||
+            target === orderButton ||
+            orderButton.contains(target))
+    ) {
         return;
     }
 
-    if (profilesButton !== null && (target === profilesMenu || profilesMenu.contains(target) || target === profilesButton ||
-        profilesButton.contains(target))) {
+    if (
+        profilesButton !== null &&
+        (target === profilesMenu ||
+            profilesMenu.contains(target) ||
+            target === profilesButton ||
+            profilesButton.contains(target))
+    ) {
         return;
     }
 
@@ -98,10 +114,14 @@ if (queryElement !== null) {
     }
 
     orderButton.addEventListener("click", toggleSortMenu);
-    profilesButton.addEventListener("click", function () { toggleModal(profilesMenu) });
+    profilesButton.addEventListener("click", function () {
+        toggleModal(profilesMenu);
+    });
 }
 
-guideButton.addEventListener("click", function () { toggleModal(guide) });
+guideButton.addEventListener("click", function () {
+    toggleModal(guide);
+});
 document.body.addEventListener("click", handleGenericClick);
 document.addEventListener("keydown", closeAllModals);
 
@@ -116,16 +136,21 @@ function refreshClick() {
 
     if (!button.className.includes("active")) {
         button.classList.add("active");
-        setTimeout(function() { button.classList.remove("active"); }, 500);
+        setTimeout(function () {
+            button.classList.remove("active");
+        }, 500);
     }
 }
 
-for(i = 0; i < refreshButtons.length; i++) refreshButtons[i].addEventListener("click", 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++) {
+    for (i = 0; i < guideSections.length; i++) {
         if (this.parentElement.open) {
             guideSections[i].parentElement.style.display = "block";
         } else if (this !== guideSections[i]) {
@@ -134,4 +159,47 @@ function sectionClick() {
     }
 }
 
-for(i = 0; i < guideSections.length; i++) guideSections[i].addEventListener("click", 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);
+
+function enableSubmitButton() {
+    const name = this.id.replace("input_for_", "");
+    const submitId = this.id.replace("input_for_", "btn-submit-");
+    const submit = document.getElementById(submitId);
+    const value = this.type === "checkbox" ? this.checked : this.value;
+
+    if (value === initialSettingValues[name]) {
+        submit.classList.remove("orange");
+        submit.disabled = true;
+    } else {
+        submit.classList.add("orange");
+        submit.disabled = false;
+    }
+}
+
+for (i = 0; i < inputs.length; i++) {
+    if (inputs[i].type === "text") {
+        inputs[i].addEventListener("input", enableSubmitButton);
+    } else {
+        inputs[i].addEventListener("change", enableSubmitButton);
+    }
+
+    if (inputs[i].type === "checkbox") {
+        initialSettingValues[inputs[i].id.replace("input_for_", "")] =
+            inputs[i].checked;
+    } else {
+        initialSettingValues[inputs[i].id.replace("input_for_", "")] =
+            inputs[i].value;
+    }
+}

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

@@ -0,0 +1,419 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+
+:root {
+  --main-black: #0B0C10;
+  --dark-green: #306B34;
+  --light-green: #44AF69;
+  --cerulean: #4484CE;
+  --aluminium: #D9D9D9;
+  --dark-aluminium: #8D8D8D;
+  --darker-aluminium: #666666;
+  --light-yellow: #F9CF00;
+  --tangerine: #F19F4D;
+  --dark-tangerine: #C86C10;
+  --lead: #003049;
+  --bright-red: #E63946;
+}
+
+@-webkit-keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+* {
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.title {
+  font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  background-color: var(--cerulean);
+}
+
+.clearfix {
+  clear: both;
+}
+
+#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);
+}
+
+#nav-bar .home-link {
+  -webkit-transition : color .25s ease-in;
+  -moz-transition : color .25s ease-in;
+  -o-transition : color .25s ease-in;
+  transition : color .25s ease-in;
+  color: white;
+  text-decoration: none;
+}
+
+#nav-bar .home-link:visited {
+  color: white;
+}
+
+#nav-bar .home-link:hover {
+  color: var(--tangerine);
+}
+
+#nav-bar .home-link .title {
+  margin: 0;
+  text-align: center;
+  font-size: 3rem;
+  padding: .75rem 0;
+}
+
+#nav-bar .nav-button {
+  float: right;
+  position: relative;
+  bottom: 50px;
+  font-size: 20px;
+  outline: none;
+  background: transparent;
+  border: none;
+  -webkit-transition : color .25s ease-in;
+  -moz-transition : color .25s ease-in;
+  -o-transition : color .25s ease-in;
+  transition : color .25s ease-in;
+  color: white;
+  text-decoration: none;
+}
+
+#nav-bar .nav-button:visited {
+  color: white;
+}
+
+#nav-bar .nav-button:hover {
+  color: var(--tangerine);
+}
+
+#nav-bar .nav-button:hover {
+  cursor: pointer;
+}
+
+#nav-bar #btn-guide {
+  right: 70px;
+  padding: 0;
+  margin: 0;
+}
+
+@media (min-width: 1200px) {
+  #nav-bar #btn-guide {
+    right: 110px;
+  }
+}
+
+@media (max-width: 991px) {
+  #nav-bar .nav-button {
+    display: none;
+  }
+}
+
+#pagination {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+#pagination a {
+  color: var(--main-black);
+  text-decoration: none;
+  background-color: white;
+  padding: 20px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  font-weight: bold;
+}
+
+#pagination a.active {
+  background-color: var(--tangerine);
+  color: white;
+}
+
+#pagination .page-links a {
+  font-size: 1.2rem;
+  margin: 0 2px 0 2px;
+}
+
+#pagination .page-links #angle-left-link {
+  background: white url(<%= asset_url("sail/angle-left.svg") %>) center no-repeat;
+  margin-right: 6px;
+  padding: 20px 24px 20px 24px;
+}
+
+#pagination .page-links #angle-right-link {
+  background: white url(<%= asset_url("sail/angle-right.svg") %>) center no-repeat;
+  margin-left: 6px;
+  padding: 20px 24px 20px 24px;
+}
+
+#profiles-modal, #guide-modal {
+  position: fixed;
+  height: 70%;
+  width: 70%;
+  top: 15%;
+  left: 15%;
+  background-color: white;
+  z-index: 1;
+  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;
+  border-radius: 5px;
+  -webkit-animation: fadeIn 0.5s;
+  animation: fadeIn 0.5s;
+  padding: 15px;
+  overflow: scroll;
+}
+
+@media (max-width: 1200px) {
+  #profiles-modal, #guide-modal {
+    width: 90%;
+    left: 3%;
+  }
+}
+
+@media (max-width: 767px) {
+  #profiles-modal, #guide-modal {
+    width: 90%;
+    left: 1%;
+  }
+}
+
+#profiles-modal {
+  text-align: center;
+}
+
+#profiles-modal h1 {
+  margin-left: 35px;
+}
+
+#profiles-modal h1 #response-message {
+  float: right;
+  font-size: 18px;
+  margin-right: 3px;
+  position: relative;
+  top: 5px;
+  min-width: 50px;
+  min-height: 20px;
+  color: var(--dark-green);
+}
+
+#profiles-modal .profile-entry {
+  padding: 10px;
+  font-size: 20px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: 15px;
+  -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;
+}
+
+#profiles-modal .profile-entry:focus,
+#profiles-modal .profile-entry:hover {
+  border-color: var(--tangerine);
+  outline: none;
+}
+
+#profiles-modal .profile-entry button {
+  padding: 10px;
+}
+
+#profiles-modal .profile-entry .entry-name {
+  position: relative;
+  top: 10px;
+}
+
+#profiles-modal .buttons button {
+  margin: 0 5px 0 5px;
+}
+
+@media (max-width: 767px) {
+  #profiles-modal .profile-entry .entry-name {
+    width: 90%;
+    margin-bottom: 15px;
+  }
+
+  #profiles-modal #new-profile-input {
+    width: 70%;
+  }
+}
+
+#profiles-modal .profile-entry .active-indicator {
+  position: relative;
+  top: 7px;
+}
+
+#profiles-modal .profile-entry .active-indicator.yellow {
+  color: var(--light-yellow);
+}
+
+#profiles-modal .profile-entry .active-indicator.green {
+  color: var(--light-green);
+}
+
+#profiles-modal .profile-entry .errors-indicator {
+  position: relative;
+  top: 9px;
+  left: 15px;
+  font-style: italic;
+  color: var(--dark-aluminium);
+}
+
+#profiles-modal #new-profile-input {
+  height: 100%;
+  border: none;
+  font-size: 20px;
+  width: 90%;
+  position: relative;
+  top: 10px;
+  text-overflow: ellipsis;
+}
+
+#profiles-modal #new-profile-input:focus {
+  outline: none;
+}
+
+@media (max-width: 1200px) {
+  #profiles-modal #new-profile-input {
+    width: 88%;
+  }
+}
+
+#guide-modal h1 {
+  text-align: center;
+}
+
+#guide-modal details {
+  padding: 15px;
+}
+
+#guide-modal details summary {
+  font-size: 20px;
+  outline: none;
+  border-bottom: 1px solid transparent;
+  -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;
+}
+
+#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);
+  outline: none;
+}
+
+#guide-modal details summary div {
+  padding-bottom: 10px;
+}
+
+#guide-modal details summary label {
+  color: var(--dark-aluminium);
+  font-size: 18px;
+  float: right;
+}
+
+#guide-modal details summary img {
+  display: none;
+}
+
+#guide-modal details summary::-webkit-details-marker,
+#guide-modal details summary::marker {
+  display: none;
+  font-size: 0;
+}
+
+#guide-modal details summary:hover {
+  cursor: pointer;
+}
+
+#guide-modal details summary:focus {
+  border-color: transparent;
+}
+
+#guide-modal details[open] p p ~ * {
+  -webkit-animation: fadeIn 0.5s;
+  animation: fadeIn 0.5s;
+}
+
+#guide-modal details[open] summary {
+  border-bottom: 1px solid var(--tangerine);
+}
+
+#guide-modal details[open] summary div {
+  font-size: 28px;
+  text-align: center;
+}
+
+#guide-modal details[open] summary label {
+  display: none;
+}
+
+#guide-modal details[open] summary img {
+  display: block;
+  height: 20px;
+  width: 20px;
+  float: left;
+  position: relative;
+  top: 10px;
+}
+
+#guide-modal details p, .items-container {
+  text-align: center;
+  font-size: 20px;
+}
+
+#guide-modal details p ul,
+.items-container ul {
+  list-style-type: none;
+}
+
+#guide-modal details p ul li,
+.items-container ul li {
+  padding: 10px;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}