Skip to content

Commit bc569b7

Browse files
RickR2HRickR2H
authored
Update styling of the User Profile page and the Single Contact page (#33780)
* Styling com_users & com_contact frontend * Added margin to elements and image alignment * Removed margin from contact form fieldset * Removed obsolete code * Fix fieldset double id and added class * Fix styling indentation
1 parent 0835fb0 commit bc569b7

File tree

5 files changed

+103
-34
lines changed

5 files changed

+103
-34
lines changed

‎components/com_contact/tmpl/contact/default.php‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -91,35 +91,41 @@
9191
<?php echo $this->item->event->beforeDisplayContent; ?>
9292

9393
<?php if ($this->params->get('show_info', 1)) : ?>
94-
<?php echo '<h3>' . Text::_('COM_CONTACT_DETAILS') . '</h3>'; ?>
95-
96-
<?php if ($this->item->image && $tparams->get('show_image')) : ?>
97-
<div class="com-contact__thumbnail thumbnail float-end">
98-
<?php echo HTMLHelper::_(
99-
'image',
100-
$this->item->image,
101-
htmlspecialchars($this->item->name, ENT_QUOTES, 'UTF-8'),
102-
array('itemprop' => 'image')
103-
); ?>
104-
</div>
105-
<?php endif; ?>
106-
107-
<?php if ($this->item->con_position && $tparams->get('show_position')) : ?>
108-
<dl class="com-contact__position contact-position dl-horizontal">
109-
<dt><?php echo Text::_('COM_CONTACT_POSITION'); ?>:</dt>
110-
<dd itemprop="jobTitle">
111-
<?php echo $this->item->con_position; ?>
112-
</dd>
113-
</dl>
114-
<?php endif; ?>
11594

116-
<?php echo $this->loadTemplate('address'); ?>
95+
<div class="com-contact__container">
96+
<?php echo '<h3>' . Text::_('COM_CONTACT_DETAILS') . '</h3>'; ?>
97+
98+
<?php if ($this->item->image && $tparams->get('show_image')) : ?>
99+
<div class="com-contact__thumbnail thumbnail">
100+
<?php echo HTMLHelper::_(
101+
'image',
102+
$this->item->image,
103+
htmlspecialchars($this->item->name, ENT_QUOTES, 'UTF-8'),
104+
array('itemprop' => 'image')
105+
); ?>
106+
</div>
107+
<?php endif; ?>
108+
109+
<?php if ($this->item->con_position && $tparams->get('show_position')) : ?>
110+
<dl class="com-contact__position contact-position dl-horizontal">
111+
<dt><?php echo Text::_('COM_CONTACT_POSITION'); ?>:</dt>
112+
<dd itemprop="jobTitle">
113+
<?php echo $this->item->con_position; ?>
114+
</dd>
115+
</dl>
116+
<?php endif; ?>
117+
118+
<div class="com-contact__info">
119+
<?php echo $this->loadTemplate('address'); ?>
120+
121+
<?php if ($tparams->get('allow_vcard')) : ?>
122+
<?php echo Text::_('COM_CONTACT_DOWNLOAD_INFORMATION_AS'); ?>
123+
<a href="<?php echo Route::_('index.php?option=com_contact&amp;view=contact&amp;id=' . $this->item->id . '&amp;format=vcf'); ?>">
124+
<?php echo Text::_('COM_CONTACT_VCARD'); ?></a>
125+
<?php endif; ?>
126+
</div>
127+
</div>
117128

118-
<?php if ($tparams->get('allow_vcard')) : ?>
119-
<?php echo Text::_('COM_CONTACT_DOWNLOAD_INFORMATION_AS'); ?>
120-
<a href="<?php echo Route::_('index.php?option=com_contact&amp;view=contact&amp;id=' . $this->item->id . '&amp;format=vcf'); ?>">
121-
<?php echo Text::_('COM_CONTACT_VCARD'); ?></a>
122-
<?php endif; ?>
123129
<?php endif; ?>
124130

125131
<?php if ($tparams->get('show_email_form') && ($this->item->email_to || $this->item->user_id)) : ?>

‎components/com_contact/tmpl/contact/default_form.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<?php endif; ?>
2626
<?php $fields = $this->form->getFieldset($fieldset->name); ?>
2727
<?php if (count($fields)) : ?>
28-
<fieldset>
28+
<fieldset class="m-0">
2929
<?php if (isset($fieldset->label) && ($legend = trim(Text::_($fieldset->label))) !== '') : ?>
3030
<legend><?php echo $legend; ?></legend>
3131
<?php endif; ?>

‎components/com_users/tmpl/profile/default.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
<?php if (Factory::getUser()->id == $this->data->id) : ?>
2727
<ul class="com-users-profile__edit btn-toolbar float-end">
2828
<li class="btn-group">
29-
<a class="btn" href="<?php echo Route::_('index.php?option=com_users&task=profile.edit&user_id=' . (int) $this->data->id); ?>">
30-
<span class="icon-user" aria-hidden="true"></span> <?php echo Text::_('COM_USERS_EDIT_PROFILE'); ?>
29+
<a class="btn btn-primary" href="<?php echo Route::_('index.php?option=com_users&task=profile.edit&user_id=' . (int) $this->data->id); ?>">
30+
<span class="icon-user-edit" aria-hidden="true"></span> <?php echo Text::_('COM_USERS_EDIT_PROFILE'); ?>
3131
</a>
3232
</li>
3333
</ul>

‎components/com_users/tmpl/profile/default_core.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
use Joomla\CMS\Language\Text;
1414

1515
?>
16-
<fieldset id="com-users-profile__core users-profile-core">
16+
<fieldset id="users-profile-core" class="com-users-profile__core">
1717
<legend>
1818
<?php echo Text::_('COM_USERS_PROFILE_CORE_LEGEND'); ?>
1919
</legend>

‎templates/cassiopeia/scss/blocks/_global.scss‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,11 @@ small,
136136
}
137137

