Design refactor

app/assets/stylesheets/registrar.sass

@@ -2,201 +2,27 @@ $navbar-default-bg: #F69240
 $navbar-default-brand-color: #fff
 $navbar-default-link-color: #fff
 $border-radius-base: 2px
-
+$body-bg: #F8F8F8
+$container-large-desktop: 1040px
 $font-family-sans-serif: 'EtelkaLightProRegular', Arial, Helvetica, sans-serif
 $font-family-serif: 'EtelkaLightProBold', Georgia, "Times New Roman", Times, serif
+$font-size-h1: 26px
 
 html
-  font-size: 100%
+  position: relative
-  overflow-y: scroll
+  min-height: 100%
-  -webkit-text-size-adjust: 100%
-  -ms-text-size-adjust: 100%
 
 body
-  background: url(image_path('bg.jpg'))
+  padding-bottom: 60px
 
-h1
-  font-size: 26px !important
-  margin-bottom: 16px !important
-
-a
-  color: #008fd7
-  text-decoration: none
-
-a:hover,
-a:active
-  color: #008fd7
-  outline: 0
-
-h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a
-  color: #272f34
-  text-decoration: none
-  font-weight: normal
-  font-family: 'EtelkaLightProBold'
-
-h1
-  font-size: 22px
-  text-transform: uppercase
-
-body,
-button,
-input,
-select,
-textarea
-  font-family: 'EtelkaLightProRegular', Arial, Helvetica, sans-serif
-  color: #5d6064
-  font-size: 13px
-
-abbr[title]
-  border-bottom: 1px dotted
-
-b,
-strong
-  font-weight: normal
-  font-family: 'EtelkaLightProBold'
-
-blockquote
-  margin: 1em 40px
-
-dfn
-  font-style: italic
-
-mark
-  background: #ff0
-  color: #000
-
-pre,
-code,
-kbd,
-samp
-  font-family: monospace, serif
-  _font-family: 'courier new', monospace
-  font-size: 1em
-
-pre
-  white-space: pre
-  white-space: pre-wrap
-  word-wrap: break-word
-
-q
-  quotes: none
-
-q:before,
-q:after
-  content: ''
-  content: none
-
-small
-  font-size: 75%
-
-sub,
-sup
-  font-size: 75%
-  line-height: 0
-  position: relative
-  vertical-align: baseline
-
-sup
-  top: -0.5em
-
-sub
-  bottom: -0.25em
-
-.title-row
-  margin-bottom: 22px
-
-.app-nav
-  padding-top: 7px
-
-.public-nav
-  font-weight: bold
-  li.active a
-    color: black !important
-
-.general-tab
-  padding-top: 30px
-  padding-right: 20px
-  border-top: 0px
-
-.container
-  border-radius: 2px
-  width: 860px
 body > .container
-  background: #F8F8F8
+  height: 100%
-  padding: 30px 30px 30px 30px
+  background: #fff
-
+  padding: 60px 30px 30px 30px
-.container.version
-  background: transparent
-  margin-top: -116px
-  min-height: 0px
-  text-align: right
-  font-size: 12px
-  color: gray
-
-.container.subnav
-  background: transparent
-  min-height: 0
-  padding: 0 46px 0 0
-  margin-bottom: 0
-  ul.nav
-    li a
-      background: #E7E7E7
-      height: 33px
-      line-height: 12px
-      color: gray
-      &:hover
-        color: #333
-    li.active a
-      background: #F8F8F8
-      font-weight: bold
-      color: #333
-
-
-.subactions
-  h4
-    margin-bottom: 20px
-    margin-top: 10px
-  min-height: 600px
-
-.sidebar
-  min-height: 400px
-
-.content
-  margin-right: 240px
-  margin-left: 0
-
-h4
-  margin: 0
-
-.top-actions
-  margin-top: 12px
-  margin-bottom: 16px
-  float: right
-
-.navbar-brand
-  line-height: 12px
-  padding-top: 20px
-  padding-bottom: 5px
-
-.navbar-brand small
-  display: block
-  font-size: 10px
 
 .footer
-  color: #777
+  position: absolute
-  padding-top: 70px
+  bottom: 0
-  padding-bottom: 10px
+  width: 100%
-  font-size: 10px
+  height: 60px
-
+  background-color: black
-.field_with_errors
-  @extend .has-error
-
-.domify
-  td
-    vertical-align: middle !important
-
-// fix label position for medium screen
-@media (min-width: 768px) and (max-width: 991px)
-  .form-horizontal .control-label
-    text-align: left
-

