Commit b084c205 authored by Evonne's avatar Evonne Committed by Robert Lyon

Bug 1845104 Various theme fixes part 3

Fixing buttons and styleguide

behatnotneeded

Change-Id: I661e6350bb14ac4c77e4bf63777b346810ce5c65
parent 5c5db761
......@@ -87,7 +87,7 @@
// If there are not-button siblings of group button elements
.btn-group > .no-delete-btn {
margin-right: 28px;
margin-right: 32px;
}
.btn-group > .btn.btn-group-first {
......
......@@ -234,20 +234,24 @@ td.action-list-copy {
}
}
// Edit page configure buttons
.card-secondary .blockinstance-controls .btn-group-top {
.card-secondary .card-header .blockinstance-controls .btn-group-top {
position: absolute;
top: 11px;
right: 10px;
margin-top: -10px;
margin-top: 0px;
.btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-radius: $border-radius;
border-color: transparent;
border-top: 0;
background: scale-color($btn-secondary-bg, $lightness: 40%);
&:hover {
background: rgba($btn-secondary-bg, 1);
}
&:first-child {
border-radius: $border-radius 0 0 $border-radius;
}
&:last-child {
border-radius: 0 $border-radius $border-radius 0;
}
}
}
......
......@@ -414,3 +414,16 @@
}
}
}
.memberswrap,
#friendslist {
.list-group-item {
.user-icon {
margin-top: 0;
margin-left: 0;
}
.detail {
margin-left: 53px;
}
}
}
......@@ -22,6 +22,7 @@
.text-small {
font-size: $font-size-sm;
font-family: $font-family-base;
}
.text-tiny {
......
......@@ -5,28 +5,27 @@
<a href="{profile_url($r)}" class="outer-link"><span class="sr-only">{$r.name}</span></a>
<div class="row">
<div class="col-md-8">
<div class="usericon-heading">
<div class="user-icon user-icon-40 float-left">
<img src="{profile_icon_url user=$r maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$r|display_default_name}">
</div>
<h4 class="list-group-item-heading">
{$r.name}
{if $r.role}
<span class="grouprole text-small text-midtone"> -
{$results.roles[$r.role]->display}
{if $caneditroles && $r.canchangerole}
<a href="{$WWWROOT}group/changerole.php?group={$group}&amp;user={$r.id}" class="inner-link text-link">
[{str tag=changerole section=group}]
</a>
{/if}
</span>
{/if}
</h4>
<div class="user-icon user-icon-40 float-left">
<img src="{profile_icon_url user=$r maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$r|display_default_name}">
</div>
<h4 class="list-group-item-heading">
{$r.name}
{if $r.role}
<span class="grouprole text-small text-midtone"> -
{$results.roles[$r.role]->display}
{if $caneditroles && $r.canchangerole}
<a href="{$WWWROOT}group/changerole.php?group={$group}&amp;user={$r.id}" class="inner-link text-link">
[{str tag=changerole section=group}]
</a>
{/if}
</span>
{/if}
</h4>
{if $r.role}
{if $r.introduction}
<div class="text-midtone">
<div class="detail text-small text-midtone">
<a class="inner-link text-link collapsed with-introduction" data-toggle="collapse" data-target="#userintro{$r.id}"
href="#userintro{$r.id}" role="button" aria-expanded="false"
aria-controls="userintro{$r.id}">
......
......@@ -80,15 +80,19 @@ This pair of buttons is used for deleting or editing an item.
### Block edit buttons
This pair of buttons is used for editing or deleting a block item on a page.
```
<div class="card-header">
<span class="float-left btn-group btn-group-top">
<button class="configurebutton btn btn-inverse btn-sm">
<span class="icon icon-cog icon-lg"></span>
</button>
<button class="deletebutton btn btn-inverse btn-sm">
<span class="icon icon-trash-alt text-danger icon-lg"></span>
</button>
</span>
<div class="blockinstance card card-secondary clearfix">
<div class="card-header">
<span class="blockinstance-controls">
<span class="float-right btn-group btn-group-top">
<button class="configurebutton btn btn-inverse btn-sm">
<span class="icon icon-cog icon-lg"></span>
</button>
<button class="deletebutton btn btn-inverse btn-sm">
<span class="icon icon-trash-alt text-danger icon-lg"></span>
</button>
</span>
</span>
</div>
</div>
```
</section>
......
<div class="list-group-item {if $user->pending} list-group-item-warning{/if}">
<div class="row" id="friendinfo_{$user->id}">
<div class="col-md-8">
<div class="usericon-heading">
<div class="user-icon user-icon-40 float-left">
<img src="{profile_icon_url user=$user maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$user|display_default_name}">
</div>
<h4 class="list-group-item-heading middle">
<a href="{profile_url($user)}" >
<span class="sr-only">{$user->display_name}</span>
{$user->display_name}
</a>
{if $user->pending}
<span class="pendingfriend text-small text-midtone">
- {str tag='pendingsince' section='group' arg1=$user->pending_time}
</span>
{elseif $user->friend && $page == 'find'}
<span class="existingfriend text-small text-midtone">
- {str tag='existingfriend' section='group'}
</span>
{/if}
{if $user->friend && $user->views}
<p class="viewlist">
<strong>
{str tag='Portfolios' section='view'}:
</strong>
{foreach from=$user->views item=view name=addr}
<a href="{$view->fullurl}">{$view->title}</a>{if !$dwoo.foreach.addr.last}, {/if}
{/foreach}
</p>
{/if}
<div class="user-icon user-icon-40 float-left">
<img src="{profile_icon_url user=$user maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$user|display_default_name}">
</div>
<h4 class="list-group-item-heading middle">
<a href="{profile_url($user)}" >
<span class="sr-only">{$user->display_name}</span>
{$user->display_name}
</a>
{if $user->pending}
<span class="pendingfriend text-small text-midtone">
- {str tag='pendingsince' section='group' arg1=$user->pending_time}
</span>
{elseif $user->friend && $page == 'find'}
<span class="existingfriend text-small text-midtone">
- {str tag='existingfriend' section='group'}
</span>
{/if}
</h4>
{if $user->institutions}
<div class="memberof detail text-small">
<span class="icon icon-lg text-default icon-university left" role="presentation" aria-hidden="true"></span>
{$user->institutions|safe}
</div>
{if $user->friend && $user->views}
<p class="viewlist">
<strong>
{str tag='Portfolios' section='view'}:
</strong>
{foreach from=$user->views item=view name=addr}
<a href="{$view->fullurl}">{$view->title}</a>{if !$dwoo.foreach.addr.last}, {/if}
{/foreach}
</p>
{/if}
{if $user->introduction}
<div class="text-small text-midtone">
<a class="inner-link text-link collapsed with-introduction" data-toggle="collapse" data-target="#userintro{$user->id}"
href="#userintro{$user->id}" role="button" aria-expanded="false"
aria-controls="userintro{$user->id}">
<span class="icon icon-chevron-down collapse-indicator float-left" role="presentation" aria-hidden="true"></span>
{str tag=showintroduction section=group}
</a>
</div>
<div class="introduction detail text-small">
<div class="collapse" id="userintro{$user->id}">
{$user->introduction|safe}
</div>
</h4>
{if $user->institutions}
<div class="memberof detail text-small">
<span class="icon icon-lg text-default icon-university left" role="presentation" aria-hidden="true"></span>
{$user->institutions|safe}
</div>
{/if}
{if $user->introduction}
<div class="text-small text-midtone">
<a class="inner-link text-link collapsed with-introduction" data-toggle="collapse" data-target="#userintro{$user->id}"
href="#userintro{$user->id}" role="button" aria-expanded="false"
aria-controls="userintro{$user->id}">
<span class="icon icon-chevron-down collapse-indicator float-left" role="presentation" aria-hidden="true"></span>
{str tag=showintroduction section=group}
</a>
</div>
<div class="introduction detail text-small">
<div class="collapse" id="userintro{$user->id}">
{$user->introduction|safe}
</div>
{/if}
</div>
{/if}
</div>
<div class="col-md-4">
<ul class="list-unstyled inner-link user-action-list">
......
......@@ -91,7 +91,11 @@ $inlinecss = <<<EOT
color: #426600;
}
p ~ div > .btn-group-top {
margin-top: 0;
margin-top: 0;
}
.blockinstance .card-header {
border-bottom: 2px solid #ddd;
height: 45px;
}
}
</style>
......
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