coalaonline.html: Change "Add Bear" button font to Roboto #284

Akhelesh · 2018-08-15T12:28:25Z

This changes the font of the "Add Bear" button on Coala Online
from Times New Roman to Roboto.

Closes #270

For short term contributors: we understand that getting your commits well
defined like we require is a hard task and takes some learning. If you
look to help without wanting to contribute long term there's no need
for you to learn this. Just drop us a message and we'll take care of brushing
up your stuff for merge!

Checklist

I read the commit guidelines and I've followed
them.
I ran coala over my code locally. (All commits have to pass
individually. It is not sufficient to have "fixup commits" on your PR,
our bot will still report the issues for the previous commit.) You will
likely receive a lot of bot comments and build failures if coala does not
pass on every single commit!

After you submit your pull request, DO NOT click the 'Update Branch' button.
When asked for a rebase, consult coala.io/rebase
instead.

Please consider helping us by reviewing other peoples pull requests as well:

pick up any PR at https://coala.io/review
review it (check https://coala.io/reviewing for more info)
if you are sure that it needs work, use cobot mark wip <URL> to get it out
of the review queue.

The more you review, the more your score will grow at coala.io and we will
review your PRs faster!

jayvdb · 2018-08-15T12:30:08Z

partials/tabs/coalaonline.html

@@ -146,7 +146,8 @@ <h4>Optional Settings</h4>
        <div class="row blue-grey darken-4 white-text z-depth-1 no-margin">
          <span>
            <a class="waves-effect grey-text text-lighten-2">
-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> &nbsp;ADD BEAR
+              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> 


Line contains following spacing inconsistencies:

Trailing whitespaces.

Origin: SpaceConsistencyBear, Section: spacing.

The issue can be fixed by applying the following patch:

--- a/tmp/tmp01opxl72/partials/tabs/coalaonline.html +++ b/tmp/tmp01opxl72/partials/tabs/coalaonline.html @@ -146,7 +146,7 @@ <div class="row blue-grey darken-4 white-text z-depth-1 no-margin"> <a class="waves-effect grey-text text-lighten-2"> - +  ADD BEAR </a>

jayvdb · 2018-08-15T12:30:09Z

partials/tabs/coalaonline.html

@@ -146,7 +146,8 @@ <h4>Optional Settings</h4>
        <div class="row blue-grey darken-4 white-text z-depth-1 no-margin">
          <span>
            <a class="waves-effect grey-text text-lighten-2">
-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> &nbsp;ADD BEAR
+              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> 


Trailing Whitespace: Trailing white spaces are unnecessary and can complicate diffs: Remove the ' ' at the end of the line.

Origin: HTMLLintBear, Section: html.

TravisBuddy · 2018-08-15T12:31:54Z

Travis tests have failed

Hey @Akhelesh,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

1st Build

docker run -v=$(pwd):/app --workdir=/app coala/base coala --ci

Unable to find image 'coala/base:latest' locally
latest: Pulling from coala/base
















Digest: sha256:125d6cf24929d39db47b3ccd83d6ed1b6a231fc7e8afbf70bc4b5bd87653b0ff
Status: Downloaded newer image for coala/base:latest
Executing section global...
Executing section linecount...
Executing section spacing...
|    | [NORMAL] SpaceConsistencyBear:
|    | Line contains following spacing inconsistencies:
|    | - Trailing whitespaces.
|----|    | /app/partials/tabs/coalaonline.html
|    |++++| /app/partials/tabs/coalaonline.html
| 146| 146|         <div class="row blue-grey darken-4 white-text z-depth-1 no-margin">
| 147| 147|           <span>
| 148| 148|             <a class="waves-effect grey-text text-lighten-2">
| 149|    |-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> 
|    | 149|+              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true">
| 150| 150|                 &nbsp;<span style="font-family:'Roboto';">ADD BEAR</span>
| 151| 151|               </i>
| 152| 152|             </a>
[INFO][12:31:27] Applied 'ShowPatchAction' on 'partials/tabs/coalaonline.html' from 'SpaceConsistencyBear'.
Executing section html...
[WARNING][12:31:27] HTMLLintBear: This result has no patch attached.

partials/tabs/coalaonline.html
| 149| ··············<i·ng-click="add_bears(section)"·class="fa·fa-plus-circle·bears-icon-small"·aria-hidden="true">·
|    | [MAJOR] HTMLLintBear:
|    | Trailing Whitespace: Trailing white spaces are unnecessary and can complicate diffs: Remove the ' ' at the end of the line.
Executing section yml...
Executing section cli...

jayvdb · 2018-08-15T14:38:20Z

partials/tabs/coalaonline.html

@@ -146,7 +146,8 @@ <h4>Optional Settings</h4>
        <div class="row blue-grey darken-4 white-text z-depth-1 no-margin">
          <span>
            <a class="waves-effect grey-text text-lighten-2">
-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> &nbsp;ADD BEAR
+              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true">
+                &nbsp;<span style="font-family:'Roboto';">ADD BEAR</span>


Great. You've found the button and changed it.

However, we avoid inline styles.

where is the times new roman coming from?

note that bears-icon-small and similar are defined in http://github.com/coala/coalaCSS

Probably the fix needs to occur there.

And probably the solution is not adding Roboto to bears-icon-small, but requires finding why Times New Roman is being inherited and globally disabling it at the root of the problem.

The root of the problem here is the .fa class of the font awesome icon. Since the "ADD BEAR" text has been written within the tag, the style "font-family: FontAwesome" automatically gets applied to the text.
At present only the:
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Roboto;
}

