You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@openmeetings.apache.org by "geoffreylgv (via GitHub)" <gi...@apache.org> on 2023/05/12 06:34:33 UTC

[GitHub] [openmeetings] geoffreylgv opened a new pull request, #189: fixed #188 - Improve the mails (template) design

geoffreylgv opened a new pull request, #189:
URL: https://github.com/apache/openmeetings/pull/189

   Three HTML files edited with new design for mails
   
   * RegisterUserTemplate.html,
   * InvitationTemplate.html, and
   * ResetPasswordTemplate.html
   
   Here you can find the view of the test :
   
   ![1Register](https://github.com/apache/openmeetings/assets/52314615/dad1bb09-e62f-44d7-a7a5-072009194c89)
   ![2Invitation](https://github.com/apache/openmeetings/assets/52314615/46ee4d9b-77c4-4e07-aaa1-045db8376e35)
   ![3ResetPassword](https://github.com/apache/openmeetings/assets/52314615/957feaea-07f6-4d70-b76d-5e4c58942e47)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax merged pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax merged PR #189:
URL: https://github.com/apache/openmeetings/pull/189


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193353241


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Very much appreciated :)
   Give me couple of days :)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] ali-alhaidary commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "ali-alhaidary (via GitHub)" <gi...@apache.org>.
ali-alhaidary commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193170184


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   very good, thanks...



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193176950


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   You're welcome
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193351594


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Ok, and I dropped the design with `<style>` in the `<head>` tag on [gist](https://gist.github.com/geoffreylgv/d83bf33b104a5d33a904ff65e7b75ca1)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1201630809


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/ResetPasswordTemplate.html:
##########
@@ -19,11 +19,33 @@
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>

Review Comment:
   This `<head>...</head>` should be dropped :)



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,37 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>

Review Comment:
   This `<head>...</head>` should be dropped :)



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/RegisterUserTemplate.html:
##########
@@ -19,21 +19,37 @@
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>

Review Comment:
   This `<head>...</head>` should be dropped :)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1192003392


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

Review Comment:
   Please avoid using external resources



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   inline styling should be avoided, it will fail in case CSP will be enabled



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   would it work for RTL languages?



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->

