Commit 8df525e

mo <mo@mokhan.ca>
2018-12-08 18:42:36
start switch to bulma
main
1 parent b099850
Changed files (17)
app
javascript
packs
application.js
styles
application.scss
views
application
_navbar.html.erb
errors
bad_request.html.erb
forbidden.html.erb
not_found.html.erb
my
audits
index.html.erb
clients
index.html.erb
new.html.erb
dashboards
show.html.erb
mfas
new.html.erb
sessions
index.html.erb
registrations
new.html.erb
sessions
new.html.erb
bin
update
package.json
yarn.lock
app/javascript/packs/application.js
@@ -7,7 +7,6 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-import 'bootstrap/dist/js/bootstrap';
 import { Application } from 'stimulus';
 import { definitionsFromContext } from 'stimulus/webpack-helpers';
 import LocalTime from 'local-time';
app/javascript/styles/application.scss
@@ -1,4 +1,4 @@
-@import '~bootstrap/scss/bootstrap';
+@import '~bulma/bulma';
 
 @keyframes spinner {
   0% { transform: rotate(0deg); }
app/views/application/_navbar.html.erb
@@ -1,19 +1,37 @@
 <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <%= link_to my_dashboard_path, class: 'navbar-brand' do %>
-      <img src="<%= asset_pack_path("images/logo.png") %>" width="50" />
-    <% end %>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-      <div class="navbar-nav">
-        <%= link_to t(".home"), my_dashboard_path, class: 'nav-item nav-link active' %>
-        <%= link_to t(".clients"), my_clients_path, class: 'nav-item nav-link' %>
-        <%= link_to t(".mfa"), my_mfa_path, class: 'nav-item nav-link' %>
-        <%= link_to t(".sessions"), my_sessions_path, class: 'nav-item nav-link' %>
-        <%= link_to t(".audits"), my_audits_path, class: 'nav-item nav-link' %>
-        <%= button_to t(".logout"), session_path, method: :delete, class: 'nav-item nav-link' %>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <%= link_to my_dashboard_path, class: 'navbar-item' do %>
+        <img src="<%= asset_pack_path("images/logo.png") %>" height="28" />
+      <% end %>
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div id="navbarBasicExample" class="navbar-menu">
+      <div class="navbar-start">
+        <%= link_to t(".home"), my_dashboard_path, class: 'navbar-item' %>
+        <%= link_to t(".documentation"), '/doc/', class: 'navbar-item' %>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link"> More </a>
+          <div class="navbar-dropdown">
+            <%= link_to t(".clients"), my_clients_path, class: 'navbar-item' %>
+            <%= link_to t(".mfa"), my_mfa_path, class: 'navbar-item' %>
+            <%= link_to t(".sessions"), my_sessions_path, class: 'navbar-item' %>
+            <%= link_to t(".audits"), my_audits_path, class: 'navbar-item' %>
+            <hr class="navbar-divider">
+            <a class="navbar-item" href="https://github.com/saml-kit/proof/issues/new" target="_blank"> Report an issue </a>
+          </div>
+        </div>
+      </div>
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <%= button_to t(".logout"), session_path, method: :delete, class: 'button is-danger' %>
+          </div>
+        </div>
       </div>
     </div>
   </nav>
app/views/errors/bad_request.html.erb
@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column">
       <h1><%= t('.title') %></h1>
     </div>
   </div>
app/views/errors/forbidden.html.erb
@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column">
       <h1><%= t('.title') %></h1>
       <% if @model %>
         <ul class="list-unstyled">
app/views/errors/not_found.html.erb
@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column">
       <h1><%= t('.title') %></h1>
     </div>
   </div>
app/views/my/audits/index.html.erb
@@ -1,8 +1,9 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column content">
       <h1><%= t('.title') %></h1>
-      <table class="table">
+
+      <table class="table is-bordered is-narrow is-hoverable is-striped is-fullwidth">
         <thead>
           <th><%= t('.action') %></th>
           <th><%= t('.auditable') %></th>
@@ -18,7 +19,7 @@
           <tr>
             <td><%= audit.action %></td>
             <td><%= audit&.auditable&.class %></td>
-            <td><%= audit.audited_changes %></td>
+            <td><%= JSON.pretty_generate(audit.audited_changes) %></td>
             <td><%= audit.associated&.flipper_id %></td>
             <td><%= audit.user&.email %></td>
             <td><%= audit.version %></td>
app/views/my/clients/index.html.erb
@@ -1,9 +1,9 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column content">
       <h1><%= t('.title') %></h1>
-      <%= link_to t(".new"), new_my_client_path, class: 'btn' %>
-      <table class="table">
+      <%= link_to t(".new"), new_my_client_path, class: 'button is-link' %>
+      <table class="table is-bordered is-narrow is-hoverable is-striped is-fullwidth">
         <thead>
           <th><%= t('.client_id') %></th>
           <th><%= t('.name') %></th>
app/views/my/clients/new.html.erb
@@ -1,20 +1,30 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns is-centered">
+    <div class="column is-half content">
       <h1><%= t('.title') %></h1>
 
       <div data-controller="clients--new">
         <%= form_for @client, url: my_clients_path, method: :post do |form| %>
-          <div class="form-group">
+          <div class="field">
             <%= form.label :name %>
-            <%= form.text_field :name, data: { target: 'clients--new.name' } %>
+            <div class="control">
+              <%= form.text_field :name, class: 'input', data: { target: 'clients--new.name' } %>
+            </div>
           </div>
-          <div class="form-group">
+          <div class="field">
             <%= form.label :redirect_uris %>
-            <%= form.url_field :redirect_uris, data: { target: 'clients--new.redirect_uris' }, multiple: true %>
+            <div class="control">
+              <%= form.url_field :redirect_uris, class: 'input', data: { target: 'clients--new.redirect_uris' }, multiple: true %>
+            </div>
+          </div>
+          <div class="field is-grouped is-grouped-right">
+            <div class="control">
+              <%= form.submit t(".enable"), class: 'button is-primary', data: { disable_with: 'Saving…' } %>
+            </div>
+            <div class="control">
+              <%= link_to t(".cancel"), my_clients_path, class: 'button' %>
+            </div>
           </div>
-          <%= form.submit t(".enable"), class: 'btn btn-primary', data: { disable_with: 'Saving…' } %>
-          <%= link_to t(".cancel"), my_clients_path, class: 'btn' %>
         <% end %>
       </div>
     </div>
app/views/my/dashboards/show.html.erb
@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column content is-full">
       <h1><%= t('.title') %></h1>
       <table class="table">
         <thead>
app/views/my/mfas/new.html.erb
@@ -1,7 +1,8 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns is-centered">
+    <div class="column is-half content">
       <h1><%= t('.title') %></h1>
+
       <div data-controller="mfa--setup">
         <canvas id="canvas" data-target="mfa--setup.canvas"></canvas>
         <p><%= t('.secret') %> <%= current_user.mfa.secret %></p>
@@ -9,8 +10,14 @@
 
         <%= form_for current_user, url: my_mfa_path, method: :post do |form| %>
           <%= form.hidden_field :mfa_secret, data: { target: 'mfa--setup.secret' } %>
-          <%= form.submit t(".enable"), class: 'btn btn-primary', data: { disable_with: 'Saving…' } %>
-          <%= link_to t(".cancel"), my_dashboard_path, class: 'btn' %>
+          <div class="field is-grouped is-grouped-right">
+            <div class="control">
+              <%= form.submit t(".enable"), class: 'button is-primary', data: { disable_with: 'Saving…' } %>
+            </div>
+            <div class="control">
+              <%= link_to t(".cancel"), my_dashboard_path, class: 'button' %>
+            </div>
+          </div>
         <% end %>
       </div>
     </div>
app/views/my/sessions/index.html.erb
@@ -1,7 +1,8 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns">
+    <div class="column content">
       <h1><%= t('.title') %></h1>
+
       <table class="table">
         <thead>
           <th><%= t('.last_used') %></th>
app/views/registrations/new.html.erb
@@ -1,17 +1,29 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns is-centered">
+    <div class="column is-half content">
       <h1><%= t('.title') %></h1>
 
       <%= form_for @user, url: registrations_path, method: :post do |form| %>
-        <div class="form-group">
-          <%= form.email_field :email, class: 'form-control', placeholder: User.human_attribute_name(:email), autofocus: true, required: :required %>
+        <div class="field">
+          <%= form.label :email %>
+          <div class="control">
+            <%= form.email_field :email, class: 'input', autofocus: true, required: :required %>
+          </div>
         </div>
-        <div class="form-group">
-          <%= form.password_field :password, class: 'form-control', placeholder: User.human_attribute_name(:password), required: :required %>
+        <div class="field">
+          <%= form.label :password %>
+          <div class="control">
+            <%= form.password_field :password, class: 'input', required: :required %>
+          </div>
+        </div>
+        <div class="field is-grouped is-grouped-right">
+          <div class="control">
+            <%= form.button t('.register'), type: 'submit', class: 'button is-primary', data: { disable_with: t('loading') } %>
+          </div>
+          <div class="control">
+            <%= link_to t(".login"), new_session_path, class: 'button is-text' %>
+          </div>
         </div>
-        <%= form.button t('.register'), type: 'submit', class: 'btn btn-primary', data: { disable_with: t('loading') } %>
-        <%= link_to "Login", new_session_path %>
       <% end %>
     </div>
   </div>
app/views/sessions/new.html.erb
@@ -1,18 +1,34 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
+  <div class="columns is-centered">
+    <div class="column is-half content">
       <h1><%= t('.title') %></h1>
+
       <%= form_for :user, url: session_path, method: :post, data: { controller: 'sessions--new' } do |form| %>
-        <div class="form-group">
-          <%= form.email_field :email, class: 'form-control', placeholder: User.human_attribute_name(:email), autofocus: true, required: :required, data: { target: 'sessions--new.email', action: "keyup->sessions--new#validate" } %>
+        <div class="field">
+          <%= form.label :email %>
+          <div class="control">
+            <%= form.email_field :email, class: 'input', autofocus: true, required: :required, data: { target: 'sessions--new.email', action: "keyup->sessions--new#validate" } %>
+          </div>
+        </div>
+        <div class="field">
+          <%= form.label :password %>
+          <div class="control">
+            <%= form.password_field :password, class: 'input', required: :required, data: { target: 'sessions--new.password', action: "keyup->sessions--new#validate" } %>
+          </div>
         </div>
-        <div class="form-group">
-          <%= form.password_field :password, class: 'form-control', placeholder: User.human_attribute_name(:password), required: :required, data: { target: 'sessions--new.password', action: "keyup->sessions--new#validate" } %>
+        <div class="field is-grouped is-grouped-right">
+          <div class="control">
+            <%= form.button t('.login'), type: 'submit', class: 'button is-primary', data: { disable_with: t('loading'), target: 'sessions--new.submit' } %>
+          </div>
+          <div class="control">
+            <%= link_to "Register", new_registration_path, class: 'button is-text' %>
+          </div>
         </div>
-        <%= form.button t('.login'), type: 'submit', class: 'btn btn-primary', data: { disable_with: t('loading'), target: 'sessions--new.submit' } %>
-        <%= link_to "Register", new_registration_path %>
       <% end %>
-
+    </div>
+  </div>
+  <div class="columns">
+    <div class="column">
       <%= debug @saml.try(:to_xhtml) %>
     </div>
   </div>
bin/update
@@ -14,7 +14,7 @@ chdir APP_ROOT do
   # Add necessary update steps to this file.
 
   puts '== Installing dependencies =='
-  system('bin/bootstrap')
+  system('bin/setup')
 
   # Install JavaScript dependencies if using Yarn
   system('bin/yarn')
package.json
@@ -11,11 +11,10 @@
   },
   "dependencies": {
     "@rails/webpacker": "3.4",
-    "bootstrap": "^4.0.0",
+    "bulma": "^0.7.2",
     "jquery": "^3.3.1",
     "json-loader": "^0.5.7",
     "local-time": "^2.1.0",
-    "popper.js": "^1.14.3",
     "qrcode": "^1.2.0",
     "rails-translations-webpack-plugin": "^1.1.0",
     "rails-ujs": "^5.2.1",
yarn.lock
@@ -1150,10 +1150,6 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bootstrap@^4.0.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1335,6 +1331,11 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
+bulma@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.2.tgz#8e944377b74c7926558830d38d8e19eaf49f5fb6"
+  integrity sha512-6JHEu8U/1xsyOst/El5ImLcZIiE2JFXgvrz8GGWbnDLwTNRPJzdAM0aoUM1Ns0avALcVb6KZz9NhzmU53dGDcQ==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -5631,10 +5632,6 @@ pngjs@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
 
-popper.js@^1.14.3:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0"
-
 portfinder@^1.0.9:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"