style is the best option from the http://github.com/coala/coalaCSS file to apply the Roboto font-family to the text. But this causes the styles of the materialize.css file heading tags to be applied automatically too.

We can define in a new class in the CoalaCSS file to attend to this particular issue. What do you suggest?

Yeah, new class in coalaCSS sounds good!

jayvdb · 2018-08-16T15:22:26Z

What about if we changed the order of the CSS files, like moving FA https://github.com/coala/landing-frontend/blob/master/index.html#L35 before coalaCSS ?

blazeu · 2018-08-17T06:52:18Z

What about moving the text outside of the icon? that's usually the way its done.

Akhelesh · 2018-08-17T08:36:07Z

Adding a new class to CoalaCSS and moving the text outside the  tag does the job. For the time being I added a new class to local copy of CoalaCSS to get the results here:

If this approach is okay how can I add the new class to CoalaCSS hosted on Github? Also what should I name it?

ksdme · 2018-08-17T08:43:27Z

I agree with @blazeu, you should try moving the button text out of the i tag. Fontawesome does not expect for the button label to be inside icon's tag.

ksdme · 2018-08-18T08:31:29Z

Here, I moved the label text into parent anchor tag from the tag supposed to be used for icon and the results are satisfactory:

<a class="waves-effect grey-text text-lighten-2">
  <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"></i> ADD BEAR
</a>

If you want to have bold label then add a new class called bold to coalaCSS and apply it to the parent anchor tag here.

Akhelesh · 2018-08-18T09:24:31Z

@ksdme yes it works. Sorry I couldn't get to this solution quick. What should I do to my PR for coalaCSS now? Should I delete it and create a new one?

ksdme · 2018-08-18T09:59:45Z

You can let it be open for now, when this PR gets merged without any changes being required in coalaCSS we can have that closed. Please keep it open for now.

ksdme · 2018-08-18T15:49:54Z

partials/tabs/coalaonline.html

-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> &nbsp;ADD BEAR
-              </i>
+              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"></i>
+              &nbsp;ADD BEAR


  not required, the icon has enough padding.

I am very sorry I dragged this issue so long because of my small mistakes.

Don't worry, this shows how insistent you are on learning.

ksdme · 2018-08-18T16:13:11Z

partials/tabs/coalaonline.html

@@ -146,8 +146,8 @@ <h4>Optional Settings</h4>
        <div class="row blue-grey darken-4 white-text z-depth-1 no-margin">
          <span>
            <a class="waves-effect grey-text text-lighten-2">
-              <i ng-click="add_bears(section)" class="fa fa-plus-circle bears-icon-small" aria-hidden="true"> &nbsp;ADD BEAR
-              </i>


Last request for change, doesn't require this change, you can keep this in a separate line.

Clarification: I mean  can be left in a new line.

I didn't catch that, means icon tags do not have to be on the same line. Am I right?

ksdme

coala is always spelled with a lower case c, please fix your commit message.

This changes the font of the "Add Bear" button on coala online from Times New Roman to Roboto. Closes coala#270

jayvdb · 2018-08-25T07:24:48Z

ack 15d52f8

jayvdb · 2018-08-25T07:25:10Z

@gitmate-bot ff

jayvdb · 2018-08-25T07:25:12Z

Hey! I'm GitMate.io! This pull request is being fastforwarded automatically. Please DO NOT push while fastforward is in progress or your changes would be lost permanently ⚠️

ksdme · 2018-08-25T14:05:51Z

@jayvdb Looks like the ff did not go through.

jayvdb · 2018-08-28T00:57:04Z

@gitmate-bot ff

jayvdb · 2018-08-28T00:57:06Z

Hey! I'm GitMate.io! This pull request is being fastforwarded automatically. Please DO NOT push while fastforward is in progress or your changes would be lost permanently ⚠️

jayvdb · 2018-08-28T00:58:15Z

Automated fastforward with GitMate.io was successful! 🎉

