Skip to content

Commit

Permalink
GTNPORTAL-2858 finishing CSS and code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
vrockai committed Mar 29, 2013
1 parent d5bf081 commit 31b0947
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 200 deletions.
9 changes: 2 additions & 7 deletions ...api-portlet/src/main/java/org/gatein/portlet/quickstart/navigation/NavigationPortlet.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,9 @@ protected void doView(RenderRequest request, RenderResponse response) throws Por
PortalRequest portalRequest = PortalRequest.getInstance();

Navigation navigation = PortalRequest.getInstance().getNavigation();


// Diving two levels so the information about children count of children nodes is available
Node rootNode = navigation.getRootNode(Nodes.visitNodes(2));

System.out.println(rootNode.isChildrenLoaded());

navigationRootNodeBean = new NavigationNodeBean(rootNode);

Expand Down Expand Up @@ -94,15 +93,11 @@ protected void doView(RenderRequest request, RenderResponse response) throws Por
@Override
public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException {

PortalRequest portalRequest = PortalRequest.getInstance();

Navigation navigation = PortalRequest.getInstance().getNavigation();

String chosenNodeURI = request.getParameter("uri");

Node chosenNode = navigation.getNode(NodePath.fromString(chosenNodeURI), Nodes.visitNodes(2));

System.out.println(chosenNode.isChildrenLoaded());

request.setAttribute("parentNode", new NavigationNodeBean(chosenNode));

Expand Down
252 changes: 111 additions & 141 deletions navigation-api-portlet/src/main/webapp/css/QuickstartStylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/*
* JBoss, Home of Professional Open Source
* Copyright <Year>, Red Hat, Inc. and/or its affiliates, and individual
* contributors by the @authors tag. See the copyright.txt in the
* contributors by the @authors tag. See the copyright.txt in the
* distribution for a full listing of individual contributors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
Expand All @@ -20,9 +20,7 @@
font-size: 1.1em;
}

/*
Topmenu section
*/
/* Topmenu section */
.gtnQuickstartNavigationPortlet .topmenu {
display: block;
background: #023866;
Expand All @@ -32,17 +30,17 @@
}

/* Common nodes */

.gtnQuickstartNavigationPortlet .topmenu > .menuitem {
display: inline-block;
position: relative;
border-radius: 0.5em;
margin-right: 0.5em;
color: yellow;
color: white;
background: #225886;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a {
.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a,
.gtnQuickstartNavigationPortlet .topmenu > .menuitem > span {
padding: .5em 1em;
display: inline-block;
height: 1.25em;
Expand All @@ -55,31 +53,19 @@
color: inherit;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret {
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret,
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel.active:hover > a.caret {
border-left: 1px solid #124876;
}

/* Basic node */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel):hover,
/* Page with children - page */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a:first-child:hover,
/* Page with children - caret */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret:hover {
background: #0f69a7;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a:first-child:hover {
border-radius: .5em 0 0 .5em;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret:hover {
border-radius: 0 .5em .5em 0;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel.active > a.caret {
border-left: 1px solid #e0e0e0;
}

/* Currently visited Node */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active {
background: green;
color: black;
background: white;
color: #023866;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover {
Expand All @@ -101,176 +87,160 @@
overflow: hidden;
}

/*
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active > a > i {
border-top-color: #0f69a7;
border-top-color: black;
}

*/
/* Right-arrow in top-menu */
/*
.gtnQuickstartNavigationPortlet .submenu i {
position: absolute;
text-indent: -99999px;
width: 0em;
right: .35em;
top: .35em;
border-left: 0.35em solid #023866;
border-right: 0.35em solid transparent;
border-top: 0.35em solid transparent;
border-bottom: 0.35em solid transparent;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover > a {
color: white;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuiteml > a:first-child{
border-radius: .5em;
bottom: 0;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover > a > i {
border-top-color: white;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child{
border-radius: .5em 0 0 .5em;
bottom: 0;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel) i {
margin-left: .5em;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret{
background: #0f69a7;
color: white;
width: 0;
border-radius: 0 .5em .5em 0;
margin-left: -0.25em;
border-left: 1px solid #023866;
/* Basic node */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel):hover,
/* Page with children - page */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover,
/* Page with children - caret */
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret:hover {
background: #0f69a7;
}

.gtnQuickstartNavigationPortlet .submenu .menuitem > a:not(.menucaret):first-child {
display: inline-block;
width: 100%;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover {
border-radius: 0.6em 0 0 0.6em;
}

.gtnQuickstartNavigationPortlet .submenu .menuitem > a:not(.menucaret):first-child:hover {
background: #0f69a7;
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret:hover {
border-radius: 0 0.6em 0.6em 0;
}

.gtnQuickstartNavigationPortlet .submenu a.caret{
/***********************
* Submenu section *
***********************/

.gtnQuickstartNavigationPortlet .submenu {
list-style: none;
padding: 0.3em 0;
position: absolute;
display: inline-block;
color: white;
text-align: center;
width: 1em;
border-radius: 0 .5em .5em 0;
border-left: 1px solid #ccc;
width: 1.5em;
height: 1em;
right: 0;
left: auto;
top: .5em;
min-width: 10em;
position: absolute;
z-index: 5;
color: black;
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.gtnQuickstartNavigationPortlet .submenu a.menuhandler > i {
top: auto;
.gtnQuickstartNavigationPortlet .submenu > .menuitem,
.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:first-child
{
position: relative;
display: block;
}

.gtnQuickstartNavigationPortlet .submenu a.caret i{
top: .15em;
.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a:first-child {
display: block;
margin-right: 2em;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover {
background: yellow;
border-radius: .5em 0 0 .5em;
.gtnQuickstartNavigationPortlet .submenu > .menuitem i {
position: absolute;
text-indent: -99999px;
width: 0em;
right: .35em;
top: .75em;
border-left: 0.35em solid #023866;
border-right: 0.35em solid transparent;
border-top: 0.35em solid transparent;
border-bottom: 0.35em solid transparent;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret:hover {
background: #1f79b7;
.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret {
position: absolute;
display: block;
width:1em;
right:0;
top:0;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active {
background: #fff;
.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret > i {
position: relative;
left: .35em;
top: 0;
}
.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active > a {
color: #f57a00;
.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:hover > i,
.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret:hover > i {
border-left-color: white;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem:hover {
background: #0f69a7;
.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:hover,
.gtnQuickstartNavigationPortlet .submenu > .menuitem.active > a:first-child
{
background: #0F69A7;
color: white;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret:hover > i {
border-top-color: white;
.gtnQuickstartNavigationPortlet .submenu > .menuitem > a,
.gtnQuickstartNavigationPortlet .submenu > .menuitem > span {
display: block;
padding: 0.5em;
}
*/
/*
* Submenu section
*/

.gtnQuickstartNavigationPortlet .submenu {
list-style: none;
padding: 0.5em;
position: absolute;
background-color: white;
border-radius: 0.4em;
border: 0.0625em solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0.3em 0.62em rgba(0, 0, 0, 0.4);
left: auto;
top: .5em;
min-width: 10em;
position: absolute;
z-index: 1000;
.gtnQuickstartNavigationPortlet .submenu > .menuitem > a {
position: relative;
}

.gtnQuickstartNavigationPortlet .submenu > .menuitem > a.caret:hover {
background: #0F69A7;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu {
left: 0;
top: 2.25em;
top: 2.35em;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:before,
.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after {
.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after {
content: "";
display: inline-block;
position: absolute;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:before {
border-bottom: 0.4375em solid rgba(0, 0, 0, 0.2);
border-left: 0.4375em solid transparent;
border-right: 0.4375em solid transparent;
left: 0.3em;
top: -0.4375em;
border-bottom: 0.5375em solid rgba(0, 0, 0, 0.2);
border-left: 0.5375em solid transparent;
border-right: 0.5375em solid transparent;
left: 0.5em;
top: -0.5375em;
}

.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after {
border-bottom: 0.375em solid #FFF;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
left: 0.3625em;
top: -0.375em;
border-bottom: 0.475em solid #FFF;
border-left: 0.475em solid transparent;
border-right: 0.475em solid transparent;
left: 0.5625em;
top: -0.4em;
}

.gtnQuickstartNavigationPortlet .submenu .submenu {
top: 0;
top: -.4em;
left: 100%;
position: absolute;
}

.gtnQuickstartNavigationPortlet .submenu i {
display: inline-block;

position: relative;
text-indent: -99999px;

width: 0em;
height: 0em;

right: 0;
top: 0;

border-left: 0.35em solid transparent;
border-right: 0.35em solid transparent;
border-top: 0.35em solid white;
border-bottom: 0.35em solid transparent;
}
.gtnQuickstartNavigationPortlet .submenu .submenu.inverse {
top: -.4em;
left: auto;
right: 100%;
position: absolute;
}

0 comments on commit 31b0947

Please sign in to comment.