Commit c55e73aa authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells
Browse files

Dashboard (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Dashboard widgets styling
Style dashboard and user's setting

Change-Id: I2ca8f561117daa7d4e6b1fd6b163a2a6421751c5
parent 3edfb01d
......@@ -11,7 +11,7 @@
</form>
{$deleteall|safe}
<form name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<table id="activitylist" class="fullwidth">
<table id="activitylist" class="fullwidth table">
<thead>
<tr>
<th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
......
{include file="header.tpl"}
<div id="planswrap">
<div class="align-right">
<div class="text-right">
<a class="btn btn-success" href="{$WWWROOT}artefact/plans/new.php">{str section="artefact.plans" tag="newplan"}</a>
</div>
{if !$plans.data}
......
{include file="header.tpl"}
<div id="planswrap">
<div class="rbuttons">
<a class="btn" href="{$WWWROOT}artefact/plans/new.php?id={$plan}">{str section="artefact.plans" tag="newtask"}</a>
<div class="text-right">
<a class="btn btn-success" href="{$WWWROOT}artefact/plans/new.php?id={$plan}">{str section="artefact.plans" tag="newtask"}</a>
</div>
{if $tags}<p class="tags s"><strong>{str tag=tags}:</strong> {list_tags owner=$owner tags=$tags}</p>{/if}
{if !$tasks.data}
......
{include file="header.tpl"}
<div id="planswrap">
<div class="rbuttons">
<a class="btn" href="{$WWWROOT}artefact/plans/new/task.php">{str section="artefact.plans" tag="newtask"}</a>
<div class="text-right">
<a class="btn btn-success" href="{$WWWROOT}artefact/plans/new/task.php">{str section="artefact.plans" tag="newtask"}</a>
</div>
{if !$tasks.data}
<div class="message">{$strnotasksaddone|safe}</div>
......
......@@ -3,6 +3,7 @@
{contextualhelp plugintype='artefact' pluginname='resume' section='mygoals'}
{/if}
</legend>{/if}
<div class="table-responsive">
<table id="goalslist{$suffix}" class="tablerenderer fullwidth table table-striped">
<thead>
<tr>
......@@ -63,6 +64,7 @@
{/foreach}
</tbody>
</table>
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
......
......@@ -3,6 +3,7 @@
{contextualhelp plugintype='artefact' pluginname='resume' section='myskills'}
{/if}
</legend>{/if}
<div class="table-responsive">
<table id="skillslist{$suffix}" class="tablerenderer fullwidth table table-striped">
<thead>
<tr>
......@@ -63,6 +64,7 @@
{/foreach}
</tbody>
</table>
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
......
{if !$items}
{str tag=nomessages section=blocktype.inbox}
{else}
<table id="inboxblock" class="fullwidth fixwidth">
<table id="inboxblock" class="fullwidth fixwidth table table-striped">
{foreach from=$items item=i}
<tr class="{cycle values='r0,r1'}">
<td class="icon-container">
......
{if !$items}
{str tag=nomessages section=blocktype.inbox}
{else}
<table id="inboxblock" class="fullwidth fixwidth">
<div id="inboxblock" class="inbox viewlist listing">
{foreach from=$items item=i}
<tr class="{cycle values='r0,r1'}">
<td class="icon-container">
<div class="{cycle values='r0,r1'} listrow">
<div class="icon-container pull-left pls prm">
{if $i->read}
<img src="{theme_url filename=cat('images/' $i->type '.png')}" alt="{$i->strtype}" />
{else}
<img src="{theme_url filename=cat('images/' $i->type '.png')}" class="unreadmessage" alt="{$i->strtype}" />
{/if}
</td>
<td>
</div>
<div>
{if $i->message}
<a href="{if $i->url}{$WWWROOT}{$i->url}{else}{$WWWROOT}account/activity/index.php{/if}" class="inbox-showmessage{if !$i->read} unread{/if}">
{if !$i->read}<span class="accessible-hidden sr-only">{str tag=unread section=activity}: </span>{/if}{$i->subject|truncate:50}
......@@ -24,13 +24,12 @@
{else}
{$i->subject}
{/if}
</td>
</tr>
</div>
</div>
{/foreach}
</table>
</div>
{if $desiredtypes}
<div class="morelinkwrap"><a class="morelink" href="{$WWWROOT}account/activity/index.php?type={$desiredtypes}">{str tag=More section=blocktype.inbox} &raquo;</a></div>
<div class="cb"></div>
{/if}
<script>
{literal}
......
......@@ -2,12 +2,12 @@
<div id="userviewstable" class="viewlist fullwidth listing">
{foreach from=$VIEWS item=item name=view}
<div class="{cycle values='r0,r1'} listrow">
<h3 class="title"><a href="{$item.fullurl}">{$item.title}</a></h3>
<h3 class="title pls"><a href="{$item.fullurl}">{$item.title}</a></h3>
{if $item.description}
<div class="detail">{$item.description|str_shorten_html:100:true|strip_tags|safe}</div>
<div class="detail pls prs">{$item.description|str_shorten_html:100:true|strip_tags|safe}</div>
{/if}
{if $item.tags}
<div class="tags"><strong>{str tag=tags}:</strong> {list_tags owner=$item.owner tags=$item.tags}</div>
<div class="tags pls prs"><strong>{str tag=tags}:</strong> {list_tags owner=$item.owner tags=$item.tags}</div>
{/if}
</div>
{/foreach}
......
<div class="textblock">
{$text|clean_html|safe}
</div>
\ No newline at end of file
......@@ -32,6 +32,7 @@ jQuery(function($) {
tabnav.find('li:first-child').addClass('active');
// Remove extra padding when there is no site message
if ($('.site-messages').length === 0) {
$('.header').addClass('no-site-messages');
$('.main-nav').addClass('no-site-messages');
......
.blockinstance {
&.panel {
border-radius: 0;
box-shadow: none;
}
.panel-heading {
background-color: transparent;
h2 {
margin: 0;
font-size: $font-size-large;
font-weight: bold;
text-transform: uppercase;
}
.detail-link {
font-size: $font-size-base;
font-weight: normal;
}
}
}
.blockinstance-content {
padding: 10px 15px;
.image {
img {
width: 100%;
}
}
.listing {
margin: -10px -15px;
}
.table {
margin: 0;
}
}
\ No newline at end of file
......@@ -2,6 +2,8 @@
font-weight: bold;
vertical-align: top;
width: 200px;
margin: 10px 0;
padding-right: 10px;
display: inline-block;
}
......@@ -10,6 +12,7 @@
color: $gray;
margin-left: 20px;
}
.pieform-fieldset {
.html {
@include clearfix;
......@@ -18,12 +21,12 @@
.main form {
margin:20px 0;
label,
.pseudolabel {
@extend .control-label;
@media (min-width: $screen-sm-min) {
width:200px;
}
width: 200px;
padding-right: 10px;
}
.stacked-label {
......@@ -60,9 +63,45 @@ select {
&.radio,
&.checkbox {
@extend .radio-inline;
// @extend .radio-inline;
margin-left:0;
padding: 0 15px 20px 20px;
// padding: 0 15px 20px 20px;
> label {
padding-left: 0;
font-weight: bold;
}
> input {
// @extend .align-with-input;
display: inline-block;
margin-left: 0;
}
.radio {
display: inline-block;
&:nth-child(n+3) {
@extend .align-with-input;
}
.radio {
margin-left: 0;
}
label {
width: auto;
}
}
.checkbox {
.checkbox {
margin-top: 12px;
}
}
.help {
padding-left: 20px;
}
}
input[type=text],
......@@ -74,10 +113,10 @@ select {
@media (min-width: $screen-sm-min) {
width: 500px;
}
}
}
// remove styles on outer element as class is duplicated to form element
.form-group.btn,
.form-group-inline.btn {
......@@ -139,3 +178,20 @@ select {
margin-left: 0;
}
}
.form-group .description {
color: $mahara-blue;
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
@extend .align-with-input;
}
.form-group {
h3 {
font-size: $font-size-large;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid $gray-lighter;
}
}
......@@ -8,6 +8,7 @@
float: left;
padding-left: 5px;
margin-top: 21px;
max-height: 45px;
a {
float:left
}
......
// global styles for list elements such a list of pages, collections
.listing {
div.listrow:nth-child(odd) {
background-color: #f9f9f9;
}
.listrow {
@include clearfix;
margin: 10px 0;
padding: 10px;
&:nth-child(odd) {
background-color: #f9f9f9;
}
h2,
h3 {
font-size: $font-size-large;
......@@ -18,19 +21,19 @@
padding-top: 5px;
}
div.detail {
clear: both;
.detail {
@extend .list-element-detail;
clear: both;
}
div.groupsdetails {
clear: left;
.groupsdetails {
@extend .list-element-detail;
clear: left;
}
div.postdetails {
clear: both;
.postdetails {
@extend .list-element-detail;
clear: both;
}
}
}
......@@ -39,7 +39,7 @@
}
}
.navbar-brand{
.navbar-brand {
color:#fff;
padding: 13px 15px;
margin-left: -10px;
......
......@@ -25,7 +25,7 @@
.navbar-toggle {
width:42px;
width: 42px;
margin-right: -4px;
margin-top: 34px;
}
......
.dashboard-widget-container {
padding: 30px 0;
.remove-widgets {
font-size: $font-size-h3;
}
.widget-heading {
@include clearfix;
padding: 10px 15px;
background-color: $gray-lighter;
.circle-bg {
@include border-radius(50%);
position: relative;
float: left;
background-color: $mahara-green-lime;
width: 60px;
height: 60px;
.glyphicon {
color: #fff;
position: absolute;
font-size: 30px;
top: 26%;
left: 26%;
}
}
h2 {
margin: 5px 0 3px;
font-weight: bold;
}
p {
margin: 0;
font-size: $font-size-small;
color: $link-color;
}
@media (min-width: $screen-sm-min ) {
min-height: 91px;
}
@media (min-width: $screen-md-min ) {
min-height: auto;
}
}
.widget-detail {
padding: 10px 15px;
border: 1px solid $gray-lighter;
p {
margin-bottom: 0;
color: $text-color;
}
@media (min-width: $screen-sm-min ) {
min-height: 100px;
}
@media (min-width: $screen-md-min ) {
min-height: auto;
}
}
.logged-in {
// position: relative;
text-decoration: none;
width: 100%;
margin-bottom: 10px;
.widget-heading {
@include clearfix;
@include border-radius(10px);
padding: 10px 15px;
background: $gray-lighter;
h2 {
margin: 5px 0 3px;
font-weight: bold;
}
p {
margin: 0;
font-size: $font-size-small;
color: $link-color;
}
}
@media (max-width: $screen-sm-min) {
min-height: 91px;
@include border-radius(0);
}
@media (max-width: $screen-md-min) {
min-height: auto;
}
.widget-detail {
@include border-radius($border-radius-base);
border: none;
position: absolute;
display: block;
top: 0;
z-index: 1999;
background-color: $gray-lighter;
min-height: 80px;
margin-right: 15px;
opacity: 0;
transition: opacity 0.8s;
-webkit-transition: opacity 0.8s;
}
}
.logged-in:hover .widget-detail {
opacity: 1;
}
}
......@@ -16,8 +16,9 @@
// Core variables and mixins
@import 'utilities/var/brand'; // Import our brand variables
@import "utilities/var/brand"; // Import our brand variables
@import "utilities/var/bootstrap-variables"; // ...and our custom bootstrap variables file
@import "compass/css3/border-radius";
@import "../bootstrap/assets/stylesheets/bootstrap/mixins";
@import "utilities/mixins"; // include after bootstrap mixins in case we want to override
......@@ -95,7 +96,8 @@
@import "components/footer";
@import "components/tables";
@import "components/list-elements";
@import "components/widget-dashboard";
@import "components/blockinstances";
// Keep these files last to override all other style sheets
......
.align-right {
text-align: right;
}
.nav-pills {
margin-bottom: 30px;
}
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