jayvdb added process/pending review difficulty/newcomer labels Aug 15, 2018

jayvdb assigned Akhelesh Aug 15, 2018

jayvdb added the size/XS label Aug 15, 2018

jayvdb reviewed Aug 15, 2018

View reviewed changes

Akhelesh force-pushed the mybranch branch from 1c826c6 to c0257a3 Compare August 15, 2018 14:07

jayvdb requested changes Aug 15, 2018

View reviewed changes

jayvdb requested review from blazeu and hemangsk August 15, 2018 14:38

jayvdb added process/wip and removed process/pending review labels Aug 15, 2018

ksdme mentioned this pull request Aug 18, 2018

coala.css: Add class for coala-online "Add Bear" text coala/coalaCSS#34

Closed

Akhelesh force-pushed the mybranch branch from c0257a3 to 105d88f Compare August 18, 2018 15:18

jayvdb added process/pending review and removed process/wip labels Aug 18, 2018

ksdme reviewed Aug 18, 2018

View reviewed changes

Akhelesh force-pushed the mybranch branch from 105d88f to af23f5a Compare August 18, 2018 16:07

ksdme reviewed Aug 18, 2018

View reviewed changes

coalaonline.html: Change "Add Bear" button font to Roboto

15d52f8

This changes the font of the "Add Bear" button on coala online from Times New Roman to Roboto. Closes coala#270

Akhelesh force-pushed the mybranch branch from af23f5a to 15d52f8 Compare August 18, 2018 17:30

hemangsk approved these changes Aug 23, 2018

View reviewed changes

jayvdb added process/approved and removed process/pending review labels Aug 25, 2018

jayvdb approved these changes Aug 25, 2018

View reviewed changes

jayvdb merged commit 15d52f8 into coala:master Aug 28, 2018

jayvdb removed the process/approved label Aug 28, 2018

jayvdb deployed to github-pages August 28, 2018 00:58 View deployment

jayvdb added process/approved and removed process/approved labels Aug 28, 2018

jayvdb added process/approved and removed process/approved labels Sep 6, 2018

jayvdb added process/approved and removed process/approved labels Sep 13, 2018

jayvdb added process/approved and removed process/approved labels Sep 20, 2018

jayvdb added process/approved and removed process/approved labels Sep 27, 2018

jayvdb added process/approved and removed process/approved labels Oct 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

coalaonline.html: Change "Add Bear" button font to Roboto #284

coalaonline.html: Change "Add Bear" button font to Roboto #284

Akhelesh commented Aug 15, 2018

jayvdb Aug 15, 2018

jayvdb Aug 15, 2018

TravisBuddy commented Aug 15, 2018

jayvdb Aug 15, 2018

Akhelesh Aug 15, 2018

hemangsk Aug 16, 2018

jayvdb commented Aug 16, 2018

blazeu commented Aug 17, 2018 •

edited

Akhelesh commented Aug 17, 2018 •

edited

ksdme commented Aug 17, 2018

ksdme commented Aug 18, 2018

Akhelesh commented Aug 18, 2018

ksdme commented Aug 18, 2018

ksdme Aug 18, 2018

Akhelesh Aug 18, 2018

ksdme Aug 18, 2018

ksdme Aug 18, 2018

ksdme Aug 18, 2018

Akhelesh Aug 18, 2018 •

edited

ksdme Aug 18, 2018

ksdme left a comment

jayvdb commented Aug 25, 2018

jayvdb commented Aug 25, 2018

jayvdb commented Aug 25, 2018

ksdme commented Aug 25, 2018

jayvdb commented Aug 28, 2018

jayvdb commented Aug 28, 2018

jayvdb commented Aug 28, 2018

coalaonline.html: Change "Add Bear" button font to Roboto #284

coalaonline.html: Change "Add Bear" button font to Roboto #284

Conversation

Akhelesh commented Aug 15, 2018

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TravisBuddy commented Aug 15, 2018

Travis tests have failed

1st Build

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jayvdb commented Aug 16, 2018

blazeu commented Aug 17, 2018 • edited

Akhelesh commented Aug 17, 2018 • edited

ksdme commented Aug 17, 2018

ksdme commented Aug 18, 2018

Akhelesh commented Aug 18, 2018

ksdme commented Aug 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Akhelesh Aug 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ksdme left a comment

Choose a reason for hiding this comment

jayvdb commented Aug 25, 2018

jayvdb commented Aug 25, 2018

jayvdb commented Aug 25, 2018

ksdme commented Aug 25, 2018

jayvdb commented Aug 28, 2018

jayvdb commented Aug 28, 2018

jayvdb commented Aug 28, 2018

blazeu commented Aug 17, 2018 •

edited

Akhelesh commented Aug 17, 2018 •

edited

Akhelesh Aug 18, 2018 •

edited