Make mailboxer look good and update email templates
This commit is contained in:
Connor Turland
Devin Howard
parent
0960159265
commit
6d8392d2e7
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 92px;
|
||||
}
|
||||
|
||||
/*.animations {
|
||||
|
|
|
|||
|
|
@ -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"] {
|
||||
|
|
|
|||
|
|
@ -20,16 +20,14 @@ $unread_notifications_dot_size: 8px;
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
$menu_bar_height: 6em;
|
||||
.notificationPage,
|
||||
.notificationsPage {
|
||||
width: auto;
|
||||
max-width: 960px;
|
||||
box-sizing: border-box;
|
||||
margin: 1em auto;
|
||||
margin-top: 1em + $menu_bar_height;
|
||||
font-family: 'din-regular', Sans-Serif;
|
||||
|
||||
& a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& > .notification-title {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 0.25em;
|
||||
|
|
@ -41,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;
|
||||
|
|
|
|||
|
|
@ -33,5 +33,6 @@
|
|||
<% end %>
|
||||
</main>
|
||||
</div>
|
||||
<%= render partial: 'shared/back_to_mapping' %>
|
||||
</div>
|
||||
<%= render 'script' %>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="upperLeftUI">
|
||||
<!-- home button -->
|
||||
<div class="homeButton">
|
||||
<a href="<%= root_url %>" <% if current_user && !appsPage %><%= 'data-router=true' %><% end %>>METAMAPS</a>
|
||||
<a href="<%= root_url %>" <% if current_user && !noHardHomeLink %><%= 'data-router=true' %><% end %>>METAMAPS</a>
|
||||
</div> <!-- end homeButton -->
|
||||
|
||||
<!-- search box -->
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
<span id="notification_icon">
|
||||
<%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_unread_notification_count > 0 ? 'unread' : 'read'}" do %>
|
||||
<div class="tooltipsUnder">
|
||||
Notifications (<%= user_unread_notification_count %> unread)
|
||||
Notifications
|
||||
</div>
|
||||
<% if user_unread_notification_count > 0 %>
|
||||
<div class="unread-notifications-dot"></div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<div class="wrapper <%= classes %>" id="wrapper">
|
||||
|
||||
<%= render :partial => 'layouts/upperelements', :locals => { :appsPage => false } %>
|
||||
<%= render :partial => 'layouts/upperelements', :locals => { :noHardHomeLink => controller_name == "notifications" ? true : false } %>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<div class="wrapper <%= classes %>" id="wrapper">
|
||||
|
||||
<%= render :partial => 'layouts/upperelements', :locals => {:appsPage => true } %>
|
||||
<%= render :partial => 'layouts/upperelements', :locals => {:noHardHomeLink => true } %>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
<% end %>
|
||||
</p>
|
||||
<div id="loading"></div>
|
||||
<%= render partial: 'shared/back_to_mapping' %>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<% mail = ApplicationMailer.mail_for_notification(@notification) %>
|
||||
<% if mail %>
|
||||
<% @notification.update(body: mail.html_part&.body&.decoded) %>
|
||||
<%= raw mail.html_part&.body&.decoded %>
|
||||
<% end %>
|
||||
<div style="padding: 16px; background: white; text-align: left;">
|
||||
<% if mail %>
|
||||
<% @notification.update(body: mail.html_part&.body&.decoded) %>
|
||||
<%= raw mail.html_part&.body&.decoded %>
|
||||
<% end %>
|
||||
<p style="font-size: 12px;">Make sense with Metamaps</p>
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,3 +2,7 @@
|
|||
<% if mail %>
|
||||
<%= mail.text_part&.body&.decoded %>
|
||||
<% end %>
|
||||
|
||||
Make sense with Metamaps
|
||||
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,6 @@
|
|||
<div style="padding: 16px; background: white; text-align: left;">
|
||||
<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
|
||||
|
||||
<p><span style="font-weight: bold;"><%= @request.user.name %></span> is requesting access to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
|
||||
|
||||
<p><%= @map.name %></p>
|
||||
|
||||
<p><%= link_to "Allow", approve_access_map_url(id: @map.id, request_id: @request.id), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #4fc059;" %>
|
||||
<p><%= link_to "Decline", deny_access_map_url(id: @map.id, request_id: @request.id), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #DB5D5D;" %></p>
|
||||
|
||||
<%= link_to 'Open in Metamaps', map_url(@map), target: "_blank", style: button_style %>
|
||||
|
||||
<p style="font-size: 12px;">Make sense with Metamaps</p>
|
||||
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
</div>
|
||||
<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
|
||||
<p><span style="font-weight: bold;"><%= @request.user.name %></span> is requesting access to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
|
||||
<p><%= @map.name %></p>
|
||||
<p><%= link_to "Allow", approve_access_map_url(id: @map.id, request_id: @request.id), style: "font-size: 18px; text-decoration: none; color: #4fc059;" %>
|
||||
<p><%= link_to "Decline", deny_access_map_url(id: @map.id, request_id: @request.id), style: "font-size: 18px; text-decoration: none; color: #DB5D5D;" %></p>
|
||||
<%= link_to 'Go to Map', map_url(@map), style: button_style %>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,4 @@
|
|||
Allow [<%= approve_access_map_url(id: @map.id, request_id: @request.id) %>]
|
||||
Decline [<%= deny_access_map_url(id: @map.id, request_id: @request.id) %>]
|
||||
|
||||
Make sense with Metamaps
|
||||
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
<div style="padding: 16px; background: white; text-align: left;">
|
||||
<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
|
||||
|
||||
<p><span style="font-weight: bold;"><%= @inviter.name %></span> has invited you to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
|
||||
<p><%= link_to @map.name, map_url(@map), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #4fc059;" %></p>
|
||||
<% if @map.desc %>
|
||||
<p style="font-size: 12px;"><%= @map.desc %></p>
|
||||
<% end %>
|
||||
|
||||
<%= link_to 'Open in Metamaps', map_url(@map), target: "_blank", style: button_style %>
|
||||
|
||||
<p style="font-size: 12px;">Make sense with Metamaps</p>
|
||||
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
</div>
|
||||
<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
|
||||
<p><span style="font-weight: bold;"><%= @inviter.name %></span> has invited you to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
|
||||
<p><%= link_to @map.name, map_url(@map), style: "font-size: 18px; text-decoration: none; color: #4fc059;" %></p>
|
||||
<% if @map.desc %>
|
||||
<p style="font-size: 12px;"><%= @map.desc %></p>
|
||||
<% end %>
|
||||
<%= link_to 'Go to Map', map_url(@map), style: button_style %>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<%= @inviter.name %> has invited you to collaboratively edit the following map:
|
||||
|
||||
<%= @map.name %> [<%= map_url(@map) %>]
|
||||
|
||||
Make sense with Metamaps
|
||||
|
||||
<%= render partial: 'shared/mailer_unsubscribe_link' %>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
|
||||
<div id="yield">
|
||||
<div class="centerContent notificationsPage">
|
||||
<h2 class="title">My Notifications</h4>
|
||||
<header class="page-header">
|
||||
<h2 class="title">My Notifications</h4>
|
||||
</header>
|
||||
<ul class="notifications">
|
||||
<% @notifications.each do |notification| %>
|
||||
<% receipt = @receipts.find_by(notification_id: notification.id) %>
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
<%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if @notifications.count == 0 %>
|
||||
|
|
@ -32,7 +35,7 @@
|
|||
</div>
|
||||
|
||||
<% if @notifications.total_pages > 1 %>
|
||||
<div class="centerContent pagination">
|
||||
<div class="centerContent withPadding pagination">
|
||||
<%= paginate @notifications %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="centerContent back">
|
||||
<%= link_to 'Back', notifications_path %>
|
||||
<div class="centerContent withPadding back">
|
||||
<%= link_to 'Back to notifications', notifications_path %>
|
||||
</div>
|
||||
|
||||
<%= render partial: 'shared/back_to_mapping' %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="centerContent back-to-mapping">
|
||||
<div class="centerContent withPadding back-to-mapping">
|
||||
<a href="/">Back to mapping</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ class NotificationIcon extends Component {
|
|||
return (
|
||||
<a className={linkClasses} href="/notifications">
|
||||
<div className="tooltipsUnder">
|
||||
Notifications ({this.props.unreadNotificationsCount} unread)
|
||||
Notifications
|
||||
</div>
|
||||
{this.props.unreadNotificationsCount === 0 ? null : (
|
||||
<div className="unread-notifications-dot"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue