search

littleweaver / littleweaverweb.com

A website for Little Weaver Web Collective
https://littleweaverweb.com
3 stars 4 forks source link

Author pages #43

Open nmorduch opened 8 years ago

nmorduch commented 8 years ago

These should:

And obviously:

Look gr8:

Edit by @cheryllium : nts- http://v4-alpha.getbootstrap.com/getting-started/introduction/

emilyhorsman commented 8 years ago
cheryllium commented 8 years ago

@nmorduch Check out the author-pages branch. We added rudimentary author pages. We think the back end is finished; the front end may need some design work (plus I wasn't sure where to place author photos on the pages).

Note: In order for this to work, we added a new field to the author profile called slug. This should be an alphabetical string with no spaces that represents each author (like a first name). We use this in the URLs for author pages as a way of identifying each author. You must edit the author profiles in the admin site and add the slugs for the author pages to work.

CC @chigby

chigby commented 8 years ago

@cheryllium I'm realizing now that we committed the changes to settings.py to make postgres the default database, that should probably be put back to how it was before.

nmorduch commented 8 years ago

Updated the checklist above to include some more things that should be on the page. Happy to pair with you on design @cheryllium

cheryllium commented 8 years ago

@nmorduch Made a commit with a rudimentary design (that now includes profile picture and social media links). Regarding the portfolio link, does that refer to the github link, or something else? (If it refers to a different external link, then we will need to add a field to the author page model for it.)

nmorduch commented 8 years ago

@cheryllium yes, a separate, optional link. mine should go to http://nmorduch.me/ (which i reallllly need to update tbh)

Also, can we remove the name field since it duplicates the title and that is confusing?

nmorduch commented 8 years ago

@cheryllium Here is your design challenge, should you choose to accept it. The purpose of this challenge is to practice fitting something into an existing design and writing as little new CSS as possible.

Redo the author page without writing any CSS (and delete the stuff you've written). You can use anything that was already written, and anything that is in Bootstrap v4.

Make something that as much as possible doesn't add any design ideas. (e.g., no new types of boxes. maybe a pane though?)

Make something that stays within those bounds, but if you have ideas that go outside these requirements, make note of them. We don't need the most boring design ever; I just want to start with the boring option :)

Updated checklist is in the first comment on this issue

cheryllium commented 8 years ago

@nmorduch Removed name field. I agree with you, it was redundant. Also added a portfolio link. These changes are in models.py.

Spending some time just reading all the CSS files now, trying to get a picture in my head of what each one is for. If you guys have written any documentation anywhere about your CSS or how it is usually organized, please let me know :)

nmorduch commented 8 years ago

hahahaha documentation

By which I mean, we're working on it.

Start with the Bootstrap v4 docs. We are loosely organized like they are. We try to name things in a way that works with what Bootstrap has? We try to separate into various files for different types of styles, but we're also not super consistent yet about how we do it.

For when we do write CSS for components, this is helpful: https://github.com/airbnb/css#oocss-and-bem

For trying to get a sense of the CSS, what I would more suggest doing is looking at the website and seeing what elements you want to copy, then looking at styles they use.

nmorduch commented 8 years ago

Added a checklist above for "Look gr8" @cheryllium

cheryllium commented 8 years ago

@nmorduch

RE: "maybe more space between github/twitter/portfolio links. maybe give them icons?"

I'm not in favor of giving them icons because I feel it is unnecessary. The icons wouldn't be adding any visual information because the text already says what the links are. We also don't have a good icon in mind for the Portfolio link. I think what could help would be to make the font size smaller in the sm view (where it is the same size as the bio text) and perhaps make the font size smaller in the other views as well just to provide more of a contrast with the bio text so it's clearer that they are links. After that we can add more space between them if we feel it's necessary. What do you think?

RE: "Should we add the portfolio link to the blog bio? Should we remove the github and twitter links?"

I'm in favor of removing the media links altogether. Due to their placement and the fact that they're on a small summary rather than an actual profile page, it wouldn't make sense for them to be written out as text. Since right now they are next to the author name, visually it would be fine to remove them (they wouldn't leave a gap or anything). If we could think of an icon for the Portfolio link, I think it might be cool to place the three icons underneath the image, but I'm not sure.

Will await your response :)

nmorduch commented 8 years ago
RE: "maybe more space between github/twitter/portfolio links. maybe give them icons?"

Hm i think just more space btwn them is probably sufficient. I think the icons could act like bullets (and it's ok to use the globe for a website link when it's not expected to stand alone) but we also don't need them. I think changing the size is probably more trouble than it's worth and wouldn't be great for legibility.

RE: "Should we add the portfolio link to the blog bio? Should we remove the github and twitter links?"

Yeah let's just kill them. (I mean, leaving them as is would be acceptable too, but I think taking them away makes a little more sense.)