ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +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 Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import AscribeSpinner from './ascribe_spinner';
import { getLangText } from '../utils/lang_utils'; 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) { componentDidUpdate(prevProps) {
const searchQueryProps = this.props.searchQuery; const searchQueryProps = this.props.searchQuery;
const searchQueryPrevProps = prevProps.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) { startTimer(searchQuery) {
const { timer } = this.state; const { timer } = this.state;
const { threshold } = this.props; const { threshold } = this.props;
@ -120,7 +123,7 @@ const SearchBar = React.createClass({
const { loading, searchQuery } = this.state; const { loading, searchQuery } = this.state;
if(loading) { if(loading) {
searchIcon = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>; searchIcon = <AscribeSpinner size='sm' color='dark-blue'/>;
} }
return ( 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-fg-color: $ascribe--bg-color;
$ascribe--button-secondary-bg-color: white; $ascribe--button-secondary-bg-color: white;
//$ascribe--font: 'canada-type-gibson', sans-serif !important; $ascribe--font: 'canada-type-gibson', sans-serif !important;
$ascribe--font: 'gibson-local', sans-serif !important; $ascribe--font-weight-light: 300 !important;
$ascribe--font-weight: 300 !important; $ascribe--font-weight-normal: normal;
html, html,
body { body {
font-family: $ascribe--font; font-family: $ascribe--font;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
background-color: #f8f8f8 !important; background-color: #f8f8f8 !important;
} }
h1, h3 { h1, h3 {
font-family: $ascribe--font; font-family: $ascribe--font;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
} }
h1 { h1 {
@ -57,6 +57,7 @@ hr {
.navbar-nav > li > .active a { .navbar-nav > li > .active a {
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: $ascribe--font-weight-light;
color: $ascribe--nav-fg-prim-color; color: $ascribe--nav-fg-prim-color;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
} }
@ -64,14 +65,13 @@ hr {
color: $ascribe--nav-fg-sec-color; color: $ascribe--nav-fg-sec-color;
} }
.navbar-nav > .active a, .navbar-nav > .active a,
.navbar-nav > .active a:hover, .navbar-nav > .active a:hover,
.navbar-nav > .active a:focus { .navbar-nav > .active a:focus {
color: $ascribe--nav-fg-prim-color; color: $ascribe--nav-fg-prim-color;
border-bottom-color: $ascribe--nav-fg-prim-color; border-bottom-color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color; background-color: $ascribe--nav-bg-color;
font-weight: 500; font-weight: $ascribe--font-weight-light;
} }
.navbar-nav > .active { .navbar-nav > .active {
@ -79,27 +79,29 @@ hr {
} }
.navbar-nav > .open > a, .navbar-nav > .open > a,
.navbar-nav > .open > a:hover, .dropdown-menu > .active > a {
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: $ascribe--nav-fg-prim-color; color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-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 { .dropdown-menu {
background-color: $ascribe--nav-bg-color; background-color: $ascribe--nav-bg-color;
} }
.dropdown-menu > li > a { .dropdown-menu > li > a {
color: $ascribe--nav-fg-prim-color; 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:hover,
.dropdown-menu > li > a:focus { .dropdown-menu > li > a:focus {
color: $ascribe--nav-fg-prim-color; background-color: rgba($ascribe--button-default-color, .05);
background-color: $ascribe--nav-bg-color;
} }
.notification-menu { .notification-menu {
@ -144,7 +146,7 @@ hr {
.ascribe-icon { .ascribe-icon {
font-size: 1.2em; font-size: 1.2em;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
} }
.icon-ascribe-search{ .icon-ascribe-search{
@ -194,11 +196,7 @@ hr {
} }
} }
.ascribe-footer { .ascribe-footer {
//position: fixed; margin-top: 5em;
//left: 0;
//bottom: 0;
//height: 80px;
//width: 100%;
text-transform: uppercase; text-transform: uppercase;
background-color: $ascribe-white; background-color: $ascribe-white;
border-top: 1px solid rgba(0, 60, 105, 0.1); border-top: 1px solid rgba(0, 60, 105, 0.1);
@ -364,7 +362,7 @@ fieldset[disabled] .btn-secondary.active {
} }
.btn-wide { .btn-wide {
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
} }
.btn-spinner, .btn-spinner:hover { .btn-spinner, .btn-spinner:hover {
@ -401,7 +399,9 @@ fieldset[disabled] .btn-secondary.active {
} }
.pager li > a:hover, .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%); background-color: lighten($ascribe--button-default-color, 20%);
border-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), > span:not(.glyphicon),
> textarea { > textarea {
font-family: $ascribe--font; font-family: $ascribe--font;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
} }
> div { > div {
> div:not(.file-drag-and-drop div) { > div:not(.file-drag-and-drop div) {
font-family: $ascribe--font; font-family: $ascribe--font;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight-light;
} }
} }
> span:not(.glyphicon) { > span:not(.glyphicon) {