You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sling.apache.org by dk...@apache.org on 2020/10/20 21:00:30 UTC
[sling-org-apache-sling-app-cms] 01/06: Aligning the overall UI to
the new login screen
This is an automated email from the ASF dual-hosted git repository.
dklco pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
commit 7112c8e9734acc023dab7cf0c4617f31b3556f26
Author: Dan Klco <dk...@apache.org>
AuthorDate: Mon Oct 19 08:59:06 2020 -0400
Aligning the overall UI to the new login screen
---
ui/src/main/frontend/scss/_overrides.scss | 7 ++--
ui/src/main/frontend/scss/cms.scss | 37 ++++++++++++++++++++--
.../components/cms/startcontent/startcontent.jsp | 2 +-
.../components/cms/staticnav/staticnav.jsp | 6 ++--
.../libs/sling-cms/components/pages/base/body.jsp | 24 +++++++-------
.../libs/sling-cms/components/pages/base/nav.jsp | 2 +-
.../libs/sling-cms/components/pages/error/nav.jsp | 2 +-
7 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/ui/src/main/frontend/scss/_overrides.scss b/ui/src/main/frontend/scss/_overrides.scss
index 21f84ba..3f5a868 100644
--- a/ui/src/main/frontend/scss/_overrides.scss
+++ b/ui/src/main/frontend/scss/_overrides.scss
@@ -14,9 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-
-
+
@charset "utf-8";
// Brand Colors
@@ -39,4 +37,5 @@ $danger: $crimson;
$navbar-height: 5rem;
$navbar-item-img-max-height: 4rem;
$modal-z: 2000;
-$selected: $violet;
\ No newline at end of file
+$selected: $violet;
+$menu-item-hover-background-color: hsl(0, 0%, 86%);
\ No newline at end of file
diff --git a/ui/src/main/frontend/scss/cms.scss b/ui/src/main/frontend/scss/cms.scss
index 75dc2ed..97a24fd 100644
--- a/ui/src/main/frontend/scss/cms.scss
+++ b/ui/src/main/frontend/scss/cms.scss
@@ -31,9 +31,14 @@ body.cms {
@media screen and (min-width: $tablet), print {
background: url("../img/gradient.jpg") no-repeat;
background-attachment: fixed;
+ display: flex;
}
- @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
- padding-left: 2em;
+}
+
+.gradient {
+ @media screen and (min-width: $tablet), print {
+ height: 100vh;
+ width: 16px;
}
}
@@ -151,6 +156,12 @@ small.card-footer-item {
cursor: not-allowed;
}
+.is-full-height {
+ @media screen and (min-width: $tablet), print {
+ height: calc(100vh - 65px);
+ }
+}
+
.is-linked {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0);
@@ -179,6 +190,18 @@ small.card-footer-item {
border-top-color: transparent;
}
+.Main-Content {
+ padding: 12px 0;
+}
+
+.main-section {
+ flex-grow: 1;
+}
+
+.main-section .columns {
+ padding: 0 16px;
+}
+
.menu {
overflow: auto;
}
@@ -196,6 +219,10 @@ small.card-footer-item {
margin: 0;
}
+.navbar {
+ border-bottom: 0.5px solid hsl(0, 0%, 86%);
+}
+
nav .level-left,
nav .level-right {
flex-shrink: inherit;
@@ -266,6 +293,12 @@ nav .level-right {
padding: 0.5em;
}
+.sidebar {
+ @media screen and (min-width: $tablet) {
+ border-right: 0.5px solid hsl(0, 0%, 86%);
+ }
+}
+
.table__wrapper {
overflow: auto;
}
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/startcontent/startcontent.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/startcontent/startcontent.jsp
index f3b5309..2c4f30f 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/startcontent/startcontent.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/startcontent/startcontent.jsp
@@ -21,7 +21,7 @@
<sling:adaptTo adaptable="${slingRequest}" adaptTo="org.apache.sling.cms.core.models.StartContent" var="startContent" />
<div class="columns">
<div class="column">
- <nav class="panel" aria-label="<fmt:message key="slingcms.recentcontent" />">
+ <nav class="panel has-background-white" aria-label="<fmt:message key="slingcms.recentcontent" />">
<p class="panel-heading">
<fmt:message key="slingcms.recentcontent" />
</p>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/staticnav/staticnav.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/staticnav/staticnav.jsp
index e27bc69..98fe078 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/staticnav/staticnav.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/staticnav/staticnav.jsp
@@ -37,11 +37,11 @@
<c:forEach var="item" items="${sling:listChildren(sling:getRelativeResource(resource,'links'))}">
<c:set var="selected" value="" />
<c:if test="${fn:startsWith(slingRequest.requestURI,item.valueMap.link)}">
- <c:set var="selected" value="is-selected" />
+ <c:set var="selected" value="is-active" />
</c:if>
<c:forEach var="alternative" items="${item.valueMap.alternatives}">
<c:if test="${fn:startsWith(slingRequest.requestURI,alternative)}">
- <c:set var="selected" value="is-selected" />
+ <c:set var="selected" value="is-active" />
</c:if>
</c:forEach>
<c:set var="enabled" value="${currentUser.administrator || empty item.valueMap.enabledGroups}" />
@@ -56,7 +56,7 @@
</c:forEach>
</c:if>
<c:if test="${enabled}">
- <li class="${selected}"><a href="${item.valueMap.link}">${item.valueMap.text}</a></li>
+ <li><a href="${item.valueMap.link}" class="${selected}">${item.valueMap.text}</a></li>
</c:if>
</c:forEach>
</ul>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/body.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/body.jsp
index fe73e1a..90cf309 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/body.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/body.jsp
@@ -19,19 +19,19 @@
<%@include file="/libs/sling-cms/global.jsp"%>
<body class="cms">
<div class="gradient"></div>
- <div class="container is-fluid">
- <sling:call script="nav.jsp" />
- <div class="columns">
- <div class="column is-2">
- <sling:include
- path="/mnt/overlay/sling-cms/content/start/jcr:content/nav"
- resourceType="sling-cms/components/general/container" />
+ <div class="main-section has-background-light">
+ <sling:call script="nav.jsp" />
+ <div class="columns">
+ <div class="column is-2 sidebar is-full-height">
+ <sling:include
+ path="/mnt/overlay/sling-cms/content/start/jcr:content/nav"
+ resourceType="sling-cms/components/general/container" />
+ </div>
+ <div class="column has-background-white-bis is-full-height">
+ <div class="Main-Content"> <sling:call
+ script="content.jsp" /> </div>
+ </div>
</div>
- <div class="column">
- <div class="Main-Content"> <sling:call
- script="content.jsp" /> </div>
- </div>
- </div>
</div>
<sling:call script="scripts.jsp" />
</body>
\ No newline at end of file
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/nav.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/nav.jsp
index 22aaf5c..e0773a3 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/nav.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/base/nav.jsp
@@ -17,7 +17,7 @@
* under the License.
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
-<nav class="navbar" role="navigation" aria-label="main mavigation">
+<nav class="navbar has-background-light" role="navigation" aria-label="main mavigation">
<div class="navbar-brand">
<a class="navbar-item" href="http://sling.apache.org">
<img src="${branding.logo}" width="100" alt="${branding.appName}"/>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/error/nav.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/error/nav.jsp
index 6ae82e2..269643d 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/error/nav.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/error/nav.jsp
@@ -17,7 +17,7 @@
* under the License.
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
-<nav class="navbar" role="navigation" aria-label="main navigation">
+<nav class="navbar has-background-light" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="http://sling.apache.org" >
<img src="${branding.logo}" width="100" alt="${branding.appName}"/>