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 layout: default
--- ---
<div class="container"> <div class="container container-content">
{{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> </div>

40
_layouts/category.html
View File

@@ -2,13 +2,35 @@
layout: default layout: default
--- ---
<div class="container"> <div class="search-header">
<h3>{{page.title}}</h3> <div class="container">
<ol> <form action="/search/" method="get">
{% for article in site.articles %} <div class="input-group">
{% if article.category == page.title %} <input type="search" class="form-control input-lg" placeholder="Type your problem here..." name="q">
<li><a href="{{article.url}}">{{article.title}}</a></li> <span class="input-group-btn">
{% endif %} <button class="btn btn-lg btn-default" type="submit">Search</button>
{% endfor %} </span>
</ol> </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> </div>

26
_layouts/default.html
View File

@@ -51,8 +51,30 @@
{{content}} {{content}}
<footer class="text-center"> <footer class="text-center">
&copy; Copyright 2015 - {{'now' | date: "%Y"}}<br /> <div class="container">
8bit Solutions LLC <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> </footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <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 { body {
margin-bottom: 60px; margin-bottom: 160px;
padding-top: 51px; padding-top: 51px;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: 15px; font-size: 15px;
background-color: #fafafa;
@media(min-width:768px) {
margin-bottom: 101px;
}
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
@@ -55,15 +60,17 @@ a {
.navbar-brand { .navbar-brand {
font-family: $headings-font-family; font-family: $headings-font-family;
.navbar-nav > li > a {
color: white;
}
} }
.navbar-brand, .navbar-nav > li > a { .navbar-brand, .navbar-nav > li > a {
color: white; color: white;
} }
.navbar-nav > li > a {
&:hover, &:focus {
text-decoration: underline;
}
}
} }
.search-header { .search-header {
@@ -77,8 +84,67 @@ footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 60px; height: 160px;
background-color: $brand-dark-accent; background-color: $brand-dark-accent;
color: white; 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"> <div class="col-md-8">
{% for category in site.categories %} {% for category in site.categories %}
{% if category.featured == true %} {% if category.featured == true %}
<div class="panel panel-default"> <div class="panel panel-default panel-articles">
<div class="panel-heading"> <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>
<div class="panel-body"> <div class="panel-body">
<ul> <ul>
@@ -38,11 +38,11 @@ title: Help, FAQ, and Support
{% endfor %} {% endfor %}
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="panel panel-default"> <div class="panel panel-default panel-articles">
<div class="panel-heading"> <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>
<div class="panel-body"> <div class="panel-body small">
<ul> <ul>
{% for category in site.categories %} {% for category in site.categories %}
<li><a href="{{category.url}}">{{category.title}}</a></li> <li><a href="{{category.url}}">{{category.title}}</a></li>
@@ -50,11 +50,11 @@ title: Help, FAQ, and Support
</ul> </ul>
</div> </div>
</div> </div>
<div class="panel panel-default"> <div class="panel panel-default panel-articles">
<div class="panel-heading"> <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>
<div class="panel-body"> <div class="panel-body small">
<ul> <ul>
{% for article in site.articles %} {% for article in site.articles %}
{% if article.popular == true %} {% if article.popular == true %}

41
search/index.html
View File

@@ -3,9 +3,34 @@ layout: default
title: Search Results title: Search Results
--- ---
<div class="container"> <div class="search-header">
<ul id="search-results"></ul> <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>
<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 src="/scripts/lunr.min.js"></script>
<script> <script>
@@ -30,14 +55,14 @@ title: Search Results
for (var i = 0; i < results.length; i++) { // Iterate over the results for (var i = 0; i < results.length; i++) { // Iterate over the results
var item = store[results[i].ref]; var item = store[results[i].ref];
appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>'; appendString += '<li><a href="' + item.url + '">' + item.title + '</a>';
appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>'; appendString += '<p class="text-muted small">' + item.content.substring(0, 300) + '...</p></li>';
} }
searchResults.innerHTML = appendString; searchResults.innerHTML = appendString;
} }
else { 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'); var searchTerm = getQueryVariable('q');
if (searchTerm) { 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 // 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. // 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 displaySearchResults(results, window.store); // We'll write this in the next section
} }
} }
else {
displaySearchResults([], window.store);
}
})(); })();
</script> </script>