CSS our menu
Closed, ResolvedPublic

Description

How can we turn this:

<div style="border:1px solid #cfcfcf; background-color: rgba(200, 200, 200, 0.1); margin-bottom:25px; padding:0px; margin-top:0px; height:40px; text-align:center;">  <a style="display:inline-block; height:100%;)" href="/views/news?field_projects_target_id=167"><i class="icon-arrow-left"></i>&nbsp;</a> <a class="btn" href="/views/news?field_projects_target_id=167"><i class="icon-star-empty"></i> Related Articles</a> <a class="btn btn-warning" href="/axiom-alpha-overview"><i class="icon-info-sign"></i> Overview</a> <a class="btn" href="/axiom-alpha-tech-specs"><i class="icon-list-alt"></i> Tech Specs</a> <a class="btn " href="/axiom-alpha-imagesensor"><i class="icon-camera"></i> Image Sensor</a> <a class="btn" href="/videos?field_projects_target_id=167"><i class="icon-film"></i> Videos</a> <a class="btn" href="/axiom-alpha-tech-specs"><i class="icon-arrow-right"></i>&nbsp;</a> </div>

into this:
http://getzi.at/img/Menu_Vorschlag.jpg

on top of this page: https://apertus.org/axiom-alpha-overview

sebastian updated the task description. (Show Details)
sebastian raised the priority of this task from to Needs Triage.
sebastian assigned this task to nils.
sebastian added a project: Restricted Project.
sebastian moved this task to Restricted Project Column on the Restricted Project board.
sebastian added subscribers: sebastian, getzi.
getzi added a comment.Jun 17 2015, 3:29 PM

Also possible without boarders, might look better. Open to arrow suggestions :)

nils added a comment.EditedJun 17 2015, 6:24 PM

Both are not responsive

With Borders:
http://codepen.io/anotherrainbowshittingunicorn/pen/Mwvder

Without Borders:
http://codepen.io/anotherrainbowshittingunicorn/pen/qdXGav/

Icons
I like the chevron-left/right from bootstrap.

I implemented it here: https://apertus.org/axiom-alpha

Looks nice already, is there a simple way to make it responsive?

Should we adopt it for the other pages as well?

getzi added a comment.Jun 18 2015, 9:05 AM

Yeah, it needs to be scalable with the page. On mobile it just breaks.

But it needs to be smalller/more subtle anyways. The gradient makes it too dominant. The colors within the menu are nowhere represented again. It looks like it doesn't fit to the rest...

please suggest color changes or CSS code changes.

As reference is our CI color swatch selection here: https://apertus.org/sites/default/files/images/apertus%C2%B0CI.jpg

getzi added a comment.Jun 19 2015, 9:10 AM

like that? Nils, what do you think?

fine for me. I just removed the "submitted by ... on date...." line from the overview page.

nils added a comment.Jun 19 2015, 10:02 AM

Thats much better. I can build it later. We're using Bootstrap, aren't we?

yes bootstrap 2.3.2 though (outdated version).

Several options to do it. If it's the same accross all pages, I'd just use a custom block with the html in it.

Second option would be to use the drupal menu system, but it's probably overkill and hard to theme.

its the same across not all but a few pages but it should highlight the "current" page so it needs some logic to be aware of this...

Nils, any news?

I added Beta and Gamma pages to the website as well now and this menu would be much needed.

sebastian triaged this task as High priority.Jun 27 2015, 10:15 PM

https://apertus.org/axiom-alpha CSS updated.

Should the arrows also turn orange on hover (is it possible)?

Max, can you take care of implementing that menu on top of all Alpha, Beta, Gamma pages?

getzi added a comment.Jun 29 2015, 4:21 PM

Will do tomorrow!

getzi added a comment.EditedJun 30 2015, 8:08 AM

How can we do it with the "Videos" and "Latest News" pages within the AXIOM Alpha pages, is there a way to throw in the menu there as well?

Furthermore the Menu in the Ecosystem doesnt make sense, since both links in the AXIOM Beta AND AXIOM Gamma point to the same page. If we make a navigation there, there should be no dead ends...

And now that there are more items in the breadcrumbs nav bar, it starts to fall apart. This needs to be fixed in the global CSS again.

I think the best way would be to clone the "view" that generates the list of articles.

Then add a "header" that contains the menu and make the filters preconfigured to only show alpha related articles (instead of the dropdown menu in the beginning).

I can show you via screenshare/chat tomorrow where these settings are.

getzi closed this task as Resolved.Jul 27 2015, 1:47 PM

I guess with the whole redesign this task is obsolete now.