MDL-55407 theme_noname: Remove styling and JS from blocks

Also:
Remove styles for the dock.
Remove drag and drop for blocks.
Blocks spacing improvements
After looking for a while - the blocks need some separation, so using .card now.
Adjusted the block column sizes as well.

Part of MDL-55071
This commit is contained in:
Damyon Wiese
2016-09-23 10:49:48 +01:00
committed by Dan Poltawski
parent d2645a6a64
commit d7fbf722c7
11 changed files with 296 additions and 1130 deletions
@@ -21,6 +21,8 @@ use tabobject;
use tabtree;
use custom_menu_item;
use custom_menu;
use block_contents;
use stdClass;
defined('MOODLE_INTERNAL') || die;
@@ -257,4 +259,70 @@ class core_renderer extends \core_renderer {
return html_writer::tag('li', $link, $params);
}
}
/**
* Prints a nice side block with an optional header.
*
* @param block_contents $bc HTML for the content
* @param string $region the region the block is appearing in.
* @return string the HTML to be output.
*/
public function block(block_contents $bc, $region) {
$bc = clone($bc); // Avoid messing up the object passed in.
if (empty($bc->blockinstanceid) || !strip_tags($bc->title)) {
$bc->collapsible = block_contents::NOT_HIDEABLE;
}
if (!empty($bc->blockinstanceid)) {
$bc->attributes['data-instanceid'] = $bc->blockinstanceid;
}
$skiptitle = strip_tags($bc->title);
if ($bc->blockinstanceid && !empty($skiptitle)) {
$bc->attributes['aria-labelledby'] = 'instance-'.$bc->blockinstanceid.'-header';
} else if (!empty($bc->arialabel)) {
$bc->attributes['aria-label'] = $bc->arialabel;
}
if ($bc->dockable) {
$bc->attributes['data-dockable'] = 1;
}
if ($bc->collapsible == block_contents::HIDDEN) {
$bc->add_class('hidden');
}
if (!empty($bc->controls)) {
$bc->add_class('block_with_controls');
}
$id = !empty($bc->attributes['id']) ? $bc->attributes['id'] : uniqid('block-');
$context = new stdClass();
$context->skipid = $bc->skipid;
$context->blockinstanceid = $bc->blockinstanceid;
$context->dockable = $bc->dockable;
$context->id = $id;
$context->hidden = $bc->collapsible == block_contents::HIDDEN;
$context->skiptitle = strip_tags($bc->title);
$context->showskiplink = !empty($context->skiptitle);
$context->arialabel = $bc->arialabel;
$context->ariarole = !empty($bc->attributes['role']) ? $bc->attributes['role'] : 'complementary';
$context->type = $bc->attributes['data-block'];
$context->title = $bc->title;
$context->content = $bc->content;
$context->annotation = $bc->annotation;
$context->footer = $bc->footer;
$context->hascontrols = !empty($bc->controls);
if ($context->hascontrols) {
$context->controls = $this->block_controls($bc->controls, $id);
}
return $this->render_from_template('core/block', $context);
}
/**
* Returns the CSS classes to apply to the body tag.
*
* @since Moodle 2.5.1 2.6
* @param array $additionalclasses Any additional classes to apply.
* @return string
*/
public function body_css_classes(array $additionalclasses = array()) {
return $this->page->bodyclasses;
}
}
+1 -1
View File
@@ -24,7 +24,7 @@
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9'),
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-4 col-md-pull-8'),
'sidepostblocks' => $OUTPUT->blocks('side-post', 'col-md-3')
];
-35
View File
@@ -1,35 +0,0 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Noname renderers.
*
* @package theme_noname
* @copyright 2016 Frédéric Massart
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
defined('MOODLE_INTERNAL') || die();
/**
* Noname core renderers class.
*
* @package theme_noname
* @copyright 2016 Frédéric Massart
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class theme_noname_core_renderer extends core_renderer {
}
+1 -2
View File
@@ -11,6 +11,7 @@ $breadcrumb-divider: "▶";
// Massive, needs broken up.
@import "moodle/core";
@import "moodle/admin";
@import "moodle/blocks";
@import "moodle/calendar";
@import "moodle/course";
@import "moodle/filemanager";
@@ -18,7 +19,6 @@ $breadcrumb-divider: "▶";
@import "moodle/question";
@import "moodle/user";
@import "moodle/search";
@import "moodle/blocks";
@import "moodle/forms";
@import "moodle/modules";
@import "moodle/chat";
@@ -26,7 +26,6 @@ $breadcrumb-divider: "▶";
@import "moodle/backup-restore";
@import "moodle/tables";
@import "moodle/buttons";
@import "moodle/dock";
@import "moodle/grade";
@import "moodle/templates";
@import "moodle/undo";
+2 -238
View File
@@ -1,240 +1,4 @@
// General block styles.
.block {
@extend .card;
padding: 8px 0;
.header {
h2 {
font-size: $font-size-sm;
@extend .p-x-1;
@extend .p-t-1;
@extend .font-weight-bold;
word-wrap: break-word;
margin: 0;
}
.block_action {
padding: 3px 15px;
float: right;
> * {
margin-left:3px;
}
.block-hider-show,
.block-hider-hide {
cursor: pointer;
}
.block-hider-show {
display: none;
}
}
}
.content {
padding: 4px 14px;
word-wrap: break-word;
h3 {
font-size: 1.1em;
}
hr {
margin: 5px 0;
}
.userpicture {
width: 16px;
height: 16px;
margin-right: 6px;
}
.list {
li.listentry {
clear: both;
}
.c0 {
display: inline;
}
.c1 {
margin-left: 5px;
display: inline;
}
}
}
.footer {
margin-bottom: 4px;
display: block;
padding: 3px 5px;
}
&.beingmoved {
border-width: 2px;
border-style: dashed;
}
&.invisible {
.header h2 {
opacity: 0.5;
}
}
&.hidden .header .block_action {
.block-hider-hide {
display: none;
}
.block-hider-show {
display: inline;
}
}
&.list_block .unlist > li > .column {
display: inline-block;
}
}
.editing {
.block {
.header {
.commands {
clear: both;
text-align: right;
display: block;
padding: 3px 15px;
> a {
margin: 0 3px;
}
.icon img {
width: 12px;
height: 12px;
}
img.actionmenu {
width: auto;
}
}
}
}
}
// Hide the block content when the block has been minimised.
.jsenabled .block.hidden .content {
display: none;
}
// Style the div used as a move target for non-drag+drop block moves.
.blockmovetarget {
border-width: 2px;
border-style: dashed;
display: block;
height: 1em;
margin-bottom: 20px;
}
// Style the div that contains the cancel link for moving a block with JS disabled.
.blockannotation {
// Blocks have a bottom margin of 20px, to associate this link with the block being moved
// we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
.blockmovetarget .accesshide {
position: relative;
top: -10px;
margin-bottom: 10px;
}
// Styles for the blog menu block.
.block_blog_menu #blogsearchquery {
max-width: 92%;
}
// Styles for the admin block.
.block_settings {
#adminsearchquery {
max-width: 92%;
}
}
// Styles for the search forums block.
.block_search_forums {
#searchform_search {
width: auto;
max-width: 92%;
}
}
// Styles for the Calendar Upcoming block.
.block_calendar_upcoming {
.content {
.date {
padding-left: 22px;
}
.footer {
margin-top: .5em;
padding-top: 10px;
padding-left: 0px;
}
}
}
// Styles for the RSS client block.
.block_rss_client {
.content li {
margin-bottom: 10px;
padding: 5px;
border: 1px solid $table-border-color;
@include border-radius($border-radius);
.link {
font-weight: inherit;
}
}
.list li:first-child {
border-top-width: 1px; // undo the style provided by the block's styles.css
}
}
// Styles for the news items block.
.block_news_items .content {
.newlink {
padding-bottom: 10px;
}
ul li {
border-top: 1px rgba(0,0,0,0.05) solid;
padding: 2px;
display: table;
width: 100%;
.info {
display: table-header-group;
}
.date {
font-size: $font-size-sm;
display: inline;
}
.name {
font-size: $font-size-sm;
padding-left: 1ex;
display: inline;
}
}
.footer {
padding-top: 10px;
padding-left: 0px;
}
}
.block_navigation .block_tree ul {
margin: 0px;
}
// Overide for login block.
.block_login {
input#login_username,
input#login_password {
width: 95%;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 280px;
}
input[type="submit"] {
margin: 10px 0;
}
}
// Styles for the special "Add block" block shown while editing.
.block_adminblock {
.content {
display: block;
padding: 3px 5px;
}
select {
max-width: 92%;
}
left: initial;
}
+1 -76
View File
@@ -9,81 +9,6 @@
display:none;
}
.empty-region-side-pre #block-region-side-pre, // Pre region is empty.
.empty-region-side-post #block-region-side-post, // Post region is empty.
.jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
.jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
display:none;
}
/** Start Legacy styles. Deprecated since Moodle 2.9. See MDL-48160 for further information. **/
.content-only #region-main.span9, // Two column layout with no block or all blocks docked.
.empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area.
.empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area.
.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
.jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
.jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked.
width: 100%;
}
.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
.jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked.
float: none;
width: 100%;
}
.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked.
float: right;
}
/** End Legacy styles **/
/* Default Three Columns - All
------------------------------*/
.content-only {
#region-main-box,
#region-main {
width: 100%;
}
}
.empty-region-side-pre {
&.used-region-side-post {
#region-main {
width: 100%;
}
}
}
.empty-region-side-post {
&.used-region-side-pre {
#region-main-box {
width: 100%;
}
}
}
.jsenabled {
&.docked-region-side-pre {
&.empty-region-side-pre {
&.used-region-side-post {
#region-main {
width: 100%;
}
}
}
}
&.docked-region-side-post {
&.empty-region-side-post {
&.used-region-side-pre {
#region-main-box {
width: 100%;
}
}
}
}
}
/** Page layout CSS ends **/
.dir-ltr,
@@ -253,7 +178,7 @@ img.iconsmall {
height: 12px;
margin-right: 3px;
vertical-align: middle;
width: 12px;
//width: 12px;
box-sizing: content-box;
}
img.iconhelp, .helplink img {
-135
View File
@@ -1,135 +0,0 @@
$dockWidth: 36px;
$dockTitleMargin: 3px;
$dockPanelWidth: (768px / 2);
$dockTitleFontSize: 11px;
/**
* This styles the H2 node the dock creates to test the width before making its title rotation.
* We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly.
*/
.transform-test-heading {
font-family: $font-family-sans-serif;
font-size: $dockTitleFontSize;
line-height: $dockWidth;
text-align: center;
font-weight: bold;
margin: 0;
padding: 0;
}
body.has_dock {
#page {
padding-left: ($dockWidth + ($dockTitleMargin * 3));
padding-right: $grid-gutter-width;
}
div#dock {
display: inline;
}
}
#dock {
z-index: 12000; // Required to place the dock panel above the fixed pos navbar.
width: ($dockWidth + ($dockTitleMargin * 2));
position: fixed;
top: 0;
left: 0;
height: 100%;
background-color: transparent;
border-right: 0 none;
.nothingdocked {
visibility: hidden;
display: none;
}
.dockeditem_container {
margin-top: 68px;
}
.dockeditem .firstdockitem {
margin-top: 1em;
}
.dockedtitle {
@extend .btn;
display: block;
width: $dockWidth;
margin: $dockTitleMargin;
padding:0;
cursor: pointer;
h2 {
@extend .transform-test-heading;
}
.filterrotate {
margin-left: 8px;
}
}
.controls {
position: absolute;
bottom: 1em;
text-align: center;
width: 100%;
img {
cursor: pointer;
}
}
// Hide the move icon for blocks which are docked.
.editing_move,
.moodle-core-dragdrop-draghandle {
display: none;
}
}
#dockeditempanel {
&.dockitempanel_hidden {
display: none;
}
min-width: 200px;
position: relative;
left: 100%;
padding-left: 5px;
.dockeditempanel_content {
//background-color: $wellBackground;
width: $dockPanelWidth;
border: 1px solid darken($gray-lighter, 10%);
@include box-shadow(2px 4px 4px 2px $gray-lighter);
@include border-radius(4px);
}
.dockeditempanel_bd {
overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */
> * {
margin: 1em;
}
.block_navigation .block_tree li {
overflow: visible;
}
}
.dockeditempanel_hd {
border-bottom: 1px solid $body-color;
padding: 0.5em 1em;
h2 {
@extend h3;
font-size: 1.1em;
padding:0;
margin: 0;
}
.commands {
display: block;
text-align: right;
> a,
> span {
margin-left: 3px;
cursor: pointer;
}
img,
input {
vertical-align: middle;
margin-right: 1px;
}
.hidepanelicon img {
cursor: pointer;
}
img.actionmenu {
width: auto;
}
}
}
}
-13
View File
@@ -333,16 +333,3 @@
}
}
.has_dock.path-grade-report-grader {
.gradeparent .sideonly.floating > .cell,
.gradeparent .sideonly.floating > .cell,
.gradeparent .sideonly.floating > .cell {
padding-left: 5 + ($dockWidth + ($dockTitleMargin * 2));
}
}
.content-only.path-grade-report-grader {
.gradeparent table {
margin-left: ($dockWidth + ($dockTitleMargin * 2));
}
}
File diff suppressed because one or more lines are too long
+1 -2
View File
@@ -37,7 +37,7 @@
<div id="page-content" class="row">
<div id="region-main-box" class="col-md-9">
<div class="row">
<section id="region-main" class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<section id="region-main" class="col-md-8 col-md-push-4">
{{{ output.course_content_header }}}
{{{ output.main_content }}}
{{{ output.course_content_footer }}}
@@ -47,7 +47,6 @@
</div>
{{{ sidepostblocks }}}
</div>
<footer id="page-footer">
<div id="course-footer">{{{ output.course_footer }}}</div>
<p class="helplink">{{{ output.page_doc_link }}}</p>
@@ -0,0 +1,39 @@
{{! Block Skip Link }}
{{#showskiplink}}
<a href="#sb-{{skipid}}" class="sr-only sr-only-focusable">{{#str}}skipa, access, {{title}}{{/str}}</a>
{{/showskiplink}}
{{! Start Block Container }}
<aside id="{{id}}"
class="{{#hidden}}hidden{{/hidden}} m-b-1 block block_{{type}} card"
role="{{ariarole}}"
{{#arialabel}}
aria-label="{{{arialabel}}}"
{{/arialabel}} >
{{#hascontrols}}
<div class="pull-xs-right">
{{{controls}}}
</div>
{{/hascontrols}}
{{! Block contents }}
<div class="card-block">
{{! Block header }}
{{#title}}
<h3 class="card-title"><small>{{{title}}}</small></h3>
{{/title}}
<div class="card-text">
{{{content}}}
{{{footer}}}
{{{annotation}}}
</div>
</div>
{{! End Block Container }}
</aside>
{{! Block Skip Link Target }}
{{#showskiplink}}
<span id="sb-{{skipid}}"></span>
{{/showskiplink}}