Commit 55435db5 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon
Browse files

Bug 1822695: Group invite button overlaps pending friend request on Profile page

Put .pendingfriendcard on right side of pageheader and adjusted
margins to fit for responsive.

Also fixed card-footers to apply correct background and border color
for different statuses so .pendingfriendcard inherits the warning
color properly.

behatnotneeded

Change-Id: Ibe1836b0b16c84962f598a1f2236238e05d6c036
(cherry picked from commit 7e45536c)
parent 81830c5e
a.card-footer {
color: $link-color;
&:focus,
&:hover {
background-color: scale-color($theme-primary-color, $lightness: 95%);
color: $link-hover-color;
}
}
.card {
&.bg-warning .card-footer,
&.bg-success .card-footer,
&.bg-info .card-footer,
.card-footer { // Use to change the footer color of cards that have a yellow background
background-color: $card-footer-bg;
}
}
......@@ -47,3 +47,7 @@
}
}
}
.card-header:first-child {
@include border-top-radius(0);
}
......@@ -10,7 +10,6 @@
// cards are a very commonly used layout component
@import "../layout/card/card";
@import "../layout/card/card-collapse"; // for collapsible cards and collapsible fieldsets
@import "../layout/card/card-footer";
@import "../layout/card/card-header";
@import "../layout/card/card-secondary";
@import "../layout/card/card";
......
......@@ -515,15 +515,15 @@ td.action-list-copy {
}
}
// Profile page accept friends form button alignment
// Profile page accept friends form
.pendingfriendscard {
margin-top: 20px;
margin-bottom: -50px;
.btn form {
display: inline-block;
button {
padding: 0;
border: 0;
&:hover,
&:focus {
text-decoration: none;
......
......@@ -230,3 +230,15 @@ body.presentation-iframe {
.pageactions ~ .main-content {
padding-right: 50px;
}
// Profile page accept friends form
.pendingfriendscard {
margin-top: 40px;
padding-top: 30px;
margin-bottom: 20px;
@include media-breakpoint-down(md) {
margin-top: -30px;
padding-top: 0;
}
}
......@@ -10,15 +10,18 @@
background-color: $card-bg;
}
.card-footer {
background-color: $card-header-bg;
background-color: scale-color($state-success-bg, $lightness: 70%);
&:hover,
&:focus {
background-color: scale-color($card-header-bg, $lightness: -3.22);
background-color: scale-color($state-success-bg, $lightness: 50%);
}
a {
color: $state-success-text;
}
}
.card-footer,
.card-body,
.card-header,
.card-header a {
border-color: scale-color($state-success-bg, $lightness: -15%);
}
......@@ -49,14 +52,18 @@
}
}
.card-footer {
background-color: $card-header-bg;
background-color: scale-color($state-info-bg, $lightness: 70%);
&:hover,
&:focus {
background-color: scale-color($card-header-bg, $lightness: -3.22);
background-color: scale-color($state-info-bg, $lightness: 50%);
}
a {
color: $state-info-text;
}
}
.card-footer,
.card-body,
.card-header,
.card-header a {
border-color: scale-color($state-info-bg, $lightness: -15%);
}
......@@ -77,11 +84,15 @@
background-color: $white;
}
.card-footer {
background-color: scale-color($card-header-bg, $lightness: -3.22);
background-color: scale-color($state-warning-bg, $lightness: 70%);
&:hover,
&:focus {
background-color: scale-color($state-warning-bg, $lightness: 50%);
}
}
.card-footer,
.card-body,
.card-header,
.card-header a {
border-color: scale-color($state-warning-bg, $lightness: -15%);
}
......@@ -102,14 +113,15 @@
background-color: $card-bg;
}
.card-footer {
background-color: $card-header-bg;
background-color: scale-color($state-danger-bg, $lightness: 70%);
&:hover,
&:focus {
background-color: scale-color($card-header-bg, $lightness: -3.22);
background-color: scale-color($state-danger-bg, $lightness: 50%);
}
}
.card-footer,
.card-body,
.card-header,
.card-header a {
border-color: scale-color($state-danger-bg, $lightness: -15%);
}
......
<div class="pageheader profileheader">
<div class="container pageheader-content">
<div class="row">
<div class="col-md-12 main">
<div class="{if $relationship == 'pending'}col-lg-6 {else}col-md-12{/if} main">
<h1 id="viewh1" class="user-icon-name page-header">
<span class="user-icon float-left">
......@@ -36,26 +36,6 @@
{/if}
</div>
{if $relationship == 'pending'}
<div class="pendingfriendscard col-md-8 offset-md-2">
<div class="attentionmessage card bg-warning">
<h3 class="card-header">{str tag='whymakemeyourfriend' section='group'}</h3>
<p class="card-body">{$message}</p>
<div class="has-form text-small card-footer">
<div class="btn btn-secondary">
<span class="icon icon-check icon-lg text-success left" role="presentation" aria-hidden="true"></span>
{$acceptform|safe}
</div>
<a class="btn btn-secondary" id="approve_deny_friendrequest_deny" href="{$WWWROOT}user/denyrequest.php?id={$USERID}&returnto=view">
<span class="icon icon-ban left icon-lg text-danger" role="presentation" aria-hidden="true"></span>
<span class="link-unstyled">{str tag='denyrequest' section='group'}</span>
</a>
</div>
</div>
</div>
{/if}
{if $inviteform || $addform}
{if $inviteform}
{$inviteform|safe}
......@@ -66,6 +46,26 @@
{/if}
</div>
{if $relationship == 'pending'}
<div class="pendingfriendscard col-lg-6">
<div class="attentionmessage card bg-warning">
<h3 class="card-header">{str tag='whymakemeyourfriend' section='group'}</h3>
<p class="card-body">{$message}</p>
<div class="has-form text-small card-footer">
<div class="btn btn-secondary">
<span class="icon icon-check icon-lg text-success left" role="presentation" aria-hidden="true"></span>
{$acceptform|safe}
</div>
<a class="btn btn-secondary" id="approve_deny_friendrequest_deny" href="{$WWWROOT}user/denyrequest.php?id={$USERID}&returnto=view">
<span class="icon icon-ban left icon-lg text-danger" role="presentation" aria-hidden="true"></span>
<span class="link-unstyled">{str tag='denyrequest' section='group'}</span>
</a>
</div>
</div>
</div>
{/if}
</div>
</div>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment