From ce9a7dae9eec5e27a847f32cdce69344176b7ddc Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Mon, 12 Dec 2016 17:55:42 -0500 Subject: [PATCH] styling fixes for centerContent --- app/assets/stylesheets/apps.css.erb | 16 ++-- app/assets/stylesheets/clean.css.erb | 2 + app/assets/stylesheets/mobile.scss.erb | 6 +- app/assets/stylesheets/notifications.scss.erb | 73 +++++++++++++------ .../authorized_applications/index.html.erb | 1 + app/views/layouts/doorkeeper.html.erb | 1 - app/views/notifications/index.html.erb | 3 +- app/views/notifications/show.html.erb | 4 +- app/views/shared/_back_to_mapping.html.erb | 2 +- 9 files changed, 69 insertions(+), 39 deletions(-) diff --git a/app/assets/stylesheets/apps.css.erb b/app/assets/stylesheets/apps.css.erb index f3f444c7..46fa64b7 100644 --- a/app/assets/stylesheets/apps.css.erb +++ b/app/assets/stylesheets/apps.css.erb @@ -1,8 +1,8 @@ .centerContent { position: relative; - margin: 92px auto 0 auto; - padding: 20px 0 60px 20px; - width: 760px; + margin: 0 auto; + width: auto; + max-width: 960px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); background: #fff; @@ -10,7 +10,7 @@ -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #dcdcdc; - margin-bottom: 10px; + box-sizing: border-box; padding: 15px; } @@ -130,10 +130,8 @@ border-radius: 2px; } -.back-to-mapping { - margin: 1em auto; - width: auto; - max-width: 960px; - box-sizing: border-box; +.centerContent.withPadding { + margin-top: 1em; + margin-bottom: 1em; } diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index fb55b29f..3970f877 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -28,6 +28,8 @@ position: absolute; width: 100%; height: 100%; + box-sizing: border-box; + padding-top: 92px; } /*.animations { diff --git a/app/assets/stylesheets/mobile.scss.erb b/app/assets/stylesheets/mobile.scss.erb index e7eb9a7d..8cdb3ae6 100644 --- a/app/assets/stylesheets/mobile.scss.erb +++ b/app/assets/stylesheets/mobile.scss.erb @@ -2,7 +2,7 @@ display: none; } -@media only screen and (max-width : 720px) and (min-width : 504px) { +@media only screen and (max-width : 752px) and (min-width : 504px) { .sidebarSearch .tt-hint, .sidebarSearch .sidebarSearchField { width: 160px !important; } @@ -57,7 +57,7 @@ } #yield { - height: 100%; + padding-top: 50px; } .new_session, .new_user, .edit_user, .login, .forgotPassword { @@ -66,7 +66,7 @@ left: auto; width: 78%; padding: 16px 10%; - margin: 50px auto 0 auto; + margin: 0 auto; } .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] { diff --git a/app/assets/stylesheets/notifications.scss.erb b/app/assets/stylesheets/notifications.scss.erb index cb303dc6..d9602804 100644 --- a/app/assets/stylesheets/notifications.scss.erb +++ b/app/assets/stylesheets/notifications.scss.erb @@ -22,11 +22,12 @@ $unread_notifications_dot_size: 8px; .notificationPage, .notificationsPage { - width: auto; - max-width: 960px; - box-sizing: border-box; font-family: 'din-regular', Sans-Serif; + & a:hover { + text-decoration: none; + } + & > .notification-title { border-bottom: 1px solid #eee; padding-bottom: 0.25em; @@ -38,34 +39,62 @@ $unread_notifications_dot_size: 8px; } } - - .notificationsPage .notification { - .notification-subject { - width: 25%; - } - .notification-body { - width: 50%; - } - .notification-read-unread { - width: 10%; + .notificationsPage { + header { + margin-bottom: 0; } - .notification-body, - .notification-subject, - .notification-read-unread { - display: inline-block; - vertical-align: top; + .notification:first-child { + border-top: none; + } + .notification:last-child { + border-bottom: 1px solid #DCDCDC; } - &.unread { - .notification-body, - .notification-subject, + .notification { + padding: 10px; + border:1px solid #DCDCDC; + border-bottom: none; + + &:hover { + background: #F6F6F6; + } + + & > a { + float: left; + width: 85%; + box-sizing: border-box; + padding-right: 10px; + } + .notification-read-unread { - font-family: 'din-medium', Sans-Serif; + float: left; + width: 15%; + } + + .notification-body, + .notification-subject { + display: inline-block; + vertical-align: top; + } + + .notification-body { + margin-left: 15px; + } + + &.unread { + .notification-body, + .notification-subject, + .notification-read-unread { + font-family: 'din-medium', Sans-Serif; + } } } + } + + .notificationPage .notification-body { p, div { margin: 1em auto; diff --git a/app/views/doorkeeper/authorized_applications/index.html.erb b/app/views/doorkeeper/authorized_applications/index.html.erb index 42c3127d..948efa30 100644 --- a/app/views/doorkeeper/authorized_applications/index.html.erb +++ b/app/views/doorkeeper/authorized_applications/index.html.erb @@ -33,5 +33,6 @@ <% end %> +<%= render partial: 'shared/back_to_mapping' %> <%= render 'script' %> diff --git a/app/views/layouts/doorkeeper.html.erb b/app/views/layouts/doorkeeper.html.erb index dbf07ac5..960502d9 100644 --- a/app/views/layouts/doorkeeper.html.erb +++ b/app/views/layouts/doorkeeper.html.erb @@ -50,7 +50,6 @@ <% end %>

- <%= render partial: 'shared/back_to_mapping' %> <% end %> diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb index 7cd6cf90..f2c98adf 100644 --- a/app/views/notifications/index.html.erb +++ b/app/views/notifications/index.html.erb @@ -25,6 +25,7 @@ <%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %> <% end %> +
<% end %> <% if @notifications.count == 0 %> @@ -34,7 +35,7 @@ <% if @notifications.total_pages > 1 %> - -
- <%= link_to 'Back', notifications_path %> +
+ <%= link_to 'Back to notifications', notifications_path %>
<%= render partial: 'shared/back_to_mapping' %> diff --git a/app/views/shared/_back_to_mapping.html.erb b/app/views/shared/_back_to_mapping.html.erb index 682a71e6..342fd186 100644 --- a/app/views/shared/_back_to_mapping.html.erb +++ b/app/views/shared/_back_to_mapping.html.erb @@ -1,3 +1,3 @@ -
+
Back to mapping