From 29045d543b36128712df4f1a1c5a70d36ae06a90 Mon Sep 17 00:00:00 2001 From: Lukas Brabec Date: Jan 24 2019 12:24:40 +0000 Subject: gui polishing --- diff --git a/package-lock.json b/package-lock.json index 84ab2fc..f234656 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15686,6 +15686,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "typeface-open-sans": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-0.0.54.tgz", + "integrity": "sha512-w6wOd6EicZdZKf0jSU/K3EzEi3zFgvWQSN7NOpRIQI5KeMWmC5Pg/lqtBVJHB0pRChYRmLdhf4h8ROur0A3JZQ==" + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", diff --git a/package.json b/package.json index 4d5172e..76fe853 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "react-dom": "^16.5.2", "react-router-dom": "^4.3.1", "react-scripts": "^2.1.3", - "reactstrap": "^6.5.0" + "reactstrap": "^6.5.0", + "typeface-open-sans": "0.0.54" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index 88e77e7..e29373d 100644 --- a/public/index.html +++ b/public/index.html @@ -23,11 +23,8 @@ Fedora QA Landingpage - + - - - diff --git a/src/index.css b/src/index.css index bab1231..189286f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,7 @@ html { height: 100%; box-sizing: border-box; + font-family: 'Open Sans' !important; } *, @@ -14,9 +15,9 @@ body { min-height: 100%; margin: 0; padding: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + background-color: #fff; + + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -111,7 +112,16 @@ code { } div.nobullet { - padding-bottom: 1em; + padding-top: 0.5em; + padding-bottom: 0.5em; + margin-bottom: 0.5em; + background-color: #fefefe; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border-style: solid; + border-color: #ddd; + border-width: 1px; } @@ -131,4 +141,18 @@ ol.steps > li { padding-bottom: 0.6em; } +.card-header { + font-size: 0.9em !important; +} + +.card-body { + padding-top: 0.6em !important; + padding-bottom: 0.6em !important; + padding-left: 0.8em !important; + padding-right: 0.8em !important; + font-size: 0.9em !important; +} +h1 { + font-size: 1.25rem !important; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 08f5a46..34f4dba 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import 'bootstrap/dist/css/bootstrap.min.css'; +//import 'bootstrap/dist/css/bootstrap.min.css'; + +import 'typeface-open-sans' import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/landingpage/Blockers.js b/src/landingpage/Blockers.js index 9d0bbbb..14ca0d9 100644 --- a/src/landingpage/Blockers.js +++ b/src/landingpage/Blockers.js @@ -12,11 +12,11 @@ class Blockers extends Component { return (
-
Fedora {this.props.release} blockers and FEs{' '} +

Fedora {this.props.release} blockers and FEs{' '} -

+
diff --git a/src/landingpage/Events.js b/src/landingpage/Events.js index b931226..774168e 100644 --- a/src/landingpage/Events.js +++ b/src/landingpage/Events.js @@ -18,12 +18,12 @@ class Events extends Component { }); return (
-
+

Meetings and testdays in the next 7 days{' '} -

+
    {meetings}
diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js index c775c0b..afb4606 100644 --- a/src/landingpage/Minutes.js +++ b/src/landingpage/Minutes.js @@ -10,9 +10,9 @@ class Events extends Component { return (
-
+

Latest QA Meeting Minutes From {this.props.data.date} -

+ Here!
); diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js index 02331d4..f4da9cc 100644 --- a/src/landingpage/Timeline.js +++ b/src/landingpage/Timeline.js @@ -45,11 +45,11 @@ class Timeline extends Component { }); return (
-
Current development schedule{' '} +

Current development schedule{' '} -

+
diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js index dacc270..9fcf452 100644 --- a/src/wizard/Easyfix.js +++ b/src/wizard/Easyfix.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Card, CardHeader, CardBody, UncontrolledCollapse } from 'reactstrap'; +import { Card, CardHeader, CardBody, UncontrolledCollapse, Row } from 'reactstrap'; export default class Easyfix extends Component { @@ -44,8 +44,14 @@ class EasyfixItemsListSub1 extends Component { return( - {k} - {this.props.data[k][0].extra_data.description} - Show me! + +
+ {k} - {this.props.data[k][0].extra_data.description} +
+
+ Show me! +
+ @@ -82,8 +88,14 @@ class EasyfixItemsListSub1 extends Component { return( - {title} - {btn_expand_text}! + +
+ {title} +
+ + diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js index 63558f7..e6b4a7a 100644 --- a/src/wizard/FedoraEasyKarma.js +++ b/src/wizard/FedoraEasyKarma.js @@ -7,7 +7,7 @@ export default class FedoraEasyKarmaItemsList extends Component { if(this.props.data === undefined) return (null) else return (
-
What is Karma
+

What is Karma

Before a new version of a package is pushed to the Fedora's Updates repository, it needs to be tested and proved functional.{' '} Tell me more about the process! @@ -15,7 +15,7 @@ export default class FedoraEasyKarmaItemsList extends Component { Users (or automated systems) can then provide feedback in form of positive/negative Karma, marking the update as working (or not) within the scope of their expectations.{' '} An update can (and usually does) consist of several packages (rpms), that are going through the acceptance process together. -
Sure, let me do it!
+

Sure, let me do it!

  1. Fedora Accounts System (FAS) account is required.{' '} diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js index 1957b2d..67b8e69 100644 --- a/src/wizard/FedoraManualTesting.js +++ b/src/wizard/FedoraManualTesting.js @@ -258,7 +258,7 @@ class ModalInfo extends Component { {project} -
    {ticket}
    +

    {ticket}

    {this.props.children}     diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js index 99188db..8c7c896 100644 --- a/src/wizard/WizardForm.js +++ b/src/wizard/WizardForm.js @@ -38,7 +38,7 @@ class WizardForm extends Component { provider_selected(provider) { console.log(provider) - fetch(this.props.apiurl + "actions/tags?provider=" + provider.name) + fetch(this.props.apiurl + "actions/tags?provider=" + provider.provider) .then(resp => resp.json()) .then(data => { this.props.set_actions([]); @@ -55,7 +55,7 @@ class WizardForm extends Component { _tags_selected(tags) { const encoded_tags = tags.map(t => encodeURIComponent(t)) - fetch(this.props.apiurl + 'actions?provider=' + this.state.selected_provider.name + "&tags=" + encoded_tags.join(',')) + fetch(this.props.apiurl + 'actions?provider=' + this.state.selected_provider.provider + "&tags=" + encoded_tags.join(',')) .then(resp => resp.json()) .then(data => { /* @@ -71,20 +71,20 @@ class WizardForm extends Component { this._tags_selected(tags) } - tag_handler(t){ + tag_handler(t) { this._tags_selected([t]) } - - get_tag_selector(){ + + get_tag_selector() { if (this.state.selected_provider === "" || !this.state.selected_provider.tags) return (null) else return ( -
    -
    Make your choice!
    - -
    +
    +

    Make your choice!

    + +
    ) } @@ -93,22 +93,27 @@ class WizardForm extends Component { const providers = [3, 72].map(duration => { const duration_providers = this.state.providers.filter(p => p.duration === duration).map(p => { return ( - -
    - {p.scope} - {p.name_human}: {p.description} -
    -
    - + +
    +
    + +
    + {p.scope} - {p.name}:
    {p.description} +
    +
    + +
    +     +
    - ) }) return (
    -
    {durationString[duration]}
    +

    {durationString[duration]}

    {duration_providers}
    ) @@ -116,12 +121,12 @@ class WizardForm extends Component { return (
    - -
    - {providers} -
    -     - {this.get_tag_selector()} + +
    + {providers} +
    +     + {this.get_tag_selector()}
    ) } @@ -135,16 +140,16 @@ class Tags extends Component { } } - selected(t){ + selected(t) { this.props.handler(t); - this.setState({selected_button: t}); + this.setState({ selected_button: t }); } - is_selected(t){ - return t===this.state.selected_button?'success':'primary'; + is_selected(t) { + return t === this.state.selected_button ? 'success' : 'primary'; } - render(){ + render() { var x = this.props.data.map(t => ( ));