Jump to content

Title in the card

kmk

By kmk
in Feedback

 Share

Recommended Posts

Jordan Miller Grand Master

Jordan Miller

Posted
Posted
10 hours ago, Davyc said:

@Jordan Invision I did a similar thing with the clubs (renamed to groups) and moved the text link out of the image and made the image bigger:

image.thumb.png.0c809ed697393dae17a2f8e8ab2af067.png

Added some CSS changes to the background colour and the text weighting - also added so extra padding to give the text some breathing room 🙂

 

Looks nice and clean! 👏 

Link to comment
Share on other sites
kmk Grand Master

kmk

Posted
  • Author
Posted
21 hours ago, Davyc said:

@Jordan Invision I did a similar thing with the clubs (renamed to groups) and moved the text link out of the image and made the image bigger:

image.thumb.png.0c809ed697393dae17a2f8e8ab2af067.png

Added some CSS changes to the background colour and the text weighting - also added so extra padding to give the text some breathing room 🙂

 

That is what make sense, is possible share the CSS? 

Link to comment
Share on other sites
Davyc Mentor

Davyc

Posted
Posted

@kmk OK here we go - first you need to make a change to the Club Card template - you can see where I commented out the original positioning of the code that need to be moved and where I moved it to. 

{{$coverPhoto = $club->coverPhoto( FALSE );}}
{{$memberStatus = $club->memberStatus( \IPS\Member::loggedIn() );}}

<div class="cClubCard {{if settings.clubs_require_approval and !$club->approved}}{{if $approvalQueue}}ipsBox{{else}}ipsModerated{{endif}}{{endif}}" {{if $approvalQueue}}id="elApprovePanel"{{endif}}>
	{{if \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER ) )}}
		<span class='ipsBadge ipsBadge_positive ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_member"}"><i class='fa fa-check'></i></span>
	{{elseif \in_array( $memberStatus, array( $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) )}}
		<span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_expired"}"><i class='fa fa-exclamation-triangle'></i></span>
	{{elseif $memberStatus == $club::STATUS_INVITED or $memberStatus == $club::STATUS_INVITED_BYPASSING_PAYMENT}}
		<span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_invited"}"><i class='fa fa-envelope'></i></span>
	{{elseif $memberStatus == $club::STATUS_REQUESTED}}
		<span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_requested_desc_short"}"><i class='fa fa-clock-o'></i></span>
	{{elseif $memberStatus == $club::STATUS_WAITING_PAYMENT}}
		<span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_awaiting_payment_title"}"><i class='fa fa-check'></i></span>
	{{endif}}

	<div class='ipsPageHead_special' data-controller='core.global.core.coverPhoto' data-url="{$club->url()->csrf()}" data-coverOffset='{$coverPhoto->offset}'>
		{{$cfObject = $coverPhoto->object;}}
		{{if $coverPhoto->file}}
			<div class='ipsCoverPhoto_container'>
				{{if settings.lazy_load_enabled}}
					<img src="{expression="\IPS\Text\Parser::blankImage()"}" data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'>
				{{else}}
					<img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'>
				{{endif}}
			</div>
		{{elseif ! empty( $cfObject::$coverPhotoDefault )}}
			<div class='ipsCoverPhoto_container' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()}">
				<img src='{resource="pattern.png" app="core" location="global"}' class='ipsCoverPhoto_photo' alt=''>
			</div>
		{{endif}}
		{template="clubIcon" group="clubs" app="core" params="$club, 'medium'"}
	<!--	<h2 class="ipsType_reset cClubCard_title ipsType_blendLinks">
			<span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'>
				{{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}}
					<span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span>
				{{elseif $club->featured}}
					<span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
				{{endif}}
				<a href='{$club->url()}' title="{$club->name}">{$club->name}</a>
			</span>
		</h2> -->
	</div>

	<p class='ipsType_reset ipsType_light ipsType_medium cClubCard_info'>
		{lang="club_{$club->type}"}
		{{if $club->type !== $club::TYPE_PUBLIC}}
			&nbsp;&middot;&nbsp;
			{lang="club_members_count" pluralize="$club->members"}
		{{endif}}
		{{if $club->last_activity}}
			&nbsp;&middot;&nbsp;
			{lang="club_last_activity"} {datetime="$club->last_activity"}
		{{endif}}
		{{if ( \in_array( $club->type, array( $club::TYPE_OPEN, $club::TYPE_CLOSED ) ) or \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER, $club::STATUS_INVITED, $club::STATUS_INVITED_BYPASSING_PAYMENT, $club::STATUS_REQUESTED, $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) ) ) and $priceBlurb = $club->priceBlurb()}}
			<br>
			<span class="ipsType_medium">
				<span class="cClubPrice">{$priceBlurb}</span>
				{{if $club->isPaid() and $club->joiningFee() and \IPS\Member::loggedIn()->language()->checkKeyExists('nexus_tax_explain_val')}}
					<span class='cNexusPrice_tax ipsType_light'>{lang="nexus_tax_explain_val"}</span>
				{{endif}}
			</span>
		{{endif}}
	</p>
