GitHub-Bitwarden
/
help
mirror of https://github.com/bitwarden/help.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

design updates

pull/15/head
Kyle Spearrin 9 years ago
parent
ddbb856137
commit
f17690a54b
8 changed files with 184 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      _includes/contact.html
  2. 20
      _layouts/article.html
  3. 4
      _layouts/category.html
  4. 9
      _layouts/default.html
  5. 20
      _plugins/liquid_pluralize.rb
  6. 104
      _sass/_help.scss
  7. 54
      index.html
  8. 14
      search/index.html

6
_includes/contact.html
Unescape View File

@ -3,6 +3,10 @@ @@ -3,6 +3,10 @@
<h3 class="panel-title"><i class="fa fa-envelope-o"></i> Email Us</h3>
</div>
<div class="panel-body">
Want to talk to a human?
<p>Want to talk to a human?</p>
<a href="https://bitwarden.com/contact/">
<i class="fa fa-long-arrow-right"></i>
Send Us An Email
</a>
</div>
</div>

20
_layouts/article.html
Unescape View File

@ -7,18 +7,32 @@ layout: default @@ -7,18 +7,32 @@ layout: default
<i class="fa fa-file-text-o"></i>
{{page.title}}
</h1>
<div class="panel panel-default panel-article">
<div class="breadcrumb">
{{ page.categories | size | pluralize: 'Category', 'Categories' }}:
{% for category in page.categories %}
<a href="/{{category | slugify}}">{{category}}</a>{% if forloop.last != true %}, {% endif %}
{% endfor %}
</div>
<div class="panel panel-default article">
<div class="panel-body">
{{content}}
</div>
{% assign tags_size = page.tags | size %}
{% if tags_size > 0 %}
<div class="panel-footer">
<i class="fa fa-tags fa-fw"></i>
{{ page.tags | join: ', ' }}
</div>
{% endif %}
</div>
<div class="row">
<div class="row article-blocks">
<div class="col-sm-6">
<div class="panel panel-default panel-contact">
<div class="panel panel-default panel-rate">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-thumbs-o-up"></i> Was this helpful?</h3>
</div>
<div class="panel-body">
<p>Rate this article:</p>
<div class="rw-ui-container"></div>
</div>
</div>

4
_layouts/category.html
Unescape View File

@ -4,11 +4,11 @@ layout: default @@ -4,11 +4,11 @@ layout: default
<div class="container">
<h1 class="page-header">
<i class="fa fa-folder-open"></i>
<i class="fa fa-folder-open-o"></i>
{{page.title}}
</h1>
<div class="row">
<div class="col-md-8">
<div class="col-md-8 articles">
<ol>
{% for article in site.articles %}
{% if article.categories contains page.title %}

9
_layouts/default.html
Unescape View File

@ -55,11 +55,14 @@ @@ -55,11 +55,14 @@
<header>
<div class="container">
<form action="/search/" method="get">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Search the help center..."
<div class="input-group input-group-lg">
<input type="search" class="form-control" placeholder="Search the help center..."
id="search-box" name="q">
<span class="input-group-btn">
<button class="btn btn-lg btn-default" type="submit">Search</button>
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</form>

20
_plugins/liquid_pluralize.rb
Unescape View File

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
# pluralize
#
# A Liquid filter to make it easy to form correct plurals.
#
# https://github.com/bdesham/pluralize
module Pluralize
def pluralize(number, singular, plural = nil)
number = number.to_i
if number == 1
"#{singular}"
elsif plural.nil?
"#{singular}s"
else
"#{plural}"
end
end
end
Liquid::Template.register_filter(Pluralize)

104
_sass/_help.scss
Unescape View File

