installation page reshuffle
redesign installation page
- tabs for omnibus platforms, grouped by distro
- tiles for other installation methods
- add spacing everywhere
- svg icons for method logos
Closes #1074 (closed)
Merge request reports
Activity
added 2 commits
- f67c8fb3 - styles for nav tabs
- 0f37d397 - clean up other installation methods
added 1 commit
- ccd46c06 - add new logos, move community and offical methods to yml
Thanks for all of your hard work on this @psimyn, it is coming together nicely! There's a bit of polish that's missing so I hope the list and marked up screenshot below help. It may seem like a lot, but most of it is to be consistent with other pages we've redesigned — definitely not your fault as I know this is the first page you've done for marketing and there's a bit of a learning curve.
Linking to the Sketch preview in case that is helpful here.
**Notes:**-
Everything is designed at 970px width, so that should be the max everything shows at. The only exceptions are the gray lines dividing sections, they are designed at 1170px wide.
-
All of the dark text should be
#444444, I may have had an extra color in my Sketch file - my bad! -
Missing gray line dividing
Upgrade your GitLab instanceand the section below it. -
Check font size and color of paragraph text below
One-click install providersheader. -
Lets make the CE and EE buttons match the red upgrade button below it with a height of 42px, and font-size: 16px.
**Omnibus table:**-
The OS tabs at the top should span the entire width of the table.
-
3px corner radius (note that in the design the top left and right corner radius are on the Ubuntu and Raspberry Pi tabs) => does that make sense?
-
It might be the review app, but the table looks off-center on the page.
-
This might be a pain, but can we have a "special" height for the OpenSUSE icon, ~26px?
-
Table border is a darker purple,
#554488— this border color should also be applied to the active tab. -
If possible, I'd like for the
tab-contentborder to overlap the border that's on the tabs. So basically a 1px border between tabs and content instead of two.
-
Check Sketch preview for font size of secondary text that follows
Ubuntu 14.04andUbuntu 16.04. -
Is there a better looking dashed line we can use? On my MBP it looks a bit pixelated, also double-check color on the Sketch preview.
**Grid view:**-
To fit the 970px width the cards are 300 x 156px, there is also a 4px corner radius applied.
-
For mobile, with the 300px width I think we can stack these one on top of another.
-
Font size for the install name is 20px
-
Instead of linking the entire card, let's just link the install name text.
-
I mentioned this in the issue, but for the
No Fedora packages...text, we can place that below the cards so that it spans full width and is easier to read. Make sense? -
Some of the logos are a bit large, with some being square and other being horizontal it was tough to find a uniform height — checkout the Sketch preview to get specific logo sizes.
-
20px padding for the cards.
-
I think the grid is also off-center on the page as well.
Everything else that's easier explained visually should be in the markup images below. Please feel free to ping me with any questions and/or concerns, I know it's a lot but let's make this page
installation-page-markup-desktop
-
thanks @luke!! list and annotated images were super helpful
I've just pushed fixes for most of the things, 3 or 4 more that I'll do in the morning.
I think the logos look better at new size; for the OpenSUSE logo I added padding to the SVG itself (using viewBox)
Still need to
- fix dashed line
- remove list styles from Fedora list item
- not sure what to do with Third-party applications section
- anything else???
Edited by Simon KnoxThanks a ton for all of those updates @psimyn!
Just a couple formatting things I noticed while reviewing the latest:
-
The logo icons should have a fill of
#444444it looks like they are still the default black, but could just be me. Can you verify? -
The
View update options for CE & EEbutton now has underlined text, can we remove that? -
For the
No Fedora packages...text let's remove the bullet point (might be some weird markdown formatting going on)and just center the text on the page.
- Same formatting going on here, we're you able to make this a button similar to the red one above for
View update options for CE & EE?
- Some funky stuff going on a smaller browser size, perhaps the layout needs to jump to icons only sooner?
-
Redhat Openshift logo icon is here.
-
Mobile layout looks great, nice work!
-
Once those issues are fixed let's ship it!
thanks @luke
Some funky stuff going on a smaller browser size
went with keeping it one line and text overflow ellipsis
make this a button similar to the red one
Changed to button with text "View third-party applications" and longer title
Fixed other color/underline things. Will do a bit of x-browser checking to see that SVGs are ok, but I'll find someone to start review
assigned to @psimyn
@iamphill @annabeldunstone is one of you able to review this please?
@iamphill if you mean that each of the options in the box should link to the right end page like: https://about.gitlab.com/downloads/#ubuntu1604 for Unbuntu16.04 then that's the expected behavior as far as we planned it.
@iamphill we can link to specific tabs (and update hash) with something like http://stackoverflow.com/a/9393768
just not sure where the JS should go.
@psimyn make a new JS files & then do something like https://gitlab.com/gitlab-com/www-gitlab-com/blob/master/source/index.html.haml#L6-7
thanks @iamphill - updated with:
- clicking tab updates URL hash
- loading URL hash selects that tab
any other changes needed?
@iamphill based on https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/5607#note_27772976 I think ok to merge.
Much thanks!
@psimyn conflicts
added 670 commits
-
06b51e08...df83a029 - 668 commits from branch
master - 8860482c - Merge branch 'master' of gitlab.com:gitlab-com/www-gitlab-com into 1074-installation-page
- 7b7db61c - add terraform to installation methods yml
-
06b51e08...df83a029 - 668 commits from branch
@iamphill merged/pushed master, and added Terraform tile/logo to the list
@psimyn still saying conflicts
added 3 commits
-
7b7db61c...97217a40 - 2 commits from branch
master - e83d8e7c - Merge branch 'master' of gitlab.com:gitlab-com/www-gitlab-com into 1074-installation-page
-
7b7db61c...97217a40 - 2 commits from branch
weird, pushed again @iamphill - seems ok now
enabled an automatic merge when the pipeline for e83d8e7c succeeds
Thanks @psimyn Enabled auto merge
mentioned in commit 06d07fb0
mentioned in issue #1469
