Merge pull request fs#162 from fs/html-views

HTML / CSS / JS (RoR views)

.github/workflows/main.yml

@@ -1,6 +1,6 @@
 ---
 name: main
-on: 
+on:
   push:
     branches: [ "master" ]
   pull_request:
@@ -35,6 +35,12 @@ jobs:
       - name: Run rubocop
         run: bin/rubocop
 
+      - name: Run slim linter
+        run: bin/slim-lint app/views
+
+      - name: Run scss linter
+        run: bin/scss-lint app/assets/stylesheets
+
       - name: Run tests
         run: bin/rspec
 ...

.scss-lint.yml

@@ -0,0 +1,12 @@
+scss_files: 'app/assets/stylesheets/**/*.scss'
+
+linters:
+  BorderZero:
+    enabled: false
+
+  Indentation:
+    severity: warning
+    width: 2
+
+  PropertySortOrder:
+    enabled: false

.slim-lint.yml

@@ -0,0 +1,36 @@
+linters:
+  LineLength:
+    max: 120
+
+  RedundantDiv:
+    enabled: false
+
+  RuboCop:
+    enabled: true
+    # These cops are incredibly noisy since the Ruby we extract from Slim
+    # templates isn't well-formatted, so we ignore them.
+    ignored_cops:
+      - Layout/ArgumentAlignment
+      - Layout/HashAlignment
+      - Layout/IndentationWidth
+      - Layout/LineLength
+      - Layout/TrailingEmptyLines
+      - Lint/BlockAlignment
+      - Lint/EndAlignment
+      - Lint/Void
+      - Metrics/BlockLength
+      - Style/AlignParameters
+      - Style/BlockNesting
+      - Style/FileName
+      - Style/FirstParameterIndentation
+      - Style/FrozenStringLiteralComment
+      - Style/IfUnlessModifier
+      - Style/IndentationConsistency
+      - Style/IndentationWidth
+      - Style/Next
+      - Style/TrailingBlankLines
+      - Style/TrailingWhitespace
+      - Style/WhileUntilModifier
+      - Style/NestedTernaryOperator
+      - Style/StringLiterals
+      - Style/QuotedSymbols

Gemfile

@@ -16,6 +16,9 @@ gem "pg", "~> 1.1"
 gem "puma", "~> 5.0"
 # Use SCSS for stylesheets
 gem "sass-rails", ">= 6"
+gem "scss_lint"
+gem "slim_lint"
+gem "slim-rails"
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
 gem "webpacker", "~> 5.0"
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

Gemfile.lock

@@ -278,6 +278,11 @@ GEM
     ruby-next-core (0.15.3)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