app/views/layouts/registrar/application.haml

@@ -1,3 +1,4 @@
+!!!
 %html{lang: I18n.locale.to_s}
   %head
     %meta{charset: "utf-8"}/
@@ -8,14 +9,14 @@
     = csrf_meta_tags
     = stylesheet_link_tag 'registrar-manifest', media: 'all', 'data-turbolinks-track' => true
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
-    = favicon_link_tag 'registrar/favicon.ico'
+    = favicon_link_tag 'favicon.ico'
     %title EIS Registrar Portal
   %body
-    / Static navbar
+    / Fixed navbar
-    .navbar.navbar-default.navbar-static-top{role: "navigation"}
+    %nav.navbar.navbar-default.navbar-fixed-top
       .container
         .navbar-header
-          %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
+          %button.navbar-toggle.collapsed{"aria-controls" => "navbar", "aria-expanded" => "false", "data-target" => "#navbar", "data-toggle" => "collapse", :type => "button"}
             %span.sr-only Toggle navigation
             %span.icon-bar
             %span.icon-bar
@@ -25,43 +26,40 @@
             - if unstable_env.present?
               .text-center
                 %small{style: 'color: #0074B3;'}= unstable_env
-        - if current_user
         .navbar-collapse.collapse
           %ul.nav.navbar-nav.public-nav
-              - if can? :view, Depp::Domain
+            - active_class = %w(depp/domains depp/check depp/renew depp/tranfer depp/keyrelays).include?(params[:controller]) ? 'active' :nil
-                - active_class = %w(registrar/domains registrar/check registrar/renew registrar/tranfer registrar/keyrelays).include?(params[:controller]) ? 'active' :nil
+            %li{class: active_class}= link_to t(:domains), depp.domains_path
-                %li{class: active_class}= link_to t(:domains), registrar_domains_path
+
-              - if can? :view, Depp::Contact
+            - active_class = ['depp/contacts'].include?(params[:controller]) ? 'active' :nil
-                - active_class = ['registrar/contacts'].include?(params[:controller]) ? 'active' :nil
+            %li{class: active_class}= link_to t(:contacts), depp.contacts_path
-                %li{class: active_class}= link_to t(:contacts), registrar_contacts_path
 
             - if can? :show, Invoice
               - active_class = ['registrar/invoices'].include?(params[:controller]) ? 'active' :nil
-                %li{class: active_class}= link_to t('invoices'), main_app.registrar_invoices_path
+              %li{class: active_class}= link_to t('accounting'), main_app.registrar_invoices_path
 
-              - if can? :view, :registrar_xml_console
+            - active_class = ['depp/xml_consoles'].include?(params[:controller]) ? 'active' :nil
-                - active_class = ['registrar/xml_consoles'].include?(params[:controller]) ? 'active' :nil
+            %li{class: active_class}= link_to t(:xml_console), depp.xml_console_path
-                %li{class: active_class}= link_to t(:xml_console), registrar_xml_console_path
 
           %ul.nav.navbar-nav.navbar-right
-              - if user_signed_in?
             %li= link_to t('log_out', user: current_user), '/registrar/logout'
-              -# %li.dropdown
-                -# = link_to 'Registrar <span class="caret"></span>'.html_safe, '#',
-                  -# class: 'dropdown-toggle', 'data-toggle': 'dropdown', role: 'button'
-                -# %ul.dropdown-menu{'role': 'menu'}
-                  -# %li.dropdown-header= t(:switch_to) + ':'
-                  -# %li= link_to t(:registrant), '#'
-                  -# %li= link_to t(:registrar), '#'
-
         / /.nav-collapse
+    / Begin page content
     .container
-      = render 'registrar/shared/flash'
+      - if params[:controller].start_with?('depp/')
-      - if depp_controller?
+        = render 'depp/shared/flash'
-        = render 'registrar/shared/epp_results'
+        = render 'depp/shared/epp_results'
-
+      - else
+        - display = (flash.empty?) ? 'none' : 'block'
+        #flash{style: "display: #{display};"}
+          - type = (flash[:notice]) ? 'bg-success' : 'bg-danger'
+          .alert{class: type}= flash[:notice] || flash[:alert]
       = yield
-
+    %footer.footer
-      .footer.text-right
+      .container
+        %row
+          .col-md-6
+            = image_tag 'eis-logo-et.png'
+          .col-md-6.text-right
             Version
             = CURRENT_COMMIT_HASH