Skip to content

Instantly share code, notes, and snippets.

@abitgone

abitgone/index.html

Created November 29, 2017 09:24
Show Gist options
  • Save abitgone/8f2576d36b17bfb31618fc472edcdb8d to your computer and use it in GitHub Desktop.
Save abitgone/8f2576d36b17bfb31618fc472edcdb8d to your computer and use it in GitHub Desktop.
Download ZIP
Hero Options Example // source http://jsbin.com/pemuqih
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="http://abitgone.github.io/jQuery-Plugins/ClassToggle/abitgone-classtoggle.js"></script>
<meta charset=utf-8 />
<title>Hero Options Example</title>
<style>
.active {
outline: 2px dashed #0c0;
}
</style>
</head>
<body style="padding-top: 40px; padding-bottom: 40px;">
<div class="container-fluid">
<div class="col-md-8">
<div class="card">
<h4 class="h6 card-header">Hero Options</h4>
<div class="card-body">
<div class="form">
<!-- Cover Type -->
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Cover type
</label>
<div class="col-sm-8 col-md-9 col-xl-10" id="page_data__cover__type">
<select class="form-control custom-select" data-classtoggle-class="--collapse">
<option selected>No Hero</option>
<option data-classtoggle-target="#options__hero_type__image">Hero Image</option>
<option data-classtoggle-target="#options__hero_type__video_url, #options__hero_type__image, #required_by__video">Hero Video (audio, with player)</option>
<option data-classtoggle-target="#options__hero_type__video_file, #options__hero_type__image, #required_by__video">Hero Background Video (silent, full-width)</option>
</select>
<small class="form-text text-muted">The title and subtitle (if provided) will be displayed in the main page body.</small>
</div>
</div>
<!-- Hero Image -->
<div class="collapse" id="options__hero_type__image" style="x-outline: 2px dashed red; outline-offset: 10px;">
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Hero image
</label>
<div class="col-sm-9">
<label class="custom-file">
<input type="file" class="custom-file-input" />
<span class="custom-file-control">Choose a hero image&hellip;</span>
</label>
<small class="form-text text-muted">Must be at least 1280 pixels wide and 380 pixels tall. Required<span id="required_by__video" class="collapse"> when using video</span>.</small>
</div>
</div>
</div>
<!-- Hero Video URL -->
<div class="collapse" id="options__hero_type__video_url" style="x-outline: 2px dashed red; outline-offset: 10px;">
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Hero video URL
</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="e.g. https://www.youtube.com/watch?v=SUiSkckNKO0" />
</label>
<small class="form-text text-muted">Must be a YouTube or Vimeo video URL, which should be publicly available.</small>
</div>
</div>
</div>
<!-- Hero Video File -->
<div class="collapse" id="options__hero_type__video_file" style="x-outline: 2px dashed red; outline-offset: 10px;">
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Hero video file
</label>
<div class="col-sm-9">
<label class="custom-file">
<input type="file" class="custom-file-input" />
<span class="custom-file-control">Choose a background video file&hellip;</span>
</label>
<small class="form-text text-muted">Must have no audio track, be less than 30 seconds long, under 5MB, and built to loop.</small>
</div>
</div>
</div>
<!-- Brand Logo -->
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Brand logo
</label>
<div class="col-sm-9">
<div style="padding-top: 7px; margin-bottom: -10px">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="input-logo" checked data-classtoggle-class="++collapse" data-classtoggle-target="#options__logo__override" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Show if available (default)</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="input-logo" data-classtoggle-class="++collapse" data-classtoggle-target="#options__logo__override" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Always hide</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="input-logo" data-classtoggle-class="--collapse" data-classtoggle-target="#options__logo__override" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Custom logo</span>
</label>
</div>
<small class="form-text text-muted">You can select whether the brand logo is shown, hidden or overridden with a custom logo</small>
</div>
</div>
<!-- Override Logo -->
<div id="options__logo__override" class="collapse" style="x-outline: 2px dashed #f90; outline-offset: 10px;">
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Custom logo
</label>
<div class="col-sm-9">
<label class="custom-file">
<input type="file" class="custom-file-input" />
<span class="custom-file-control">Choose a logo file&hellip;</span>
</label>
<small class="form-text text-muted">Must be at least 500 pixels wide or tall, with a white or transparent background.</small>
</div>
</div>
</div>
<!-- Header Content -->
<div id="options__header_content" style="x-outline: 2px dashed #bb0; outline-offset: 10px;">
<div class="form-group row">
<label class="col-sm-4 col-md-3 col-xl-2 col-form-label" for="page_data__cover_type">
Header content
</label>
<div class="col-sm-9">
<div style="padding-top: 7px; margin-bottom: -10px">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="input-heading" checked />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Display within hero</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="input-heading" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Display underneath hero</span>
</label>
</div>
<small class="form-text text-muted">Specify whether the logo, title and subtitle are displayed within or underneath the hero</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card" style="margin-top: 20px">
<h4 class="h6 card-header">Technical Options <span class="float-right text-muted">Administrators Only</span></h4>
<div class="card-body">
<div class="form">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="input-heading" checked />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remove this page from the sitemap</span>
</label>
<small class="form-text text-muted" style="margin-top: -10px; margin-left: 24px; margin-bottom: 10px">
Prevents this page from appearing in the user-accessible and XML
</small>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="input-heading" checked />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Prevent search engines from returning this page in search results</span>
</label>
<small class="form-text text-muted" style="margin-top: -10px; margin-left: 24px; margin-bottom: 10px">
Adds a DENY entry into the robots.txt file to tell search engines not to index this page
</small>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="input-heading" checked />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Only allow Administrators to edit this page</span>
</label>
<small class="form-text text-muted" style="margin-top: -10px; margin-left: 24px; margin-bottom: 10px">
Mark the page as technical, as opposed to content
</small>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment