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

Use checkbox instead of changing text

Browse Source
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": "^3.9.1",
"gulp-less": "^3.1.0", "gulp-less": "^3.1.0",
"gulp-plumber": "^1.1.0", "gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.1", "gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-stylelint": "^3.0.0", "gulp-stylelint": "^5.0.0",
"stylelint-config-standard": "^16.0.0" "stylelint-config-standard": "^17.0.0"
}, },
"scripts": { "scripts": {
"build": "gulp", "build": "gulp",

37
templates/layout/00_layout.php
View File

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

52
templates/layout/05_page.php
View File

@ -25,61 +25,43 @@
<div class="Links"> <div class="Links">
<?php if (!empty($params['html']['links'])) { <?php if (!empty($params['html']['links'])) { ?>
?>
<hr/> <hr/>
<?php foreach ($params['html']['links'] as $name => $url) { <?php foreach ($params['html']['links'] as $name => $url) { ?>
?>
<a href="<?= $url ?>" target="_blank"><?= $name ?></a> <a href="<?= $url ?>" target="_blank"><?= $name ?></a>
<br /> <br />
<?php <?php } ?>
<?php } ?>
} ?> <?php if ($params['html']['toggle_code']) { ?>
<?php
} ?>
<?php if ($params['html']['toggle_code']) {
?>
<div class="CodeToggler"> <div class="CodeToggler">
<hr/> <hr/>
<?php if ($params['html']['float']) { <?php if ($params['html']['float']) { ?>
?>
<span class="CodeToggler__text">Code blocks</span> <span class="CodeToggler__text">Code blocks</span>
<div class="ButtonGroup" role="group"> <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--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--below">Below</button>
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float">Inline</button> <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float">Inline</button>
</div> </div>
<?php <?php } else { ?>
<label class="Checkbox">Show Code Blocks
} else { <input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
?> <div class="Checkbox__indicator"></div>
<a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br> </label>
<?php <?php } ?>
} ?>
</div> </div>
<?php <?php } ?>
} ?> <?php if (!empty($params['html']['twitter'])) { ?>
<?php if (!empty($params['html']['twitter'])) {
?>
<hr/> <hr/>
<div class="Twitter"> <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> <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 />
<br /> <br />
<?php <?php } ?>
} ?>
</div> </div>
<?php <?php } ?>
} ?>
</div> </div>
</div> </div>
</aside> </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; break;
case 1: // Show code blocks below case 1: // Show code blocks below
toggleCodeBlockBtnBelow.addClass("Button--active"); toggleCodeBlockBtnBelow.addClass("Button--active");
toggleCodeBlockBtn.html("Hide Code Blocks"); toggleCodeBlockBtn.prop('checked', true);
codeBlockView.removeClass('Columns__right--float'); codeBlockView.removeClass('Columns__right--float');
codeBlocks.removeClass('hidden'); codeBlocks.removeClass('hidden');
break; break;
case 0: // Hidden code blocks case 0: // Hidden code blocks
default: default:
toggleCodeBlockBtnHide.addClass("Button--active"); toggleCodeBlockBtnHide.addClass("Button--active");
toggleCodeBlockBtn.html("Show Code Blocks"); toggleCodeBlockBtn.prop('checked', false);
codeBlockView.removeClass('Columns__right--float'); codeBlockView.removeClass('Columns__right--float');
codeBlocks.addClass('hidden'); codeBlocks.addClass('hidden');
break; break;

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

@ -363,3 +363,76 @@ Components
float: left; 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;
}
}