bitwarden/help
1
0
Fork 0
mirror of https://github.com/bitwarden/help synced 2025-12-10 05:13:43 +00:00
Code Issues Releases Wiki Activity

styling for various layouts/pages

Browse Source
This commit is contained in:
Kyle Spearrin
2016-10-11 22:39:22 -04:00
parent 36dacf9d54
commit 9406afe1f5
6 changed files with 185 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
_layouts/article.html
View File

@@ -2,6 +2,18 @@
layout: default
---
<div class="container">
{{content}}
<div class="container container-content">
<ol class="breadcrumb">
<li><a href="/">Help Center</a></li>
<li><a href="/{{page.category | slugify}}/">{{page.category}}</a></li>
<li class="active">{{page.title}}</li>
</ol>
<div class="panel panel-default panel-article">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-file-text-o"></i> {{page.title}}</h3>
</div>
<div class="panel-body">
{{content}}
</div>
</div>
</div>

40
_layouts/category.html
View File

@@ -2,13 +2,35 @@
layout: default
---
<div class="container">
<h3>{{page.title}}</h3>
<ol>
{% for article in site.articles %}
{% if article.category == page.title %}
<li><a href="{{article.url}}">{{article.title}}</a></li>
{% endif %}
{% endfor %}
</ol>
<div class="search-header">
<div class="container">
<form action="/search/" method="get">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Type your problem here..." name="q">
<span class="input-group-btn">
<button class="btn btn-lg btn-default" type="submit">Search</button>
</span>
</div>
</form>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li><a href="/">Help Center</a></li>
<li class="active">{{page.title}}</li>
</ol>
<div class="panel panel-default panel-articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
</div>
<div class="panel-body">
<ol>
{% for article in site.articles %}
{% if article.category == page.title %}
<li><a href="{{article.url}}">{{article.title}}</a></li>
{% endif %}
{% endfor %}
</ol>
</div>
</div>
</div>

26
_layouts/default.html
View File

@@ -51,8 +51,30 @@
{{content}}
<footer class="text-center">
&copy; Copyright 2015 - {{'now' | date: "%Y"}}<br />
8bit Solutions LLC
<div class="container">
<ul class="list-inline social-buttons">
<li>
<a href="https://www.facebook.com/bitwarden/" onclick="gaEvent('Social Facebook')"
title="Like us on Facebook" target="_blank" class="btn-social btn-outline">
<i class="fa fa-fw fa-facebook"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/114869903467947368993" onclick="gaEvent('Social Google+')"
title="Follow us on Google Plus" target="_blank" class="btn-social btn-outline">
<i class="fa fa-fw fa-google-plus"></i>
</a>
</li>
<li>
<a href="https://twitter.com/bitwarden_app" onclick="gaEvent('Social Twitter')"
title="Follow us on Twitter" target="_blank" class="btn-social btn-outline">
<i class="fa fa-fw fa-twitter"></i>
</a>
</li>
</ul>
&copy; Copyright 2015 - {{ 'now' | date: "%Y" }}<br />
8bit Solutions LLC
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

80
css/styles.scss
View File

@@ -22,10 +22,15 @@ html {
}
body {
margin-bottom: 60px;
margin-bottom: 160px;
padding-top: 51px;
font-family: $font-family-sans-serif;
font-size: 15px;
background-color: #fafafa;
@media(min-width:768px) {
margin-bottom: 101px;
}
}
h1, h2, h3, h4, h5 {
@@ -55,15 +60,17 @@ a {
.navbar-brand {
font-family: $headings-font-family;
.navbar-nav > li > a {
color: white;
}
}
.navbar-brand, .navbar-nav > li > a {
color: white;
}
.navbar-nav > li > a {
&:hover, &:focus {
text-decoration: underline;
}
}
}
.search-header {
@@ -77,8 +84,67 @@ footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
height: 160px;
background-color: $brand-dark-accent;
color: white;
padding: 8px 0;
padding: 30px 0;
@media(min-width:768px) {
height: 101px;
.container {
position: relative;
.social-buttons {
position: absolute;
right: 0;
top: -7px;
}
}
}
}
.container-content {
margin-top: 20px;
}
.btn-social {
display: inline-block;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 45px;
}
.btn-outline {
color: white;
font-size: 20px;
border: solid 2px white;
background: transparent;
transition: all 0.3s ease-in-out;
&:hover,
&:focus,
&:active,
&.active {
color: $brand-primary;
background: white;
border: solid 2px white;
}
}
.panel-articles {
ul, ol {
margin-bottom: 0;
margin-left: 0;
padding-left: 20px;
}
}
.breadcrumb {
border: 1px solid #ddd;
}

16
index.html
View File

@@ -20,9 +20,9 @@ title: Help, FAQ, and Support
<div class="col-md-8">
{% for category in site.categories %}
{% if category.featured == true %}
<div class="panel panel-default">
<div class="panel panel-default panel-articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-newspaper-o"></i> {{category.title}}</h3>
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{category.title}}</h3>
</div>
<div class="panel-body">
<ul>
@@ -38,11 +38,11 @@ title: Help, FAQ, and Support
{% endfor %}
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel panel-default panel-articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-newspaper-o"></i> Categories</h3>
<h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
</div>
<div class="panel-body">
<div class="panel-body small">
<ul>
{% for category in site.categories %}
<li><a href="{{category.url}}">{{category.title}}</a></li>
@@ -50,11 +50,11 @@ title: Help, FAQ, and Support
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-default panel-articles">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-newspaper-o"></i> Popular</h3>
<h3 class="panel-title"><i class="fa fa-star"></i> Popular</h3>
</div>
<div class="panel-body">
<div class="panel-body small">
<ul>
{% for article in site.articles %}
{% if article.popular == true %}

41
search/index.html
View File

@@ -3,9 +3,34 @@ layout: default
title: Search Results
---
<div class="container">
<ul id="search-results"></ul>
<div class="search-header">
<div class="container">
<form action="/search/" method="get">
<div class="input-group">
<input type="search" id="search-box" class="form-control input-lg"
placeholder="Type your problem here..." name="q">
<span class="input-group-btn">
<button class="btn btn-lg btn-default" type="submit">Search</button>
</span>
</div>
</form>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li><a href="/">Help Center</a></li>
<li class="active">{{page.title}}</li>
</ol>
<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">
<ul id="search-results"></ul>
</div>
</div>
</div>
<script src="/scripts/lunr.min.js"></script>
<script>
@@ -30,14 +55,14 @@ title: Search Results
for (var i = 0; i < results.length; i++) { // Iterate over the results
var item = store[results[i].ref];
appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
appendString += '<li><a href="' + item.url + '">' + item.title + '</a>';
appendString += '<p class="text-muted small">' + item.content.substring(0, 300) + '...</p></li>';
}
searchResults.innerHTML = appendString;
}
else {
searchResults.innerHTML = '<li>No results found</li>';
searchResults.innerHTML = '<li>No results found. Try another search term.</li>';
}
}
@@ -57,7 +82,8 @@ title: Search Results
var searchTerm = getQueryVariable('q');
if (searchTerm) {
//document.getElementById('search-box').setAttribute("value", searchTerm);
document.getElementById('search-box').setAttribute("value", searchTerm);
document.getElementById('search-term').innerText = searchTerm;
// Initalize lunr with the fields it will be searching on. I've given title
// a boost of 10 to indicate matches on this field are more important.
@@ -80,5 +106,8 @@ title: Search Results
displaySearchResults(results, window.store); // We'll write this in the next section
}
}
else {
displaySearchResults([], window.store);
}
})();
</script>