Responsive Update! Releasing 0.1.4 \o/

Author: Caio Tarifa

README.md

@@ -1,23 +1,20 @@
 # Formadmin
 
-Modern theme for Active Admin used by Formaweb.
+Modern and responsive theme for Active Admin used by Formaweb.
 
 ## Installation
 
 1. Please make sure that you are using Active Admin from their Github repo:
-
 ```
 gem 'activeadmin', github: 'activeadmin/activeadmin'
 ```
 
 2. Add this gem in your `Gemfile`:
-
 ```
 gem 'formadmin'
 ```
 
 3. So, bundle...
-
 ```
 $ bundle install
 ```

app/assets/stylesheets/formadmin/layouts/_header.scss

@@ -1,4 +1,4 @@
-.header {
+#header.header {
   align-items: center;
   background-color: rgba($primary-color, 0.95);
   backdrop-filter: blur(3px);
@@ -146,6 +146,7 @@
     text-align: right;
     transition: color 250ms;
     white-space: nowrap;
+    width: 100%;
 
     a {
       text-decoration: none;
@@ -157,6 +158,15 @@
 
     li {
       display: inline;
+
+      &:not(#current_user) {
+        opacity: 0.75;
+        transition: opacity 250ms;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
     }
   }
 
@@ -168,17 +178,69 @@
   @media #{$largest-phone-screen} {
     #tabs,
     #utility_nav {
-      display: none;
       left: 0;
-      position: absolute;
+      opacity: 0;
+      position: fixed;
       right: 0;
+      transform: translateY(calc(-100% - 90px));
+      transition: transform 250ms;
+    }
+
+    #utility_nav {
+      background-color: $primary-color;
+      height: 40px;
+      padding: 11px 0;
+      text-align: center;
       top: 50px;
     }
 
+    #tabs {
+      background-color: rgba($primary-color, 0.95);
+      top: 90px;
+
+      li {
+        display: block;
+        float: none;
+        margin: 0;
+        padding: 5px 15px;
+        width: 100%;
+
+        + li {
+          border-top: 1px solid rgba($white, 0.1);
+        }
+      }
+
+      a {
+        display: block;
+      }
+    }
+
     .site_title {
       padding: 0 15px;
     }
 
+    .header-item ul {
+      background: transparent;
+      height: auto;
+      max-width: 100%;
+      opacity: 1;
+      margin-left: 5px;
+      position: static;
+      transform: scale(1);
+      width: 100%;
+
+      li {
+        border: 0 !important;
+        padding: 0 !important;
+
+        a:before {
+          display: inline;
+          content: '↳';
+          margin-right: 5px;
+        }
+      }
+    }
+
     .menu-button {
       display: block;
       margin-left: auto;
@@ -190,35 +252,9 @@
       #tabs,
       #utility_nav {
         display: block;
+        opacity: 1;
+        transform: translateY(0);
       }
     }
-
-    // display: block;
-    // .site_title {
-    //   padding: 0 15px;
-    // }
-    //
-    // #tabs,
-    // #utility_nav {
-    //   display: none;
-    //   left: 0;
-    //   position: absolute;
-    //   top: 50px;
-    //   width: 100%;
-    // }
-    //
-    // .menu-button {
-    //   float: left;
-    //   margin-right: 15px;
-    //   position: relative;
-    //   top: 13px;
-    // }
-    //
-    // .opened-menu & {
-    //   #tabs,
-    //   #utility_nav {
-    //     display: block;
-    //   }
-    // }
   }
 }

app/assets/stylesheets/formadmin/layouts/_title-bar.scss

@@ -66,6 +66,10 @@
 
   // Medias
   @media #{$phone-and-tablet-screen} {
+    #page_title {
+      word-break: keep-all;
+    }
+
     #titlebar_left,
     #titlebar_right {
       display: block;

app/assets/stylesheets/formadmin/pages/_logged-out.scss

@@ -8,7 +8,8 @@ body.logged_out {
   #content_wrapper {
     margin: 70px auto;
     padding: 0;
-    width: 500px;
+    max-width: 500px;
+    width: 100%;
   }
 
   h2 {
@@ -42,4 +43,16 @@ body.logged_out {
     border-width: 1px;
     margin-bottom: 20px;
   }
+
+  // Medias
+  @media #{$largest-phone-screen} {
+    #wrapper {
+      padding: 15px;
+    }
+
+    #content_wrapper {
+      margin: 0 auto;
+      max-width: 450px;
+    }
+  }
 }

lib/formadmin.rb

@@ -1,10 +1,4 @@
 require 'formadmin/version'
+require 'formadmin/engine'
+require 'formadmin/active_admin/application'
 require 'formadmin/active_admin/views/header'
-require 'formadmin/active_admin/views/pages/base'
-
-module Formadmin
-  module Rails
-    class Engine < ::Rails::Engine
-    end
-  end
-end

lib/formadmin/active_admin/application.rb

@@ -0,0 +1,6 @@
+module ActiveAdmin
+  responsive_viewport = { viewport: 'width=device-width, initial-scale=1' }
+
+  ActiveAdmin.application.meta_tags.merge! responsive_viewport
+  ActiveAdmin.application.meta_tags_for_logged_out_pages.merge! responsive_viewport
+end

lib/formadmin/active_admin/views/header.rb

@@ -9,7 +9,7 @@ def build namespace, menu
       end
 
       def build_responsive_menu
-        button '<i></i>'.html_safe, type: 'button', class: 'menu-button'
+        button '<i></i>'.html_safe, type: 'button', class: 'menu-button', onclick: 'document.body.classList.toggle("opened-menu")'
       end
     end
   end