<h2 class="ipsType_reset cClubCard_title ipsType_blendLinks">
			<span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'>
				{{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}}
					<span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span>
				{{elseif $club->featured}}
					<span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
				{{endif}}
				<a href='{$club->url()}' title="{$club->name}">{$club->name}</a>
			</span>
		</h2>
	<div class='ipsPad'>
		{{if $club->about}}
			<div class='ipsType_richText ipsType_medium' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'>
				{$club->about}
			</div>
		{{else}}
			<div class='ipsType_light ipsType_medium'>
				<em>{lang="club_no_about"}</em>
			</div>
		{{endif}}

		{{if $club->type != $club::TYPE_PUBLIC}}
			{{if $club->canViewMembers() }}
				<hr class='ipsHr ipsHr_small'>
				<ul class='cClubCard_memberList ipsList_inline ipsList_noSpacing'>
					{{foreach $club->randomTenMembers() as $member}}
						<li>
							{template="userPhotoFromData" group="global" app="core" params="$member['core_members']['member_id'], $member['core_members']['name'], $member['core_members']['members_seo_name'], \IPS\Member::photoUrl( $member['core_members'] ), 'tiny'"}
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

			{{if $club->canJoin()}}
				<hr class='ipsHr ipsHr_small'>
				<a class="ipsButton ipsButton_small ipsButton_primary ipsButton_fullWidth" href="{$club->url()->setQueryString('do', 'join')->csrf()}" {{if $club->isPaid() and $memberStatus !== $club::STATUS_INVITED_BYPASSING_PAYMENT}}data-confirm data-confirmIcon="info" data-confirmMessage="{lang="club_membership_item"}" data-confirmSubmessage="{$club->memberFeeMessage()}"{{endif}}>{lang="club_join"}</a>
			{{endif}}
		{{endif}}
	</div>
</div>

Next is the CSS which you need to put into your custom CSS file: 

/* Changes to Clubs */
[data-pagemodule="clubs"] .ipsApp .ipsSpacer_top, .ipsApp .ipsSpacer_both {
    margin-top: 0px;
}

.cClubCard .ipsPageHead_special {
    height: 185px;
}

.cClubCard .cClubCard_info {
    margin-left: 5px !important;
    margin-top: 7px;
    margin-bottom: 10px;
}
.ipsType_reset.cClubCard_title.ipsType_blendLinks .ipsPageHead_barText_small  {
    background: rgb(4 128 93);
    line-height: 1;
    padding: 12px 10px;
    font-weight: 500;
}

[data-pagemodule="clubs"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 48px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}
[data-pagemodule="clubs"] .ipsType_pageTitle {
     padding-left: 20px;
}
[data-pageid="1"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 65px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}
[data-pageid="2"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 65px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}
[data-pageid="3"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 65px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}
[data-pageid="4"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 65px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}

You may not need all of the CSS code, but if you have pages in your club that is where this comes into play and you will need to find out what your page ID's are.   

[data-pageid="1"] #elContextualTools {
    padding: 0px 15px 0px 15px;
    margin: 65px -15px 0px -15px;
    transition: box-shadow 0.3s linear;
}

The page ID section makes some alignment changes.  Just play around with the CSS to achieve the look you want.  Much of it is alignment issues that really annoy the hell out of me; my designer OCD kicking in lol.

Let me know how you get on and enjoy 🙂

 

Link to comment
Share on other sites
  • 2 months later...
kmk Grand Master

kmk

Posted
  • Author
Posted
On 2/24/2021 at 2:20 AM, Luuuk said:

@kmk

I use the following code in custom.css: 

/* Allow forum names in grid view to wrap */
.ipsApp .cForumGrid__title{
	white-space: normal;
}

 

Could anyone make same result for "Clubs directory" page? 

@Ehren

Link to comment
Share on other sites
kmk Grand Master

kmk

Posted
  • Author
Posted

I want to leave the Clubs as homepage, users enter to my site then choose which club want to surface, but the current Clubs directory page is a little ugly... 

1. I would like to show the club name completely, I focus on the mobile version. 

2. The club icon should be moved to before of the statictis datas. Avoiding compete the use of space in the Photo area. 

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...