D3Public
/
daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Use checkbox instead of changing text

This commit is contained in:
Stéphane Goetz 2017-10-19 21:20:58 +02:00
parent 364ce8893d
commit ef36a953b4
9 changed files with 117 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -7,10 +7,10 @@
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.1",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-stylelint": "^3.0.0",
"stylelint-config-standard": "^16.0.0"
"gulp-stylelint": "^5.0.0",
"stylelint-config-standard": "^17.0.0"
},
"scripts": {
"build": "gulp",

37
templates/layout/00_layout.php
View File

@ -1,38 +1,32 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<html class="no-js" lang="en">
<head>
<title><?= $page['title']; ?> <?php if ($page['title'] != $params['title']) {
echo '- ' . $params['title'];
} ?></title>
<meta name="description" content="<?= $params['tagline']; ?>" />
<title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
<meta name="description" content="<?= $params['tagline']; ?>">
<meta name="author" content="<?= $params['author']; ?>">
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<?= $params['theme']['favicon']; ?>" type="image/x-icon">
<!-- Mobile -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font -->
<?php foreach ($params['theme']['fonts'] as $font) {
echo "<link href='$font' rel='stylesheet' type='text/css'>";
} ?>
echo "<link href='$font' rel='stylesheet' type='text/css'>";
} ?>
<!-- CSS -->
<?php foreach ($params['theme']['css'] as $css) {
echo "<link href='$css' rel='stylesheet' type='text/css'>";
} ?>
echo "<link href='$css' rel='stylesheet' type='text/css'>";
} ?>
<?php if ($params['html']['search']) {
?>
<?php if ($params['html']['search']) { ?>
<!-- Tipue Search -->
<link href="<?= $base_url; ?>tipuesearch/tipuesearch.css" rel="stylesheet">
<?php
} ?>
<?php } ?>
<!--[if lt IE 9]>
<script src="<?= $base_url; ?>themes/daux/js/html5shiv-3.7.3.min.js"></script>
@ -64,8 +58,7 @@
<script src="<?= $base_url; ?>themes/daux/js/daux.js"></script>
<?php if ($params['html']['search']) {
?>
<?php if ($params['html']['search']) { ?>
<!-- Tipue Search -->
<script type="text/javascript" src="<?php echo $base_url; ?>tipuesearch/tipuesearch.js"></script>
@ -77,9 +70,7 @@
});
});
</script>
<?php
} ?>
<?php } ?>
</body>
</html>

52
templates/layout/05_page.php
View File

@ -25,61 +25,43 @@
<div class="Links">
<?php if (!empty($params['html']['links'])) {
?>
<?php if (!empty($params['html']['links'])) { ?>
<hr/>
<?php foreach ($params['html']['links'] as $name => $url) {
?>
<?php foreach ($params['html']['links'] as $name => $url) { ?>
<a href="<?= $url ?>" target="_blank"><?= $name ?></a>
<br />
<?php
<?php } ?>
<?php } ?>
} ?>
<?php
} ?>
<?php if ($params['html']['toggle_code']) {
?>
<?php if ($params['html']['toggle_code']) { ?>
<div class="CodeToggler">
<hr/>
<?php if ($params['html']['float']) {
?>
<?php if ($params['html']['float']) { ?>
<span class="CodeToggler__text">Code blocks</span>
<div class="ButtonGroup" role="group">
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide">No</button>
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below">Below</button>
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float">Inline</button>
</div>
<?php
} else {
?>
<a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br>
<?php
} ?>
<?php } else { ?>
<label class="Checkbox">Show Code Blocks
<input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
<div class="Checkbox__indicator"></div>
</label>
<?php } ?>
</div>
<?php
<?php } ?>
} ?>
<?php if (!empty($params['html']['twitter'])) {
?>
<?php if (!empty($params['html']['twitter'])) { ?>
<hr/>
<div class="Twitter">
<?php foreach ($params['html']['twitter'] as $handle) {
?>
<?php foreach ($params['html']['twitter'] as $handle) { ?>
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&amp;show_count=false"></iframe>
<br />
<br />
<?php
} ?>
<?php } ?>
</div>
<?php
} ?>
<?php } ?>
</div>
</div>
</aside>

4
themes/daux/css/theme-blue.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-green.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-navy.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-red.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
themes/daux/js/daux.js
View File

@ -30,14 +30,14 @@ $(function () {
break;
case 1: // Show code blocks below
toggleCodeBlockBtnBelow.addClass("Button--active");
toggleCodeBlockBtn.html("Hide Code Blocks");
toggleCodeBlockBtn.prop('checked', true);
codeBlockView.removeClass('Columns__right--float');
codeBlocks.removeClass('hidden');
break;
case 0: // Hidden code blocks
default:
toggleCodeBlockBtnHide.addClass("Button--active");
toggleCodeBlockBtn.html("Show Code Blocks");
toggleCodeBlockBtn.prop('checked', false);
codeBlockView.removeClass('Columns__right--float');
codeBlocks.addClass('hidden');
break;

73
themes/daux/less/_components.less
View File

@ -363,3 +363,76 @@ Components
float: left;
}
}
.Checkbox {
position: relative;
display: block;
padding-left: 30px;
cursor: pointer;
input {
position: absolute;
z-index: -1;
opacity: 0;
}
}
.Checkbox__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
/* Check mark */
&::after {
position: absolute;
display: none;
content: '';
}
/* Hover and focus states */
.Checkbox:hover input ~ &,
.Checkbox input:focus ~ & {
background: #ccc;
}
/* Checked state */
.Checkbox input:checked ~ & {
background: @dark;
/* Show check mark */
&::after {
display: block;
}
}
/* Hover state whilst checked */
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
background: @light;
}
/* Disabled state */
.Checkbox input:disabled ~ & {
pointer-events: none;
opacity: 0.6;
background: #e6e6e6;
}
/* Checkbox tick */
.Checkbox &::after {
top: 4px;
left: 8px;
width: 5px;
height: 10px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
/* Disabled tick colour */
.Checkbox input:disabled ~ &::after {
border-color: #7b7b7b;
}
}