@@ -288,6 +293,8 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
+    scss_lint (0.60.0)
+      sass (~> 3.5, >= 3.5.5)
     selenium-webdriver (4.9.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -298,6 +305,16 @@ GEM
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
       redis-client (>= 0.14.0)
+    slim (5.2.0)
+      temple (~> 0.10.0)
+      tilt (>= 2.1.0)
+    slim-rails (3.6.3)
+      actionpack (>= 3.1)
+      railties (>= 3.1)
+      slim (>= 3.0, < 6.0, != 5.0.0)
+    slim_lint (0.24.0)
+      rubocop (>= 1.0, < 2.0)
+      slim (>= 3.0, < 6.0)
     spring (4.1.1)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
@@ -306,6 +323,7 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    temple (0.10.3)
     thor (1.2.2)
     tilt (2.3.0)
     timeout (0.4.0)
@@ -373,8 +391,11 @@ DEPENDENCIES
   rubocop-rake
   rubocop-thread_safety
   sass-rails (>= 6)
+  scss_lint
   selenium-webdriver (>= 4.0.0.rc1)
   sidekiq
+  slim-rails
+  slim_lint
   spring
   turbolinks (~> 5)
   tzinfo-data

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,7 @@
+$black: #222;
+$white: #fff;
+$red: #f00;
+$green: #008000;
+$grey: #ccc;
+
+$header-bg: #f1f1f1;

app/assets/stylesheets/application.scss

@@ -1,30 +1,12 @@
-.center {
-  text-align: center;
-}
 
-.record {
-  border: 1px solid #000000;
-  padding: 10px;
-  margin-bottom: 10px;
-}
 
-.flash-alert {
-  color: red;
-}
+// Bootstrap
+@import 'bootstrap/scss/bootstrap';
 
-.flash-notice {
-  color: green;
-}
+@import 'variables';
+@import 'reset';
 
-.sort_links {
-  place-items: center;
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.link {
-  font-family: "Courier New";
-  margin-left: auto;
-  margin-right: auto;
-}
+// Custom styles
+@import 'base';
+@import 'header';
+@import 'form';

app/assets/stylesheets/base.scss

@@ -0,0 +1,45 @@
+.flash-alert {
+  color: $red;
+}
+
+.flash-notice {
+  color: $green;
+}
+
+.sort-links {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  font-size: .75rem;
+}
+
+.link {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.content {
+  width: 100%;
+  padding: 1rem 2rem;
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.table-actions {
+  display: flex;
+  justify-content: end;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

app/assets/stylesheets/form.scss

@@ -0,0 +1,15 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 40rem;
+
+  &__field {
+    width: 100%;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: end;
+  }
+}

app/assets/stylesheets/header.scss

@@ -0,0 +1,10 @@
+.header {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  align-items: center;
+
+  padding: 2rem;
+  background: $header-bg;
+  border-bottom: 1px solid $grey;
+}

app/assets/stylesheets/reset.scss

@@ -0,0 +1,40 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
+  vertical-align: baseline;
+}
+
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+
+  &::before,
+  &::after {
+    content: '';
+  }
+}

app/javascript/components/script.js

@@ -0,0 +1,44 @@
+import _ from 'lodash';
+
+class MyFunc {
+  constructor($el) {
+    this.$el = $el;
+    this.list = $el.querySelector('.js-projects-list');
+    this.items = this.$el.querySelectorAll('.js-item');
+
+    this.sortAscButton = this.$el.querySelector('.js-sort-by-title-asc');
+    this.sortDescButton = this.$el.querySelector('.js-sort-by-title-desc');
+
+    this.formattedItems = Array.from(this.items).map((item) => ({
+      id: JSON.parse(item.getAttribute('data-id')),
+      name: item.getAttribute('data-name'),
+      node: item,
+    }));
+
+    this.bindEvents(this.formattedItems);
+  }
+
+  bindEvents() {
+    this.sortAscButton.addEventListener('click', this.onSortByTitleASC);
+    this.sortDescButton.addEventListener('click', this.onSortByTitleDESC);
+  }
+
+  onSortByTitleASC = () => {
+    const sorteItemsByTitle = _.orderBy(this.formattedItems, ['name'], ['asc']);
+
+    sorteItemsByTitle.forEach((item) => this.list.appendChild(item.node));
+    this.sortAscButton.classList.add('d-none');
+    this.sortDescButton.classList.remove('d-none');
+  }
+
+  onSortByTitleDESC = () => {
+    const sorteItemsByTitle = _.orderBy(this.formattedItems, ['name'], ['desc']);
+
+    sorteItemsByTitle.forEach((item) => this.list.appendChild(item.node));
+
+    this.sortDescButton.classList.add('d-none');
+    this.sortAscButton.classList.remove('d-none');
+  }
+}
+
+export default MyFunc;

app/javascript/packs/application.js

@@ -8,6 +8,16 @@ import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
 
+import "bootstrap"
+
+import MyFunc from 'components/script'
+
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
+
+window.addEventListener("load", (event) => {
+  Array.from(document.querySelectorAll('.js-projects')).forEach(($el) => {
+    new MyFunc($el);
+  });
+});