From 3890f281166e992f01e5af7680a9ac0d2bb6bc4c Mon Sep 17 00:00:00 2001 From: Brice Sanchez Date: Tue, 17 Apr 2018 22:48:00 -0400 Subject: [PATCH 01/22] WIP: new admin UI --- .../refinery/components/_menu.sass | 1 + .../assets/stylesheets/refinery/refinery.scss | 8 +- .../assets/stylesheets/refinery/site_bar.sass | 179 ++++++++++++++++++ .../assets/stylesheets/refinery/site_bar.scss | 136 ------------- .../app/views/layouts/refinery/admin.html.erb | 28 +-- core/app/views/refinery/_site_bar.html.erb | 28 +-- core/app/views/refinery/admin/_menu.html.erb | 6 +- .../views/refinery/admin/_menu_item.html.erb | 4 +- 8 files changed, 222 insertions(+), 168 deletions(-) create mode 100644 core/app/assets/stylesheets/refinery/components/_menu.sass create mode 100644 core/app/assets/stylesheets/refinery/site_bar.sass delete mode 100644 core/app/assets/stylesheets/refinery/site_bar.scss diff --git a/core/app/assets/stylesheets/refinery/components/_menu.sass b/core/app/assets/stylesheets/refinery/components/_menu.sass new file mode 100644 index 0000000000..e62f98dba6 --- /dev/null +++ b/core/app/assets/stylesheets/refinery/components/_menu.sass @@ -0,0 +1 @@ +#main-menu diff --git a/core/app/assets/stylesheets/refinery/refinery.scss b/core/app/assets/stylesheets/refinery/refinery.scss index 15ed8a80b7..0d34da8717 100644 --- a/core/app/assets/stylesheets/refinery/refinery.scss +++ b/core/app/assets/stylesheets/refinery/refinery.scss @@ -17,6 +17,12 @@ @import 'components/tooltips'; @import 'components/ie'; -@import 'sections/layout'; +body { + background-color: #F0F2F5; + margin: 0; +} + +//@import 'sections/layout'; +@import 'components/menu'; @import 'site_bar'; \ No newline at end of file diff --git a/core/app/assets/stylesheets/refinery/site_bar.sass b/core/app/assets/stylesheets/refinery/site_bar.sass new file mode 100644 index 0000000000..3e730e00b6 --- /dev/null +++ b/core/app/assets/stylesheets/refinery/site_bar.sass @@ -0,0 +1,179 @@ +#site_bar + background-color: white + color: #373C3F + font-family: Helvetica + + #site_bar_content + &:after + content: "" + clear: both + display: block + + a + color: #373C3F + + #site_bar_refinery_cms_logo + background-color: #172231 + float: left + padding: 1.1em 0 + width: 16.5rem + + a + display: block + margin: 0 auto + width: 8.4em + + img + max-width: 100% + + #site_bar_branding + float: left + + #editor_switch + float: left + + a + border: 1px solid #066CFF + border-radius: 3px + color: #066CFF + display: block + font-size: 1em + padding: 0.5em 1em + text-decoration: none + +//#site_bar { +// background: #404650; +// +// #site_bar_content { +// color: white; +// font-family: Arial; +// font-size: 0.9em; +// font-weight: normal; +// margin: 0 auto; +// max-width: 1200px; +// padding: 0.8em 0.8em 0.5em; +// position: relative; +// zoom: 1; +// +// &:before, +// &:after { content: ""; display: table; } +// &:after { clear: both; } +// +// a { +// color: white; +// text-decoration: none; +// +// &:hover { +// text-decoration: underline; +// } +// } +// +// #editor_switch { +// text-align: center; +// +// a { +// display: inline-block; +// margin-right: 0.3em; +// margin-bottom: 0.5em; +// padding: 0em 1em 0em; +// } +// @media screen and (min-width: 480px) { +// text-align: left; +// } +// } +// +// #site_bar_refinery_cms_logo { +// display: block; +// text-align: center; +// +// @media screen and (min-width: 480px) { +// left: 40%; +// max-width: 20%; +// position: absolute; +// top: 0.35em; +// } +// +// @media screen and (min-width: 768px) { +// left: 45%; +// max-width: 10%; +// } +// +// img { +// max-width: 40%; +// +// @media screen and (min-width: 480px) { +// max-width: 80%; +// } +// +// @media screen and (min-width: 768px) { +// max-width: 100%; +// } +// } +// } +// +// #site_bar_branding, #editor_switch { +// display: block; +// margin-top: 0.5em; +// +// @media screen and (min-width: 480px) { +// margin-top: 0.25em; +// } +// } +// +// #site_bar_branding { +// text-align: center; +// +// @media screen and (min-width: 480px) { +// text-align: right; +// } +// +// #site_bar_company_name { +// display: block; +// font-weight: bold; +// +// @media screen and (min-width: 480px) { +// display: inline-block; +// } +// } +// +// #logout { +// display: block; +// margin-left: 0.9em; +// +// @media screen and (min-width: 480px) { +// display: inline-block; +// } +// } +// } +// } +//} +// +//@media screen and (min-width: 480px) { +// #site_bar { +// #site_bar_content { +// #editor_switch { +// float: left; +// width: 40%; +// } +// +// #site_bar_branding { +// float: right; +// width: 40%; +// } +// } +// } +//} +// +//@media screen and (min-width: 768px) { +// #site_bar { +// #site_bar_content { +// #editor_switch { +// width: 45%; +// } +// +// #site_bar_branding { +// width: 45%; +// } +// } +// } +//} diff --git a/core/app/assets/stylesheets/refinery/site_bar.scss b/core/app/assets/stylesheets/refinery/site_bar.scss deleted file mode 100644 index f25661c7e7..0000000000 --- a/core/app/assets/stylesheets/refinery/site_bar.scss +++ /dev/null @@ -1,136 +0,0 @@ -#site_bar { - background: #404650; - - #site_bar_content { - color: white; - font-family: Arial; - font-size: 0.9em; - font-weight: normal; - margin: 0 auto; - max-width: 1200px; - padding: 0.8em 0.8em 0.5em; - position: relative; - zoom: 1; - - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } - - a { - color: white; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - #editor_switch { - text-align: center; - - a { - display: inline-block; - margin-right: 0.3em; - margin-bottom: 0.5em; - padding: 0em 1em 0em; - } - @media screen and (min-width: 480px) { - text-align: left; - } - } - - #site_bar_refinery_cms_logo { - display: block; - text-align: center; - - @media screen and (min-width: 480px) { - left: 40%; - max-width: 20%; - position: absolute; - top: 0.35em; - } - - @media screen and (min-width: 768px) { - left: 45%; - max-width: 10%; - } - - img { - max-width: 40%; - - @media screen and (min-width: 480px) { - max-width: 80%; - } - - @media screen and (min-width: 768px) { - max-width: 100%; - } - } - } - - #site_bar_branding, #editor_switch { - display: block; - margin-top: 0.5em; - - @media screen and (min-width: 480px) { - margin-top: 0.25em; - } - } - - #site_bar_branding { - text-align: center; - - @media screen and (min-width: 480px) { - text-align: right; - } - - #site_bar_company_name { - display: block; - font-weight: bold; - - @media screen and (min-width: 480px) { - display: inline-block; - } - } - - #logout { - display: block; - margin-left: 0.9em; - - @media screen and (min-width: 480px) { - display: inline-block; - } - } - } - } -} - -@media screen and (min-width: 480px) { - #site_bar { - #site_bar_content { - #editor_switch { - float: left; - width: 40%; - } - - #site_bar_branding { - float: right; - width: 40%; - } - } - } -} - -@media screen and (min-width: 768px) { - #site_bar { - #site_bar_content { - #editor_switch { - width: 45%; - } - - #site_bar_branding { - width: 45%; - } - } - } -} diff --git a/core/app/views/layouts/refinery/admin.html.erb b/core/app/views/layouts/refinery/admin.html.erb index d884ce159e..38833d8e3b 100644 --- a/core/app/views/layouts/refinery/admin.html.erb +++ b/core/app/views/layouts/refinery/admin.html.erb @@ -3,23 +3,23 @@ <% content_for :meta, tag(:meta, name: 'refinerycms', content: Refinery.version) %> <%= render 'refinery/admin/head' %> - <%= render '/refinery/site_bar' %>
-
- -
-
-
-
- <%= render '/refinery/no_script' %> - <%= render '/refinery/message' %> -
- <%= yield %> + + +
+
+
+
+ <%= render '/refinery/no_script' %> + <%= render '/refinery/message' %>
+ <%= yield %>
-
+ diff --git a/core/app/views/refinery/_site_bar.html.erb b/core/app/views/refinery/_site_bar.html.erb index e5fcb7993a..1a163d2a4c 100644 --- a/core/app/views/refinery/_site_bar.html.erb +++ b/core/app/views/refinery/_site_bar.html.erb @@ -3,26 +3,30 @@ <% content_for :stylesheets, stylesheet_link_tag('refinery/site_bar') unless !!local_assigns[:exclude_css] %> <%= yield(:stylesheets) unless local_assigns[:head] || local_assigns[:exclude_css] %> <% end -%> -
-
+
+
- <%= link_to 'https://www.refinerycms.com', :id => 'site_bar_refinery_cms_logo', :target => '_blank' do %> - <%= image_tag 'refinery/refinery-cms-logo.svg', alt: 'Refinery CMS™' %> - <% end %> - -
- <%= site_bar_switch_link -%> - <%= site_bar_edit_link -%> + -
- +
+ <%= Refinery::Core.site_name %> +
+ +
+ <%= site_bar_switch_link -%> + <%= site_bar_edit_link -%> +
+
<%= link_to t('.log_out', site_bar_translate_locale_args), ::Refinery::Core.refinery_logout_path, - :id => 'logout' if ::Refinery::Core.refinery_logout_path.present? %> + id: 'logout' if ::Refinery::Core.refinery_logout_path.present? %>
diff --git a/core/app/views/refinery/admin/_menu.html.erb b/core/app/views/refinery/admin/_menu.html.erb index 6e459d8d4e..7383252025 100644 --- a/core/app/views/refinery/admin/_menu.html.erb +++ b/core/app/views/refinery/admin/_menu.html.erb @@ -1,4 +1,4 @@ -