[FIX] website: snippets usability improvements

- Suggest correct colors for <hr/> snippet
- Make alignment options more obvious for s_three_column
- Add alignment options for s_share snippet
- Review carousel design
This commit is contained in:
Cocographique
2018-08-20 12:22:33 +02:00
committed by qsm-odoo
parent 5637dea114
commit 3babdebc5b
+10 -4
View File
@@ -156,6 +156,9 @@
<h3 class="card-title">Feature Two</h3>
<p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the column to create a new one as a copy.</p>
</div>
<div class="card-footer">
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
</div>
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
@@ -164,6 +167,9 @@
<div class="card-body">
<h3 class="card-title">Feature Three</h3>
<p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change it's <em>rounded corner</em> style.</p>
<div class="s_btn text-left pb0 pt16" data-name="Button">
<a href="#" class="btn btn-primary btn-sm">Learn more</a>
</div>
</div>
</div>
</div>
@@ -229,7 +235,7 @@
<div class="s_hr pt8 pb32">
<hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
</div>
<p>Storytelling is powerful.<br/> It draws readers in and engages them..</p>
<p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
<a href="/start" class="btn btn-epsilon rounded-circle">Start your journey</a>
</div>
@@ -245,7 +251,7 @@
<h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
<h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
<p class="mt24">Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
<div class="s_share pt16 pb16">
<div class="s_share text-left pt16 pb16">
<a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank">
<i class="fa fa-facebook rounded shadow-sm"/>
</a>
@@ -903,7 +909,7 @@
data-selector=".s_hr"
data-target="hr"
data-color-prefix="border-"
data-palette-exclude="transparent_grayscale, grayscale"
data-palette-exclude="transparent_grayscale, common"
data-palette-title="Separator Color">
<div class="dropdown-submenu">
<a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
@@ -951,7 +957,7 @@
</div>
<!-- H-ALIGN | .s_btn -->
<div data-selector=".s_btn">
<div data-selector=".s_btn, .s_share">
<div class="dropdown-submenu">
<a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-align-left"/>Alignment</a>
<div class="dropdown-menu" role="menu">