138138
dd {
139-
padding: 0 0 0 ($cassiopeia-grid-gutter*2);
140-
margin-bottom: 0;
139+
padding: 0;
140+
word-wrap: break-word;
141141
}
142142

143143
[dir="rtl"] dd {
144-
padding: 0 ($cassiopeia-grid-gutter*2) 0 0;
145144
margin-right: 0;
146145
margin-left: auto;
147146
}
@@ -150,6 +149,70 @@ th dd {
150149
font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
151150
}
152151

152+
.com-contact__thumbnail {
153+
text-align: left;
154+
}
155+
156+
@include media-breakpoint-up(lg) {
157+
dl.dl-horizontal {
158+
display: grid;
159+
grid-template-columns: auto 1fr;
160+
161+
dt {
162+
grid-column-start: 1;
163+
grid-column-end: 2;
164+
}
165+
166+
dd {
167+
grid-column-start: 2;
168+
grid-column-end: 3;
169+
padding: 0 0 0 $cassiopeia-grid-gutter;
170+
margin-bottom: 0;
171+
}
172+
}
173+
174+
.com-contact__container {
175+
display: grid;
176+
grid-template-columns: repeat(4, 1fr);
177+
grid-template-rows: repeat(4, auto);
178+
grid-gap: 1rem;
179+
margin-bottom: $cassiopeia-grid-gutter;
180+
181+
h3 {
182+
grid-column: 1 / 5;
183+
}
184+
185+
.com-contact__thumbnail {
186+
grid-column: 3 / 5;
187+
grid-row: 2 / 5;
188+
margin-bottom: $cassiopeia-grid-gutter;
189+
text-align: right;
190+
}
191+
192+
.com-contact__position {
193+
grid-column: 1 / 3;
194+
grid-row: 2 / 3;
195+
}
196+
197+
.com-contact__info {
198+
grid-column: 1 / 3;
199+
grid-row: 3 / 4;
200+
}
201+
}
202+
203+
[dir="rtl"] dl.dl-horizontal {
204+
dd {
205+
padding: 0 $cassiopeia-grid-gutter 0 0;
206+
}
207+
}
208+
209+
.com-users-profile {
210+
dt {
211+
min-width: 180px;
212+
}
213+
}
214+
}
215+
153216
figure {
154217
margin: 0 0 ($cassiopeia-grid-gutter*2);
155218
&.float-start {

0 commit comments

Comments
 (0)