Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to Bulma #8

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Switch to Bulma #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db0a816
Switch to Bulma
picknchew Oct 20, 2017
371c14b
Line ending
picknchew Oct 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* hide scrollbar on full sized pages */
html {
overflow: auto;
}
16 changes: 16 additions & 0 deletions public/js/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// activate navbar burger buttons when page finishes loading
document.addEventListener("DOMContentLoaded", function () {
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);

if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(function ($el) {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);

$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
});
24 changes: 13 additions & 11 deletions views/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
{{#> layouts/base title="Home" }}

{{#*inline "body"}}
<div class="container-fluid">
<h1>Shine Index</h1>
<p>Welcome to <strong>Shine</strong>, Glowstone's in-house download center and plugin repository.</p>
<p>
{{#if user}}
You are currently logged in as <a href="#">{{user.username}}</a>.
{{else}}
You are not currently logged in. <a href="login">Sign in</a> or <a href="register">create an account</a> to
submit plugins.
{{/if}}
</p>
<div class="section">
<div class="container">
<h1 class="title">Shine Index</h1>
<p>Welcome to <strong>Shine</strong>, Glowstone's in-house download center and plugin repository.</p>
<p>
{{#if user}}
You are currently logged in as <a href="#">{{user.username}}</a>.
{{else}}
You are not currently logged in. <a href="/login">Sign in</a> or <a href="/register">create an account</a> to
submit plugins.
{{/if}}
</p>
</div>
</div>
{{/inline}}

Expand Down
62 changes: 29 additions & 33 deletions views/login.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,40 @@
{{#> layouts/base title="Login" }}

{{#*inline "body"}}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Login</div>

<div class="panel-body">
{{#alerts.error}}
<div class="alert alert-danger" role="alert">{{.}}</div>
{{/alerts.error}}

<form method="post">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</span>

<input type="text" name="username" class="form-control" placeholder="Username">
<div class="section">
<div class="columns">
<div class="container column is-half">
<h1 class="title">Login</h1>

<div class="box">
<form method="post">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Username or Email Address">
</div>
</div>
</div>

<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
</span>

<input type="password" name="password" class="form-control" placeholder="Password">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Password">
</div>
</div>
</div>

<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
</div>
</div>

<input type="submit" class="btn btn-default" value="Sign in">
</form>
<div class="field">
<div class="control">
<button type="submit" class="button is-primary">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions views/partials/layouts/base.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Shine | {{title}}</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
<link rel="stylesheet" href="/css/common.css">

{{#> head }}
{{!-- custom head content from other pages --}}
{{/head}}
Expand All @@ -17,8 +21,8 @@
{{!-- body content --}}
{{/body}}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

{{#> scripts }}
{{!-- custom scripts from other pages --}}
{{/scripts}}
Expand Down
104 changes: 56 additions & 48 deletions views/partials/menu.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,61 @@
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Shine</a>
<nav class="navbar is-transparent" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">Shine</a>

<div class="navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Index</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Glowstone <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Glowstone Server</a></li>
<li><a href="#">Glowkit</a></li>
</ul>
</li>
<li><a href="#">Plugins</a></li>
<li><a href="#">API</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>

<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a href="/" class="navbar-item">Home</a>

<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Glowstone</a>

<div class="navbar-dropdown is-boxed">
<a class="navbar-item">Glowstone Server</a>
<a class="navbar-item">Glowkit</a>
</div>
</div>

<a class="navbar-item">Plugins</a>
<a class="navbar-item">API</a>
</div>

<div class="navbar-end">
<div class="navbar-item">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a plugin">
</div>

<div class="control">
<a class="button is-info">
Search
</a>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<li><a href="https://glowstone.net">glowstone.net</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">User <span class="caret"></span></a>
<ul class="dropdown-menu">
{{#if user}}
<li><a href="#">Profile</a></li>
<li><a href="#">Preferences</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout">Sign out</a></li>
{{else}}
<li><a href="login">Sign in</a></li>
<li><a href="register">Register</a></li>
{{/if}}
</ul>
</li>
</ul>
</div>
</div>
</div>

{{#if user}}
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">{{user.username}}</a>

<div class="navbar-dropdown is-boxed is-right">
<a class="navbar-item">Profile</a>
<a class="navbar-item">Preferences</a>
<hr class="navbar-divider">
<a class="navbar-item" href="/logout">Sign out</a>
</div>
</div>
{{else}}
<a class="navbar-item" href="/login">Sign in</a>
<a class="navbar-item" href="/register">Register</a>
{{/if}}
</div>
</nav>
89 changes: 39 additions & 50 deletions views/register.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,58 @@
{{#> layouts/base title="Home" }}

{{#*inline "body"}}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Register</div>

<div class="panel-body">
<form method="post">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</span>

<input type="text" name="username" class="form-control" placeholder="Username">
<div class="section">
<div class="columns">
<div class="container column is-half">
<h1 class="title">Register</h1>

<div class="box">
<form method="post">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Username">
</div>
</div>
</div>

<div class="row">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</span>

<input type="email" name="email" class="form-control" placeholder="Email address">
<div class="field">
<div class="control">
<input class="input" type="email" placeholder="Email Address">
</div>
</div>

<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Confirm email address">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Password">
</div>
</div>

<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Confirm Password">
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
</span>

<input type="password" name="password" class="form-control" placeholder="Password">
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>

<div class="form-group col-md-6">
<input type="password" class="form-control" placeholder="Confirm password">
<div class="field">
<div class="control">
<button type="submit" class="button is-primary">Register</button>
</div>
</div>
</div>

<div class="checkbox">
<label>
<input type="checkbox"> I agree to xyz.
</label>
</div>

<input type="submit" class="btn btn-default" value="Sign in">
</form>
</form>
</div>
</div>
</div>
</div>
{{/inline}}

{{#*inline "scripts"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
{{/inline}}

{{/layouts/base}}