ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Change font-weights, remove gibson from local CSS file and fix glitches

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-21 10:35:05 +02:00
parent fad6caca63
commit cd1cdfeede
3 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/components/search_bar.js
View File

@ -4,6 +4,9 @@ import React from 'react';
import Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import AscribeSpinner from './ascribe_spinner';
import { getLangText } from '../utils/lang_utils';
@ -32,6 +35,19 @@ const SearchBar = React.createClass({
};
},
componentWillReceiveProps(nextProps) {
/**
* This enables the `PieceListStore` to override the state
* of that component in case someone is changing the `searchQuery` on
* another component.
*
* Like how it's being done in the 'Clear search' dialog.
*/
if(this.props.searchQuery !== nextProps.searchQuery || !this.state.searchQuery) {
this.setState({ searchQuery: nextProps.searchQuery });
}
},
componentDidUpdate(prevProps) {
const searchQueryProps = this.props.searchQuery;
const searchQueryPrevProps = prevProps.searchQuery;
@ -68,19 +84,6 @@ const SearchBar = React.createClass({
}
},
componentWillReceiveProps(nextProps) {
/**
* This enables the `PieceListStore` to override the state
* of that component in case someone is changing the `searchQuery` on
* another component.
*
* Like how it's being done in the 'Clear search' dialog.
*/
if(this.props.searchQuery !== nextProps.searchQuery || !this.state.searchQuery) {
this.setState({ searchQuery: nextProps.searchQuery });
}
},
startTimer(searchQuery) {
const { timer } = this.state;
const { threshold } = this.props;
@ -120,7 +123,7 @@ const SearchBar = React.createClass({
const { loading, searchQuery } = this.state;
if(loading) {
searchIcon = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
searchIcon = <AscribeSpinner size='sm' color='dark-blue'/>;
}
return (

7
sass/ascribe-fonts/ascribe-fonts.scss
View File

File diff suppressed because one or more lines are too long

50
sass/ascribe_custom_style.scss
View File

@ -19,19 +19,19 @@ $ascribe--button-default-color: $ascribe--bg-color;
$ascribe--button-secondary-fg-color: $ascribe--bg-color;
$ascribe--button-secondary-bg-color: white;
//$ascribe--font: 'canada-type-gibson', sans-serif !important;
$ascribe--font: 'gibson-local', sans-serif !important;
$ascribe--font-weight: 300 !important;
$ascribe--font: 'canada-type-gibson', sans-serif !important;
$ascribe--font-weight-light: 300 !important;
$ascribe--font-weight-normal: normal;
html,
body {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
background-color: #f8f8f8 !important;
}
h1, h3 {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
}
h1 {
@ -57,6 +57,7 @@ hr {
.navbar-nav > li > .active a {
text-transform: uppercase;
font-size: 12px;
font-weight: $ascribe--font-weight-light;
color: $ascribe--nav-fg-prim-color;
border-bottom: 3px solid transparent;
}
@ -64,14 +65,13 @@ hr {
color: $ascribe--nav-fg-sec-color;
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $ascribe--nav-fg-prim-color;
border-bottom-color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
font-weight: 500;
font-weight: $ascribe--font-weight-light;
}
.navbar-nav > .active {
@ -79,27 +79,29 @@ hr {
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
.dropdown-menu > .active > a {
color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: rgba($ascribe--button-default-color, .05);
}
.dropdown-menu {
background-color: $ascribe--nav-bg-color;
}
.dropdown-menu > li > a {
color: $ascribe--nav-fg-prim-color;
font-weight: $ascribe--font-weight !important;
font-weight: $ascribe--font-weight-light;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
background-color: rgba($ascribe--button-default-color, .05);
}
.notification-menu {
@ -144,7 +146,7 @@ hr {
.ascribe-icon {
font-size: 1.2em;
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
}
.icon-ascribe-search{
@ -194,11 +196,7 @@ hr {
}
}
.ascribe-footer {
//position: fixed;
//left: 0;
//bottom: 0;
//height: 80px;
//width: 100%;
margin-top: 5em;
text-transform: uppercase;
background-color: $ascribe-white;
border-top: 1px solid rgba(0, 60, 105, 0.1);
@ -364,7 +362,7 @@ fieldset[disabled] .btn-secondary.active {
}
.btn-wide {
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
}
.btn-spinner, .btn-spinner:hover {
@ -401,7 +399,9 @@ fieldset[disabled] .btn-secondary.active {
}
.pager li > a:hover,
.pager li > span:hover {
.pager li > span:hover,
.pager li > a:focus,
.pager li > span:focus {
background-color: lighten($ascribe--button-default-color, 20%);
border-color: lighten($ascribe--button-default-color, 20%);
}
@ -493,12 +493,12 @@ fieldset[disabled] .btn-secondary.active {
> span:not(.glyphicon),
> textarea {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
}
> div {
> div:not(.file-drag-and-drop div) {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
font-weight: $ascribe--font-weight-light;
}
}
> span:not(.glyphicon) {