mirror of
https://github.com/bitwarden/help
synced 2025-12-06 00:03:30 +00:00
design updates
This commit is contained in:
Kyle Spearrin
@@ -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>
|
||||
@@ -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,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 %}
|
||||
|
||||
@@ -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
Normal file
20
_plugins/liquid_pluralize.rb
Normal file
@@ -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
104
_sass/_help.scss
@@ -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 {
|
||||
}
|
||||
|
||||
content {
|
||||
margin: 30px 0;
|
||||
padding: 30px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
.article-blocks {
|
||||
.panel-contact {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width:$screen-sm) {
|
||||
.panel-body {
|
||||
min-height: 95px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
56
index.html
56
index.html
@@ -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>
|
||||
{% for category in site.categories %}
|
||||
<div class="panel panel-default articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-folder-open-o"></i> {{category.title}}</h3>
|
||||
</div>
|
||||
<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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="panel panel-default panel-articles">
|
||||
{% 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-list-alt"></i> Categories</h3>
|
||||
</div>
|
||||
<div class="panel-body small">
|
||||
<ul>
|
||||
{% for category in site.categories %}
|
||||
<li><a href="{{category.url}}">{{category.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-star"></i> Popular</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 %}
|
||||
<li>
|
||||
<a href="{{category.url}}">{{category.title}}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user