@ -51,6 +51,14 @@ body { @@ -51,6 +51,14 @@ body {
}
}
.btn-secondary {
@include button-variant(#ffffff, $brand-secondary, $brand-secondary);
}
.btn-xl {
@include button-size(20px, 25px, $font-size-large, $line-height-large, 5px);
}
header {
padding: 10px 0 40px;
color: #fff;
@ -60,7 +68,7 @@ header { @@ -60,7 +68,7 @@ header {
}
content {
margin: 30px 0;
padding: 30px 0;
display: block;
}
@ -119,22 +127,104 @@ footer { @@ -119,22 +127,104 @@ footer {
}
}
article {
.panel-secondary {
@include panel-variant($brand-secondary, #ffffff, $brand-secondary, $brand-secondary);
}
.panel-primary-accent {
@include panel-variant($brand-primary-accent, #ffffff, $brand-primary-accent, $brand-primary-accent);
}
.page-header {
margin-top: 0;
padding-left: 50px;
padding-left: 35px;
i {
float: left;
margin-left: -50px;
margin-left: -35px;
}
@media(min-width:$screen-sm) {
padding-left: 50px;
i {
margin-left: -50px;
}
}
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
@media(max-width:$screen-sm-max) {
h1 {
font-size: 25px;
}
}
.article-blocks {
.panel-contact {
margin-bottom: 0;
}
@media(min-width:$screen-sm) {
.panel-body {
min-height: 95px;
}
.panel {
margin-bottom: 0;
}
}
}
h1 {
.articles {
margin-bottom: 25px;
ul, ol {
margin-left: 0;
padding-left: 20px;
li + li {
margin-top: 0.25em;
}
}
&.panel {
ul, ol {
margin-bottom: 0;
}
}
.fa-ul {
padding-left: 30px;
.fa {
color: $text-muted;
}
}
}
.article {
ul, ol {
li + li,
ul li:first-child,
ol li:first-child {
margin-top: 0.40em;
}
}
@media(max-width:$screen-sm-max) {
&.panel {
border: 0;
box-shadow: none;
.panel-body {
padding: 0;
}
.panel-footer {
margin-top: 10px;
border: 1px solid $panel-default-border;
border-radius: $panel-border-radius;
}
}
}
}

54
index.html
Unescape View File

@ -3,52 +3,58 @@ layout: default @@ -3,52 +3,58 @@ layout: default
title: Help Center
---
<div class="container">
<div class="row">
<div class="col-md-8">
{% for category in site.categories %}
{% if category.featured == true %}
<div class="panel panel-default panel-articles">
<div class="panel panel-secondary articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{category.title}}</h3>
<h3 class="panel-title"><i class="fa fa-star-o"></i> Popular Articles</h3>
</div>
<div class="panel-body">
<ul>
<ul class="fa-ul">
{% for article in site.articles %}
{% if article.categories contains category.title and article.featured == true %}
<li><a href="{{article.url}}">{{article.title}}</a></li>
{% if article.popular == true %}
<li>
<i class="fa-li fa fa-file-text-o"></i>
<a href="{{article.url}}">{{article.title}}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="col-md-4">
<div class="panel panel-default panel-articles">
{% for category in site.categories %}
<div class="panel panel-default articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
<h3 class="panel-title"><i class="fa fa-folder-open-o"></i> {{category.title}}</h3>
</div>
<div class="panel-body small">
<ul>
{% for category in site.categories %}
<li><a href="{{category.url}}">{{category.title}}</a></li>
<div class="panel-body">
<ul class="fa-ul">
{% for article in site.articles %}
{% if article.categories contains category.title %}
<li>
<i class="fa-li fa fa-file-text-o"></i>
<a href="{{article.url}}">{{article.title}}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="panel panel-default panel-articles">
{% endfor %}
</div>
<div class="col-md-4">
{% include contact.html %}
<div class="panel panel-default articles" style="margin-bottom: 0;">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-star"></i> Popular</h3>
<h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
</div>
<div class="panel-body small">
<ul>
{% for article in site.articles %}
{% if article.popular == true %}
<li><a href="{{article.url}}">{{article.title}}</a></li>
{% endif %}
{% for category in site.categories %}
<li>
<a href="{{category.url}}">{{category.title}}</a>
</li>
{% endfor %}
</ul>
</div>

14
search/index.html
Unescape View File

@ -5,13 +5,13 @@ title: Search Results @@ -5,13 +5,13 @@ title: Search Results
<div class="container">
<div class="panel panel-default panel-articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
</div>
<div class="panel-body">
<ol id="search-results"></ol>
</div>
<h1 class="page-header">
<i class="fa fa-search"></i>
{{page.title}}
<small>"<span id="search-term"></span>"</small>
</h1>
<div class="articles search-results">
<ol id="search-results"></ol>
</div>
</div>

Write Preview
Loading…
Cancel
Save