Review Comment:
   commented code should be removed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1203689301


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/AbstractTemplatePage.html:
##########
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<!DOCTYPE html>
+<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		body {
+			background-color: #f5f5f5;
+			font-family: 'Segoe UI', sans-serif;
+			font-size: 14px;
+			line-height: 1.4;
+			margin: 0;
+			padding: 0;
+		}
+
+		h2 {
+			font-size: 25px;
+			font-weight: normal;
+			margin: 0;
+			margin-bottom: 15px;
+		}
+
+		p,
+		span {
+			margin-bottom: 1em;
+		}
+
+		a {
+			color: #007bff;
+			text-decoration: none;
+		}
+
+		.main {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px;
+			width: 100%;
+		}
+
+		.wrapper {
+			max-width: 580px;
+			margin: 0 auto;
+			padding: 15px;
+			width: 100%;
+			border-radius: 5px;
+			background-color: #fff;
+		}
+
+		.action a {
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			font-weight: bold;
+			margin: 0;
+			border-radius: 5px;
+			padding: 12px 25px;
+			background-color: #3498db;
+			border-color: #3498db;
+			color: #ffffff;
+		}
+
+		@media only screen and (max-width: 600px) {
+			.main {
+				padding: 0;
+				width: 100%;
+			}
+
+			.wrapper {
+				max-width: 560px;
+				margin: 0 auto;
+				padding: 10px;
+				border-left-width: 0;
+				border-radius: 0;
+				border-right-width: 0;
+
+				.action {

Review Comment:
   I have removed the none CSS, moreover, this will have the parent style.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1194643507


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Hi Mr @solomax , I will take a look.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] ali-alhaidary commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "ali-alhaidary (via GitHub)" <gi...@apache.org>.
ali-alhaidary commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193143830


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   can I have screen shots for RTL please



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1203742650


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/AbstractTemplatePage.html:
##########
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<!DOCTYPE html>
+<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		body {
+			background-color: #f5f5f5;
+			font-family: 'Segoe UI', sans-serif;
+			font-size: 14px;
+			line-height: 1.4;
+			margin: 0;
+			padding: 0;
+		}
+
+		h2 {
+			font-size: 25px;
+			font-weight: normal;
+			margin: 0;
+			margin-bottom: 15px;
+		}
+
+		p,
+		span {
+			margin-bottom: 1em;
+		}
+
+		a {
+			color: #007bff;
+			text-decoration: none;
+		}
+
+		.main {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px;
+			width: 100%;
+		}
+
+		.wrapper {
+			max-width: 580px;
+			margin: 0 auto;
+			padding: 15px;
+			width: 100%;
+			border-radius: 5px;
+			background-color: #fff;
+		}
+
+		.action a {
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			font-weight: bold;
+			margin: 0;
+			border-radius: 5px;
+			padding: 12px 25px;
+			background-color: #3498db;
+			border-color: #3498db;
+			color: #ffffff;
+		}
+
+		@media only screen and (max-width: 600px) {
+			.main {
+				padding: 0;
+				width: 100%;
+			}
+
+			.wrapper {
+				max-width: 560px;
+				margin: 0 auto;
+				padding: 10px;
+				border-left-width: 0;
+				border-radius: 0;
+				border-right-width: 0;
+
+				.action {

Review Comment:
   Oh, re-came up and see that you are talking about the direct imbrication, doesn't work on all websites?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on PR #189:
URL: https://github.com/apache/openmeetings/pull/189#issuecomment-1561551238

   It is a real pleasure, thank you too; because, I learned a lot through this contribution.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1197283184


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   @geoffreylgv let me check internally, then I'll try to set this up at demo server (or maybe merge then polish :)))



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1192923699


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->

Review Comment:
   Ok, comments will be removed.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193138315


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   Yeah, it works for RTL languages.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1197288621


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/FeedbackTemplate.html:
##########
@@ -20,12 +20,23 @@
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
-<wicket:extend>
-	<strong><span wicket:id="appname"></span> - Feedback</strong><br />
-	Message from User: <span wicket:id="username"></span><br/>
-	Mail: <span wicket:id="email"></span><br/>
-	Message: <span wicket:id="message"></span><br/><br/>
-	<strong>Click on this link to participate in the Meeting:</strong><br/>
-	<a wicket:id="invitation_link">Click here to enter room</a><br/>
-</wicket:extend>
+<div class="main">

Review Comment:
   one quick comment:
   
   ```
   <div class="main">
       <div class="container">
         <div class="wrapper">
   ```
   
   being repeated in all `*.html` files in such case it should be moved to `AbstractTemplatePage.html` as folloows:
   
   ```
   	<body class="main">
   		<div wicket:id="container" class="container">
   			<div class="wrapper">
   				<wicket:child/>
   			</div>
   		</div>
   	</body>
   ```
   
   is it necessary to have both `<div class="container">` and `<div class="wrapper">` ? IMO we can have only one of them :)
   
   please NOTE indentation should be made with tabs, not spaces :)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on PR #189:
URL: https://github.com/apache/openmeetings/pull/189#issuecomment-1561485579

   Thanks for the contribution @geoffreylgv 
   
   Updated version will be available at CI https://ci-builds.apache.org/job/OpenMeetings/job/openmeetings/ (in couple of hours)
   and at demo server https://demo-openmeetings.apache.org/openmeetings (in about a day or so)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1192924468


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   OK, I'll confirm that



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1192919888


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

Review Comment:
   >Please avoid using external resources
   
   Ok, I get it



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1198727370


##########
.vscode/settings.json:
##########
@@ -0,0 +1,4 @@
+{

Review Comment:
   This file need to be dropped



##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/AbstractTemplatePage.html:
##########
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<!DOCTYPE html>
+<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		body {
+			background-color: #f5f5f5;
+			font-family: 'Segoe UI', sans-serif;
+			font-size: 14px;
+			line-height: 1.4;
+			margin: 0;
+			padding: 0;
+		}
+
+		h2 {
+			font-size: 25px;
+			font-weight: normal;
+			margin: 0;
+			margin-bottom: 15px;
+		}
+
+		p,
+		span {
+			margin-bottom: 1em;
+		}
+
+		a {
+			color: #007bff;
+			text-decoration: none;
+		}
+
+		.main {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px;
+			width: 100%;
+		}
+
+		.wrapper {
+			max-width: 580px;
+			margin: 0 auto;
+			padding: 15px;
+			width: 100%;
+			border-radius: 5px;
+			background-color: #fff;
+		}
+
+		.action a {
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			font-weight: bold;
+			margin: 0;
+			border-radius: 5px;
+			padding: 12px 25px;
+			background-color: #3498db;
+			border-color: #3498db;
+			color: #ffffff;
+		}
+
+		@media only screen and (max-width: 600px) {
+			.main {
+				padding: 0;
+				width: 100%;
+			}
+
+			.wrapper {
+				max-width: 560px;
+				margin: 0 auto;
+				padding: 10px;
+				border-left-width: 0;
+				border-radius: 0;
+				border-right-width: 0;
+
+				.action {

Review Comment:
   AFAIK such definition is illegal for plain CSS (looks like SASS :)))



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1201958974


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/AbstractTemplatePage.html:
##########
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<!DOCTYPE html>
+<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		body {
+			background-color: #f5f5f5;
+			font-family: 'Segoe UI', sans-serif;
+			font-size: 14px;
+			line-height: 1.4;
+			margin: 0;
+			padding: 0;
+		}
+
+		h2 {
+			font-size: 25px;
+			font-weight: normal;
+			margin: 0;
+			margin-bottom: 15px;
+		}
+
+		p,
+		span {
+			margin-bottom: 1em;
+		}
+
+		a {
+			color: #007bff;
+			text-decoration: none;
+		}
+
+		.main {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px;
+			width: 100%;
+		}
+
+		.wrapper {
+			max-width: 580px;
+			margin: 0 auto;
+			padding: 15px;
+			width: 100%;
+			border-radius: 5px;
+			background-color: #fff;
+		}
+
+		.action a {
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			font-weight: bold;
+			margin: 0;
+			border-radius: 5px;
+			padding: 12px 25px;
+			background-color: #3498db;
+			border-color: #3498db;
+			color: #ffffff;
+		}
+
+		@media only screen and (max-width: 600px) {
+			.main {
+				padding: 0;
+				width: 100%;
+			}
+
+			.wrapper {
+				max-width: 560px;
+				margin: 0 auto;
+				padding: 10px;
+				border-left-width: 0;
+				border-radius: 0;
+				border-right-width: 0;
+
+				.action {

Review Comment:
   this one need to be changed :)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1194525863


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Hello @geoffreylgv,
   
   I've checked the code, according to my tests only internal `<div>` was rendered (`<html>` and `<head>` were dropped)
   
   I've fixed it (please see the branch `OPENMEETINGS-2774-emails`)
   
   `TestEmailTemplate` can be used to test the actual HTML
   
   Could you please take a look at this branch?
   
   As you can see I've moved your `<style>` tag into `AbstractTemplatePage` (which is parent for all emails) so the styles can be re-used :))
   
   Please let me know WDYT :)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] solomax commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "solomax (via GitHub)" <gi...@apache.org>.
solomax commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193338703


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Hello @geoffreylgv,
   
   I did quick search and was able to find this page: https://www.campaignmonitor.com/css/
   According to it `<style>` tag should work
   
   I'll do some internal testing and will report back



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193145124


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
+      <tr>
+          <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
+          <td class="container" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
+              <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
+                  <!-- START CONTAINER -->
+                  <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
+                      <!-- START MAIN MSG -->
+                      <tr>
+                          <td class="wrapper" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+                                  <tr>
+                                      <td style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top;" valign="top">
+                                        <!-- INVITATION LABEL -->
+                                          <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 15px;"></span>
+                                          <!-- END INVITATION LABEL -->
+                                          <br /><br />
+                                          <!-- INVITATION MSG -->
+                                          <!-- <span wicket:id="titleLbl" style="font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 20px;"></span><br /><br /> -->
+                                          <span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
+                                          <span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
+                                          <!-- END INVITATION MSG -->
+                                          <br />
+                                          <table
+                                              role="presentation"
+                                              border="0"
+                                              cellpadding="0"
+                                              cellspacing="0"
+                                              class="btn btn-primary"
+                                              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;"
+                                              width="100%"
+                                          >
+                                              <tbody>
+                                                  <tr>
+                                                      <td align="left" style="font-family: 'Montserrat', sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">

Review Comment:
   Yeah, Mr. @ali-alhaidary
   ![4RTL](https://github.com/apache/openmeetings/assets/52314615/4b2b2861-0a18-4781-8fbd-6b6da8321fb2)
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1198775825


##########
.vscode/settings.json:
##########
@@ -0,0 +1,4 @@
+{

Review Comment:
   Done



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1203646127


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,37 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>

Review Comment:
   Heloo. Sorry, my bad



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1203646127


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,37 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>

Review Comment:
   Helo, sorry, my bad



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1192923612


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   >inline styling should be avoided, it will fail in case CSP will be enabled
   
   The simple styling (embedded in the head) is not readable by some mail clients, which causes a distortion of the design ; it's not displayed the way you want.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1193138169


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Hi Mr @solomax , the mail clients ignore the css style in the head and so the design is not there anymore, we have the mail by default.
   Do you have any recommendations?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1197396627


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/FeedbackTemplate.html:
##########
@@ -20,12 +20,23 @@
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
-<wicket:extend>
-	<strong><span wicket:id="appname"></span> - Feedback</strong><br />
-	Message from User: <span wicket:id="username"></span><br/>
-	Mail: <span wicket:id="email"></span><br/>
-	Message: <span wicket:id="message"></span><br/><br/>
-	<strong>Click on this link to participate in the Meeting:</strong><br/>
-	<a wicket:id="invitation_link">Click here to enter room</a><br/>
-</wicket:extend>
+<div class="main">

Review Comment:
   Hi, Ok, I'll move it to `AbstractTemplatePage.html` to do not repeat my self :)
   And yes, we can have one of them, I will fix the style and remove one `<div></div>`.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1196004600


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/InvitationTemplate.html:
##########
@@ -16,20 +16,172 @@
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
-
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+    @media only screen and (max-width: 620px) {
+      table.body h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table.body p,
+      table.body td,
+      table.body span,
+      table.body a {
+        font-size: 16px !important;
+      }
+
+      table.body .wrapper,
+      table.body .article {
+        padding: 10px !important;
+      }
+
+      table.body .content {
+        padding: 0 !important;
+      }
+
+      table.body .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table.body .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table.body .btn table {
+        width: 100% !important;
+      }
+
+      table.body .btn a {
+        width: 100% !important;
+      }
+
+    }
+
+    @mwedia all {
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        font-family: 'Montserrat', sans-serif;
+        font-size: 14px;
+      }
+
+    }
+  </style>
+</head>
+
 <wicket:extend>
-	<strong><span wicket:id="titleLbl"></span></strong><br />
-	<span wicket:id="userLbl"></span> <span wicket:id="user"></span><br/>
-	<span wicket:id="messageLbl"></span> <span wicket:id="message"></span><br/>
-	<div wicket:id="links">
-		<span wicket:id="comment_for_link1"></span><br/>
-		<a wicket:id="invitation_link1"><span wicket:id="clickMe"></span></a><br/>
-		<br/><br/>
-		<span wicket:id="comment_for_link2"></span><br/>
-		<span wicket:id="invitation_link2"></span>
-	</div>
+
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">

Review Comment:
   Hi @solomax, can we have a build of this latest change (to deploy on vm/or any server) and test it to make sure everything is ok with the mail?
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [openmeetings] geoffreylgv commented on a diff in pull request #189: fixed #188 - [OPENMEETINGS-2774] Improve the mails (template) design

Posted by "geoffreylgv (via GitHub)" <gi...@apache.org>.
geoffreylgv commented on code in PR #189:
URL: https://github.com/apache/openmeetings/pull/189#discussion_r1198615350


##########
openmeetings-service/src/main/java/org/apache/openmeetings/service/mail/template/FeedbackTemplate.html:
##########
@@ -20,12 +20,23 @@
 -->
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd">
-<wicket:extend>
-	<strong><span wicket:id="appname"></span> - Feedback</strong><br />
-	Message from User: <span wicket:id="username"></span><br/>
-	Mail: <span wicket:id="email"></span><br/>
-	Message: <span wicket:id="message"></span><br/><br/>
-	<strong>Click on this link to participate in the Meeting:</strong><br/>
-	<a wicket:id="invitation_link">Click here to enter room</a><br/>
-</wicket:extend>
+<div class="main">

Review Comment:
   Hello, 
   - fixed the style to have the `<body></body>` with its styles, 
   - updated the `<div class="main"></div>` to center the `<div class="wrapper"></div>` with specific padding and 
   - removed the `<div class="container"></div>`.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org