forked from brooksbingham/theme-elegance
refactor: style contact us page
parent
a9fe9fe13f
commit
448196b73f
|
|
@ -953,6 +953,10 @@ select {
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1090,6 +1094,10 @@ select {
|
|||
width: max-content;
|
||||
}
|
||||
|
||||
.w-1\/5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.max-w-\[100px\] {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
|
@ -1114,6 +1122,18 @@ select {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-6xl {
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -1624,6 +1644,15 @@ select {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-slate-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(100 116 139 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.line-through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
|
@ -1636,6 +1665,14 @@ select {
|
|||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.underline-offset-auto {
|
||||
text-underline-offset: auto;
|
||||
}
|
||||
|
||||
.underline-offset-1 {
|
||||
text-underline-offset: 1px;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
|
|
@ -1697,6 +1734,70 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
--tw-ring-color: transparent;
|
||||
}
|
||||
|
||||
.file\:mr-4::file-selector-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.file\:w-full::file-selector-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file\:rounded-full::file-selector-button {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.file\:border-0::file-selector-button {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.file\:bg-violet-50::file-selector-button {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 243 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.file\:bg-transparent::file-selector-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.file\:px-4::file-selector-button {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.file\:py-2::file-selector-button {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.file\:text-sm::file-selector-button {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.file\:font-semibold::file-selector-button {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.file\:text-violet-700::file-selector-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(109 40 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.file\:text-blue-950::file-selector-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(23 37 84 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-gray-500::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-gray-500::placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.last\:hidden:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1762,6 +1863,21 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.hover\:file\:bg-violet-100::file-selector-button:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(237 233 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:file\:bg-blue-900::file-selector-button:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:file\:text-blue-900::file-selector-button:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-0:focus {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,93 +22,89 @@
|
|||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
<section class="contact-form">
|
||||
<form action="{$urls.pages.contact}" method="post" {if $contact.allow_file_upload}enctype="multipart/form-data"{/if}>
|
||||
|
||||
{if $notifications}
|
||||
<div class="col-xs-12 alert {if $notifications.nw_error}alert-danger{else}alert-success{/if}">
|
||||
<ul>
|
||||
{foreach $notifications.messages as $notif}
|
||||
<li>{$notif}</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section class="mx-auto max-w-6xl">
|
||||
<form class="w-full flex flex-col gap-4" action="{$urls.pages.contact}" method="post" {if $contact.allow_file_upload}enctype="multipart/form-data"{/if}>
|
||||
{if !$notifications || $notifications.nw_error}
|
||||
<section class="form-fields">
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-md-9 col-md-offset-3">
|
||||
<h3>{l s='Contact us' d='Shop.Theme.Global'}</h3>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-9 col-md-offset-3">
|
||||
<h3 class="text-xl font-medium">{l s='Contact us' d='Shop.Theme.Global'}</h3>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">{l s='Subject' d='Shop.Forms.Labels'}</label>
|
||||
<div class="col-md-6">
|
||||
<select name="id_contact" class="form-control form-control-select">
|
||||
</div>
|
||||
<section class="form-fields w-full flex max-md:flex-col flex-wrap">
|
||||
<div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
|
||||
<label class="col-md-3 font-medium">{l s='Subject' d='Shop.Forms.Labels'}</label>
|
||||
<select name="id_contact" class="dropdown-toggle relative py-1 px-4 pr-8 w-full leading-1 border border-gray-300 text-left">
|
||||
{foreach from=$contact.contacts item=contact_elt}
|
||||
<option value="{$contact_elt.id_contact}">{$contact_elt.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">{l s='Email address' d='Shop.Forms.Labels'}</label>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
|
||||
<label class="col-md-3 font-medium">{l s='Email address' d='Shop.Forms.Labels'}</label>
|
||||
<input
|
||||
class="form-control"
|
||||
class="form-control px-4 py-1 border border-gray-300 w-full"
|
||||
name="from"
|
||||
type="email"
|
||||
value="{$contact.email}"
|
||||
placeholder="{l s='your@email.com' d='Shop.Forms.Help'}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if $contact.orders}
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">{l s='Order reference' d='Shop.Forms.Labels'}</label>
|
||||
<div class="col-md-6">
|
||||
<select name="id_order" class="form-control form-control-select">
|
||||
<div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
|
||||
<label class="col-md-3 font-medium">
|
||||
{l s='Order reference' d='Shop.Forms.Labels'}
|
||||
|
||||
<i class="text-xs font-light">
|
||||
{l s='( optional )' d='Shop.Forms.Help'}
|
||||
</i>
|
||||
</label>
|
||||
<div class="flex flex-col">
|
||||
<select name="id_order" class="dropdown-toggle relative w-full py-1 px-4 pr-8 leading-1 border border-gray-300 text-left">
|
||||
<option value="">{l s='Select reference' d='Shop.Forms.Help'}</option>
|
||||
{foreach from=$contact.orders item=order}
|
||||
<option value="{$order.id_order}">{$order.reference}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
<span class="col-md-3 form-control-comment">
|
||||
{l s='optional' d='Shop.Forms.Help'}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{if $contact.allow_file_upload}
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">{l s='Attachment' d='Shop.Forms.Labels'}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="file" name="fileUpload" class="filestyle" data-buttonText="{l s='Choose file' d='Shop.Theme.Actions'}">
|
||||
</div>
|
||||
<span class="col-md-3 form-control-comment">
|
||||
{l s='optional' d='Shop.Forms.Help'}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">{l s='Message' d='Shop.Forms.Labels'}</label>
|
||||
<div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
|
||||
<label class="col-md-3 font-medium">{l s='Message' d='Shop.Forms.Labels'}</label>
|
||||
<div class="col-md-9">
|
||||
<textarea
|
||||
class="form-control"
|
||||
class="form-control px-4 py-1 border border-gray-300 w-full"
|
||||
name="message"
|
||||
placeholder="{l s='How can we help?' d='Shop.Forms.Help'}"
|
||||
rows="3"
|
||||
rows="1"
|
||||
>{if $contact.message}{$contact.message}{/if}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{if $contact.allow_file_upload}
|
||||
<div class="form-group flex flex-col gap-2 px-2 my-2 w-full md:w-1/2">
|
||||
<label class="col-md-3 font-medium">{l s='Attachment' d='Shop.Forms.Labels'}
|
||||
<i class="text-xs font-light">
|
||||
{l s='( optional )' d='Shop.Forms.Help'}
|
||||
</i>
|
||||
</label>
|
||||
<div class="flex flex-col w-full">
|
||||
<input type="file" name="fileUpload"
|
||||
class="form-control text-sm text-blue-950
|
||||
border border-gray-300 my-2 w-full
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-full file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-transparent file:text-blue-950
|
||||
hover:file:text-blue-900"
|
||||
data-buttonText="{l s='Choose file' d='Shop.Theme.Actions'}">
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{if isset($id_module)}
|
||||
<div class="form-group row">
|
||||
<div class="offset-md-3">
|
||||
|
|
@ -127,7 +123,7 @@
|
|||
</style>
|
||||
<input type="text" name="url" value=""/>
|
||||
<input type="hidden" name="token" value="{$token}" />
|
||||
<input class="btn btn-primary" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
|
||||
<input class="uppercase font-medium py-2 text-center w-full bg-blue-950 hover:bg-blue-900 text-gray-50" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
|
||||
</footer>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,39 +24,26 @@
|
|||
*}
|
||||
|
||||
<div class="contact-rich">
|
||||
<h4>{l s='Store information' d='Shop.Theme.Global'}</h4>
|
||||
<div class="block">
|
||||
<div class="icon"><i class="material-icons"></i></div>
|
||||
<div class="data">{$contact_infos.address.formatted nofilter}</div>
|
||||
</div>
|
||||
{if $contact_infos.phone}
|
||||
<hr/>
|
||||
<div class="block">
|
||||
<div class="icon"><i class="material-icons"></i></div>
|
||||
<div class="data">
|
||||
{l s='Call us:' d='Shop.Theme.Global'}<br/>
|
||||
<a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{if $contact_infos.fax}
|
||||
<hr/>
|
||||
<div class="block">
|
||||
<div class="icon"><i class="material-icons"></i></div>
|
||||
<div class="data">
|
||||
{l s='Fax:' d='Shop.Theme.Global'}<br/>
|
||||
{$contact_infos.fax}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{if $contact_infos.email}
|
||||
<hr/>
|
||||
<div class="block">
|
||||
<div class="icon"><i class="material-icons"></i></div>
|
||||
<div class="data email">
|
||||
{l s='Email us:' d='Shop.Theme.Global'}<br/>
|
||||
</div>
|
||||
<a href="mailto:{$contact_infos.email}">{$contact_infos.email}</a>
|
||||
</div>
|
||||
{/if}
|
||||
<h4 class="text-2xl font-bold">{l s='Store information' d='Shop.Theme.Global'}</h4>
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<h4 class="text-xl font-medium mt-6">
|
||||
Our Stylists
|
||||
</h4>
|
||||
<p>
|
||||
Our Stylists are here for you. We have helped dress some of the biggest names in Hollywood and Professional
|
||||
sports. Our staff of highly experienced tailors and stylists understand the demands placed on you to always look
|
||||
your very best.
|
||||
</p>
|
||||
<p class="mt-3">
|
||||
Your personal stylist is ready to assist you in all your clothing needs.
|
||||
</p>
|
||||
<h4 class="text-xl font-medium mt-6">Customer Service</h4>
|
||||
<p> Let us show you how custom works.
|
||||
We will walk you through your first order.
|
||||
Just drop us a line at
|
||||
<a href="mailto:customerservice@brooksbingham.com" class="underline underline-offset-2">customerservice@brooksbingham.com</a>
|
||||
, and we will get in touch with you.
|
||||
</p>
|
||||
</div>
|
||||
<hr class="my-8"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
{block name='page_header_container'}{/block}
|
||||
|
||||
{block name='left_column'}
|
||||
<div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
|
||||
<div id="left-column" class="">
|
||||
{widget name="ps_contactinfo" hook='displayLeftColumn'}
|
||||
</div>
|
||||
{/block}
|
||||
|
|
|
|||
Loading…
Reference in New Issue