Linux-Presentation-Day_LPD/dokuwiki-template-landing
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adjusted all areas visually (except media manager) using css and js. Added Context based wiki-menu, Added Config complexity switch.

Browse Source
This commit is contained in:
Ruediger Marwein 2021-07-25 15:16:15 +02:00
parent 43129955f4
commit 83dff4db66
5 changed files with 733 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

441
assets/landing.css
View File

@ -14,10 +14,10 @@
.lpd-header .jumbotron {
border-radius: 0;
width:100%;
background-position: center top !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.lpd-header .jumbotron img {
max-width:100%;
@ -62,13 +62,13 @@
text-decoration:underline;
}
.container .row.bs-wrap-row {
.lpd-ribbon .container .row.bs-wrap-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.container .row .thumbnail {
.lpd-ribbon .container .row .thumbnail {
background-color:#337ab7;
border:0;
color:white;
@ -79,21 +79,21 @@
justify-content: flex-start;
height:100%;
}
.container .row .thumbnail p:last-child {
.lpd-ribbon .container .row .thumbnail p:last-child {
margin-top:auto;
}
/* Icons as font on startpage */
.container-fluid .row .thumbnail span.bs-wrap-image,
.container .row .thumbnail span.bs-wrap-image {
.lpd-ribbon .container-fluid .row .thumbnail span.bs-wrap-image,
.lpd-ribbon .container .row .thumbnail span.bs-wrap-image {
font-size:5em;
}
/* Minor adjustment to wrong width calculation of fontawesome, so it's centered. */
.container-fluid .row .thumbnail span.bs-wrap-image .fa-fw,
.container .row .thumbnail span.bs-wrap-image .fa-fw {
.lpd-ribbon .container-fluid .row .thumbnail span.bs-wrap-image .fa-fw,
.lpd-ribbon .container .row .thumbnail span.bs-wrap-image .fa-fw {
width: inherit;
}
.container .row .thumbnail a.btn-primary {
.lpd-ribbon .container .row .thumbnail a.btn-primary {
background-image: none;
background-color: #fff;
color:#337ab7;
@ -146,6 +146,21 @@ aside#dokuwiki__pagetools {
position:static;
}
aside#dokuwiki__pagetools .media {
margin-top: 0;
}
aside#dokuwiki__pagetools .action-page {
background-color: #fff;
}
aside#dokuwiki__pagetools .action-user {
background-color: rgb(246, 253, 230);
}
aside#dokuwiki__pagetools .action-site {
background-color: rgb(220, 246, 255);
}
footer, aside {
clear:both;
}
@ -213,7 +228,7 @@ footer, aside {
}
/* regular button */
.btn {
article .btn {
background-image: none;
text-shadow: none;
border: none;
@ -271,4 +286,404 @@ footer > ::before {
}
}
/**
The edit view
**/
.act-edit #wiki__text {
font-family: monospace;
}
#wiki__editbar {
width:100%;
display:flex;
flex-direction: column;
align-content: flex-end;
}
.act-edit .btn {
background-image: none;
}
/* first textarea tools, then comment, then buttons - under each other */
.act-edit #size__ctl {
float:initial;
text-align:right;
order: 1;
}
.act-edit.dokuwiki .editBar .summary {
display:initial;
order:2;
}
.act-edit .editButtons {
order: 3;
margin-bottom: 1em;
}
.act-edit.dokuwiki .editBar .summary label {
width:100%;
}
.act-edit.dokuwiki .editBar .summary label[for=minoredit] {
display:block;
}
.act-edit > .container {
display: flex;
flex-direction: column;
}
/* Move edit hint to the bottom */
.act-edit > .container > .editBox {
order: 1;
}
.act-edit > .container > p:first-of-type {
order: 2;
}
.act-edit .editBox .toolbar.group {
float:left;
margin-bottom: 0.5em;
}
.act-edit #draft__status {
float:right;
}
/**
Login form
**/
.act-login form > div > fieldset > legend {
display:none;
}
.act-login form > div > fieldset label {
display: block;
}
.act-login form > div > fieldset label[for=remember__me] {
float:left;
width:50%;
}
.act-login form > div > fieldset button {
float:right;
}
.act-login .centeralign {
text-align:inherit;
}
.act-login div.no {
display:inherit;
}
.act-login p.panel-footer {
margin: 0;
}
/**
Profile
**/
.act-profile .centeralign {
text-align:inherit;
}
.act-profile form > div > fieldset label {
display: block;
}
.act-profile div.no {
display:inherit;
}
.act-profile button[type=reset] {
display:none;
}
.act-profile button[type=submit] {
float:right;
}
#dw__profiledelete {
margin-top: 1em;
}
/**
Resend password
**/
.act-resendpwd label {
display: initial;
}
.act-resendpwd button {
float:right;
}
/**
Admin Config Manager
#config__manager
**/
.act-admin #config__manager tr.default .input,
.act-admin #config__manager tr.default input,
.act-admin #config__manager tr.default select,
.act-admin #config__manager tr.default checkbox,
.act-admin #config__manager tr.default textarea
{
background-color: initial;
}
.act-admin button[type=reset] {
display:none;
}
.act-admin button[type=submit] {
float:right;
}
#config__manager fieldset {
background-color: initial;
}
#config__manager td.label {
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: 14px;
white-space: normal;
font-weight: initial;
}
#config__manager td.label label {
color: initial;
display:inline;
margin-bottom: 0;
font-weight: initial;
order:1;
}
#config__manager td.label span {
display:block;
width: 100%;
order: 2;
font-size: 75%;
margin: 0;
}
#config__manager td.label img {
display:none;
right:0;
order: 3;
}
#config__manager td.label span.badge a {
color: #fff;
}
.act-admin #config__manager td input.edit {
width:100%;
}
.act-admin #config__manager fieldset {
margin: initial;
padding: initial;
}
.act-admin #config__manager .selectiondefault {
background-color: initial;
font-style: italic;
color:initial;
}
.act-admin .selectiondefault label {
font-weight: normal;
}
#config__manager td.value label {
}
.act-admin tr.config-expert {
border: 3px solid red;
border-width: 0px 0px 0px 3px;
}
.act-admin tr.config-advanced {
border: 3px solid orange;
border-width: 0px 0px 0px 3px;
}
.act-admin #user_manager fieldset,
.act-admin #user_manager tr.default .input,
.act-admin #user_manager tr.default input,
.act-admin #user_manager tr.default select,
.act-admin #user_manager tr.default checkbox,
.act-admin #user_manager tr.default textarea,
.act-admin #user_manager tr.default file,
.act-admin #user_manager input
{
background-color: initial;
}
.act-admin #user__manager button[disabled] {
background-color: initial;
color: initial;
}
.act-admin button[type=reset] {
display:none;
}
.act-admin button[type=submit] {
float:right;
}
.act-admin #user_manager ul.notes {
list-style-type: none;
}
.act-admin #user_manager ul.notes li {
padding-left:20px;
}
.act-revisions #page__revisions ul {
list-style-type: none;
padding:0;
width:100%;
}
.act-revisions #page__revisions ul li {
padding:5px;
border: 1px solid #000;
border-width: 0px 0px 1px 0px;
}
.act-revisions #page__revisions ul .li {
width:100%;
display:flex;
}
.act-revisions #page__revisions .li > input[type=checkbox] {
width: 3%;
}
.act-revisions #page__revisions .li > .date {
width: 20%;
}
.act-revisions #page__revisions .li > * {
display: inline-block;
}
.act-revisions #page__revisions .li > img,
.act-revisions #page__revisions .li > .diff_link {
text-align: center;
width: 3%;
}
.act-revisions #page__revisions .li > a.wikilink1 {
width: 10%;
}
.act-revisions #page__revisions .li > .sum {
flex: 1;
}
.act-revisions #page__revisions .li > .user {
text-align: right;
flex: 1;
}
.act-revisions #page__revisions .li > .user + .act-revisions #page__revisions .li > .sum {
width: 10%;
}
.act-revisions #page__revisions .li > .sizechange {
width: 15%;
text-align: right;;
}
/*
.act-revisions #page__revisions ul {
display: table;
}
.act-revisions #page__revisions ul li {
display: table-row;
}
.act-revisions #page__revisions ul li .li > * {
display: table-cell;
}
*/
.act-diff .diffnav {
}
.act-diff .diffnav > * {
float:left;
}
.act-diff th {
text-align: center;
}
.act-diff th span.sum {
display:block;
text-align: left;
}
.dokuwiki.act-diff table.diff td {
padding:2px;
}
.act-diff .diffnav > form {
display: block;
}
.act-diff .diffnav > form,
.dokuwiki.act-diff .diffnav select {
width: 350px;
font-weight: normal;
}
.act-diff .diffnav > form label {
width: auto;
}
.dokuwiki.act-diff .diffnav select {
height:auto;
}
.dokuwiki.act-diff .diffnav a:before {
border: none;
}
.dokuwiki.act-diff td.diffnav.btn-group {
display: table-cell;
}
.act-admin .ui-admin .admin_tasks,
.act-admin .ui-admin .admin_plugins {
padding:0;
}
.act-admin .ui-admin > a {
float:initial;
display:block;
text-align:center;
}
.act-admin .ui-admin .btn-default.text-left {
text-align: left;
}
.act-admin .ui-admin .li a {
vertical-align: middle;
display:flex;
justify-content: flex-start;
}
.act-admin .ui-admin .li .icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.act-admin .ui-admin .li .prompt {
}
/**
Media Manager
**/
.act-media #media__tree ul {
padding: 0;
position:relative;
border-top: 1px solid gray;
}
.act-media #media__tree > ul {
}
.act-media #media__tree li > img {
float: left;
margin-top: 10px;
}
.act-media #media__tree li .li {
height: 2em;
padding-left: 20px;
padding-top: 5px;
}
.act-media #media__tree > ul ul {
left: 1em;
}
.act-media .thumbs {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.act-media .thumbs li {
border: 1px solid black;
width: 30%;
float:left;
margin: 3px;
padding: 10px;
text-align: center;
}
.act-media .tabs {
}

221
assets/landing.js
View File

@ -0,0 +1,221 @@
jQuery(function($) {
/**
* Edit form
*/
(function() {
var $wikibar = $('#wiki__editbar');
if(!$wikibar.length) return;
var $editButtons = $wikibar.find('.editButtons');
// toolbar with proper buttons
var $tb = $('#tool__bar').addClass("btn-group").attr("role", "group");
$tb.find('button').addClass('btn btn-default').attr("type","button");
$('#wiki__text').addClass("form-control");
// Make the textarea big when the screen is big
var wh = $(window).height();
if(wh > 500) {
$('#wiki__text').css({"height":wh*0.7});
}
// buttons in different colors
$btnCancel = $editButtons.find('button').addClass("btn btn-default");
$btnSave = $editButtons.find('#edbtn__save').removeClass('btn-default').addClass("btn-success");
$btnEdit = $editButtons.find('#edbtn__preview').removeClass('btn-default').addClass("btn-warning");
// full width comment input
$wikibar.find('#edit__summary').addClass("form-control");
// Infos and hints in colored boxes
$('.editBox .license').addClass("alert alert-warning");
$('.act-edit > .container > p').addClass("alert alert-info");
// Draft status with tick in green
$('.act-edit.mode_preview #draft__status').addClass("success");
/* when previewing, scroll to the page preview */
if($('.mode_preview').length) {
jQuery('html, body').animate({
scrollTop: $('#preview').position().top
}, 600);
}
})();
/**
* Login Form
*/
(function() {
$loginHeadline = $('#login');
if(!$loginHeadline.length) return;
$loginContainer = $loginHeadline.parent();
$loginContainer.find('.level1').addClass('alert alert-warning');
$loginContainer.find('form').addClass('form-horizontal');
$loginContainer.find('input[name=u], input[name=p]').addClass('form-control');
$loginContainer.find('form > div').addClass('row panel panel-default');
$loginContainer.find('form > div > fieldset').addClass('col-md-12 panel-body');
$loginContainer.find('form > div > fieldset legend').addClass('hid');
$loginContainer.find('form > div > p').addClass('col-md-12 panel-footer');
$btnLogin = $loginContainer.find('button[type=submit]').addClass("btn btn-primary");
})();
/**
* Profile
*/
(function() {
$profileHeadline = $('#update_your_account_profile');
if(!$profileHeadline.length) return;
$profileContainer = $profileHeadline.parent();
$registerContainer = $profileContainer.find('#dw__register');
$registerContainer.find('input[type=text], input[type=password], input[type=email]').addClass('form-control');
$registerContainer.find('button[type=submit]').addClass('btn btn-primary');
//$('#dw__register').addClass('panel');
$deleteContainer = $profileContainer.find('#dw__profiledelete');
$deleteContainer.addClass('panel alert alert-danger');
$deleteContainer.find('button').addClass('btn-danger');
//$profileContainer.find('button[type=reset]').addClass('btn btn-default');
})();
/**
* Admin Config Manager
*/
(function() {
$adminConfigHeadline = $('#config__manager');
if(!$adminConfigHeadline.length) return;
function enableAdvancedLevel($form, level) {
var $allPreferences = $form.find('td.label');
var $disabledElements = $allPreferences.filter(function(i, col) {
$(col).parent().show();
hide = false;
if($(col).find('img[alt=warning]').length) {
$(col).parent().addClass('config-advanced');
hide = level < 2;
}
if($(col).find('img[alt=danger]').length) {
$(col).parent().addClass('config-expert');
hide = level < 3;
};
return hide;
});
$disabledElements.map(function(i, col) {
$(col).parent().hide();
});
}
$adminConfigContainer = $adminConfigHeadline.parent();
$adminConfigContainer.find('input[type=text], input[type=password], input[type=email], select').addClass('form-control');
$adminConfigContainer.find('button[type=submit]').addClass('btn btn-primary');
$adminConfigContainer.find('td .outkey').removeClass('outkey').addClass('help-block');
// idea: all settings with warnings are advanced. switch
$configForm = $('#dw__configform');
$advancedButtons = $('<div class="btn-group btn-group-justified" id="switch-advanced"></div>');
$advancedButtons.append('<div class="btn-group"><button type="button" class="btn btn-success" id="switch-advanced-basic">Basic</button></div>');
$advancedButtons.append('<div class="btn-group"><button type="button" class="btn btn-warning" id="switch-advanced-advanced">Advanced</button></div>');
$advancedButtons.append('<div class="btn-group"><button type="button" class="btn btn-danger" id="switch-advanced-expert">Expert</button></div>');
$advancedButtons.on('click', 'button', function(e) {
var level = 1;
var elem = e.target;
$(elem).removeClass('active');
switch(elem.id) {
case 'switch-advanced-basic':
$(elem).addClass('active');
level = 1;
break;
case 'switch-advanced-advanced':
$(elem).addClass('active');
level = 2;
break;
case 'switch-advanced-expert':
$(elem).addClass('active');
level = 3;
break;
}
enableAdvancedLevel($configForm, level);
});
$configForm.prepend($advancedButtons);
$('#switch-advanced-basic').click();
})();
/* Manage users */
(function() {
$adminUserManager = $('#user__manager');
if(!$adminUserManager.length) return;
$adminUserManager.find('input[type=text], input[type=password], input[type=email]').addClass('form-control');
$adminUserManager.find('button').addClass('btn btn-default');
$adminUserManager.find('table').addClass('table table-striped');
$adminUserManager.find('ul.notes').addClass('alert alert-info');
$adminUserManager.find('.import_users').addClass('panel alert alert-warning');
})();
/* Show revisions */
(function() {
$revisions = $('#page__revisions');
if(!$revisions.length) return;
var potentialCurrent = $revisions.find('.li').first();
if(potentialCurrent.html().trim().match(/\(current\)$/)) {
potentialCurrent.html(potentialCurrent.html().replace('(current)',''));
potentialCurrent.addClass('bg-success');
}
})();
/* Diff revisions */
(function() {
$diff = $('#differences');
if(!$diff.length) return;
$('.difflink').addClass('btn btn-primary');
$('select[name=difftype]').addClass('form-control');
$('.diffnav').addClass('btn-group');
$('.diffnav > a').addClass('btn btn-default').wrap('<div class="btn-group"></div>');
$('.diffnav > form').addClass('btn-group');
$('.diffnav > form select').addClass('form-control');
})();
/* Admin start page */
(function() {
$adminHeadline = $('#administration');
if(!$adminHeadline.length) return;
$adminStart = $adminHeadline.parent();
$adminStart.find('.admin_tasks, .admin_plugins').addClass('btn-group-vertical');
$adminStart.find('.admin_tasks li, .admin_plugins li').addClass('btn btn-default text-left');
$adminStart.addClass('row').find('> ul').addClass('col-md-12');
$adminStart.find('> a').attr('style', '').addClass('panel alert alert-danger');
$adminStart.find('#admin__version').addClass('panel alert alert-info col-md-12')
})();
(function() {
$resendpwHeadline = $('#send_new_password');
if(!$resendpwHeadline.length) return;
$resendpw = $resendpwHeadline.parent();
$resendpw.find('.centeralign').removeClass('centeralign').addClass('panel alert alert-info');
$resendpw.find('form input[name=login]').addClass('form-control');
$resendpw.find('button').addClass('btn btn-primary');
})();
(function() {
$mediamanager = $('#mediamanager__page');
if(!$mediamanager.length) return;
$mediamanager.addClass('row');
$mediamanager.find('.panel.namespaces').addClass('col-md-3');
$mediamanager.find('.panel.filelist').removeClass('ui-resizable').addClass('col-md-6');
$mediamanager.find('.panel.file').addClass('col-md-3');
// resizable does mess with the grid
//dw_mediamanager.$resizables().resizable('destroy');
//$mediamanager.find('.tabs').addClass('btn-group');
//$mediamanager.find('.tabs li').addClass('btn btn-default');
// stuff inside ".thumbs" and ".rows" changes dynamically
})();
});

10
changelog.txt
View File

@ -1,5 +1,15 @@
...
2021-07-18
Visually adjusted the areas of ACT=['show', 'profile', 'login', 'revisions', 'admin', 'diff', 'edit', 'preview', 'source']
Visually adjusted ACT=admin's stat page, config manager, user manager, revisions & differences, draft, resendpwd
Offcanvas only when in ACT=show
Extended Actions-menu with profile and site items
Increase edit area to screen height
Automatically Scroll down to preview on preview.
Introduced basic, advances, expert switch in config
2021-07-11 Rüdiger Marwein
Added burger menu to show "sidebar" as offcanvas menu.
Removed "link-home" workaround script

88
main.php
View File

@ -11,6 +11,28 @@ if (!defined('DOKU_INC')) die();
$hasSidebar = page_findnearest($conf['sidebar']);
$showSidebar = $hasSidebar && ($ACT=='show');
ob_start();
tpl_content(false);
$content = ob_get_clean();
$wrapperClass = "act-".$ACT;
if(in_array($ACT, array('edit', 'preview', 'source'))) {
$wrapperClass = "act-edit";
}
if($ACT == "preview") {
$expectedH1Exists = preg_match("/(<h1 .*?id=\"preview\")/", $content, $h1Pattern);
if($expectedH1Exists) {
// in preview there's a h1 right before content
$editForm = substr($content, 0, strpos($content, $h1Pattern[1]));
$content = substr($content, strlen($editForm));
$wrapperClass = "act-edit";
}
} elseif($ACT == 'edit' or $ACT == "source") {
$editForm = $content;
$content = '';
}
$loggedIn = $INPUT->server->str('REMOTE_USER');
?><!DOCTYPE html>
<html lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
<head>
@ -24,24 +46,50 @@ $showSidebar = $hasSidebar && ($ACT=='show');
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<div id="dokuwiki__site">
<div id="dokuwiki__top" class="site <?php echo tpl_classes(); ?>">
<article>
<?php tpl_content() ?>
</article>
<aside id="dokuwiki__pagetools">
<div id="dokuwiki__top" class="site <?php echo tpl_classes(); ?> <?php echo $wrapperClass ?>">
<?php if(in_array($ACT, ['edit', 'preview', 'source'])): ?>
<div class="container">
<h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul class="list-group">
<?php echo (new \dokuwiki\Menu\PageMenu())->getListItems("list-group-item "); ?>
</ul>
</div>
<?php echo $editForm ?>
</div>
</aside>
<?php endif ?>
<?php if(in_array($ACT, ['login', 'profile', 'revisions', 'admin', 'diff', 'draft', 'resendpwd', 'register', 'subscribe', 'index'])): ?>
<div class="container">
<?php tpl_link(wl($ID), "Back", 'class="btn btn-default"'); ?>
<?php echo $content ?>
</div>
<?php elseif(in_array($ACT, ['media'])): ?>
<div class="container-fluid">
<?php tpl_link(wl($ID), "Back", 'class="btn btn-default"'); ?>
<?php echo $content ?>
</div>
<?php else: ?>
<article>
<?php echo $content ?>
</article>
<?php endif ?>
<?php if(in_array($ACT, ['show', 'profile', 'admin', 'revisions', 'admin', 'diff', 'draft', 'resendpwd'])): ?>
<aside id="dokuwiki__pagetools">
<div class="container">
<h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul class="list-group">
<?php if($loggedIn): ?>
<?php if(in_array($ACT, ['show', 'revisions'])): ?>
<?php echo (new \dokuwiki\Menu\PageMenu())->getListItems("action-page list-group-item "); ?>
<?php endif ?>
<?php echo (new \dokuwiki\Menu\SiteMenu())->getListItems("action-site list-group-item "); ?>
<?php endif ?>
<?php echo (new \dokuwiki\Menu\UserMenu())->getListItems('action-user list-group-item '); ?>
</ul>
</div>
</div>
</aside>
<?php endif ?>
<footer class="text-center">
<?php tpl_include_page("footer", true, true) ?>
</footer>
@ -52,12 +100,14 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<div class="no"><?php tpl_indexerWebBug() ?></div>
<div id="screen__mode" class="no"></div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-offcanvas" id="sidebar-wrapper" role="navigation">
<?php tpl_include_page("sidebar", true, true) ?>
</nav>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<i class="hamburger-icon dw-icons fa-fw fa fa-bars" style=""></i>
</button>
<?php if(in_array($ACT, ['show'])): ?>
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-offcanvas" id="sidebar-wrapper" role="navigation">
<?php tpl_include_page("sidebar", true, true) ?>
</nav>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<i class="hamburger-icon dw-icons fa-fw fa fa-bars" style=""></i>
</button>
<?php endif ?>
</div>
</body>
</html>

7
style.ini
View File

@ -17,10 +17,13 @@
[stylesheets]
assets/bootstrap.min.css = screen
assets/bootstrap-theme.min.css = screen
assets/ekko-lightbox.css = screen
;../bootstrap3/assets/bootstrap/paper/bootstrap.min.css = screen
;../bootstrap3/assets/bootstrap/cerulean/bootstrap.min.css = screen
;assets/ekko-lightbox.css = screen
assets/landing.css = screen
assets/offcanvas.css = screen
../bootstrap3/css/core/_edit.css = screen
;../bootstrap3/css/core/_edit.css = screen
../dokuwiki/css/_diff.css = screen
; This section is used to configure some placeholder values used in
; the stylesheets. Changing this file is the simplest method to