19:04:01 <mizmo> #startmeeting hubs-devel
19:04:01 <zodbot> Meeting started Wed Feb  1 19:04:01 2017 UTC.  The chair is mizmo. Information about MeetBot at http://wiki.debian.org/MeetBot.
19:04:01 <zodbot> Useful Commands: #action #agreed #halp #info #idea #link #topic.
19:04:01 <zodbot> The meeting name has been set to 'hubs-devel'
19:04:07 <mizmo> #chair shillman
19:04:07 <zodbot> Current chairs: mizmo shillman
19:04:17 <mizmo> okay lets see where we were
19:04:55 <shillman_> We figured out a few useful things which I had in my blog post. One sec.
19:05:12 <mizmo> i wanna pull up the bug
19:05:17 <shillman_> Ah! Ok.
19:05:23 <mizmo> i think it's #17
19:05:43 <shillman_> God, my browser is slow...
19:06:32 <mizmo> https://pagure.io/fedora-hubs/issue/17
19:06:52 <mizmo> https://medium.com/@suzannehillman/css-and-mockups-2bf6fb160fa2#.is5fuhf3q
19:07:36 <shillman_> Yup. :)
19:07:48 <shillman_> Restarted the browser, that helped.
19:08:48 <mizmo> so last session we basically got a better understanding of the fake data from sayan
19:08:52 <shillman_> Right.
19:09:05 <sayan> I pushed a new file btw
19:09:07 <shillman_> Which will hopefully reflect the eventual real data.
19:09:10 <mizmo> to know if the user has it, we check the is_awarded attribute
19:09:21 <mizmo> badges_count is total number of series badges... doesn't include non series badges, so theres a little bug there
19:09:33 <sayan> the one that I told at the end of the last meeting
19:10:06 <shillman_> *nod* Right.
19:10:41 <mizmo> there is some info we don't have that's in the mockup:
19:10:48 <mizmo> - non series badges for the team
19:10:55 <mizmo> - most recent badge earner
19:11:16 <mizmo> - most recently earned badge the most recent badge earner earned (say that 5 times fast)
19:11:27 <mizmo> that's it
19:11:34 <mizmo> sayan: ^^ would it be helpful to file bugs for getting this data?
19:11:40 <shillman_> Do we know the most recent badge the user got?
19:11:54 <mizmo> shillman_: probably, if we have the user name
19:11:55 <shillman_> Maybe it it's one of the series ones, we do?
19:12:06 <shillman_> Not sure if we have access to the non-series ones, nor how that would work.
19:12:19 <shillman_> Or could we use prod to get that info?
19:12:21 <mizmo> i think in final implementation we need non series access
19:12:26 <shillman_> Yes, agreed.
19:12:43 <mizmo> especially out of the gate, most team badges will be non-series
19:12:46 <shillman_> What's an open badge?
19:12:48 <shillman_> Agreed.
19:13:10 <mizmo> open badge == badges. open badge is the standard that mozilla made that we follow in our badges ipmlementation
19:13:14 <mizmo> oh and the team rank
19:13:18 <shillman_> So what
19:13:38 <shillman_> does open and non-mission team badges mean. Just hte non-series ones? That the person is working on? Something else?
19:13:47 <mizmo> to do team rank, we need the list of team members, need to know how many of the team badges each has in order to do the ranking
19:13:51 <mizmo> although that computation could be done on the badges side rather than here in hubs
19:13:57 <mizmo> OH
19:14:00 <mizmo> that open badge
19:14:03 * mizmo thinks
19:14:14 <mizmo> thats a good question
19:14:38 <mizmo> I'm not actually sure lol, in which case we can drop the open
19:14:43 <mizmo> you know what i think i was probably thinking?
19:14:55 <mizmo> "these are the badges that are associated with this team that i haven't yet earned"
19:14:59 <mizmo> so maybe open = haven't yet earned
19:15:03 <mizmo> but not sure
19:15:15 <shillman_> Aaaah. Well, if nothing else, we should label that better. ;P
19:15:30 <shillman_> And perhaps those are in order of ease of completion?
19:15:31 <mizmo> absolutely
19:15:33 <sayan> mizmo: sure
19:15:47 <mizmo> #action label open + non-mission team badges better
19:16:05 <shillman_> #info it probably means the team badges that the user hasn't gotten yet.
19:16:09 <mizmo> #action where it says 26 team badges, make it 20/26 badges to indicate how many of the total user has
19:16:36 <shillman_> Oh. Is _that_ what that number is about?
19:16:51 <mizmo> #action file bugs for missing data: non-series team badges, most recent badge earner, most recently earned badge, badge rank data for team
19:17:04 <mizmo> yeh 26 is supposed to be the total number of team badges
19:17:22 <mizmo> I think s/team badge rank/your team badge rank
19:17:28 <mizmo> #action fix team badge rank label to be more lear
19:17:35 <shillman_> Do we already have access to an individual's most recent team badge?
19:17:40 <shillman_> Because I think we need that, too.
19:17:57 <shillman_> BUt I guess that would fall out of having both series and non-series info,
19:18:02 <shillman_> .
19:18:11 <mizmo> shillman_: hopefully
19:18:58 <mizmo> ok lets do some html/css
19:19:05 <mizmo> lemme track down the etherpad
19:19:05 <shillman_> #info we hope that once we have access to series and non-series data, we should be able to grab the most recent team badge for the user.
19:19:26 <shillman_> http://etherpad.osuosl.org/badges_path_template
19:19:43 <shillman_> (also in my blog post)
19:20:14 <mizmo> oh perfect
19:20:20 <mizmo> okay
19:20:42 <mizmo> so let's start doing the html/css with filler text first, and maybe go into using the flask stuff if we're happy with that
19:21:00 <mizmo> so if you take a look at the layout of the other similar badges widget:
19:21:01 <mizmo> https://pagure.io/fork/duffy/fedora-hubs/blob/286a1d933a337417baa0325d9de3305e68c33a6c/f/hubs/widgets/templates/badges.html
19:21:05 <mizmo> it's using bootstrap -
19:21:09 <mizmo> are you familiar with bootstrap?
19:21:17 <shillman_> Nope
19:21:19 <mizmo> it's the row/col crap in the attributes
19:22:03 <shillman_> the classes that are row and col?
19:22:08 <shillman_> Or something else?
19:23:00 <mizmo> yeh pretty much
19:23:08 <mizmo> theres more to bootstrap than that, but that''s about all we use here
19:23:11 <shillman_> Ok.
19:23:16 <mizmo> do you know about the xs / sm / md / lg system?
19:23:21 <shillman_> Is there a reference somewhere?
19:23:25 <shillman_> No, but I can guess. :)
19:23:57 <shillman_> Are all the badges on imgur?
19:24:07 <mizmo> should be at bootstrap.com.... i've been following the guidelines for bootstrap 4 which was not yet released when we started
19:24:29 <mizmo> nope, i uploaded images out of the mockup to imgur to pull in - this isn't hooked up to badges at all, it's completely filler data including the imgs
19:24:34 <shillman_> Uh,
19:24:41 <mizmo> if thiswas hooked up correctly it'd pull images from badges
19:24:42 <shillman_> there's nothing there..http://www.bootstrap.com/
19:24:44 <shillman_> Aah
19:24:59 <mizmo> oh it's getbootstrap.com
19:25:03 <mizmo> sorry i usually just type in duckduckgo bar
19:25:10 <shillman_> np. :)
19:25:18 <mizmo> https://v4-alpha.getbootstrap.com/getting-started/introduction/
19:25:33 <mizmo> so the xs / sm / md / lg is used for responsive layout
19:25:40 <mizmo> bootstrap is based on a 12 column layout
19:25:54 <mizmo> so whenever you use a col class, you have to keep track of how many cols you've used in the row
19:26:03 <mizmo> if you go over 12 stuff will start stacking vertically
19:26:12 <shillman_> Huh. Do we actually use as many as 12?
19:26:22 <mizmo> yep
19:26:23 <mizmo> if you scan down
19:26:31 <mizmo> the row with badges earned / badges rank is 6 | 6
19:27:12 <mizmo> then further down theres a lg 4 | lg 8 that on smaller screens goes md 12 / md 12 (two rows), in small it goes sm 2 | sm 10
19:27:23 <mizmo> it might help to see it in action
19:27:27 <mizmo> let's start up the server and play with it
19:27:29 <shillman_> Yeah, I think so. :(
19:27:31 <shillman_> :)\
19:27:32 * mizmo thinks this got merged
19:27:47 <mizmo> so in the hubs directory you type
19:27:48 <mizmo> workon hubs
19:27:51 <shillman_> Yep.
19:27:55 <mizmo> that starts venv
19:28:11 <mizmo> python runserver.py -c config
19:28:17 <shillman_> It's running already. :)
19:28:36 <mizmo> then we have to add this badges widget to the hub
19:28:46 <mizmo> oh you're ahead of me
19:29:02 <shillman_> Yeah, it's the same as last time because I didn't use this machine since and it was sleeping.
19:29:03 * mizmo still logging in
19:29:06 <shillman_> *nodnod*
19:29:06 <mizmo> OH NO
19:29:08 <mizmo> 401 error
19:29:13 * mizmo tries again
19:29:18 * mizmo crosses fingers
19:29:23 <shillman_> I haven't grabbed any new code; should I have?
19:29:34 <mizmo> please love me ipsilon. don't be mean to me.
19:29:34 <mizmo> shillman_: i haven't either, should be okayish
19:29:38 <shillman_> k
19:30:42 <mizmo> okay got it up :)
19:30:46 <mizmo> im going to go to the design team hub
19:30:55 <shillman_> k. I cannot edit that, due to permissions
19:30:59 <mizmo> http://localhost:5000/designteam
19:30:59 <shillman_> But I can see it, I think.
19:30:59 <mizmo> oh
19:31:03 <mizmo> let's do personal then
19:31:10 <shillman_> k
19:31:18 <mizmo> i'm doing http://localhost:5000/duffy  you should do http://localhost:5000/wispfox
19:31:24 <shillman_> Yup
19:31:26 <mizmo> (i think, if wispfox is your fas)
19:31:28 <mizmo> ok
19:31:30 <shillman_> Yup. :)
19:31:31 <mizmo> then edit this page...
19:31:44 <mizmo> slow slow slow
19:32:06 <mizmo> click add a widget
19:32:08 <mizmo> slow slow slow
19:32:21 <shillman_> :)
19:32:27 <mizmo> and we're gonna look for badges (one we're working on is badgespath, don't need that one)
19:32:52 <shillman_> Do you have a suggestion for which one?
19:33:00 <shillman_> (eventually...)
19:33:18 <mizmo> oh its slow bc of the json in the badgespath one i think
19:33:19 <mizmo> hehe
19:33:27 <shillman_> Oooooh.
19:33:36 <shillman_> Can I remove that?
19:34:24 <mizmo> oh poo
19:34:30 <mizmo> the badges widget here isn't the one i did
19:34:35 <mizmo> thats okay
19:34:45 <mizmo> yes you know what we'll do :) it's a bit evil
19:35:02 <shillman_> Eeeeeviiil...
19:35:05 <mizmo> we'll comment out the current badges path widget stuff and copy paste the one from the other badges widget so i can show you the bootstrap responsive stuff
19:35:13 <mizmo> that'll turn the json stuff off in effecvt
19:36:04 <shillman_> ok.
19:37:14 <mizmo> okay so im going into /home/duffy/Repositories/fedora-hubs/hubs/widgets/templates/badgespath.html
19:37:24 <mizmo> i'm clearing it completely then copy pasta'ing from the etherpad
19:37:50 <mizmo> then i'm restarting the server
19:38:06 <mizmo> and refreshing my hub
19:38:38 <shillman_> *waits on refresh to finish*
19:38:56 <shillman_> Ok, finished.
19:39:05 <mizmo> so, in my trickiness, i forgot the CSS won't work becasuse that's not merged either :)
19:39:16 <mizmo> so you'll see the basic layout of the bootstrap stuff but it won't look as pretty as intended!
19:39:19 <shillman_> Whoa Lots of errors.
19:39:23 <shillman_> Ah, is that why...
19:39:26 <mizmo> what errors did you get
19:39:35 <mizmo> i didnt get any
19:40:18 <mizmo> fpaste errors?
19:40:40 <mizmo> what browser are you using btw
19:40:56 <shillman_> https://paste.fedoraproject.org/542571/78052148/
19:41:14 <shillman_> And on the browser side: Got an error retrieving this widget. Sorry :(
19:41:18 <shillman_> a bunch.
19:41:27 <shillman_> Also the widget duplicated itself.
19:41:34 <shillman_> FF
19:42:09 <mizmo> huh
19:42:26 <mizmo> lets clear your widgets and start fresh
19:42:27 * mizmo tries to remember how to do that
19:43:21 <mizmo> pingou, sayan - how do we clear the user added widgets from a hub? i thought it was smart cache invalidator but it doesnt seem to work how i remember
19:43:49 <mizmo> shillman_: do you know which widget is failling? the badges one?
19:43:55 <mizmo> you could try stopping the server and running
19:44:04 <mizmo> python smart_cache_invalidator clean badgespath
19:44:06 <mizmo> python smart_cache_invalidator clean badges
19:44:08 <mizmo> and then restarting
19:44:24 <shillman_> I cannot tell, but there had been others there before and now there is only the badges path twice.
19:44:26 <shillman_> Will try that.
19:44:51 <fm-hubs> pagure.pull-request.comment.added -- jcline commented on pull-request#304 of project "fedora-hubs" https://pagure.io/fedora-hubs/pull-request/304#comment-17572
19:44:52 <fm-hubs> pagure.pull-request.closed -- jcline merged pull-request#304 of project "fedora-hubs" https://pagure.io/fedora-hubs/pull-request/304
19:45:28 <shillman_> reloading
19:46:47 <shillman_> mizmo, well, no error this time, but badges path is there three times. :)
19:46:59 <shillman_> *amused*
19:47:18 <shillman_> Anyway. I can at least have you explain the 12 columns thing.
19:48:16 <mizmo> hm
19:48:41 <mizmo> okay well! anyway  :)
19:48:45 <mizmo> so firefox has this responsive mode thing
19:48:49 <shillman_> *nod*
19:48:51 <mizmo> i think chrome does too but i prefer ff for development
19:48:55 <mizmo> you go to the firefox hamburger menu
19:49:24 <mizmo> click on developer > responsive design mode
19:49:56 <mizmo> that gives you handles all around the window, and you can resize the window smaller and larger to see how it renders differently
19:50:02 <shillman_> k, now I appear to be in a phone size.
19:50:33 <mizmo> drag it as large as you can
19:50:37 <mizmo> i have it on 1487x640
19:50:50 <mizmo> and then scale it down slowly, and you'll see how it sort of morphs
19:51:05 <mizmo> around 1340 is one point -
19:51:59 <shillman_> The widgets are shrinking, sure.
19:52:21 <mizmo> actually closer to 988
19:52:39 <mizmo> at 988, you can see rarest earned's description going from the side next to it to under it
19:52:43 <mizmo> same with most recently earned
19:52:47 <shillman_> Right.
19:53:22 <shillman_> Does that mean those are in two diff cols?
19:53:31 <mizmo> this is harder with the other widgets on the screen lol
19:53:32 <mizmo> yeh so let's go to the html
19:53:38 <shillman_> :)
19:54:46 <mizmo> okay so lines 19-25 in the etherpad
19:54:57 <mizmo> oh actually
19:55:04 <shillman_> mmm?
19:55:09 <mizmo> lines 15-25
19:55:22 <mizmo> so when it's at its largest
19:55:37 <mizmo> col-lg-4 / col-lg-8
19:55:50 <mizmo> the image of the badge takes up a column that is 4/12 wide.... and the description takes up a col 8/12 wide
19:56:05 <mizmo> when you scale it down i'm guessing down to the 988 you get into the md territory
19:56:09 <shillman_> OOOOOOH
19:56:14 <shillman_> Oh.
19:56:17 <mizmo> medium is two rows, the image takes up 12/12, and the description takes up 12/12
19:56:20 <mizmo> when you go small
19:56:22 <shillman_> I am suddenly less confused.
19:56:33 <mizmo> it shifts again... suddenly the image takes up 2 cols wide, and the description takes up 10 cols wide
19:56:42 <mizmo> make sense? :)
19:56:56 <shillman_> So each.. section? has effective 12 space in which to function.
19:57:01 <mizmo> yeh
19:57:05 <mizmo> it's not really 12 cols
19:57:05 <shillman_> And the things in that section need to remain within that space.
19:57:10 <mizmo> it's more a grid of 12 squares
19:57:18 <shillman_> Yeah. That is much less confusing now.
19:57:20 <mizmo> and you indicate how many of the squares wide that col should be
19:57:30 <mizmo> if you scale down to like 596
19:57:42 <mizmo> you'll notice the image is back left aligned with the description on the right
19:57:52 <mizmo> that's because we then did 2 col for the img and 10 col for the description
19:58:31 <mizmo> we do that because the entire hubs page is responsive, and it makes the widgets go from a right sidebar to full col content, so we change the alignment of the widget content accordingly to take advantage of having the full width of the screen
19:58:43 <shillman_> Right, ok.
19:59:05 <mizmo> theres different philosophies on how to best go about this process of figuring out how to have the design morph for each size
19:59:17 <shillman_> So is there a way to know approximately what to expect from xs, sm, md, and lg in terms of the entire hubs behavior, to know what one has to work with?
19:59:18 <mizmo> what i usually do is write the html for the 'normal' or 'laptop' version of the site first
19:59:23 <shillman_> *nod*
19:59:26 <mizmo> then go into this responsive view and play with it, and try to work out in my head how i'd like it to 'degrade'
19:59:36 <mizmo> and play with the bootstrap col values to figure out what looks best
19:59:55 <mizmo> now one thing i remember kind of vaguely, it's probably right
19:59:56 <mizmo> is that the bootstrap col sizes apply upwards
20:00:05 <shillman_> Ok, so evidently you just have to play with it. :)
20:00:10 <shillman_> 'upwards'?
20:00:12 <mizmo> so if you don't define a lg, md, or sm.... if you only define an xs - that will apply to *all* sizes
20:00:17 <shillman_> Aah
20:00:30 <mizmo> bt if you define a lg and not a sm.... it'll probably break at sizes small than lg. not always, but probably
20:00:35 <shillman_> Gotcha
20:01:09 <mizmo> xs / sm / md / lg sizes are defined in the CSS somewhere, it's a configurable variable
20:01:10 <mizmo> lets dig and figure out what it is for hubs
20:01:27 * mizmo pokes around here https://pagure.io/fedora-hubs/tree/develop
20:01:44 <mizmo> it's gonna be in here, do you know about static content?
20:01:45 <mizmo> https://pagure.io/fedora-hubs/blob/develop/f/hubs/static
20:02:03 <mizmo> its sort of a web standard thing to put static stuff like js, css, image, etc files under a 'static' dir
20:02:04 <shillman_> Insufficient context to know if I know.
20:02:08 <shillman_> Ah, ok.
20:02:22 <shillman_> Yeah, but I'm not clear on what non-static would mean.
20:02:36 <shillman_> (I did a tiny bit of this when adjusting the template for my website at suzannehillman.com)
20:02:44 <mizmo> so static is kind of like - it's never gonna change, like, the logo for the site
20:03:03 <mizmo> where it's not static is something that is maybe user defined or generated. a user may uplaod a new avatar in the app. so avatar is not static, it's user data
20:03:17 <mizmo> it's sort of like the difference between say /usr/bin on a linux system, and /home/*
20:03:20 <shillman_> Ooooooh. Ok, right.
20:04:35 <mizmo> https://pagure.io/fedora-hubs/raw/develop/f/hubs/static/fedora-bootstrap/fedora-bootstrap.css
20:04:36 <mizmo> it's minimized
20:04:52 <shillman_> ... whoa
20:05:05 <shillman_> That's difficult to parse!
20:05:07 <mizmo> im lazy so i'm just going to copy/paste it to unminify.com
20:05:18 <mizmo> it presumably saves bandwidth
20:05:18 <mizmo> to minify
20:05:20 <shillman_> What does minimizing mean in this context?
20:05:25 <mizmo> so a lot of js and css libraries do that
20:05:42 <mizmo> all whitespace and newlines are stripped
20:05:49 <shillman_> oooh, I see.
20:05:49 <mizmo> it makes the file smaller
20:05:53 <shillman_> Yeah, it would.
20:05:55 <shillman_> Slightly.
20:06:42 <mizmo> so i'm looking for @media in the file
20:06:54 <mizmo> that's the CSS syntax for defining a responsive view port
20:07:03 <shillman_> Ah, ok. Cool.
20:07:12 <mizmo> around like 786 i'm seeing 544 px / 768 px / 992 px / 1200 px
20:07:25 <mizmo> so i'm guessing lg = 1200, md = 992, sm = 768, xs = 544
20:08:42 <shillman_> Huh. That's rather less clear than it could be. No comments or anything!
20:08:51 <shillman_> Maybe those were stripped out, too.
20:09:50 <shillman_> What's col-[size]-pull-[number] for?
20:09:55 <mizmo> oh my god they are revoking visas from the 7 countries
20:09:58 <shillman_> And push...
20:10:04 <shillman_> *sigh*
20:10:11 <shillman_> I am utterly, completely, unsurprised. :(
20:10:48 <mizmo> this... this is not ok
20:11:22 <mizmo> sigh
20:11:28 <mizmo> sorry i just heard that on the radio
20:11:30 <shillman_> Yeah. It's not. In fact, it means that a bunch of people who have _helped_ us are now in fear for their lives because.
20:11:39 <shillman_> No apology required. I get it.
20:11:52 <mizmo> they may deport people who are here with visas
20:12:07 <shillman_> Yup.
20:12:36 <shillman_> I think Canada has said that those people are welcome there, if they can get there...
20:12:40 <mizmo> ok anyway
20:12:45 <mizmo> so this bootstrap css is from fedora bootstrap
20:12:51 <mizmo> i think probably the comments were stripped bc it's minified
20:12:55 <shillman_> *nodnod*
20:12:57 <mizmo> let me be unlazy and look it up
20:12:58 <mizmo> sec
20:14:25 <mizmo> it seems to pull it from upstream bootstrap
20:14:41 <mizmo> https://pagure.io/fedora-bootstrap/blob/master/f/src/index.scss
20:15:47 <mizmo> huh having a hard time tracking it down
20:16:07 <shillman_> This page is at least interesting and maybe good enough... http://getbootstrap.com/css/
20:16:42 <mizmo> found it!!!!
20:16:50 <mizmo> it's in variables.scss in the bootstrap tarball
20:16:55 * mizmo sent a long message: mizmo_2017-02-01_20:16:54.txt - https://matrix.org/_matrix/media/v1/download/matrix.org/XxNrGeraOAfFYzeShAAcfDZN
20:17:03 <mizmo> so fedora's values are a little diff than bootstrap upstream
20:17:17 <shillman_> Yay. :)
20:17:19 <mizmo> i think ryanlerch set them, he may have some insight into why
20:17:23 <shillman_> Yeah, interesting.
20:17:29 <mizmo> but there you go, with comments, it's pretty clear
20:17:29 <mizmo> and we can change it if we want
20:17:46 <mizmo> anyway i like bootstrap because it seems like it's the most widely used css framework, and it does make the responsive stuff pretty easy
20:18:01 <shillman_> *nod* Truth!
20:18:05 <mizmo> in html/css there's this mantra, separation of style and content
20:18:11 <mizmo> my big beef with bootstrap is it embeds style into the content
20:18:15 <mizmo> but... nothings perfect i guess :)
20:18:32 <mizmo> anyway so that's the bootstrap col stuff
20:18:33 <shillman_> *nod* Given the fact that HTML wasn't really meant for what we're pushing it into, and all.
20:18:36 <shillman_> *nod*
20:19:07 <mizmo> the main advice i have for figuring out which bootstrap col types (xs/sm/md/lg) and values to use for them:
20:19:16 <mizmo> - get it working for large screens first without bootstrap col values
20:19:30 <mizmo> - then start playing with it at different sizes in the responsive design view of firefox
20:19:49 <shillman_> *nod*
20:20:08 <mizmo> - one size at a time - scale it down to "lg" (960px), see what breaks, try different things, once you're happy with that, move down to md (720px), rinse and repeat
20:20:29 <mizmo> now wherever a row is defined with <div class="row">
20:20:32 <shillman_> I figure that as you do it more, you get a sense for what is likely to work?
20:20:38 <mizmo> (eg like in line 15)
20:20:45 <mizmo> yep absolutely
20:20:54 <mizmo> the rows are sort of hard breaks, no matter the screen size that row is always gonna be there
20:21:07 <mizmo> if you want something to sometimes be a row and sometimes not, you can play with the col values like i did in lines 15-25
20:21:28 <mizmo> i wanted two separate rows at the md size, so i set each col to 12, which forced the two columns to each be 100% wide and forced them into being stacked vertically
20:21:32 <mizmo> you could consider that a "soft" row
20:21:47 <mizmo> whereas a <div calss="row"> is a "hard" row
20:22:17 <shillman_> Hmm, I see.
20:22:23 <mizmo> i think i said this earlier? i meant to. but whenvever i'm trying to convert a mockup to html/css, the general principle is less is more
20:22:32 <shillman_> Mmm?
20:22:47 <mizmo> some people try to think of every possible little piece of metadata to inject into the html syntax / css
20:22:48 <mizmo> you dont wanna do that
20:22:51 <mizmo> you want as little as possible, no more
20:22:54 <mizmo> you can always add later if you need it
20:23:05 <mizmo> so you don't need to put a descriptive class on every element
20:23:06 <mizmo> the only classes i have here, are two main types -
20:23:22 <mizmo> - bootstrap classes, col, row
20:23:26 <mizmo> - descriptive classes
20:24:04 <shillman_> THings like badge and detail - to make it easier to reuse the style for those?
20:25:10 <mizmo> yep, if its something that might be possibly reused
20:25:11 <mizmo> eg
20:25:23 <mizmo> the table that's towards the middle
20:25:24 <mizmo> community / content / quality / event classes?
20:25:32 <mizmo> iirc the CSS for those just defines colors
20:25:39 <shillman_> Ah, I wondered.
20:25:40 <mizmo> those are color codes i want to be consistent across fedora hubs
20:25:58 <mizmo> so marking those with descriptive classes helps enforce that consistency
20:26:10 <mizmo> (you can't see the color in the website right now because the css isn't hooked up :) )
20:26:20 <mizmo> another elemtn here is heading elements
20:26:29 <shillman_> Ah, right. So. What sorts of things should I be expecting to need consistent acrossHubs?
20:26:31 <mizmo> some people just write text for a header and <strong> it
20:26:48 <mizmo> but it's better to use headers, so the document will have a clear hierarchy
20:27:01 <shillman_> *nod* Better for a11y purposes, if nothing else.
20:27:01 <mizmo> so for folks with screenreaders, it's easier to skim thru the document and go up and down the thread of it
20:27:04 <shillman_> That
20:27:35 <shillman_> (I have done some research into a11y stuff, FWIW)
20:27:56 <shillman_> (accessibility = a11y)
20:28:08 <mizmo> yep
20:28:21 <mizmo> i guess the other thing
20:28:23 <mizmo> i dont know if this is a thing anymore
20:28:29 <mizmo> for a while people used tables for everything
20:28:31 <mizmo> then suddenly tables were evil
20:28:38 <mizmo> it's okay to uses tables for tabular data :)
20:28:42 <mizmo> so that's what the table here is for
20:28:51 <shillman_> k.
20:28:59 <shillman_> What was it being used for before?
20:29:01 <mizmo> knowing what needs to be consistent about hubs - hard to know sometimes
20:29:13 <mizmo> whenever you use a color, it should come out of a palette for consistency, so that's an easy call
20:29:24 <shillman_> k.
20:29:34 <mizmo> people would use tables to lay out stuff on the screen before <div> was even in html
20:29:44 <mizmo> eg they wanted a 3 column layout, they'd use a table to set up 3 columns even though it wasn't tabular data
20:29:59 <shillman_> Aaaah,
20:30:05 <shillman_> instead of div. Gotcha
20:32:05 <mizmo> yep
20:32:16 <mizmo> some of it started pre-css days too i think
20:32:17 <mizmo> or at least pre-browser support of css
20:32:22 <shillman_> *nod*
20:32:33 <mizmo> i think that's mainly all you need to know on the html front
20:32:44 <mizmo> just make sure the hierarchy of the html is squeaky clean, and err on the side of too little metadata than too much
20:32:58 <mizmo> comments are good if you want to add them. i usually dont beacuse i'm a bad person.
20:33:16 <mizmo> if you're in the html part of the file <!-- blah blah -->
20:33:26 <mizmo> in the flask part, i think comments are marked with a # at the beginning of the line
20:33:30 <mizmo> i think
20:34:06 <shillman_> :)
20:34:11 <shillman_> Looks like you're correct.
20:34:28 <mizmo> ok cool
20:34:28 <shillman_> Checked google
20:34:36 <mizmo> so let's look at the CSS now and get that working
20:34:38 <mizmo> we can just hard code it in the file lol
20:35:13 * mizmo digs for it
20:35:42 <mizmo> https://pagure.io/fork/duffy/fedora-hubs/c/286a1d933a337417baa0325d9de3305e68c33a6c?branch=badges-user-profile
20:36:19 <shillman_> Oh, right. The CSS that you said wasn't here yet.
20:36:29 <mizmo> i just copy pasta'ed into etherpad
20:36:34 <shillman_> Can I literally just copy paste that into a file?
20:36:39 <mizmo> and put it inside <style type="text/css"> tag
20:36:46 <mizmo> you need the <style> tag wrapepd around it
20:37:01 <shillman_> Ah, you don't want it in a sepratate css file?
20:37:06 <mizmo> but yeh, you can put it anywhere as long as it's in that tag :) used to be it had to be in the head, probably still does need to be, but brwosers still use it
20:37:22 <mizmo> so let's update the html in hubs with that and see how it works
20:38:08 * mizmo refreshes page
20:38:26 <shillman_> (why no separate CSS file?)
20:38:38 * shillman_ also waits for refresh
20:38:50 <mizmo> i'm not doing it separately out of sheer laziness
20:38:54 <shillman_> Ah, ok.
20:39:01 <mizmo> so far i've just been dumping new css into the end of the master hubs css file
20:39:16 <mizmo> at some point - propriety and best practices would dictate - we should clean that up and split things out differently
20:39:17 <shillman_> Which is probably somewhere obvious?
20:39:22 <shillman_> Yeah, agreed. :)
20:39:24 <mizmo> theres different guidelines people use for splitting out css
20:39:26 <mizmo> it's under static
20:39:49 <shillman_> the style.css?
20:39:55 <shillman_> I assume? :)
20:40:15 <mizmo> https://pagure.io/fedora-hubs/blob/develop/f/hubs/static/css/style.css
20:40:16 <mizmo> yep :)
20:40:20 <shillman_> Heh. No numbers in new badges path earned/rank.
20:40:26 <shillman_> k
20:40:45 <mizmo> oh the numbers is probably an inheritance issue
20:40:57 <mizmo> im guessing if its in the style.css file it'll work
20:41:02 <shillman_> Huh!
20:41:05 * mizmo not sure tho
20:41:10 <shillman_> Inheritance how?
20:41:56 <fm-hubs> pagure.issue.comment.added -- duffy commented on ticket fedora-hubs#283: "Create nick wizard for new IRC users / freenode registration" https://pagure.io/fedora-hubs/issue/283#comment-71667
20:42:00 <fm-hubs> pagure.issue.comment.added -- duffy commented on ticket fedora-hubs#283: "Create nick wizard for new IRC users / freenode registration" https://pagure.io/fedora-hubs/issue/283#comment-71668
20:42:40 <mizmo> it's something to do with the a style
20:42:45 <mizmo> the CSS we added doesn't have it
20:43:00 <mizmo> do you use firebug?
20:43:22 <mizmo> for situations like this i use it to dig into what styles are getting applied to an element to try to track the issue down
20:43:29 <shillman_> Huh. I just tried to add it to the end of the style.css file and no change there.
20:43:33 <shillman_> Um... I have ever!
20:43:48 <mizmo> so style.css line 99 apparently makes a #fff
20:43:51 <mizmo> which... is odd
20:43:52 <shillman_> Inspect element, yes?
20:44:02 <mizmo> i think that's a bug in the css
20:44:03 <mizmo> yep
20:44:15 <mizmo> lemme see what commit added that change
20:45:18 <mizmo> https://pagure.io/fedora-hubs/blame/hubs/static/css/style.css
20:45:26 <shillman_> Yes, white on white is hard to read. :)
20:45:52 <mizmo> i think it's old legacy stuff that didn't get cleaned up
20:46:17 <mizmo> yeh if we disable that style, it works
20:46:30 <mizmo> so probably the solution is to kill that
20:46:32 <shillman_> How can you tell that line 99 is about the callout class?
20:46:49 <shillman_> Or is it not?
20:47:03 <mizmo> it's not callout
20:47:16 <mizmo> it's header a, header a:hover, .header a:focus {
20:47:35 <mizmo> i can tell because firebug lets me disable that line to see how it would look, that makes the text go blue
20:47:37 <shillman_> Ooooh
20:47:50 <mizmo> one thing looking at this though
20:47:51 <mizmo> header
20:47:54 <mizmo> those numbers shouldn't be in the header
20:48:03 <mizmo> i'm thinkingt he header should be the grey bar at the top, "Badges Path"
20:48:11 <mizmo> so why is the number in header
20:48:47 <mizmo> Badges Path is in a class "card-header"
20:49:02 <mizmo> The numbers and other widget deatils are in "card-block"
20:49:33 <mizmo> weird
20:49:39 <mizmo> all of the body is inside <header class="p-t-1">
20:49:44 <shillman_> can't find card-block...
20:49:46 <mizmo> after class="bodycontent"
20:49:46 <mizmo> that smells wrong
20:49:54 <shillman_> in css
20:50:17 <mizmo> the html might be messed up
20:50:35 <shillman_> Yeah, this is just weird and confusing.
20:50:59 <shillman_> (what's a badge card?)
20:51:15 <mizmo> it's sort of an imperfect art
20:51:22 <mizmo> well card is the class we use for each widget
20:51:22 <mizmo> 'card' is a bootstrap term i think
20:51:32 <shillman_> aah
20:53:41 <mizmo> main thing is to focus on the widget, if you run into larger css issues like this we can hash it out
20:53:48 <shillman_> Ok.
20:53:58 <mizmo> do you want to have a go at trying to do the html for issue #17?
20:54:52 <shillman_> Sure.
20:55:50 <shillman_> Editing in etherpad so you can see what I"m thinking as I go.
20:58:06 <shillman_> (I'm currently hard-coding everything)
21:04:14 <mizmo> looks good
21:05:05 <shillman_> I'm indecisive here.
21:05:29 <shillman_> Do the missions count as tabular data, and do I need to do something involving expanded and summary?
21:05:55 <shillman_> Given that the individual one has everything expand at once, and hte team one does not...
21:07:18 <shillman_> And where is view more... happening.?
21:07:57 <mizmo> lemme take a look at the mockup
21:08:03 <shillman_> It seems to just be expanded in the widget on the actual page...
21:08:05 <mizmo> view more should be a link to badges.fpo
21:08:27 <mizmo> so the user badges had an expander thing but the badges path one does not
21:08:31 <shillman_> I just am not sure it actually went into individual badges widget.
21:08:51 <shillman_> Oh, wait.
21:08:55 <mizmo> i would consider the badge missions a table
21:09:09 <mizmo> you don't have to use table, if you'd rather use div. but either would be appropriate
21:09:35 <shillman_> If I'm interpreting the mission correctly, each mission can expand to show you the list of badges in it.
21:09:48 <shillman_> So it does need an expander thing?
21:10:05 <shillman_> (and whether or not you've done them via a checkmark)
21:10:32 <mizmo> i would hard code it just liket he mockup, so the design team mission is expanded but the bootcamp one and the others are not expanded
21:10:35 <jcline> sayan, FYI I pushed an updated version of the docs branch. Do you want me to just open a PR with all the docs changes in it?
21:10:56 <shillman_> Oh, I see.
21:11:03 <mizmo> yeh individual missions can be expanded, sorry to be confusing. a big chunk of the other badge widget expands / collapses
21:12:03 <shillman_> I'm thinking that missions should not be classes? Because there would be a whole lot of them?
21:12:54 <mizmo> they should be classes. it's ids that you can only have one of
21:12:55 <shillman_> Also, more questions: Should I expect the bars to be images?
21:13:23 <shillman_> Or is there a way to make progress bars like that that I don't know about?
21:13:24 <mizmo> they'll probably be some kind of javascript widget
21:14:04 <mizmo> you could take the easy way out and just use a bar image, and work with developer to figure out what kind of js script to use for the bar
21:14:07 <mizmo> or you could make a bar in CSS
21:14:21 <mizmo> https://css-tricks.com/css3-progress-bars/
21:14:36 <mizmo> i think this one is too elaborate though
21:14:45 <mizmo> but i was imagining it'd be some kind of scripty thing like this
21:14:50 <mizmo> maybe bootstrap has one built in
21:15:18 <mizmo> oh ther you go
21:15:20 <mizmo> you could just use a bootstrap one
21:15:23 <mizmo> http://getbootstrap.com/components/
21:15:48 <mizmo> this is better to use https://v4-alpha.getbootstrap.com/components/progress/
21:16:23 <shillman_> Ah, coolness.
21:17:14 <mizmo> i think doing stuff in css is always better than js
21:17:25 <shillman_> *nod*
21:33:21 <shillman_> Where do you find things like a green trophy icon?
21:34:44 <shillman_> mizmo, ^^
21:35:38 <mizmo> (sec grabbing a drink)
21:36:45 <shillman_> (taking a look at what I've got so far)
21:36:52 <mizmo> okay
21:37:15 <mizmo> so iirc i made that one :) so you can grab it out of the svg if needed
21:37:33 <mizmo> if you need icons like that, a good source is font awesome which i believe we include in hubs
21:37:34 <mizmo> lemme see if font awesome has one
21:37:37 <shillman_> Hmm. The progress bars are not doing what is expected...
21:38:37 <mizmo> oh hey it is a font awesome one
21:38:41 <mizmo> http://fontawesome.io/icon/trophy/
21:38:57 <shillman_> ... it doesn't need money?
21:38:58 <mizmo> lemme take a look
21:39:01 <pingou> sweet :)
21:40:12 <mizmo> shillman_: no
21:40:21 <mizmo> they seem to want money but at least the version we use is open
21:40:37 <mizmo> shillman_: so for me the progress bars dont render, same issue?
21:40:49 <shillman_> Yeah.
21:41:00 <shillman_> I probably need a css class definition, but that page didn't say.
21:41:08 <mizmo> all right lets see whats going on
21:44:38 <mizmo> hmm
21:45:24 <mizmo> so the elements are there
21:45:31 <mizmo> and it's doing the sizing of the fill vs the background correctly
21:45:35 <mizmo> it's just not getting colored in
21:46:13 <mizmo> this should be in fedora-bootstrap
21:47:03 <mizmo> im gonna look at upstream bootstrap adn see waht classes they have for progress
21:47:05 <shillman_> There's also a weird amount of space between the badges and the 'most recent badge earner' and 'm-maybe design'
21:47:07 <shillman_> k
21:48:31 <mizmo> it looks like fedora bootstrap doesn't include the progress scss file
21:48:58 <shillman_> That would do it, yes...
21:49:08 <mizmo> the spacing stuff i think is another matter of digging in with firebug and trying to figure out whats going on
21:49:13 <shillman_> (they also aren't actually _in_ the table rows where they belong...)
21:50:40 <shillman_> Anwyay. I think I get the idea. If I have something to work from, this shouldn't be bad. Having to start from scratch would be unpleasant, though.
21:50:52 <shillman_> (eg, the fact that I can use your existing widget as a template)
21:51:34 <mizmo> okay so i manually pasted the upstream bootstrap progress classes and it works
21:51:46 <mizmo> i'll paste it into the top of the etherpad so you have it
21:51:48 <shillman_> Cool.
21:51:53 <mizmo> it's not so bad from scratch! but yeh having a mdoel to follow is great
21:52:25 <shillman_> I tend to struggle to figure out coding from scratch. It's why I'm not a programmer. :)
21:52:32 <mizmo> same here :)
21:52:46 <mizmo> okay should we endmeeting?
21:52:55 <mizmo> also theres an article on visual design iw ant to send you, gotta dig up the link
21:53:27 <shillman_> Yeah, my brain is melting. :)
21:53:53 <shillman_> And I cannot figure out why the progress bars aren't in the right place...
21:53:59 <mizmo> #endmeeting