fix: Improve template readability

This commit is contained in:
Glenn Y. Rolland 2022-08-18 21:32:42 +02:00
parent 5dfea6c063
commit 858eaee5a7

View file

@ -1,11 +1,12 @@
<mjml>
<mj-head>
<mj-style inline="inline">
.footer-link { color: white !important; font-weight: bold; text-decoration: underline !important; }
</mj-style>
<mj-style inline="inline">
.footer-link { color: white !important; font-weight: bold; text-decoration: underline !important; }
</mj-style>
</mj-head>
<mj-body>
<!-- section 1 -->
<mj-section>
<mj-group>
<mj-column>
@ -15,41 +16,104 @@
<mj-text font-size="20px" color="#F45E43" font-family="helvetica" align="center">
Mardi 28 aout 2020
</mj-text>
<mj-button href="#" font-family="Helvetica" background-color="#f45e43" color="white">Visit Board
<mj-button href="#" font-family="Helvetica" background-color="#f45e43" color="white">Visit Musala
</mj-button>
</mj-column>
</mj-group>
</mj-section>
<!-- Title section -->
<mj-section>
<mj-column>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica" align="center">
Your daily task list for
</mj-text>
<mj-text font-size="24px" font-weight="bold" color="#F45E43" font-family="helvetica" align="center">
BC.Business.Operational
<mj-text font-size="24px" color="#F45E43" font-family="helvetica" align="center">
Your daily task list
</mj-text>
<mj-divider border-color="#F45E43"></mj-divider>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">Topic ABC
<!-- Chapter -->
<mj-section>
<mj-column>
<mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">Late
</mj-button>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" font-weight="bold" align="left">
Topic dsfsdfs
</mj-text>
<mj-text font-size="16px" color="#666" font-family="helvetica" align="left">
Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
<p style="margin: 0 0 4px 0;"><b>Super task number one</b></p>
<p style="margin: 0 0 4px 0; color: #bbb; font-size: 14px;"><b>Draft</b> on <b>cloud.boldcode.io</b> &ndash; Due for 2001-10-10</p>
<p style="margin: 0 0 4px 0; ">Lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla &blacksquare; <a href="#rezrez" style="color: #f45e43;">read more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
<p style="margin: 0 0 4px 0;"><b>Super task number one</b></p>
<p style="margin: 0 0 4px 0; color: #bbb; font-size: 14px;"><b>Draft</b> on <b>cloud.boldcode.io</b> &ndash; Due for 2001-10-10</p>
<p style="margin: 0 0 4px 0; ">Lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla &blacksquare; <a href="#rezrez" style="color: #f45e43;">read more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
<p><b>Super task number one</b><br/></p>
<p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
</mj-column>
</mj-section>
<!-- Chapter -->
<mj-section>
<mj-column>
<mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">Today
</mj-button>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b></p>
<p font-size="14px">Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b><br/></p>
<p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b><br/></p>
<p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
</mj-column>
</mj-section>
<!-- Chapter -->
<mj-section>
<mj-column>
<mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">This week
</mj-button>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b></p>
<p font-size="14px">Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b><br/></p>
<p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
<mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
<p><b>Super task number one</b><br/></p>
<p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
</mj-text>
</mj-column>
</mj-section>
<!-- footer -->
<mj-section>
<mj-column background-color="white" inner-background-color="#f45e43" padding-right="20px" padding-left="20px">
<mj-text font-size="16px" color="#ffffff" font-family="helvetica" align="left" >
To stop receiving these emails, you can change your <a href="#" class="footer-link">notification preferences</a> in <a href="#" class="footer-link">Musala</a>.
</mj-text>
<mj-text font-size="16px" color="#ffffff" font-family="helvetica" align="left">
To stop receiving these emails, you can change your <a href="#" class="footer-link">notification preferences</a> in <a href="#" class="footer-link">Musala</a>.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>