Design & implement styling on the new /case-studies page

Lisa, can you grant my user account (larowlan) access so I can start on these changes.

Have
a) Added grid layout using css (not tables) - note css is in the view header in a style tag which is yuck, but I don't have access to the theme - feel free to add this there instead

.view-drupalorg-casestudies .views-row {
  float: left;
  display: inline;
  width: 220px;
  margin: 0 10px 20px;
}
.view-drupalorg-casestudies .views-row-1,
.view-drupalorg-casestudies .views-row-4,
.view-drupalorg-casestudies .views-row-7,
.view-drupalorg-casestudies .views-row-10 {
  margin-left: 0;
  clear: left;
}
.view-drupalorg-casestudies .views-row-3,
.view-drupalorg-casestudies .views-row-6,
.view-drupalorg-casestudies .views-row-9,
.view-drupalorg-casestudies .views-row-12 {
  margin-right: 0;
}

b) Have increased number of items to 12
c) Added sector filter (exposed)
d) Added clear-block class to view to reflect all floated children.

Lee

I committed a version of this. I skipped (a) and (d) since we want any changes like that to go into the theme for all views like this to use. I included a new display for #1498606: Convert home page to use new case studies in the feature export.

To work on the theme directly, http://drupal.org/node/1018084.

Please see the first version of the design:

• URL : http://tekmedia.tekritisoftware.com/Drupal-Case-Studies
• Username : drupal
• Password : DRUPAL@123

Let me know your views.

We did have a discussion on a more impactful design but got a feeling that it might be too disruptive to the site so stopped work on it. Let me know if you feel that you want us to give it a shot.

Nice! Great job
My 2c: not sure on the drop shadows in titles - don't think they're used anywhere else on d.o

Yeah gradients aren't allowed.
In fact there is a style guide for drupal.org: http://drupal.org/node/1050556

This is a great start Ashish!

We do want this page to have impactful design, but let's bring it more inline with overall Bluecheese style.

As noted above, this means gradients won't work, as well as new backgrounds on page body and footer and text-shadows on titles.

You indeed might want to take a look at Visual language guide developed during drupal.org redesign. And also prototypes of various pages, for example marketplace.

As to functionality, social media and email links probably aren't needed on this page, there is no social media integration on case studies and I'm not sure what they'll be linking to.

There is no "like" functionality also, so let's leave only "X comments".

As for the gallery on top - I am afraid it will add unwanted complexity as we'll need a process of picking/updating which case studies to show there. Maybe we could go with just 1 big case study image there?

Overall I like where this is going, if we just bring it closer to Bluecheese style it'll look really good.

Thanks Guys,

I'll get my team to do a review of the designs based on the guidelines and the inputs above.

@Lisa, we don't mind participating in the implementation too. @drumm, kindly help us out with the setup (pls mail me directly via the contact so we can take that discussion offline).

Ashish, for the dev site please follow steps listed on this page: Develop on our server. drumm will setup a site once you complete steps 1 and 2.

Ashish, any news on the designs?

Hi,

This is Mahesh from Tekriti Software. Ashish has asked me to take this forward. We are making changes to the designs based on the feedback provided in this thread and recommendations from the style guide. I will upload the revised design by tomorrow for sure.

Please find attached the revised designs. Our idea of the gallery is to show the latest case studies that are uploaded.

The inner page can be used when someone wants to see the case studies from any particular sector/type in the

@drumm, I will let you know as soon as we complete step 1 and step 2 so that you can setup the site.

Re-uploading images from #16 without .zip so people could easier see them and give feedback.

Mahesh, thanks for your work on this! We already got development site (http://cases-drupal.redesign.devdrupal.org/) so you only need to request SSH access to work on it. However first let's get some feedback on latest mockups and probably do few more iterations, before we start implementing it.

lisarex and I discussed case studies page today and I am working on revised mockup, will be posting it tomorrow.

Mockup attached.
I've added separation for 2 types of case studies - Featured and Community, "add case study" link and link to guidelines. After discussion with lisarex we concluded that current taxonomy for case studies is not really useful. List of sectors is way too long, we decided to group them into Categories and thus provide 2 level navigation. "Type of site" vocabulary will probably be removed or replaced with something else, so I've added "Type" navigation to the sidebar as a placeholder.

Borders around images do not really fit with our style as well as overlays (I did try couple of variants with overlays of various colours), so I removed them.

Slideshow on top is only for the main page of Featured case studies. When clicking on category, I think list of sectors inside category could take its place (or else we can show them at sidebar).

I'm also thinking whether we should show site url next to names of case studies, for easier access if someone just wants to see the site.

This should be updated to include year written, as well as the ability to view outdated ("classic", "hall of fame") case studies. See: http://drupal.org/node/1588892

@tvn, just wanted to let you know that we received the SSH access for the development site : http://cases-drupal.redesign.devdrupal.org/ and are ready to start the development as soon as the designs are finalized

Mahesh, great! I am going to discuss specifics of implementation with drumm today and post detailed write-up later this evening, just so we do it right from the start with no need to re-do things before deployment on live site. So you can start working on this tomorrow! Looking forward to implementing new design with your help!

added instructions

adding implementation steps

adding steps

.

.

.

I updated issue summary with the list of things we need to do to implement the mockup in #20.

I already created field status and 2 views for featured and community case studies. I will do items 2-4, 6.

Mahesh, would be great if you could take item 5 and implement slideshow.
If you have any questions feel free to find me or drumm at IRC (#drupal-infrastructure channel) or post here.

Then we will see what to do with sidebar navigation.

.

edits

adding completed items

Thanks tvn.

I have asked our developer to work on create slideshow(item 5). He started the work. I will keep you all posted

1 more item

more items

I did all steps but 5 (slideshow). I think we can deploy this without slideshow for now and add it later when it's ready.

Case study content type now has status field for featured/community case studies and drupalorg_casestudies view updated.
For images on listings I used new imagecache preset to make them all same width.
Sidebar navigation is also a view - block display in drupalorg_casestudies view. I decided to start from simple navigation first and implement 2-step one later, when we'll get more case studies. So taxonomy vocabulary reorganization is not needed for now.

Patches

If there are section tabs, we always want one selected. For example, http://cases-drupal.redesign.devdrupal.org/popular-science, should have featured selected.

I like that nearly all the theme changes are adding more uses of existing styles. I'm not 100% sure about the grey block divider line since it isn't used in that way anywhere else. We rely on whitespace for dividing all other blocks.

I think the "Category" header should be more action-oriented, maybe "Filter by category" or "Browse by category"

On the home page, drush rebuild-stats will regenerate the data used on the home page, so that can be debugged. It just says "Array" right now.

Agree on selected tabs for individual case studies pages, I tried to implement this today but can't get it to work, will need your help here.

I changed "Category" to "Browse by category". Home page seems to work fine, I changed number of items per page to 10 for that view to show more different screenshots.

Grey divider is needed there for better visual separation since bottom block has no grey background as they usually do. We also use such dividers on front page. They were present on MBD prototype as well so it's not some big innovation.

Going to update issue summary with deployment instructions now.

@bmaheshs I moved slideshow task to separate issue #1600692: Implement slideshow on /case-studies page, please when you will post your updates do it there.

updates

deployment instructions

Recreated feature attached

more updates

presets in feature now

more deployment instructions

I did a bit of cleanup:

• Included the imagecache presets in the feature
• Some spacing in the CSS
• Added breadcrumbs to the nodes to get navigation working, http://drupalcode.org/project/drupalorg.git/commit/56b039b

and deployed this.