Commit 34806edc authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon

Fix floated button groups for smaller resolutions (bug: 1465107)

- Remove unused classes
- Style input-group for smaller resolutions

behatnotneeded: styling only

Change-Id: I57ddbd0dcf14baca82e07bd945ee033d435eebe9
parent 62daea32
......@@ -96,7 +96,7 @@ foreach ($iframesources as $url => $name) {
'name' => 'deleteurl_' . $i,
'successcallback' => 'deleteurl_submit',
'renderer' => 'div',
'class' => 'form-inline form-as-button pull-left last',
'class' => 'form-inline form-as-button pull-left',
'elements' => array(
'submit' => array(
'type' => 'button',
......
......@@ -538,7 +538,7 @@ class ArtefactTypeBlog extends ArtefactType {
'alt' => get_string('deletespecific', 'mahara', $title),
'elementtitle' => get_string('delete'),
'confirm' => $confirm,
'value' => '<span class="icon icon-trash text-danger prs"></span> ' .get_string('delete'),
'value' => '<span class="icon icon-trash icon-lg text-danger left"></span> ' .get_string('delete'),
),
),
));
......@@ -1106,10 +1106,10 @@ class ArtefactTypeBlogPost extends ArtefactType {
$published = $post->published;
}
if ($published) {
$strchangepoststatus = '<span class="prs icon icon-times text-danger"></span> ' .get_string('unpublish', 'artefact.blog');
$strchangepoststatus = '<span class="icon icon-times icon-lg left text-danger"></span> ' .get_string('unpublish', 'artefact.blog');
}
else {
$strchangepoststatus = '<span class="prs icon icon-check text-success"></span> ' . get_string('publish', 'artefact.blog');
$strchangepoststatus = '<span class="icon icon-check icon-lg left text-success"></span> ' . get_string('publish', 'artefact.blog');
}
return pieform(array(
'name' => 'changepoststatus_' . $id,
......@@ -1156,7 +1156,7 @@ class ArtefactTypeBlogPost extends ArtefactType {
'class' => 'btn-default btn-sm',
'elementtitle' => get_string('delete'),
'confirm' => get_string('deleteblogpost?', 'artefact.blog'),
'value' => '<span class="icon icon-trash text-danger"></span><span class="btn-title pls">' .get_string('delete') . '</span>',
'value' => '<span class="icon icon-trash icon-lg text-danger"></span><span class="btn-title">' .get_string('delete') . '</span>',
),
),
));
......
......@@ -166,13 +166,13 @@ function changepoststatus_success(form, data) {
removeElementClass($('posttitle_' + data.id), 'draft');
addElementClass($('posttitle_' + data.id), 'published');
$('poststatus' + data.id).innerHTML = {$strpublished};
$('changepoststatus_' + data.id + '_submit').innerHTML = '<span class="prs icon icon-times text-danger"></span> ' + {$strchangepoststatusunpublish};
$('changepoststatus_' + data.id + '_submit').innerHTML = '<span class="icon icon-times icon-lg left text-danger"></span> ' + {$strchangepoststatusunpublish};
}
else {
removeElementClass($('posttitle_' + data.id), 'published');
addElementClass($('posttitle_' + data.id), 'draft');
$('poststatus' + data.id).innerHTML = {$strdraft};
$('changepoststatus_' + data.id + '_submit').innerHTML = '<span class="prs icon icon-check text-success"></span>' + {$strchangepoststatuspublish};
$('changepoststatus_' + data.id + '_submit').innerHTML = '<span class="icon icon-check icon-lg left text-success"></span>' + {$strchangepoststatuspublish};
}
}
function delete_success(form, data) {
......
......@@ -55,7 +55,7 @@ $filterfield = array(
$elements['searchwithin'] = array(
'type' => 'fieldset',
'class' => 'dropdown-group js-dropdown-group pull-left',
'class' => 'dropdown-group js-dropdown-group',
'elements' => array(
'query' => $queryfield,
'filter' => $filterfield
......
......@@ -176,7 +176,7 @@ if ($membership) {
'plugintype' => 'interaction',
'pluginname' => 'forum',
'autofocus' => false,
'class' => 'btn-group btn-group-top',
'class' => 'form-as-button pull-left',
'elements' => array(
'submit' => array(
'type' => 'button',
......
......@@ -26,7 +26,7 @@
<div class="panel-footer has-form">
<a href="{$WWWROOT}artefact/blog/post.php?blog={$blog->id}" class="btn btn-default btn-sm">
<span class="icon icon-plus mrs"></span>
<span class="icon icon-plus icon-lg left"></span>
{str tag=addpost section=artefact.blog}
</a>
<div class="pull-right">
......@@ -34,7 +34,7 @@
<span class="text-small">{str tag=submittedforassessment section=view}</span>
{else}
<a href="{$WWWROOT}artefact/blog/settings/index.php?id={$blog->id}" title="{str(tag=settingsspecific arg1=$blog->title)|escape:html|safe}" class="btn btn-default btn-sm">
<span class="icon icon-pencil mrs"></span>
<span class="icon icon-pencil icon-lg left"></span>
{str tag=edit}
</a>
<span class="control">
......
{include file="header.tpl"}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a class="btn btn-default settings" href="{$WWWROOT}artefact/blog/new/index.php{if $institutionname}?institution={$institutionname}{/if}{if $group}?group={$group}{/if}">
<span class="icon icon-lg icon-plus prs"></span>
{str section="artefact.blog" tag="addblog"}
......
{foreach from=$posts item=post}
<div id="posttitle_{$post->id}" class="{if $post->published} published{else} draft{/if} list-group-item">
<div class="clearfix ptm pbm">
<h2 class="list-group-item-heading pull-left mt0">
<h2 class="list-group-item-heading">
{$post->title}
</h2>
<div class="pull-right">
<div class="list-group-item-controls">
<span id="poststatus{$post->id}" class="poststatus text-inline">
{if $post->published}
{str tag=published section=artefact.blog}
......@@ -30,8 +30,8 @@
<form name="edit_{$post->id}" action="{$WWWROOT}artefact/blog/post.php" class="form-as-button pull-left">
<input type="hidden" name="id" value="{$post->id}">
<button type="submit" class="submit btn btn-default btn-sm" title="{str(tag=edit)|escape:html|safe}">
<span class="icon icon-pencil"></span>
<span class="btn-title pls">
<span class="icon icon-pencil icon-lg"></span>
<span class="btn-title">
{str(tag=edit)|escape:html|safe}
</span>
</button>
......
{include file="header.tpl"}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a class="btn btn-default addpost" href="{$WWWROOT}artefact/blog/post.php?blog={$blog->get('id')}">
<span class="icon icon-lg icon-plus prs"></span>
{str section="artefact.blog" tag="addpost"}
......
{include file="header.tpl"}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a class="btn btn-default settings" href="{$WWWROOT}artefact/plans/new.php?id={$plan}">
<span class="icon icon-lg icon-plus prs"></span>
{str section="artefact.plans" tag="newtask"}
......
......@@ -2,24 +2,25 @@
{foreach from=$plans.data item=plan}
<div class="list-group-item">
<div class="clearfix">
<h3 class="pull-left list-group-item-heading mt0">
<h3 class="list-group-item-heading">
<a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}">{$plan->title}
</a>
</h3>
<div class="pull-right btn-group btn-group-top">
<a href="{$WWWROOT}artefact/plans/edit/index.php?id={$plan->id}" title="{str(tag=editspecific arg1=$plan->title)|escape:html|safe}" class="btn btn-default btn-sm">
<span class="icon icon-lg icon-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
<a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}" title="{str tag=managetasks section=artefact.plans}" class="btn btn-default btn-sm">
<span class="icon icon-lg icon-cog"></span>
<span class="sr-only">{str tag=managetasks section=artefact.plans}</span>
</a>
<a href="{$WWWROOT}artefact/plans/delete/index.php?id={$plan->id}" title="{str(tag=deletespecific arg1=$plan->title)|escape:html|safe}" class="btn btn-default btn-sm">
<span class="icon icon-trash text-danger icon-lg"></span>
<span class="sr-only">{str tag=delete}</span>
</a>
<div class="list-group-item-controls">
<div class="btn-group btn-group-top">
<a href="{$WWWROOT}artefact/plans/edit/index.php?id={$plan->id}" title="{str(tag=editspecific arg1=$plan->title)|escape:html|safe}" class="btn btn-default btn-sm">
<span class="icon icon-lg icon-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
<a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}" title="{str tag=managetasks section=artefact.plans}" class="btn btn-default btn-sm">
<span class="icon icon-lg icon-cog"></span>
<span class="sr-only">{str tag=managetasks section=artefact.plans}</span>
</a>
<a href="{$WWWROOT}artefact/plans/delete/index.php?id={$plan->id}" title="{str(tag=deletespecific arg1=$plan->title)|escape:html|safe}" class="btn btn-default btn-sm">
<span class="icon icon-trash text-danger icon-lg"></span>
<span class="sr-only">{str tag=delete}</span>
</a>
</div>
</div>
</div>
......
{include file="header.tpl"}
{if $admin}
<div id="forumbtn" class="text-right btn-top-right btn-group btn-group-top">
<div id="forumbtn" class="btn-top-right btn-group btn-group-top">
<a href="{$WWWROOT}interaction/edit.php?group={$groupid}&amp;plugin=forum" class="btn btn-default newforum">
<span class="icon icon-plus icon-lg prs"></span>
{str tag="newforum" section=interaction.forum}
......
......@@ -288,3 +288,11 @@
}
}
}
//edit page btn-group
.btn-toolbar .btn-title {
padding-left: 5px;
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
@include sr-only;
}
}
......@@ -101,18 +101,40 @@ h1 ~ div > .btn-group-top,
.page-header + .btn-action-list .btn-group-top,
.nav-tabs + div.btn-group-top {
margin-top: -20px;
@media (max-width: $screen-xs-min) {
margin: 0 0 10px 0;
width: 100%;
.btn-group .btn,
.form-as-button,
.btn {
margin-bottom: 3px;
width: 100%;
border-right-width: 1px;
border-radius: $border-radius-base !important;
.btn {
margin-bottom: 0;
}
}
.form-as-button:first-child:not(.last) {
.btn {
border-right-width: 1px;
}
}
}
}
.btn-group-top {
float: right;
position: relative;
z-index: 1;
.btn {
@include border-top-radius(0);
border-top: 0;
}
.btn-group-top {
margin: 0;
@media (min-width: $screen-xs-min) {
float: right;
.btn {
@include border-top-radius(0);
border-top: 0;
}
.btn-group-top {
margin: 0;
}
}
}
......@@ -128,41 +150,33 @@ td.btn-group {
// in a list group. cf. groups table/groups
.list-group,
.panel-heading {
.btn-group {
.btn-group-top {
@include clearfix;
text-align: right;
float: right;
margin-top: -10px;
margin-bottom:11px;
@media (min-width: $screen-sm-min ) {
margin-top: 10px;
@media (min-width: $screen-sm-min) {
@include clearfix;
&.btn-group-top .btn {
@include border-top-radius(0);
border-top: 0;
}
}
@media (max-width: $screen-sm-max ) {
&.btn-group-top .btn {
border-top: 1px solid $panel-default-border;
}
margin-top: 10px;
margin-top: -10px;
margin-bottom: 11px;
}
.btn {
@extend .btn-sm;
padding-top: 3px;
}
// this means that in the 'smaller view' we hide the element with this class
// cf buttons in list group
.hide-small {
@extend .sr-only;
border-top: 1px solid $panel-default-border;
@media (min-width: $screen-md-min) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
}
}
.btn-top-right {
margin: 0; // negate nested margin
}
}
.btn-action-list{
float:right;
width:100%;
float: right;
width: 100%;
}
}
// Edit page configure buttons
......@@ -170,7 +184,11 @@ td.btn-group {
position: absolute;
top: 11px;
right: 10px;
margin-top: -10px;
.btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
background: rgba(#ccc, 0.8);
&:hover {
background: rgba(#ddd, 1);
......@@ -304,7 +322,6 @@ td.btn-group {
}
}
.btn-with-heading {
float: right;
margin-top:-75px;
......
......@@ -115,7 +115,7 @@ h4.list-group-item-heading {
}
}
// Post item
// list-group-item with btn-group
.list-group-item {
&.draft,
&.list-group-item-warning {
......@@ -124,8 +124,35 @@ h4.list-group-item-heading {
&.published {
background: #fefefe;
}
@media (max-width: $screen-sm-min) {
.btn-title {
.list-group-item-heading {
float: none;
@media (min-width: $screen-sm-min) {
float: left;
}
.panel & {
float: none;
}
}
.list-group-item-controls {
float: none;
@media (min-width: $screen-sm-min) {
float: right;
}
// For planlist page
.btn-group-top {
margin-top: 0;
float:none;
@media (min-width: $screen-sm-min) {
margin-top: 5px;
}
@media (min-width: $screen-md-min) {
margin-top: -10px;
}
}
}
.btn-title {
padding-left: 5px;
@media (max-width: $screen-sm-min) {
@include sr-only;
}
}
......
......@@ -27,7 +27,7 @@
.navbar-toggle {
width: 42px;
margin-right: -4px;
margin-top: 34px;
margin-top: 50px;
}
.navbar-showchildren {
......
......@@ -25,7 +25,10 @@
~ .form-group {
.form-control {
@include border-left-radius(0);
border-left:0;
margin-left: -1px;
@media (min-width: $screen-xs-min) {
border-left:0;
}
}
&:last-child {
.form-control {
......@@ -39,7 +42,14 @@
}
// if one item in an input group has a label, push others down
.no-label {
margin-top: 10.5px;
margin-top: 5px;
// For screen size smaller than xs
@media (min-width: 321px) {
margin-top: 13px;
}
@media (min-width: $screen-sm-min) {
margin-top: 10.5px;
}
}
.form-group,
......
......@@ -9,16 +9,6 @@ body {
}
&.admin {
background-color: lighten($brand-default, 2%);
.main {
padding-top: 0;
margin-top: 0;
}
@media (max-width: $screen-sm-min) {
.container {
margin-top: 35px;
}
}
}
.main {
margin: 0px 0 20px;
......@@ -104,10 +94,6 @@ body {
width: 100%;
}
.pagedescription {
padding-top: 30px;
}
.progress-container {
padding-top: 20px;
}
......@@ -115,3 +101,8 @@ body {
.section-import {
padding-top: 30px;
}
.btn-group-top + .lead,
.toolbar + .lead {
clear: both;
}
\ No newline at end of file
......@@ -108,9 +108,13 @@
position: static;
legend {
position:absolute;
top:5px;
top: 5px;
right: 20px;
width: auto;
@media (max-width: $screen-xs-min) {
position: static;
text-align: right;
}
}
}
......
......@@ -26,16 +26,28 @@ h1 {
.page-header {
margin-bottom:20px;
~ .with-heading {
margin-top: -16px;
margin-top: -16px;
@media (max-width: $screen-xs-min) {
margin-top: 0;
}
}
~ form.with-heading,
~ form .with-heading,
~ .form.with-heading {
@include border-bottom-radius(3px);
margin-top: -20px;
background-color: #f7f7f7;
padding: 20px 10px 10px 10px;
margin-top: -20px;
border-bottom: 1px solid #eee;
@media (max-width: $screen-xs-min) {
margin-top: 5px;
}
@media (max-width: $screen-sm-min) {
padding: 10px;
> .input-group {
padding-top: 10px;
}
}
.admin & {
background-color: #fcfcfc;
border-color: #ddd;
......@@ -53,6 +65,16 @@ h1 {
}
}
}
~ div.with-heading {
padding-bottom: 10px;
margin-bottom: 10px;
@media (max-width: $screen-xs-min) {
border-bottom: 1px solid #eee;
}
a {
margin-right: 5px;
}
}
}
.page-header,
......@@ -164,6 +186,7 @@ blockquote {
font-size: floor(($font-size-base * 1.10));
font-weight: 300;
line-height: 1.4;
margin-bottom: 15px;
@media (min-width: $screen-sm-min) {
font-size: ($font-size-base * 1.2);
......@@ -172,6 +195,12 @@ blockquote {
&.text-small {
font-size: $font-size-base;
}
&.view-description {
padding-top: 15px;
@media (min-width: $screen-xs-min) {
padding-top: 30px;
}
}
}
.metadata {
......
{include file="header.tpl"}
{if $candeleteself}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a href="{$WWWROOT}account/delete.php" class="btn btn-default delete">
<span class="icon icon-trash icon-lg text-danger prs"></span>
<span>{str tag=deleteaccount section=account}</span>
......
{include file="header.tpl"}
{if $allowextralicenses}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a href="license-edit.php?add=add" class="btn btn-default">
<span class="icon icon-plus prs"></span>
{str tag=addsitelicense section=admin}
......
......@@ -45,7 +45,7 @@
<form class="form-as-button pull-left" action="" method="post">
<button class="submit btn btn-default" type="submit" name="add" value="{str tag="addinstitution" section="admin"}" id="admininstitution_add">
<span class="icon icon-plus icon-lg prs"></span>
<span class="hidden-xs">{str tag="addinstitution" section="admin"}</span>
<span class="btn-title">{str tag="addinstitution" section="admin"}</span>
</button>
</form>
{/if}
......@@ -55,7 +55,7 @@
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="icon icon-pencil icon-lg prs"></span>
<span class="icon icon-ellipsis-h icon-xs"></span>
<span class="sr-only">{str tag="edit"}</span>
<span class="btn-title sr-only">{str tag="edit"}</span>
</button>
......@@ -92,10 +92,10 @@
<thead>
<tr>
<th>{str tag="institution"}</th>
<th class="center">{str tag="Members" section="admin"}</th>
<th class="center">{str tag="Maximum" section="admin"}</th>
<th class="center">{str tag="Staff" section="admin"}</th>
<th class="center">{str tag="Admins" section="admin"}</th>
<th>{str tag="Members" section="admin"}</th>
<th>{str tag="Maximum" section="admin"}</th>
<th>{str tag="Staff" section="admin"}</th>
<th>{str tag="Admins" section="admin"}</th>
<th></th>
<th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
</tr>
......
......@@ -40,7 +40,7 @@
</span>
</h1>
<div class="text-right btn-top-right btn-group btn-group-top pull-right">
<div class="btn-top-right btn-group btn-group-top pull-right">
{if $LOGGEDIN}
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="icon icon-ellipsis-h"></span>
......
......@@ -3,7 +3,7 @@
{if $GROUP}
<h2>{$PAGESUBHEADING}</h2>
{/if}
<p class="lead ptxl mtxl">{str tag=collectiondescription section=collection}</p>
<p class="lead view-description">{str tag=collectiondescription section=collection}</p>
{if !$canedit}<p>{str tag=canteditgroupcollections section=collection}</p>{/if}
{if $collections}
<div class="panel panel-default">
......@@ -39,7 +39,7 @@
<div class="col-md-3">
<div class="inner-link btn-action-list">
{if !$collection->submitinfo && $canedit}
<div class="text-right btn-top-right btn-group btn-group-top">
<div class="btn-top-right btn-group btn-group-top">
<a href="{$WWWROOT}collection/views.php?id={$collection->id}" title="{str tag=manageviews section=collection}" class="btn btn-default btn-xs">
<span class="icon icon-list icon-lg text-default"></span>
<span class="sr-only">{str(tag=manageviewsspecific section=collection arg1=$collection->name)|escape:html|safe}</span>
......